ami/tl-vikunja
1
0
Fork 0
Code

feat: working gantt-chart

Browse Source
This commit is contained in:
Dominik Pschenitschni 2022-10-17 22:28:01 +02:00 committed by kolaente
parent 0b194bb0cf
commit eaf777864a
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
2 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/tasks/gantt-chart.vue
View File

@ -1,13 +1,14 @@
<template>
<div>
<Loading
v-if="taskService.loading || taskCollectionService.loading || dayjsLanguageLoading"
v-if="taskCollectionService.loading || dayjsLanguageLoading"
class="gantt-container"
/>
<div class="gantt-container" v-else>
<GGanttChart
:chart-start="`${props.dateFrom} 00:00`"
:chart-end="`${props.dateTo} 23:59`"
:date-format="DAYJS_ISO_DATE_FORMAT"
:chart-start="isoToKebabDate(props.dateFrom)"
:chart-end="isoToKebabDate(props.dateTo)"
precision="day"
bar-start="startDate"
bar-end="endDate"
@ -40,11 +41,12 @@
</template>
<script setup lang="ts">
import {computed, ref, watch, watchEffect, shallowReactive} from 'vue'
import {computed, ref, watch, watchEffect, shallowReactive, type CSSProperties} 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'
@ -68,6 +70,7 @@ 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 type DateRange = {
dateFrom: string,
@ -84,6 +87,8 @@ export interface GanttChartProps {
// export const DATE_FORMAT = 'yyyy-LL-dd HH:mm'
const DAYJS_ISO_DATE_FORMAT = 'YYYY-MM-DD'
const props = withDefaults(defineProps<GanttChartProps>(), {
showTasksWithoutDates: false,
})
@ -100,12 +105,12 @@ const router = useRouter()
const taskCollectionService = shallowReactive(new TaskCollectionService())
const taskService = shallowReactive(new TaskService())
const dateFromDate = computed(() => parse(props.dateFrom, 'yyyy-LL-dd', new Date(new Date().setHours(0,0,0,0))))
const dateToDate = computed(() => parse(props.dateTo, 'yyyy-LL-dd', new Date(new Date().setHours(23,59,0,0))))
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 DAY_WIDTH_PIXELS = 30
const ganttChartWidth = computed(() => {
const dateDiff = Math.floor((dateToDate.value - dateFromDate.value) / (1000 * 60 * 60 * 24))
const dateDiff = Math.floor((dateToDate.value.valueOf() - dateFromDate.value.valueOf()) / (1000 * 60 * 60 * 24))
return dateDiff * DAY_WIDTH_PIXELS
})
@ -131,15 +136,16 @@ function isoToKebabDate(isoDate: DateISO) {
return format(new Date(isoDate), DATE_FORMAT_KEBAB) as DateKebab
}
const defaultStartDate = new Date().toISOString()
const defaultEndDate = new Date((new Date()).setDate((new Date()).getDate() + 7)).toISOString()
const now = new Date()
const defaultStartDate = new Date(now)
const defaultEndDate = new Date(now.setDate(now.getDate() + 7))
function transformTaskToGanttBar(t: ITask) {
const black = 'var(--grey-800)'
console.log(t)
return [{
startDate: isoToKebabDate(new Date(t.startDate ? t.startDate : defaultStartDate).toISOString()),
endDate: isoToKebabDate(new Date(t.endDate ? t.endDate : defaultEndDate).toISOString()),
startDate: isoToKebabDate(t.startDate ? t.startDate.toISOString() : defaultStartDate.toISOString()),
endDate: isoToKebabDate(t.endDate ? t.endDate.toISOString() : defaultEndDate.toISOString()),
ganttBarConfig: {
id: String(t.id),
label: t.title,
@ -190,7 +196,7 @@ async function loadTasks({
order_by: ['asc', 'asc', 'desc'],
filter_by: ['start_date', 'start_date'],
filter_comparator: ['greater_equals', 'less_equals'],
filter_value: [dateFrom, dateTo],
filter_value: [isoToKebabDate(dateFrom), isoToKebabDate(dateTo)],
filter_concat: 'and',
filter_include_nulls: showTasksWithoutDates,
}
@ -227,20 +233,35 @@ async function updateTask(e: {
if (!task) return
console.log(task.startDate.toISOString())
console.log(dayjs(task.startDate), "YYYY-MM-DD HH:mm").toISOString()
console.log(dayjs(task.startDate, "YYYY-MM-DDTHH:mm:ssZ[Z]").toISOString())
console.log(task.startDate)
console.log(dayjs(e.bar.startDate).toDate())
console.log(e.bar.startDate)
console.log(task.endDate.toISOString())
console.log(task.endDate)
console.log(dayjs(e.bar.startDate).toDate())
console.log(e.bar.endDate)
// task.startDate = e.bar.startDate
// task.endDate = e.bar.endDate
const updatedTask = await taskService.update(task)
const startDate = parse(e.bar.startDate, 'yyyy-MM-dd', new Date())
const endDate = parse(e.bar.endDate, 'yyyy-MM-dd', new Date())
const oldTask = cloneDeep(task)
const newTask: ITask = {
...task,
startDate,
endDate,
}
const newTaskCopy = cloneDeep(task)
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('Saved')
// tasks.value.set(task.id, oldTask)
// }
// for (let [idStr, currentTask] of tasks.value) {
// const id: ITask['id'] = Number(idStr)
// }
// ganttBars.value.map(gantBar => {
// return Number(gantBar[0].ganttBarConfig.id) === task.id

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

@ -31,8 +31,8 @@
<pre>{{new Date(dateRange.dateTo).toISOString()}}</pre>
<gantt-chart
:list-id="filters.listId"
:date-from="isoToKebabDate(filters.dateFrom)"
:date-to="isoToKebabDate(filters.dateTo)"
:date-from="filters.dateFrom"
:date-to="filters.dateTo"
:show-tasks-without-dates="showTasksWithoutDates"
/>
</card>