2022-07-19 20:55:38 +00:00
|
|
|
<template>
|
2022-10-19 13:18:54 +00:00
|
|
|
<Loading
|
|
|
|
v-if="props.isLoading && tasks.size || dayjsLanguageLoading"
|
|
|
|
class="gantt-container"
|
|
|
|
/>
|
|
|
|
<div class="gantt-container" v-else>
|
|
|
|
<GGanttChart
|
|
|
|
:date-format="DAYJS_ISO_DATE_FORMAT"
|
|
|
|
:chart-start="isoToKebabDate(filters.dateFrom)"
|
|
|
|
:chart-end="isoToKebabDate(filters.dateTo)"
|
|
|
|
precision="day"
|
|
|
|
bar-start="startDate"
|
|
|
|
bar-end="endDate"
|
|
|
|
:grid="true"
|
|
|
|
@dragend-bar="updateGanttTask"
|
|
|
|
@dblclick-bar="openTask"
|
|
|
|
:width="ganttChartWidth + 'px'"
|
|
|
|
>
|
|
|
|
<template #timeunit="{label, value}">
|
|
|
|
<div
|
|
|
|
class="timeunit-wrapper"
|
|
|
|
:class="{'today': dayIsToday(label)}"
|
|
|
|
>
|
|
|
|
<span>{{ value }}</span>
|
|
|
|
<span class="weekday">
|
|
|
|
{{ weekdayFromTimeLabel(label) }}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</template>
|
2022-10-03 16:37:44 +00:00
|
|
|
<GGanttRow
|
2022-07-20 19:53:21 +00:00
|
|
|
v-for="(bar, k) in ganttBars"
|
|
|
|
:key="k"
|
|
|
|
label=""
|
|
|
|
:bars="bar"
|
|
|
|
/>
|
2022-10-03 16:37:44 +00:00
|
|
|
</GGanttChart>
|
2022-07-20 19:50:59 +00:00
|
|
|
</div>
|
2022-07-19 20:55:38 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2022-10-18 13:55:41 +00:00
|
|
|
import {computed, ref, watch, toRefs} from 'vue'
|
2022-10-02 12:12:10 +00:00
|
|
|
import {useRouter} from 'vue-router'
|
|
|
|
import {format, parse} from 'date-fns'
|
2022-10-10 19:44:59 +00:00
|
|
|
import dayjs from 'dayjs'
|
2022-10-17 14:11:57 +00:00
|
|
|
import isToday from 'dayjs/plugin/isToday'
|
2022-10-02 12:12:10 +00:00
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
import {useDayjsLanguageSync} from '@/i18n'
|
2022-10-18 13:55:41 +00:00
|
|
|
import {getHexColor} from '@/models/task'
|
2022-10-03 16:37:44 +00:00
|
|
|
|
2022-07-19 20:55:38 +00:00
|
|
|
import {colorIsDark} from '@/helpers/color/colorIsDark'
|
2022-10-17 21:20:52 +00:00
|
|
|
import {isoToKebabDate} from '@/helpers/time/isoToKebabDate'
|
|
|
|
import {parseKebabDate} from '@/helpers/time/parseKebabDate'
|
2022-10-02 12:12:10 +00:00
|
|
|
|
2022-10-18 13:55:41 +00:00
|
|
|
import type {ITask, ITaskPartialWithId} from '@/modelTypes/ITask'
|
|
|
|
import type {DateISO} from '@/types/DateISO'
|
|
|
|
import type {GanttFilter} from '@/views/list/helpers/useGanttFilter'
|
2022-10-10 19:44:59 +00:00
|
|
|
|
2022-10-03 16:37:44 +00:00
|
|
|
import {
|
|
|
|
extendDayjs,
|
|
|
|
GGanttChart,
|
|
|
|
GGanttRow,
|
|
|
|
type GanttBarObject,
|
|
|
|
} from '@infectoone/vue-ganttastic'
|
|
|
|
|
2022-08-02 11:45:03 +00:00
|
|
|
import Loading from '@/components/misc/loading.vue'
|
2022-10-19 13:18:34 +00:00
|
|
|
import {MILLISECONDS_A_DAY} from '@/constants/date'
|
2022-08-04 19:48:58 +00:00
|
|
|
|
2022-10-17 14:11:57 +00:00
|
|
|
export interface GanttChartProps {
|
2022-10-18 13:55:41 +00:00
|
|
|
isLoading: boolean,
|
|
|
|
filters: GanttFilter,
|
|
|
|
tasks: Map<ITask['id'], ITask>,
|
|
|
|
defaultTaskStartDate: DateISO
|
|
|
|
defaultTaskEndDate: DateISO
|
2022-10-10 19:44:59 +00:00
|
|
|
}
|
2022-07-19 20:55:38 +00:00
|
|
|
|
2022-10-17 20:28:01 +00:00
|
|
|
const DAYJS_ISO_DATE_FORMAT = 'YYYY-MM-DD'
|
|
|
|
|
2022-10-18 13:55:41 +00:00
|
|
|
const props = defineProps<GanttChartProps>()
|
|
|
|
|
|
|
|
const emit = defineEmits<{
|
|
|
|
(e: 'update:task', task: ITaskPartialWithId): void
|
|
|
|
}>()
|
|
|
|
|
|
|
|
const {tasks, filters} = toRefs(props)
|
2022-07-19 20:55:38 +00:00
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
// setup dayjs for vue-ganttastic
|
2022-10-17 21:20:52 +00:00
|
|
|
const dayjsLanguageLoading = useDayjsLanguageSync(dayjs)
|
2022-10-17 14:11:57 +00:00
|
|
|
dayjs.extend(isToday)
|
2022-10-10 19:44:59 +00:00
|
|
|
extendDayjs()
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
2022-10-18 13:55:41 +00:00
|
|
|
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)))
|
2022-07-20 21:54:12 +00:00
|
|
|
|
2022-07-20 19:50:59 +00:00
|
|
|
const DAY_WIDTH_PIXELS = 30
|
|
|
|
const ganttChartWidth = computed(() => {
|
2022-10-19 13:18:34 +00:00
|
|
|
const dateDiff = Math.floor((dateToDate.value.valueOf() - dateFromDate.value.valueOf()) / MILLISECONDS_A_DAY)
|
2022-07-20 19:53:21 +00:00
|
|
|
|
2022-07-20 19:50:59 +00:00
|
|
|
return dateDiff * DAY_WIDTH_PIXELS
|
|
|
|
})
|
|
|
|
|
2022-08-04 19:48:58 +00:00
|
|
|
const ganttBars = ref<GanttBarObject[][]>([])
|
2022-07-19 20:55:38 +00:00
|
|
|
|
2022-10-18 13:55:41 +00:00
|
|
|
/**
|
|
|
|
* Update ganttBars when tasks change
|
|
|
|
*/
|
2022-10-03 16:37:44 +00:00
|
|
|
watch(
|
|
|
|
tasks,
|
|
|
|
() => {
|
|
|
|
ganttBars.value = []
|
|
|
|
tasks.value.forEach(t => ganttBars.value.push(transformTaskToGanttBar(t)))
|
|
|
|
},
|
2022-10-19 13:39:03 +00:00
|
|
|
{deep: true, immediate: true},
|
2022-10-03 16:37:44 +00:00
|
|
|
)
|
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
function transformTaskToGanttBar(t: ITask) {
|
2022-07-20 21:54:12 +00:00
|
|
|
const black = 'var(--grey-800)'
|
2022-07-20 22:29:12 +00:00
|
|
|
return [{
|
2022-10-18 13:55:41 +00:00
|
|
|
startDate: isoToKebabDate(t.startDate ? t.startDate.toISOString() : props.defaultTaskStartDate),
|
|
|
|
endDate: isoToKebabDate(t.endDate ? t.endDate.toISOString() : props.defaultTaskEndDate),
|
2022-07-19 20:55:38 +00:00
|
|
|
ganttBarConfig: {
|
2022-10-03 16:37:44 +00:00
|
|
|
id: String(t.id),
|
2022-07-19 20:55:38 +00:00
|
|
|
label: t.title,
|
|
|
|
hasHandles: true,
|
|
|
|
style: {
|
2022-10-03 16:37:44 +00:00
|
|
|
color: t.startDate ? (colorIsDark(getHexColor(t.hexColor)) ? black : 'white') : black,
|
|
|
|
backgroundColor: t.startDate ? getHexColor(t.hexColor) : 'var(--grey-100)',
|
2022-07-20 22:15:17 +00:00
|
|
|
border: t.startDate ? '' : '2px dashed var(--grey-300)',
|
2022-07-20 22:30:58 +00:00
|
|
|
'text-decoration': t.done ? 'line-through' : null,
|
2022-07-19 20:55:38 +00:00
|
|
|
},
|
|
|
|
},
|
2022-08-04 19:48:58 +00:00
|
|
|
} as GanttBarObject]
|
2022-07-20 22:29:12 +00:00
|
|
|
}
|
|
|
|
|
2022-10-18 13:55:41 +00:00
|
|
|
async function updateGanttTask(e: {
|
|
|
|
bar: GanttBarObject;
|
|
|
|
e: MouseEvent;
|
|
|
|
datetime?: string | undefined;
|
2022-10-09 11:57:45 +00:00
|
|
|
}) {
|
2022-10-18 13:55:41 +00:00
|
|
|
emit('update:task', {
|
|
|
|
id: Number(e.bar.ganttBarConfig.id),
|
2022-10-17 21:20:52 +00:00
|
|
|
startDate: new Date(parseKebabDate(e.bar.startDate).setHours(0,0,0,0)),
|
|
|
|
endDate: new Date(parseKebabDate(e.bar.endDate).setHours(23,59,0,0)),
|
2022-10-18 13:55:41 +00:00
|
|
|
})
|
2022-07-20 16:53:55 +00:00
|
|
|
}
|
2022-07-20 19:38:41 +00:00
|
|
|
|
2022-10-09 11:57:45 +00:00
|
|
|
function openTask(e: {
|
|
|
|
bar: GanttBarObject;
|
|
|
|
e: MouseEvent;
|
|
|
|
datetime?: string | undefined;
|
|
|
|
}) {
|
2022-07-20 19:38:41 +00:00
|
|
|
router.push({
|
|
|
|
name: 'task.detail',
|
2022-07-20 19:50:59 +00:00
|
|
|
params: {id: e.bar.ganttBarConfig.id},
|
|
|
|
state: {backdropView: router.currentRoute.value.fullPath},
|
2022-07-20 19:38:41 +00:00
|
|
|
})
|
|
|
|
}
|
2022-07-20 21:54:12 +00:00
|
|
|
|
|
|
|
function weekdayFromTimeLabel(label: string): string {
|
|
|
|
const parsed = parse(label, 'dd.MMM', dateFromDate.value)
|
|
|
|
return format(parsed, 'E')
|
|
|
|
}
|
|
|
|
|
|
|
|
function dayIsToday(label: string): boolean {
|
|
|
|
const parsed = parse(label, 'dd.MMM', dateFromDate.value)
|
|
|
|
const today = new Date()
|
|
|
|
return parsed.getDate() === today.getDate() &&
|
|
|
|
parsed.getMonth() === today.getMonth() &&
|
|
|
|
parsed.getFullYear() === today.getFullYear()
|
|
|
|
}
|
2022-07-19 20:55:38 +00:00
|
|
|
</script>
|
|
|
|
|
2022-10-03 16:37:44 +00:00
|
|
|
<style scoped lang="scss">
|
|
|
|
.gantt-container {
|
|
|
|
overflow-x: auto;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
2022-07-20 21:54:12 +00:00
|
|
|
<style lang="scss">
|
|
|
|
// Not scoped because we need to style the elements inside the gantt chart component
|
2022-10-03 16:37:44 +00:00
|
|
|
.g-gantt-chart {
|
2022-10-19 13:18:54 +00:00
|
|
|
width: max-content;
|
2022-10-03 16:37:44 +00:00
|
|
|
}
|
|
|
|
|
2022-07-19 20:55:38 +00:00
|
|
|
.g-gantt-row-label {
|
2022-10-17 21:20:52 +00:00
|
|
|
display: none !important;
|
2022-07-19 20:55:38 +00:00
|
|
|
}
|
2022-07-20 21:54:12 +00:00
|
|
|
|
|
|
|
.g-upper-timeunit, .g-timeunit {
|
2022-10-17 21:20:52 +00:00
|
|
|
background: var(--white) !important;
|
2022-07-20 21:54:12 +00:00
|
|
|
font-family: $vikunja-font;
|
|
|
|
}
|
|
|
|
|
|
|
|
.g-upper-timeunit {
|
|
|
|
font-weight: bold;
|
|
|
|
border-right: 1px solid var(--grey-200);
|
|
|
|
padding: .5rem 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.g-timeunit .timeunit-wrapper {
|
|
|
|
padding: 0.5rem 0;
|
2022-10-17 21:20:52 +00:00
|
|
|
font-size: 1rem !important;
|
2022-07-20 21:54:12 +00:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
&.today {
|
|
|
|
background: var(--primary);
|
|
|
|
color: var(--white);
|
|
|
|
border-radius: 5px 5px 0 0;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
.weekday {
|
|
|
|
font-size: 0.8rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.g-timeaxis {
|
2022-10-17 21:20:52 +00:00
|
|
|
height: auto !important;
|
|
|
|
box-shadow: none !important;
|
2022-07-20 21:54:12 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.g-gantt-row > .g-gantt-row-bars-container {
|
2022-10-17 21:20:52 +00:00
|
|
|
border-bottom: none !important;
|
|
|
|
border-top: none !important;
|
2022-07-20 21:54:12 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.g-gantt-row:nth-child(odd) {
|
|
|
|
background: hsla(var(--grey-100-hsl), .5);
|
|
|
|
}
|
|
|
|
|
|
|
|
.g-gantt-bar {
|
|
|
|
border-radius: $radius * 1.5;
|
|
|
|
overflow: visible;
|
|
|
|
font-size: .85rem;
|
|
|
|
|
|
|
|
&-handle-left,
|
|
|
|
&-handle-right {
|
2022-10-17 21:20:52 +00:00
|
|
|
width: 6px !important;
|
|
|
|
height: 75% !important;
|
|
|
|
opacity: .75 !important;
|
|
|
|
border-radius: $radius !important;
|
2022-07-20 22:15:17 +00:00
|
|
|
margin-top: 4px;
|
2022-07-20 21:54:12 +00:00
|
|
|
}
|
|
|
|
}
|
2022-10-03 16:37:44 +00:00
|
|
|
</style>
|