diff --git a/src/components/tasks/GanttChart.vue b/src/components/tasks/GanttChart.vue index 89d954373..47704b193 100644 --- a/src/components/tasks/GanttChart.vue +++ b/src/components/tasks/GanttChart.vue @@ -53,7 +53,7 @@ import {parseKebabDate} from '@/helpers/time/parseKebabDate' import type {ITask, ITaskPartialWithId} from '@/modelTypes/ITask' import type {DateISO} from '@/types/DateISO' -import type {GanttFilter} from '@/views/list/helpers/useGanttFilter' +import type {GanttFilters} from '@/views/list/helpers/useGanttFilters' import { extendDayjs, @@ -67,7 +67,7 @@ import {MILLISECONDS_A_DAY} from '@/constants/date' export interface GanttChartProps { isLoading: boolean, - filters: GanttFilter, + filters: GanttFilters, tasks: Map, defaultTaskStartDate: DateISO defaultTaskEndDate: DateISO diff --git a/src/composables/useRouteFilter.ts b/src/composables/useRouteFilters.ts similarity index 67% rename from src/composables/useRouteFilter.ts rename to src/composables/useRouteFilters.ts index abcd1f03a..dc25ad012 100644 --- a/src/composables/useRouteFilter.ts +++ b/src/composables/useRouteFilters.ts @@ -2,18 +2,18 @@ import {computed, ref, watch, type Ref} from 'vue' import {useRouter, type RouteLocationNormalized, type RouteLocationRaw} from 'vue-router' import cloneDeep from 'lodash.clonedeep' -export type Filter = Record +export type Filters = Record -export function useRouteFilter( +export function useRouteFilters( route: Ref, - routeToFilter: (route: RouteLocationNormalized) => F, - filterToRoute: (filter: F) => RouteLocationRaw, + routeToFilters: (route: RouteLocationNormalized) => CurrentFilters, + filtersToRoute: (filters: CurrentFilters) => RouteLocationRaw, ) { const router = useRouter() - const filters = ref(routeToFilter(route.value)) + const filters = ref(routeToFilters(route.value)) - const routeFromFiltersFullPath = computed(() => router.resolve(filterToRoute(filters.value)).fullPath) + const routeFromFiltersFullPath = computed(() => router.resolve(filtersToRoute(filters.value)).fullPath) watch(() => cloneDeep(route.value), (route, oldRoute) => { if ( @@ -23,7 +23,7 @@ export function useRouteFilter( return } - filters.value = routeToFilter(route) + filters.value = routeToFilters(route) }) watch( diff --git a/src/views/list/ListGantt.vue b/src/views/list/ListGantt.vue index 253a7ffdb..362beb685 100644 --- a/src/views/list/ListGantt.vue +++ b/src/views/list/ListGantt.vue @@ -56,7 +56,7 @@ import Fancycheckbox from '@/components/input/fancycheckbox.vue' import TaskForm from '@/components/tasks/TaskForm.vue' import {createAsyncComponent} from '@/helpers/createAsyncComponent' -import {useGanttFilter} from './helpers/useGanttFilter' +import {useGanttFilters} from './helpers/useGanttFilters' import {RIGHTS} from '@/constants/rights' import type {DateISO} from '@/types/DateISO' @@ -78,7 +78,7 @@ const { isLoading, addTask, updateTask, -} = useGanttFilter(route) +} = useGanttFilters(route) const today = new Date(new Date().setHours(0,0,0,0)) const defaultTaskStartDate: DateISO = new Date(today).toISOString() diff --git a/src/views/list/helpers/useGanttFilter.ts b/src/views/list/helpers/useGanttFilters.ts similarity index 65% rename from src/views/list/helpers/useGanttFilter.ts rename to src/views/list/helpers/useGanttFilters.ts index 87286ff03..86f63cd13 100644 --- a/src/views/list/helpers/useGanttFilter.ts +++ b/src/views/list/helpers/useGanttFilters.ts @@ -4,7 +4,7 @@ import type {RouteLocationNormalized, RouteLocationRaw} from 'vue-router' import {isoToKebabDate} from '@/helpers/time/isoToKebabDate' import {parseDateProp} from '@/helpers/time/parseDateProp' import {parseBooleanProp} from '@/helpers/time/parseBooleanProp' -import {useRouteFilter} from '@/composables/useRouteFilter' +import {useRouteFilters} from '@/composables/useRouteFilters' import {useGanttTaskList} from './useGanttTaskList' import type {IList} from '@/modelTypes/IList' @@ -14,7 +14,7 @@ import type {DateISO} from '@/types/DateISO' import type {DateKebab} from '@/types/DateKebab' // convenient internal filter object -export interface GanttFilter { +export interface GanttFilters { listId: IList['id'] dateFrom: DateISO dateTo: DateISO @@ -37,17 +37,18 @@ function getDefaultDateTo() { } // FIXME: use zod for this -function ganttRouteToFilter(route: RouteLocationNormalized): GanttFilter { +function ganttRouteToFilters(route: Partial): GanttFilters { + const ganttRoute = route return { - listId: Number(route.params.listId as string), - dateFrom: parseDateProp(route.query.dateFrom as DateKebab) || getDefaultDateFrom(), - dateTo: parseDateProp(route.query.dateTo as DateKebab) || getDefaultDateTo(), - showTasksWithoutDates: parseBooleanProp(route.query.showTasksWithoutDates as string) || DEFAULT_SHOW_TASKS_WITHOUT_DATES, + listId: Number(ganttRoute.params?.listId), + dateFrom: parseDateProp(ganttRoute.query?.dateFrom as DateKebab) || getDefaultDateFrom(), + dateTo: parseDateProp(ganttRoute.query?.dateTo as DateKebab) || getDefaultDateTo(), + showTasksWithoutDates: parseBooleanProp(ganttRoute.query?.showTasksWithoutDates as string) || DEFAULT_SHOW_TASKS_WITHOUT_DATES, } } // FIXME: use zod for this -function ganttFilterToRoute(filters: GanttFilter): RouteLocationRaw { +function ganttFiltersToRoute(filters: GanttFilters): RouteLocationRaw { let query: Record = {} if ( filters.dateFrom !== getDefaultDateFrom() || @@ -70,7 +71,7 @@ function ganttFilterToRoute(filters: GanttFilter): RouteLocationRaw { } } -function ganttFiltersToApiParams(filters: GanttFilter): GetAllTasksParams { +function ganttFiltersToApiParams(filters: GanttFilters): GetAllTasksParams { return { sort_by: ['start_date', 'done', 'id'], order_by: ['asc', 'asc', 'desc'], @@ -82,22 +83,31 @@ function ganttFiltersToApiParams(filters: GanttFilter): GetAllTasksParams { } } -export function useGanttFilter(route: Ref): ReturnType & ReturnType { - const {filters} = useRouteFilter(route, ganttRouteToFilter, ganttFilterToRoute) +export type UseGanttFiltersReturn = ReturnType & ReturnType + +export function useGanttFilters(route: Ref): UseGanttFiltersReturn { + const { + filters, + } = useRouteFilters( + route, + ganttRouteToFilters, + ganttFiltersToRoute + ) const { tasks, + loadTasks, isLoading, addTask, updateTask, - } = useGanttTaskList(filters, ganttFiltersToApiParams) - + } = useGanttTaskList(filters, ganttFiltersToApiParams) return { filters, tasks, + loadTasks, isLoading, addTask, diff --git a/src/views/list/helpers/useGanttTaskList.ts b/src/views/list/helpers/useGanttTaskList.ts index 55faf29d0..df4080066 100644 --- a/src/views/list/helpers/useGanttTaskList.ts +++ b/src/views/list/helpers/useGanttTaskList.ts @@ -1,7 +1,7 @@ import {computed, ref, shallowReactive, watch, type Ref} from 'vue' import cloneDeep from 'lodash.clonedeep' -import type {Filter} from '@/composables/useRouteFilter' +import type {Filters} from '@/composables/useRouteFilters' import type {ITask, ITaskPartialWithId} from '@/modelTypes/ITask' import TaskCollectionService, {type GetAllTasksParams} from '@/services/taskCollection' @@ -11,7 +11,7 @@ import TaskModel from '@/models/task' import {error, success} from '@/message' // FIXME: unify with general `useTaskList` -export function useGanttTaskList( +export function useGanttTaskList( filters: Ref, filterToApiParams: (filters: F) => GetAllTasksParams, options: {