jackymancs4
/
vikunja-frontend
forked from vikunja/frontend
1
0
Fork 0
Code Pull Requests Activity

feat(gantt): implement dynamic sizing on small date ranges (#3750) 

Reviewed-on: vikunja/frontend#3750
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Giacomo Rossetto <jackyman_cs4@live.it>
Co-committed-by: Giacomo Rossetto <jackyman_cs4@live.it>
This commit is contained in:
Giacomo Rossetto 2023-10-03 11:30:24 +00:00 committed by konrad
parent 66c7a05cdb
commit a71755e408
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/tasks/GanttChart.vue
View File

@ -3,7 +3,7 @@
v-if="props.isLoading && !ganttBars.length || dayjsLanguageLoading" v-if="props.isLoading && !ganttBars.length || dayjsLanguageLoading"
class="gantt-container" class="gantt-container"
/> />
<div class="gantt-container" v-else> <div ref="ganttContainer" class="gantt-container" v-else>
<GGanttChart <GGanttChart
:date-format="DAYJS_ISO_DATE_FORMAT" :date-format="DAYJS_ISO_DATE_FORMAT"
:chart-start="isoToKebabDate(filters.dateFrom)" :chart-start="isoToKebabDate(filters.dateFrom)"
@ -14,7 +14,7 @@
:grid="true" :grid="true"
@dragend-bar="updateGanttTask" @dragend-bar="updateGanttTask"
@dblclick-bar="openTask" @dblclick-bar="openTask"
:width="ganttChartWidth + 'px'" :width="ganttChartWidth"
> >
<template #timeunit="{value, date}"> <template #timeunit="{value, date}">
<div <div
@ -85,6 +85,8 @@ const dayjsLanguageLoading = ref(false)
// const dayjsLanguageLoading = useDayjsLanguageSync(dayjs) // const dayjsLanguageLoading = useDayjsLanguageSync(dayjs)
extendDayjs() extendDayjs()
const ganttContainer = ref(null)
const router = useRouter() const router = useRouter()
const dateFromDate = computed(() => new Date(new Date(filters.value.dateFrom).setHours(0,0,0,0))) const dateFromDate = computed(() => new Date(new Date(filters.value.dateFrom).setHours(0,0,0,0)))
@ -92,9 +94,15 @@ const dateToDate = computed(() => new Date(new Date(filters.value.dateTo).setHou
const DAY_WIDTH_PIXELS = 30 const DAY_WIDTH_PIXELS = 30
const ganttChartWidth = computed(() => { const ganttChartWidth = computed(() => {
const dateDiff = Math.floor((dateToDate.value.valueOf() - dateFromDate.value.valueOf()) / MILLISECONDS_A_DAY)
return dateDiff * DAY_WIDTH_PIXELS const ganttContainerReference = ganttContainer?.value
const ganttContainerWidth = ganttContainerReference ? (ganttContainerReference['clientWidth'] ?? 0) : 0
const dateDiff = Math.floor((dateToDate.value.valueOf() - dateFromDate.value.valueOf()) / MILLISECONDS_A_DAY)
const calculatedWidth = dateDiff * DAY_WIDTH_PIXELS
return (calculatedWidth > ganttContainerWidth) ? calculatedWidth + 'px' : '100%'
}) })
const ganttBars = ref<GanttBarObject[][]>([]) const ganttBars = ref<GanttBarObject[][]>([])