feat(gantt): add task collection to useGanttFilter
This commit is contained in:
Dominik Pschenitschni
committed by
kolaente
kolaente
parent
2c732eb0d5
commit
c1da04eda1
@ -27,11 +27,14 @@
|
||||
<div class="gantt-chart-container">
|
||||
<card :padding="false" class="has-overflow">
|
||||
<gantt-chart
|
||||
:list-id="filters.listId"
|
||||
:date-from="filters.dateFrom"
|
||||
:date-to="filters.dateTo"
|
||||
:show-tasks-without-dates="filters.showTasksWithoutDates"
|
||||
:filters="filters"
|
||||
:tasks="tasks"
|
||||
:isLoading="isLoading"
|
||||
:default-task-start-date="defaultTaskStartDate"
|
||||
:default-task-end-date="defaultTaskEndDate"
|
||||
@update:task="updateTask"
|
||||
/>
|
||||
<TaskForm v-if="canWrite" @create-task="addGanttTask" />
|
||||
</card>
|
||||
</div>
|
||||
</template>
|
||||
@ -45,13 +48,17 @@ import type Flatpickr from 'flatpickr'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import type {RouteLocationNormalized} from 'vue-router'
|
||||
|
||||
import {useBaseStore} from '@/stores/base'
|
||||
import {useAuthStore} from '@/stores/auth'
|
||||
|
||||
import ListWrapper from './ListWrapper.vue'
|
||||
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 {RIGHTS} from '@/constants/rights'
|
||||
import type { DateISO } from '@/types/DateISO'
|
||||
|
||||
type Options = Flatpickr.Options.Options
|
||||
|
||||
@ -59,8 +66,30 @@ const GanttChart = createAsyncComponent(() => import('@/components/tasks/gantt-c
|
||||
|
||||
const props = defineProps<{route: RouteLocationNormalized}>()
|
||||
|
||||
const baseStore = useBaseStore()
|
||||
const canWrite = computed(() => baseStore.currentList.maxRight > RIGHTS.READ)
|
||||
|
||||
const {route} = toRefs(props)
|
||||
const {filters} = useGanttFilter(route)
|
||||
const {
|
||||
filters,
|
||||
tasks,
|
||||
isLoading,
|
||||
addTask,
|
||||
updateTask,
|
||||
} = useGanttFilter(route)
|
||||
|
||||
const today = new Date(new Date().setHours(0,0,0,0))
|
||||
const defaultTaskStartDate: DateISO = new Date(today).toISOString()
|
||||
const defaultTaskEndDate: DateISO = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 23,59,0,0).toISOString()
|
||||
|
||||
async function addGanttTask(title: ITask['title']) {
|
||||
return await addTask({
|
||||
title,
|
||||
listId: filters.listId,
|
||||
startDate: defaultTaskStartDate,
|
||||
endDate: defaultTaskEndDate,
|
||||
})
|
||||
}
|
||||
|
||||
const flatPickerEl = ref<typeof Foo | null>(null)
|
||||
const flatPickerDateRange = computed<Date[]>({
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import type {Ref} from 'vue'
|
||||
import {computed, ref, shallowReactive, watchEffect, type Ref} from 'vue'
|
||||
import type {RouteLocationNormalized, RouteLocationRaw} from 'vue-router'
|
||||
import cloneDeep from 'lodash.clonedeep'
|
||||
|
||||
import {isoToKebabDate} from '@/helpers/time/isoToKebabDate'
|
||||
import {parseDateProp} from '@/helpers/time/parseDateProp'
|
||||
@ -7,9 +8,17 @@ import {parseBooleanProp} from '@/helpers/time/parseBooleanProp'
|
||||
import {useRouteFilter} from '@/composables/useRouteFilter'
|
||||
|
||||
import type {IList} from '@/modelTypes/IList'
|
||||
import type {ITask, ITaskPartialWithId} from '@/modelTypes/ITask'
|
||||
|
||||
import type {DateISO} from '@/types/DateISO'
|
||||
import type {DateKebab} from '@/types/DateKebab'
|
||||
|
||||
import TaskCollectionService from '@/services/taskCollection'
|
||||
import TaskService from '@/services/task'
|
||||
|
||||
import TaskModel from '@/models/task'
|
||||
import {error, success} from '@/message'
|
||||
|
||||
// convenient internal filter object
|
||||
export interface GanttFilter {
|
||||
listId: IList['id']
|
||||
@ -18,6 +27,17 @@ export interface GanttFilter {
|
||||
showTasksWithoutDates: boolean
|
||||
}
|
||||
|
||||
// FIXME: unite with other filter params types
|
||||
interface GetAllTasksParams {
|
||||
sort_by: ('start_date' | 'done' | 'id')[],
|
||||
order_by: ('asc' | 'asc' | 'desc')[],
|
||||
filter_by: 'start_date'[],
|
||||
filter_comparator: ('greater_equals' | 'less_equals')[],
|
||||
filter_value: [string, string] // [dateFrom, dateTo],
|
||||
filter_concat: 'and',
|
||||
filter_include_nulls: boolean,
|
||||
}
|
||||
|
||||
const DEFAULT_SHOW_TASKS_WITHOUT_DATES = false
|
||||
|
||||
const DEFAULT_DATEFROM_DAY_OFFSET = -15
|
||||
@ -66,5 +86,84 @@ function filterToRoute(filters: GanttFilter): RouteLocationRaw {
|
||||
}
|
||||
|
||||
export function useGanttFilter(route: Ref<RouteLocationNormalized>) {
|
||||
return useRouteFilter<GanttFilter>(route, routeToFilter, filterToRoute)
|
||||
const {filters} = useRouteFilter<GanttFilter>(route, routeToFilter, filterToRoute)
|
||||
|
||||
const taskCollectionService = shallowReactive(new TaskCollectionService())
|
||||
const taskService = shallowReactive(new TaskService())
|
||||
|
||||
const isLoading = computed(() => taskCollectionService.loading)
|
||||
|
||||
const tasks = ref<Map<ITask['id'], ITask>>(new Map())
|
||||
|
||||
async function getAllTasks(params: GetAllTasksParams, page = 1): Promise<ITask[]> {
|
||||
const tasks = await taskCollectionService.getAll({listId: filters.listId}, params, page) as ITask[]
|
||||
if (page < taskCollectionService.totalPages) {
|
||||
const nextTasks = await getAllTasks(params, page + 1)
|
||||
return tasks.concat(nextTasks)
|
||||
}
|
||||
return tasks
|
||||
}
|
||||
|
||||
async function loadTasks(filters: GanttFilter) {
|
||||
const params: GetAllTasksParams = {
|
||||
sort_by: ['start_date', 'done', 'id'],
|
||||
order_by: ['asc', 'asc', 'desc'],
|
||||
filter_by: ['start_date', 'start_date'],
|
||||
filter_comparator: ['greater_equals', 'less_equals'],
|
||||
filter_value: [isoToKebabDate(filters.dateFrom), isoToKebabDate(filters.dateTo)],
|
||||
filter_concat: 'and',
|
||||
filter_include_nulls: filters.showTasksWithoutDates,
|
||||
}
|
||||
|
||||
const loadedTasks = await getAllTasks(params)
|
||||
tasks.value = new Map()
|
||||
loadedTasks.forEach(t => tasks.value.set(t.id, t))
|
||||
}
|
||||
|
||||
watchEffect(() => loadTasks(filters))
|
||||
|
||||
async function addTask(task: Partial<ITask>) {
|
||||
const newTask = await taskService.create(
|
||||
new TaskModel({...task})
|
||||
)
|
||||
tasks.value.set(newTask.id, newTask)
|
||||
|
||||
return newTask
|
||||
}
|
||||
|
||||
async function updateTask(task: ITaskPartialWithId) {
|
||||
const oldTask = cloneDeep(tasks.value.get(task.id))
|
||||
|
||||
if (!oldTask) return
|
||||
|
||||
// we extend the task with potentially missing info
|
||||
const newTask: ITask = {
|
||||
...oldTask,
|
||||
...task,
|
||||
}
|
||||
|
||||
// set in expectation that server update works
|
||||
tasks.value.set(newTask.id, newTask)
|
||||
|
||||
try {
|
||||
const updatedTask = await taskService.update(newTask)
|
||||
// update the task with possible changes from server
|
||||
tasks.value.set(updatedTask.id, updatedTask)
|
||||
success('Saved')
|
||||
} catch(e: any) {
|
||||
error('Something went wrong saving the task')
|
||||
// roll back changes
|
||||
tasks.value.set(task.id, oldTask)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
filters,
|
||||
|
||||
tasks,
|
||||
|
||||
isLoading,
|
||||
addTask,
|
||||
updateTask,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user