feat: replace our home-grown gantt implementation with ganttastic #2180

Merged
konrad merged 78 commits from feature/ganttastic into main 1 month ago
Owner

This PR replaces our home-grown gantt chart implementation with vue-ganttastic which is a lot more robust and seems to work better overall.

Resolves #2169
Resolves #2115
Resolves https://github.com/go-vikunja/frontend/issues/71
Hopefully Resolves #1487

Related forum discussions:

https://community.vikunja.io/t/gantt-display-wrong/316

https://community.vikunja.io/t/gantt-display-wrong-date/525

This PR replaces our home-grown gantt chart implementation with [vue-ganttastic](https://github.com/InfectoOne/vue-ganttastic) which is a lot more robust and seems to work better overall. Resolves #2169 Resolves #2115 Resolves https://github.com/go-vikunja/frontend/issues/71 Hopefully Resolves #1487 Related forum discussions: https://community.vikunja.io/t/gantt-display-wrong/316 https://community.vikunja.io/t/gantt-display-wrong-date/525
konrad added 1 commit 4 months ago
konrad requested review from dpschen 4 months ago
dpschen was assigned by konrad 4 months ago
Collaborator

Hi konrad!

Thank you for creating a PR!

I've deployed the changes of this PR on a preview environment under this URL: https://2180-feature-ganttastic--vikunja-frontend-preview.netlify.app

You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.

Have a nice day!

Beep boop, I'm a bot.

Hi konrad! Thank you for creating a PR! I've deployed the changes of this PR on a preview environment under this URL: https://2180-feature-ganttastic--vikunja-frontend-preview.netlify.app You can use this url to view the changes live and test them out. You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/. Have a nice day! > Beep boop, I'm a bot.

Thank you very much, and this preview bot is fantastic, too!

Nitpick: "Create a new task" at the bottom only works when pressing Enter, not when pressing the button.

Thank you very much, and this preview bot is fantastic, too! Nitpick: "Create a new task" at the bottom only works when pressing Enter, not when pressing the button.

general usability thing:
The scrollbar should be always visible, e.g. if you go to https://2180-feature-ganttastic--vikunja-frontend-preview.netlify.app/lists/16/gantt and show undated tasks, you need to fiddle a lot to do long-term schedules on smaller screen sizes.
Also, limiting the calendar to one month is very unfit for typical project planning. Infinite zooming and panning, including sidescrolling if a task is dragged outwards would be fantastic.

general usability thing: The scrollbar should be always visible, e.g. if you go to https://2180-feature-ganttastic--vikunja-frontend-preview.netlify.app/lists/16/gantt and show undated tasks, you need to fiddle a lot to do long-term schedules on smaller screen sizes. Also, limiting the calendar to one month is very unfit for typical project planning. Infinite zooming and panning, including sidescrolling if a task is dragged outwards would be fantastic.
Poster
Owner

Also, limiting the calendar to one month is very unfit for typical project planning. Infinite zooming and panning, including sidescrolling if a task is dragged outwards would be fantastic.

I've increased the default range to more than two months now.

Did you try changing the date range?

And side-scrolling - yes, that's definitely something nice to have. It is a bit more work though so I'd like to do that in another PR.

> Also, limiting the calendar to one month is very unfit for typical project planning. Infinite zooming and panning, including sidescrolling if a task is dragged outwards would be fantastic. I've increased the default range to more than two months now. Did you try changing the date range? And side-scrolling - yes, that's definitely something nice to have. It is a bit more work though so I'd like to do that in another PR.

When I'm trying to set "Size → Month", prod hangs, dev infinitely floods the browser console with this error:

RangeError: Invalid time value
    format index.js:373
    weekdayFromTimeLabel gantt-chart.vue:243
    timeunit gantt-chart.vue:21
    timeunit library.mjs:642
    setup library.mjs:312
    setup library.mjs:299
    0 ListGantt.vue:11

Screenshot from the debugger:

When I'm trying to set "Size → Month", prod hangs, dev infinitely floods the browser console with this error: ``` RangeError: Invalid time value format index.js:373 weekdayFromTimeLabel gantt-chart.vue:243 timeunit gantt-chart.vue:21 timeunit library.mjs:642 setup library.mjs:312 setup library.mjs:299 0 ListGantt.vue:11 ``` Screenshot from the debugger:
dpschen reviewed 4 months ago
<!--
Please fill out this issue template to report a bug.
Collaborator

remove from pull request

remove from pull request
Poster
Owner

Done.

Done.
konrad marked this conversation as resolved
<template>
<div class="gantt-container loading-container" :class="{'is-loading': taskService.loading || taskCollectionService.loading}">
Collaborator

Use loading component. This way it's easier for us to refactor the is-loading styles from bulma later.

Use loading component. This way it's easier for us to refactor the `is-loading` styles from bulma later.
Poster
Owner

Done.

Done.
konrad marked this conversation as resolved
:grid="true"
@dragend-bar="updateTask"
@dblclick-bar="openTask"
font="'Open Sans', sans-serif"
Collaborator

Is it possible to use here simply inherit as value?

Is it possible to use here simply `inherit` as value?
Poster
Owner

Seems to work, yes.

Seems to work, yes.
Collaborator

Not necessary with lates release. Removed.

Not necessary with lates release. Removed.
konrad marked this conversation as resolved
import {format, parse} from 'date-fns'
import {colorIsDark} from '@/helpers/color/colorIsDark'
import {useStore} from 'vuex'
import Rights from '../../models/constants/rights.json'
Collaborator

Picky: Use @/models...

Picky: Use `@/models...`
Poster
Owner

Done.

Done.
konrad marked this conversation as resolved
import TaskModel from '@/models/task'
import {useRouter} from 'vue-router'
const dateFormat = 'yyyy-LL-dd HH:mm'
Collaborator

picky: use DATE_FORMAT to make clear it's a 'config const'

picky: use `DATE_FORMAT` to make clear it's a 'config const'
Collaborator

But also: shouldn't this depend on the user setting / language?

But also: shouldn't this depend on the user setting / language?
Poster
Owner

shouldn't this depend on the user setting / language?

It's only used to pass the date in the correct format to the gantt chart libaray so it will always be the same. Not sure why they only take strings as input instead of Date objects but that's how it is.

> shouldn't this depend on the user setting / language? It's only used to pass the date in the correct format to the gantt chart libaray so it will always be the same. Not sure why they only take strings as input instead of `Date` objects but that's how it is.
konrad marked this conversation as resolved
},
showTasksWithoutDates: {
type: Boolean,
required: false,
Collaborator

picky: If you use a default value there is no need to define required

picky: If you use a default value there is no need to define `required`
Poster
Owner

Done.

Done.
konrad marked this conversation as resolved
const canWrite = computed(() => store.state.currentList.maxRight > Rights.READ)
const tasks = ref([])
Collaborator

define types

define types
Poster
Owner

Done.

Done.
konrad marked this conversation as resolved
}
async function loadTasks() {
tasks.value = new Map()
Collaborator

define types

define types
Poster
Owner

Done.

Done.
konrad marked this conversation as resolved
mapGanttBars()
}
loadTasks()
Collaborator

