vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

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

Merged
konrad merged 78 commits from feature/ganttastic into main 2022-10-27 16:03:27 +00:00
Conversation 41 Commits 78 Files Changed 48 +706 -656
5 changed files with 706 additions and 656 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 52d4d0bdb9 - Show all commits

1
package.json
View File

@ -41,6 +41,7 @@
"dayjs": "^1.11.5",
"dompurify": "2.4.0",
"easymde": "2.18.0",
"fast-deep-equal": "^3.1.3",
"flatpickr": "4.6.13",
"flexsearch": "0.7.21",
"floating-vue": "2.0.0-beta.20",

1332
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

12
src/composables/useRouteFilters.ts
View File

@ -1,11 +1,13 @@
import {computed, ref, watch, type Ref} from 'vue'
import {useRouter, type RouteLocationNormalized, type RouteLocationRaw} from 'vue-router'
import cloneDeep from 'lodash.clonedeep'
import equal from 'fast-deep-equal/es6'
export type Filters = Record<string, any>
export function useRouteFilters<CurrentFilters extends Filters>(
route: Ref<RouteLocationNormalized>,
getDefaultFilters: (route: RouteLocationNormalized) => CurrentFilters,
routeToFilters: (route: RouteLocationNormalized) => CurrentFilters,
filtersToRoute: (filters: CurrentFilters) => RouteLocationRaw,
) {
@ -37,7 +39,17 @@ export function useRouteFilters<CurrentFilters extends Filters>(
{flush: 'post'},
)
const hasDefaultFilters = computed(() => {
return equal(filters.value, getDefaultFilters(route.value))
})
function setDefaultFilters() {
filters.value = getDefaultFilters(route.value)
}
return {
filters,
hasDefaultFilters,
setDefaultFilters,
}
}

8
src/views/list/ListGantt.vue
View File

@ -16,6 +16,12 @@
/>
</div>
</div>
<div class="field" v-if="!hasDefaultFilters">
<label class="label" for="range">Reset</label>
<div class="control">
<x-button @click="setDefaultFilters">Reset</x-button>
</div>
</div>
<fancycheckbox class="is-block" v-model="filters.showTasksWithoutDates">
{{ $t('list.gantt.showTasksWithoutDates') }}
</fancycheckbox>
@ -74,6 +80,8 @@ const canWrite = computed(() => baseStore.currentList.maxRight > RIGHTS.READ)
const {route} = toRefs(props)
const {
filters,
hasDefaultFilters,
dpschen commented 2022-07-21 22:57:36 +00:00
Outdated
Review
Copy Link

Can you explain in a different way?

Can you explain in a different way?
konrad commented 2022-08-02 12:01:54 +00:00
Outdated
Review
Copy Link

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.
dpschen commented 2022-08-04 18:46:02 +00:00
Outdated
Review
Copy Link

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?
konrad commented 2022-08-04 20:46:56 +00:00
Outdated
Review
Copy Link

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?
👍 1
dpschen commented 2022-09-08 16:03:32 +00:00
Outdated
Review
Copy Link

That seems like the right approach

That seems like the right approach
dpschen commented 2022-10-07 11:48:35 +00:00
Outdated
Review
Copy Link

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

Will check this out again. Shouldn't be too hard.
setDefaultFilters,
tasks,
isLoading,
addTask,

9
src/views/list/helpers/useGanttFilters.ts
View File

@ -47,6 +47,10 @@ function ganttRouteToFilters(route: Partial<RouteLocationNormalized>): GanttFilt
}
}
function ganttGetDefaultFilters(route: Partial<RouteLocationNormalized>): GanttFilters {
return ganttRouteToFilters({params: {listId: route.params?.listId as string}})
}
// FIXME: use zod for this
function ganttFiltersToRoute(filters: GanttFilters): RouteLocationRaw {
let query: Record<string, string> = {}
@ -88,9 +92,12 @@ export type UseGanttFiltersReturn = ReturnType<typeof useRouteFilters> & ReturnT
export function useGanttFilters(route: Ref<RouteLocationNormalized>): UseGanttFiltersReturn {
const {
filters,
hasDefaultFilters,
setDefaultFilters,
} = useRouteFilters<GanttFilters>(
route,
ganttRouteToFilters,
ganttGetDefaultFilters,
ganttFiltersToRoute
)
@ -105,6 +112,8 @@ export function useGanttFilters(route: Ref<RouteLocationNormalized>): UseGanttFi
return {
filters,
hasDefaultFilters,
setDefaultFilters,
tasks,
loadTasks,