feat(gantt): add task collection to useGanttFilter
This commit is contained in:
Dominik Pschenitschni
committed by
kolaente
kolaente
parent
2c732eb0d5
commit
c1da04eda1
@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<Loading
|
||||
v-if="taskCollectionService.loading || dayjsLanguageLoading"
|
||||
v-if="props.isLoading || dayjsLanguageLoading"
|
||||
class="gantt-container"
|
||||
/>
|
||||
<div class="gantt-container" v-else>
|
||||
<GGanttChart
|
||||
:date-format="DAYJS_ISO_DATE_FORMAT"
|
||||
:chart-start="isoToKebabDate(props.dateFrom)"
|
||||
:chart-end="isoToKebabDate(props.dateTo)"
|
||||
:chart-start="isoToKebabDate(filters.dateFrom)"
|
||||
:chart-end="isoToKebabDate(filters.dateTo)"
|
||||
precision="day"
|
||||
bar-start="startDate"
|
||||
bar-end="endDate"
|
||||
:grid="true"
|
||||
@dragend-bar="updateTask"
|
||||
@dragend-bar="updateGanttTask"
|
||||
@dblclick-bar="openTask"
|
||||
:width="ganttChartWidth + 'px'"
|
||||
>
|
||||
@ -36,30 +36,26 @@
|
||||
/>
|
||||
</GGanttChart>
|
||||
</div>
|
||||
<TaskForm v-if="canWrite" @create-task="createTask" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, watch, watchEffect, shallowReactive} from 'vue'
|
||||
import {computed, ref, watch, toRefs} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
import {format, parse} from 'date-fns'
|
||||
import dayjs from 'dayjs'
|
||||
import isToday from 'dayjs/plugin/isToday'
|
||||
import cloneDeep from 'lodash.clonedeep'
|
||||
|
||||
import {useDayjsLanguageSync} from '@/i18n'
|
||||
import TaskCollectionService from '@/services/taskCollection'
|
||||
import TaskService from '@/services/task'
|
||||
import TaskModel, {getHexColor} from '@/models/task'
|
||||
import {getHexColor} from '@/models/task'
|
||||
|
||||
import {colorIsDark} from '@/helpers/color/colorIsDark'
|
||||
import {isoToKebabDate} from '@/helpers/time/isoToKebabDate'
|
||||
import {parseKebabDate} from '@/helpers/time/parseKebabDate'
|
||||
import {RIGHTS} from '@/constants/rights'
|
||||
|
||||
import type {ITask} from '@/modelTypes/ITask'
|
||||
import type {IList} from '@/modelTypes/IList'
|
||||
import type {ITask, ITaskPartialWithId} from '@/modelTypes/ITask'
|
||||
import type {DateISO} from '@/types/DateISO'
|
||||
import type {GanttFilter} from '@/views/list/helpers/useGanttFilter'
|
||||
|
||||
import {
|
||||
extendDayjs,
|
||||
@ -69,37 +65,34 @@ import {
|
||||
} from '@infectoone/vue-ganttastic'
|
||||
|
||||
import Loading from '@/components/misc/loading.vue'
|
||||
import TaskForm from '@/components/tasks/TaskForm.vue'
|
||||
|
||||
import {useBaseStore} from '@/stores/base'
|
||||
import {error, success} from '@/message'
|
||||
|
||||
export interface GanttChartProps {
|
||||
listId: IList['id']
|
||||
showTasksWithoutDates: boolean
|
||||
dateFrom: string,
|
||||
dateTo: string,
|
||||
isLoading: boolean,
|
||||
filters: GanttFilter,
|
||||
tasks: Map<ITask['id'], ITask>,
|
||||
defaultTaskStartDate: DateISO
|
||||
defaultTaskEndDate: DateISO
|
||||
}
|
||||
|
||||
const DAYJS_ISO_DATE_FORMAT = 'YYYY-MM-DD'
|
||||
|
||||
const props = withDefaults(defineProps<GanttChartProps>(), {
|
||||
showTasksWithoutDates: false,
|
||||
})
|
||||
const props = defineProps<GanttChartProps>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:task', task: ITaskPartialWithId): void
|
||||
}>()
|
||||
|
||||
const {tasks, filters} = toRefs(props)
|
||||
|
||||
// setup dayjs for vue-ganttastic
|
||||
const dayjsLanguageLoading = useDayjsLanguageSync(dayjs)
|
||||
dayjs.extend(isToday)
|
||||
extendDayjs()
|
||||
|
||||
const baseStore = useBaseStore()
|
||||
const router = useRouter()
|
||||
|
||||
const taskCollectionService = shallowReactive(new TaskCollectionService())
|
||||
const taskService = shallowReactive(new TaskService())
|
||||
|
||||
const dateFromDate = computed(() => new Date(new Date(props.dateFrom).setHours(0,0,0,0)))
|
||||
const dateToDate = computed(() => new Date(new Date(props.dateTo).setHours(23,59,0,0)))
|
||||
const dateFromDate = computed(() => new Date(new Date(filters.value.dateFrom).setHours(0,0,0,0)))
|
||||
const dateToDate = computed(() => new Date(new Date(filters.value.dateTo).setHours(23,59,0,0)))
|
||||
|
||||
const DAY_WIDTH_PIXELS = 30
|
||||
const ganttChartWidth = computed(() => {
|
||||
@ -108,11 +101,11 @@ const ganttChartWidth = computed(() => {
|
||||
return dateDiff * DAY_WIDTH_PIXELS
|
||||
})
|
||||
|
||||
const canWrite = computed(() => baseStore.currentList.maxRight > RIGHTS.READ)
|
||||
|
||||
const tasks = ref<Map<ITask['id'], ITask>>(new Map())
|
||||
const ganttBars = ref<GanttBarObject[][]>([])
|
||||
|
||||
/**
|
||||
* Update ganttBars when tasks change
|
||||
*/
|
||||
watch(
|
||||
tasks,
|
||||
() => {
|
||||
@ -122,15 +115,11 @@ watch(
|
||||
{deep: true},
|
||||
)
|
||||
|
||||
const today = new Date(new Date(props.dateFrom).setHours(0,0,0,0))
|
||||
const defaultTaskStartDate = new Date(today)
|
||||
const defaultTaskEndDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 23,59,0,0)
|
||||
|
||||
function transformTaskToGanttBar(t: ITask) {
|
||||
const black = 'var(--grey-800)'
|
||||
return [{
|
||||
startDate: isoToKebabDate(t.startDate ? t.startDate.toISOString() : defaultTaskStartDate.toISOString()),
|
||||
endDate: isoToKebabDate(t.endDate ? t.endDate.toISOString() : defaultTaskEndDate.toISOString()),
|
||||
startDate: isoToKebabDate(t.startDate ? t.startDate.toISOString() : props.defaultTaskStartDate),
|
||||
endDate: isoToKebabDate(t.endDate ? t.endDate.toISOString() : props.defaultTaskEndDate),
|
||||
ganttBarConfig: {
|
||||
id: String(t.id),
|
||||
label: t.title,
|
||||
@ -145,95 +134,16 @@ function transformTaskToGanttBar(t: ITask) {
|
||||
} as GanttBarObject]
|
||||
}
|
||||
|
||||
// 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,
|
||||
}
|
||||
|
||||
async function getAllTasks(params: GetAllTasksParams, page = 1): Promise<ITask[]> {
|
||||
const tasks = await taskCollectionService.getAll({listId: props.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({
|
||||
dateTo,
|
||||
dateFrom,
|
||||
showTasksWithoutDates,
|
||||
}: {
|
||||
dateTo: string;
|
||||
dateFrom: string;
|
||||
showTasksWithoutDates: boolean;
|
||||
async function updateGanttTask(e: {
|
||||
bar: GanttBarObject;
|
||||
e: MouseEvent;
|
||||
datetime?: string | undefined;
|
||||
}) {
|
||||
tasks.value = new Map()
|
||||
|
||||
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(dateFrom), isoToKebabDate(dateTo)],
|
||||
filter_concat: 'and',
|
||||
filter_include_nulls: showTasksWithoutDates,
|
||||
}
|
||||
|
||||
const loadedTasks = await getAllTasks(params)
|
||||
loadedTasks.forEach(t => tasks.value.set(t.id, t))
|
||||
}
|
||||
|
||||
watchEffect(() => loadTasks({
|
||||
dateTo: props.dateTo,
|
||||
dateFrom: props.dateFrom,
|
||||
showTasksWithoutDates: props.showTasksWithoutDates,
|
||||
}))
|
||||
|
||||
async function createTask(title: ITask['title']) {
|
||||
const newTask = await taskService.create(new TaskModel({
|
||||
title,
|
||||
listId: props.listId,
|
||||
startDate: defaultTaskStartDate.toISOString(),
|
||||
endDate: defaultTaskEndDate.toISOString(),
|
||||
}))
|
||||
tasks.value.set(newTask.id, newTask)
|
||||
|
||||
return newTask
|
||||
}
|
||||
|
||||
async function updateTask(e: {
|
||||
bar: GanttBarObject;
|
||||
e: MouseEvent;
|
||||
datetime?: string | undefined;
|
||||
}) {
|
||||
const task = tasks.value.get(Number(e.bar.ganttBarConfig.id))
|
||||
|
||||
if (!task) return
|
||||
|
||||
const oldTask = cloneDeep(task)
|
||||
const newTask: ITask = {
|
||||
...task,
|
||||
emit('update:task', {
|
||||
id: Number(e.bar.ganttBarConfig.id),
|
||||
startDate: new Date(parseKebabDate(e.bar.startDate).setHours(0,0,0,0)),
|
||||
endDate: new Date(parseKebabDate(e.bar.endDate).setHours(23,59,0,0)),
|
||||
}
|
||||
|
||||
tasks.value.set(newTask.id, newTask)
|
||||
|
||||
try {
|
||||
const updatedTask = await taskService.update(newTask)
|
||||
tasks.value.set(updatedTask.id, updatedTask)
|
||||
success('Saved')
|
||||
} catch(e: any) {
|
||||
error('Something went wrong saving the task')
|
||||
tasks.value.set(task.id, oldTask)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function openTask(e: {
|
||||
|
||||
Reference in New Issue
Block a user