This and the three lines below should be combined to one watcher that trigger immediately.

loadTasks should accept these three as params, so that it's clear that these are needed to reload.

Something like:

watchEffect(() => loadTasks({
	dateTo: props.dateTo,
    dateFrom: props.dateFrom,
    showTasksWithoutDates: props.showTasksWithoutDates,
})
This and the three lines below should be combined to one watcher that trigger immediately. `loadTasks` should accept these three as params, so that it's clear that these are needed to reload. Something like: ``` watchEffect(() => loadTasks({ dateTo: props.dateTo, dateFrom: props.dateFrom, showTasksWithoutDates: props.showTasksWithoutDates, }) ```
Poster
Owner

Done.

Done.
konrad marked this conversation as resolved
task.startDate = e.bar.startDate
task.endDate = e.bar.endDate
const r = await taskService.value.update(task)
for (const i in ganttBars.value) {
Collaborator
Avoid `for ... in`, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#array_iteration_and_for...in
Poster
Owner

Done.

Done.
konrad marked this conversation as resolved
}
const newTaskFieldActive = ref(false)
const newTaskTitleField = ref()
Collaborator
Add type: https://vuejs.org/guide/typescript/composition-api.html#typing-template-refs
Poster
Owner

Done.

Done.
konrad marked this conversation as resolved
src/main.ts Outdated
import('./sentry').then(sentry => sentry.default(app, router))
}
import ganttastic from '@infectoone/vue-ganttastic'
Collaborator

Don't load lib global. We only want it in the gantt view.
We could copy these lines instead 474a4fdf40/src/index.ts (L3-L14) and simply import the two components.

Don't load lib global. We only want it in the gantt view. We could copy these lines instead https://github.com/InfectoOne/vue-ganttastic/blob/474a4fdf4040fd07f7d3b800b129742445ab8721/src/index.ts#L3-L14 and simply import the two components.
Poster
Owner

I tried that but the published npm package only provides a bundle. No individual components..

I tried that but the published npm package only provides a bundle. No individual components..
Collaborator

solved

solved
dpschen marked this conversation as resolved
const showTasksWithoutDates = ref(false)
const precision = ref('day')
const now = ref(new Date())
Collaborator

Should this update?

Should this update?
Poster
Owner

No, doesn't even need to be ref.

No, doesn't even need to be ref.
konrad marked this conversation as resolved
const defaultTo = format(new Date((new Date()).setDate(now.value.getDate() + 55)), 'yyyy-LL-dd')
const range = ref(`${defaultFrom} to ${defaultTo}`)
// TODO: only update once both dates are available (maybe use a watcher + refs instead?)
Collaborator

Can you explain in a different way?

Can you explain in a different way?
Poster
Owner

The problem is the gantt chart already updates when only one date (the start or end date) is selected. Ideally, they would only update the prop when both of these dates are available to avoid these partial updates.

The problem is the gantt chart already updates when only one date (the start or end date) is selected. Ideally, they would only update the prop when both of these dates are available to avoid these partial updates.
Collaborator

Maybe I'm still not getting this correctly, but can't we just update the value when both (start and end) are set?

Maybe I'm still not getting this correctly, but can't we just update the value when both (start and end) are set?
Poster
Owner

Currently the from and to dates get passed as individual props. That means if one changes, it changes directly in the chart.

I think the way to go here would be to pass a single object with both dates instead?

Currently the from and to dates get passed as individual props. That means if one changes, it changes directly in the chart. I think the way to go here would be to pass a single object with both dates instead?
Collaborator

That seems like the right approach

That seems like the right approach
Collaborator

Will check this out again. Shouldn't be too hard.

Will check this out again. Shouldn't be too hard.
yarn.lock Outdated
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.3.tgz#4754eb694a624057b9ad2224b67b15d552589258"
integrity sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==
dayjs@^1.10.5:
Collaborator

We now have two date libs

We now have two date libs
Poster
Owner

Yes. Since dayjs is a small one, I think we should be fine to leave it in for now. We should make sure only one is used in the future though.

Yes. Since dayjs is a small one, I think we should be fine to leave it in for now. We should make sure only one is used in the future though.
Collaborator

Too bad vue-ganttastic picked that library :D

Too bad `vue-ganttastic` picked that library :D
konrad marked this conversation as resolved
Poster
Owner

Thanks for all the comments.

I'll be on vacation until 30.07., will take a proper look at all of them after that.

Thanks for all the comments. I'll be on vacation until 30.07., will take a proper look at all of them after that.

Did you try changing the date range?

Nope, missed that, woops - thank you :)

And side-scrolling - yes, that's definitely something nice to have. It is a bit more work though so I'd like to do that in another PR.

Totally agree. Just to keep it in mind, in case the current implementation proves unfit for that in some way.
See #2197

More nitpicks:
When opening the view, it always scrolls two weeks to the left, even if all tasks are further ahead. Maybe encapsulate them with some buffer if there are set tasks.
image
https://2180-feature-ganttastic--vikunja-frontend-preview.netlify.app/lists/6/gantt

> Did you try changing the date range? Nope, missed that, woops - thank you :) > And side-scrolling - yes, that's definitely something nice to have. It is a bit more work though so I'd like to do that in another PR. Totally agree. Just to keep it in mind, in case the current implementation proves unfit for that in some way. See https://kolaente.dev/vikunja/frontend/issues/2197 More nitpicks: When opening the view, it always scrolls two weeks to the left, even if all tasks are further ahead. Maybe encapsulate them with some buffer if there are set tasks. ![image](/attachments/a4b0e193-f980-434c-ab40-ea8e48ae981b) https://2180-feature-ganttastic--vikunja-frontend-preview.netlify.app/lists/6/gantt

Hope you had a nice vacation :)
Can you look into getting the basic version of this merged soon? We'd love to use it for our project planning! If not, a rough ETA would be helpful, too.
I will also contact you again soon per mail about us contributing back, but currently there is too much to do here...

Hope you had a nice vacation :) Can you look into getting the basic version of this merged soon? We'd love to use it for our project planning! If not, a rough ETA would be helpful, too. I will also contact you again soon per mail about us contributing back, but currently there is too much to do here...
konrad force-pushed feature/ganttastic from 5442306b7c to c8693bc07a 4 months ago
Poster
Owner

When I'm trying to set "Size → Month", prod hangs, dev infinitely floods the browser console with this error:

I looked into that and as it seems now, setting the size to "Month" does not make any sense. The size is the same, it just won't show the dates anymore. Let's remove the size dropdown for now and handle this in a follow-up PR.

> When I'm trying to set "Size → Month", prod hangs, dev infinitely floods the browser console with this error: I looked into that and as it seems now, setting the size to "Month" does not make any sense. The size is the same, it just won't show the dates anymore. Let's remove the size dropdown for now and handle this in a follow-up PR.
Poster
Owner

When opening the view, it always scrolls two weeks to the left, even if all tasks are further ahead. Maybe encapsulate them with some buffer if there are set tasks.

@xeruf You mean checking where the first task begins and then add a small buffer to it instead of buffering two weeks every time?

> When opening the view, it always scrolls two weeks to the left, even if all tasks are further ahead. Maybe encapsulate them with some buffer if there are set tasks. @xeruf You mean checking where the first task begins and then add a small buffer to it instead of buffering two weeks every time?

Yes that's correct, thank you :)

Yes that's correct, thank you :)
dpschen reviewed 4 months ago
const canWrite = computed(() => store.state.currentList.maxRight > Rights.READ)
const tasks = ref<Map<number, TaskModel>>([])
Collaborator

User TaskModel['id']

User `TaskModel['id']`
Poster
Owner

Done (I think you did that one?)

Done (I think you did that one?)
dpschen marked this conversation as resolved
dpschen reviewed 4 months ago
.g-timeunit .timeunit-wrapper {
padding: 0.5rem 0;
font-size: 1rem !important;
Collaborator

why do we need so many overwriting important styles here?

why do we need so many overwriting important styles here?
Poster
Owner

IIRC they're using inline styles for these :/

IIRC they're using inline styles for these :/
dpschen marked this conversation as resolved
dpschen force-pushed feature/ganttastic from 00ff7345b7 to 774f857fe6 4 months ago
konrad force-pushed feature/ganttastic from 774f857fe6 to 7ab4ff2d9e 4 months ago
Collaborator

I created a pull request for vue-gantastic to avert some of the issues.

See https://github.com/InfectoOne/vue-ganttastic/pull/53

I created a pull request for vue-gantastic to avert some of the issues. See https://github.com/InfectoOne/vue-ganttastic/pull/53
Poster
Owner

Very nice!

Very nice!

Is this gonna be live soon? :)

Is this gonna be live soon? :)
Poster
Owner

@xeruf well soon is relative - I'd say it depends on how fast we can get the pr in ganttastic merged and they release a new version which well then need to integrate back into this pr.

@xeruf well soon is relative - I'd say it depends on how fast we can get the pr in ganttastic merged and they release a new version which well then need to integrate back into this pr.
Collaborator

@konrad do you want to rebase this on main?

@konrad do you want to rebase this on main?
konrad added 1 commit 3 months ago
bd06f725be
Merge branch 'main' into feature/ganttastic
Poster
Owner

@dpschen Done

@dpschen Done
Collaborator

I finished the pull-request for vue-ganttastic. Waiting for review now.

I finished the [pull-request for vue-ganttastic](https://github.com/InfectoOne/vue-ganttastic/pull/53). Waiting for review now.
Collaborator

FYI:
I'm trying to further improve the performance of vue-ganttastic. This doesn't block this pull request though and can also be amended later.

FYI: I'm trying to [further improve the performance of vue-ganttastic](https://github.com/InfectoOne/vue-ganttastic/pull/56). This doesn't block this pull request though and can also be amended later.
Collaborator

The branch is merged, new release should be out soon.

The branch is merged, new release should be out soon.
dpschen added 119 commits 2 months ago
7a457eb161
feat(link shares): cleanup link share table
d91d1fecf1
chore: remove &nbsp;
5f678e2449
chore: remove unused id
65f9def438 chore(deps): update dependency typescript to v4.8.3 (#2341)
38d72b59df chore(deps): update dependency vitest to v0.23.2
4dd397e3d2 chore(deps): update dependency autoprefixer to v10.4.9
6e026cc7cc chore(deps): update dependency netlify-cli to v11.7.1
2f0f648d28 chore(deps): update dependency eslint to v8.23.1
53858e0c31 chore(deps): update typescript-eslint monorepo to v5.37.0
64726a6421 fix(deps): update dependency blurhash to v2 (#2351)
7b398f73f6 feat: add fallback for useCopyToClipboard (#2343)
61427987c2 fix(deps): update dependency date-fns to v2.29.3 (#2354)
1a11b43ca8 feat: improve models
2013924949 chore(deps): update dependency autoprefixer to v10.4.10 (#2355)
db8b8812af feat: use v-model more consequent (#2356)
e67fc7fb7e
fix: use proper computed for available views list
2b82df5dbd
Merge branch 'main' into feature/redirect-to-specific-view
f083f181e2 fix: only warn once if triggeredNotifications are not supported (#2344)
224cea33ce
feat: make share link name italic
6576b6148c
feat: move the url link to the bottom of the items
854068fff9 chore(deps): update dependency cypress to v10.8.0 (#2359)
a6e9b36bd6 feat(link shares): allows switching the initial view by passing a query parameter (#2335)
0316656d81 chore(deps): update dependency autoprefixer to v10.4.11 (#2363)
064001e259 chore(deps): update dependency postcss-preset-env to v7.8.2
9c367877f4 chore(deps): update dependency vite to v3.1.1 (#2365)
49217889b5
fix: bucket title edit success message appearing twice
92f24e59a7
fix: don't parse dates in urls
602ab8379e fix: vue-i18n global scope (#2366)
2683fec0a6
feat: show the task color bubble everywhere
b24d5f2dce fix(quick add magic): time parsing for certain conditions (#2367)
6d9c4a7aa0
chore: improve types
84260841be feat(list): add info dialoge to show list description (#2368)
f70b1d2902 feat: color the task color button when the task has a color set (#2331)
565765537d chore(deps): pin dependency @types/dompurify to 2.3.4
221edb2086 fix(deps): update sentry-javascript monorepo to v7.13.0
ad6b335d41 feat: namespace settings archive script setup
fa77b20c13 chore(deps): update dependency eslint-plugin-vue to v9.5.0 (#2371)
2eff239f9e chore(deps): update dependency eslint-plugin-vue to v9.5.1 (#2373)
9134269ead chore(deps): update dependency vite to v3.1.2
0fccb3d5a9 fix(deps): update dependency @types/sortablejs to v1.15.0
fc0cf3fc87 chore(deps): update dependency vitest to v0.23.4
54e9513c14 chore(deps): update dependency esbuild to v0.15.8
0360cd0867 chore(deps): update dependency vite-plugin-pwa to v0.12.8 (#2375)
de7617fbaf chore(deps): update caniuse-and-related to v4.21.4 (#2379)
e8613b48fc chore(deps): update dependency netlify-cli to v11.8.0 (#2380)
070ef7e5aa chore(deps): update dependency @vitejs/plugin-legacy to v2.2.0 (#2381)
1ecb186b7c chore(deps): update dependency vite to v3.1.3 (#2382)
b06e3cac3f chore(deps): update typescript-eslint monorepo to v5.38.0 (#2383)
fadaac4ef1 chore(deps): update dependency vite-plugin-pwa to v0.13.0 (#2385)
4c9a018c13 fix(deps): update dependency easymde to v2.18.0 (#2386)
ddabd7f63a chore(deps): update dependency autoprefixer to v10.4.12
ff5d1fc8c1 feat: ListNamespaces script setup (#2389)
e91b5fde02 feat: NewTeam script setup (#2388)
d67e5e386d feat: port label store to pinia | pinia 1/9 (#2391)
f85a08afb4 fix(deps): update dependency pinia to v2.0.22 (#2400)
e5d04c98da
fix: test pnpm cache
a38075f376 feat: move list store to pina (#2392)
43e2d036d7
fix: remove console.log
0814890cac feat: deleteNamespace script setup (#2387)
d57e27b4a6 feat: task relatedTasks script setup (#1939)
b542221dac
chore: don't cache node_modules
6624db1d49
chore: don't use node alpine image
62e227c767
fix: explicitly install cypress
dfb3561310
chore: use node alpine image
ef6454483a
chore(ci): sign drone config
f7ca064127 feat: use pnpm (#1789)
093ab766d4
feat: port namespace store to pinia
ad694ff8bc chore(deps): update dependency @vue/eslint-config-typescript to v11.0.2
02e73fa377 chore(deps): update dependency vite-plugin-pwa to v0.13.1
479fc7e433 chore(deps): update dependency rollup to v2.79.1
b9335a7362 fix(deps): update dependency codemirror to v5.65.9
0e072b582b chore(deps): update pnpm to v7.12.1
13bc25ff5d chore(deps): update dependency sass to v1.55.0
4dfcd8e70f feat: feat-attachments-script-setup (#2358)
937fd36f72 feat: convert namespaces store to pina (#2393)
2fd9f0ee47 chore(deps): update dependency esbuild to v0.15.9
20e9420638 feat: port attachments store to pinia
5ffb13a3a8 chore(deps): update pnpm to v7.12.2 (#2408)
ede5cdd8cf
fix: only pass date to flatpickr if it's a valid date
3c9c5eff12
fix: make add task button 100% height
2bf9771e28
fix: lint
a737fc5bc2
feat: port config store to pinia
4e9c592090 chore(deps): update dependency caniuse-lite to v1.0.30001412 (#2421)
b44c71e6cc chore(deps): update dependency netlify-cli to v11.8.3 (#2422)
b1f2229d22 chore(deps): update dependency eslint to v8.24.0 (#2410)
5f6cfa8e09 fix(deps): update vueuse to v9.3.0 (#2423)
1eae7ece9c chore(deps): update dependency rollup-plugin-visualizer to v5.8.2 (#2420)
ba2605af1b feat: filter-popup script setup (#2418)
89e428b4d2 feat: ListLabels script setup (#2416)
9f3936544d fix: use https for api url (#2425)
069d03932d chore(deps): update typescript-eslint monorepo to v5.38.1 (#2426)
ecd0df21c1 fix(deps): update dependency blurhash to v2.0.1
dpschen approved these changes 2 months ago
Collaborator

Let's just merge this and I'll add update the new version later.

@konrad we should not yet upgrade to the new v2.1.1 yet. There are still some issues.

Let's just merge this and I'll add update the new version later. @konrad we should not yet upgrade to the new v2.1.1 yet. There are still some issues.
Poster
Owner

@dpschen Ist v2.1.1 the version with your improvements?

@dpschen Ist v2.1.1 the version with your improvements?
Poster
Owner

Looks like the CI is still failing :/

Looks like the CI is still failing :/
Collaborator

@dpschen Ist v2.1.1 the version with your improvements?

Yes, there are still aome issues with the types that I like to solve. I didnt know how I could test these so these problems just appeared for me after the release,

> @dpschen Ist v2.1.1 the version with your improvements? Yes, there are still aome issues with the types that I like to solve. I didnt know how I could test these so these problems just appeared for me after the release,
Poster
Owner

Okay, then let's fix whatever is required to make the CI happy and then merge this.

Okay, then let's fix whatever is required to make the CI happy and then merge this.
dpschen added 22 commits 2 months ago
bbf4ef4697 feat: ListList script setup (#2441)
c421701fb7 chore(deps): update dependency @vue/test-utils to v2.1.0
94d6f38e89 fix missed conversion to ref (#2445)
8f25f5d353 feat: improve api-config (#2444)
8e3f54ae42
feat: convert model methods to named functions
9856fab38f feat: migrate auth store to pina (#2398)
64cf1c8ccf chore(deps): update dependency esbuild to v0.15.10
34ffd1d572
feat: port tasks store to pinia
b84da722ca chore(deps): update dependency @cypress/vite-dev-server to v3.2.0 (#2448)
8c394d8024 feat: port tasks store to pina (#2409)
5bd7c77b68
chore: use jsDoc to explain param
ec227a6872 feat: automatically create subtask relations based on indention (#2443)
d120e8c82d chore(deps): update dependency postcss to v8.4.17 (#2449)
Poster
Owner

I've now fixed everything so that the CI should work but it bothers me that we have to import all gantt components in main.ts.

Put up an issue: https://github.com/InfectoOne/vue-ganttastic/issues/61

I've now fixed everything so that the CI should work but it bothers me that we have to import all gantt components in `main.ts`. Put up an issue: https://github.com/InfectoOne/vue-ganttastic/issues/61
Collaborator

I've now fixed everything so that the CI should work but it bothers me that we have to import all gantt components in main.ts.

Put up an issue: https://github.com/InfectoOne/vue-ganttastic/issues/61

That was one of the things that I fixed: https://github.com/InfectoOne/vue-ganttastic/blob/master/src/index.ts#L18

> I've now fixed everything so that the CI should work but it bothers me that we have to import all gantt components in `main.ts`. > > Put up an issue: https://github.com/InfectoOne/vue-ganttastic/issues/61 That was one of the things that I fixed: https://github.com/InfectoOne/vue-ganttastic/blob/master/src/index.ts#L18
Poster
Owner

@dpschen so let's upgrade?

@dpschen so let's upgrade?
Collaborator

@dpschen so let's upgrade?

Too be honest I think I did some mistake in exporting the types when I created the chanes in vue-ganttastic. Something still isn't working for me:

image

This is the branch where I tested that: https://kolaente.dev/dpschen/frontend/src/branch/feature/ganttastic-with-updated-version (not rebased)

> @dpschen so let's upgrade? Too be honest I think I did some mistake in exporting the types when I created the chanes in vue-ganttastic. Something still isn't working for me: ![image](/attachments/b8707865-f9e8-469b-af30-9746b155b40b) This is the branch where I tested that: https://kolaente.dev/dpschen/frontend/src/branch/feature/ganttastic-with-updated-version (not rebased)
Poster
Owner

Are the type declarations missing? Or not properly exported in the release?

Are the type declarations missing? Or not properly exported in the release?
Collaborator

Are the type declarations missing? Or not properly exported in the release?

I think the way I exported them was wrong. Although what was put out appeared to be correct. See https://github.com/InfectoOne/vue-ganttastic/blob/master/package.json#L10

> Are the type declarations missing? Or not properly exported in the release? I think the way I exported them was wrong. Although what was put out appeared to be correct. See https://github.com/InfectoOne/vue-ganttastic/blob/master/package.json#L10
Poster
Owner

Should we wait for fixed exports or merge this once the tests pass?

Should we wait for fixed exports or merge this once the tests pass?
Collaborator

I have to check but I think the types are already exported. If that's true just the components types are missing. In that case we could use dummy component types and use the new branch already.

I currently don't know how to fix the component type export issue itself though, but also didn't look at it anymore.

I could do the stuff I wrote above if you want.

I have to check but I think the types are already exported. If that's true just the components types are missing. In that case we could use dummy component types and use the new branch already. I currently don't know how to fix the component type export issue itself though, but also didn't look at it anymore. I could do the stuff I wrote above if you want.
Poster
Owner

I could do the stuff I wrote above if you want.

I'd appreciate that.

> I could do the stuff I wrote above if you want. I'd appreciate that.
Collaborator
I got the types working: https://github.com/InfectoOne/vue-ganttastic/pull/62
Collaborator

I will chceck out if I can solve this as well:
#2180

I currently added the fixed lib as local reference. This might break the build for now (checking it out and building it local should work though). I don't want to waste time and fix that because if there will be a new version that work would be wasted anyway. What's probably needed is copying over the added local vendor folder.

There is another issue with the chart itself:
The handling of tasks without date ranges is really cumbersome. One can move them around but the start and end date won't get set. This is different and worse than it was with the old implementation.

I will chceck out if I can solve this as well: https://kolaente.dev/vikunja/frontend/pulls/2180#issuecomment-33745 I currently added the fixed lib as local reference. This might break the build for now (checking it out and building it local should work though). I don't want to waste time and fix that because if there will be a new version that work would be wasted anyway. What's probably needed is copying over the added local vendor folder. There is another issue with the chart itself: The handling of tasks without date ranges is really cumbersome. One can move them around but the start and end date won't get set. This is different and worse than it was with the old implementation.
Poster
Owner

The handling of tasks without date ranges is really cumbersome. One can move them around but the start and end date won't get set. This is different and worse than it was with the old implementation.

That sounds like a bug.

> The handling of tasks without date ranges is really cumbersome. One can move them around but the start and end date won't get set. This is different and worse than it was with the old implementation. That sounds like a bug.
Collaborator

See this video:

See this video: ![](https://kolaente.dev/attachments/177b696c-5c84-4292-a1ce-d26acbe06fd3)
Poster
Owner

Once moved the tasks should turn blue.

Once moved the tasks should turn blue.
dpschen force-pushed feature/ganttastic from 9d35feb7bf to 1d495b8603 2 months ago
dpschen added 12 commits 1 month ago
konrad reviewed 1 month ago
<template>
Poster
Owner

What are the flatpickr changes doing in this PR?

What are the flatpickr changes doing in this PR?
import { defineAsyncComponent, type AsyncComponentLoader, type AsyncComponentOptions, type Component, type ComponentPublicInstance } from 'vue'
Poster
Owner

Is this new helper relevant for the gantt chart?

Is this new helper relevant for the gantt chart?
Collaborator

I load the GanttChart async. This way the chart library can be loaded when necessary.

I load the GanttChart async. This way the chart library can be loaded when necessary.
Poster
Owner

Okay I think this could be improved/simplified further by just loading the whole gantt view async as that's the only place where the chart is loaded. But that's something I'd leave for another PR.

Okay I think this could be improved/simplified further by just loading the whole gantt view async as that's the only place where the chart is loaded. But that's something I'd leave for another PR.
Collaborator

I thought GanttChart makes more sense, since it's our custom wrapper where we also load some other stuff :) This way all additional load gets loaded async while the page load is really fast, since lightweight.

I thought GanttChart makes more sense, since it's our custom wrapper where we also load some other stuff :) This way all additional load gets loaded async while the page load is really fast, since lightweight.
konrad marked this conversation as resolved
import type {DateISO} from '@/types/DateISO'
import type {DateKebab} from '@/types/DateKebab'
export function parseDateProp(kebabDate: DateKebab | undefined): string | undefined {
Poster
Owner

Isn't this whole function locale-dependant?

Isn't this whole function locale-dependant?
Collaborator

No. What I called KebabDate and ISO dates are not locale dependant afaik.

After I created it I realized that KebabDate is actually a valid ISO date. I thought that it still makes sense to keep both types around since there are conversions in both directions.

No. What I called KebabDate and ISO dates are not locale dependant afaik. After I created it I realized that KebabDate is actually a valid ISO date. I thought that it still makes sense to keep both types around since there are conversions in both directions.
return
}
console.log('foo')
await import(`../../node_modules/dayjs/locale/${dayjsLanguageCode}.js`)
Poster
Owner

This statement did not work in my tests. IMHO we could merge the gantt chart without proper locale support and rework that later. This PR is already a lot bigger than it should be.

This statement did not work in my tests. IMHO we could merge the gantt chart without proper locale support and rework that later. This PR is already a lot bigger than it should be.
Collaborator

Agree!

I found out how to make this work. Turned out that more work is needed since after the locale support works the weekdayFromTimeLabel doesn't anymore. So better to add this at a later point.

Agree! I found out how to make this work. Turned out that more work is needed since after the locale support works the `weekdayFromTimeLabel` doesn't anymore. So better to add this at a later point.
Poster
Owner

And it looks like the task input is now broken :/

image

And it looks like the task input is now broken :/ ![image](/attachments/4cba8582-7523-4cab-94bd-749ac4fc5bb7)
Collaborator

And it looks like the task input is now broken :/

image

I could fix this (not pushed yet).

> And it looks like the task input is now broken :/ > > ![image](/attachments/4cba8582-7523-4cab-94bd-749ac4fc5bb7) I could fix this (not pushed yet).
dpschen added 29 commits 1 month ago
d67dca4a81 chore(deps): update dependency @types/node to v16.18.0 (#2567)
527873dad4 chore(deps): update dependency happy-dom to v7.6.0 (#2571)
57cc7b8f37 chore(deps): update dependency @vue/test-utils to v2.2.0 (#2570)
8d368c552d chore(deps): update dependency caniuse-lite to v1.0.30001423 (#2568)
333df9b247 chore(deps): update dependency netlify-cli to v12.0.11 (#2569)
05d000fc50 fix(deps): update dependency vue-router to v4.1.6 (#2572)
5ddce387fe
fix: show frontend version in about dialog
b18640d688
Merge branch 'main' into feature/ganttastic
8040af4140
fix: improve return type
konrad added 21 commits 1 month ago
12faafbe7c
fix(i18n): spelling typo
22d93a1a3c chore(deps): update typescript-eslint monorepo to v5.41.0 (#2573)
35649d0e87 chore(deps): update dependency @types/node to v18 (#2574)
a0795db040
fix: building version into releases
70e81ee682 fix(deps): update vueuse to v9.4.0 (#2575)
e13e477682
fix: lint
ef6bc3cbab chore(deps): update dependency cypress to v10.11.0 (#2576)
59be904d4a chore(deps): update dependency @types/node to v18.11.6
7ec31363c3 chore(deps): update dependency vite to v3.2.0 (#2580)
5e7fe3280c chore(deps): update dependency @types/node to v18.11.7 (#2581)
4ad99bdad1 chore(deps): update dependency @vitejs/plugin-legacy to v2.3.0 (#2578)
96e44bf225 chore(deps): update dependency @vitejs/plugin-vue to v3.2.0 (#2579)
ef3f19d046 fix(deps): update sentry-javascript monorepo to v7.17.0
konrad reviewed 1 month ago
konrad left a comment
Poster
Owner

Looks good! I'll rebase once more, should be ready to merge after that.

Looks good! I'll rebase once more, should be ready to merge after that.
konrad force-pushed feature/ganttastic from 483a60452b to 61a89117d2 1 month ago
konrad scheduled this pull request to auto merge when all checks succeed 1 month ago
konrad added 1 commit 1 month ago
5271166120
chore(gantt): pnpm install after merge
konrad merged commit fd3e7e655d into main 1 month ago
konrad deleted branch feature/ganttastic 1 month ago

Reviewers

dpschen approved these changes 2 months ago
continuous-integration/drone/pr Build is passing
The pull request has been merged as fd3e7e655d.
Sign in to join this conversation.
No reviewers
No Milestone
No Assignees
5 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: vikunja/frontend#2180
Loading…
There is no content yet.