src/components/tasks/gantt-chart.vue

@@ -1,21 +1,25 @@
 <template>
-	<g-gantt-chart
+	<div class="gantt-container">
-		:chart-start="`${dateFrom} 00:00`"
+		<div :style="{'width': ganttChartWidth + 'px'}">
-		:chart-end="`${dateTo} 23:59`"
+			<g-gantt-chart
-		:precision="precision"
+				:chart-start="`${dateFrom} 00:00`"
-		bar-start="startDate"
+				:chart-end="`${dateTo} 23:59`"
-		bar-end="endDate"
+				:precision="precision"
-		:grid="true"
+				bar-start="startDate"
-		@dragend-bar="updateTask"
+				bar-end="endDate"
-		@dblclick-bar="openTask"
+				:grid="true"
-	>
+				@dragend-bar="updateTask"
-		<g-gantt-row
+				@dblclick-bar="openTask"
-			v-for="(bar, k) in ganttBars"
+			>
-			:key="k"
+				<g-gantt-row
-			label=""
+					v-for="(bar, k) in ganttBars"
-			:bars="bar"
+					:key="k"
-		/>
+					label=""
-	</g-gantt-chart>
+					:bars="bar"
+				/>
+			</g-gantt-chart>
+		</div>
+	</div>
 	<form
 		@submit.prevent="createTask()"
 		class="add-new-task"
@@ -41,7 +45,7 @@
 <script setup lang="ts">
 import {computed, nextTick, ref} from 'vue'
 import TaskCollectionService from '@/services/taskCollection'
-import {format} from 'date-fns'
+import {format, parse} from 'date-fns'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import TaskService from '@/services/task'
 import {useStore} from 'vuex'
@@ -73,6 +77,15 @@ const props = defineProps({
 	},
 })
 
+const DAY_WIDTH_PIXELS = 30
+const ganttChartWidth = computed(() => {
+	const from = parse(props.dateFrom, 'yyyy-LL-dd', new Date())
+	const to = parse(props.dateTo, 'yyyy-LL-dd', new Date())
+	const dateDiff = Math.floor((to - from) / (1000 * 60 * 60 * 24))
+	
+	return dateDiff * DAY_WIDTH_PIXELS
+})
+
 const canWrite = computed(() => store.state.currentList.maxRight > Rights.READ)
 
 const tasks = ref([])
@@ -188,8 +201,8 @@ function openTask(e) {
 	console.log('open', e.bar.ganttBarConfig.id)
 	router.push({
 		name: 'task.detail',
-		params: { id: e.bar.ganttBarConfig.id },
+		params: {id: e.bar.ganttBarConfig.id},
-		state: { backdropView: router.currentRoute.value.fullPath },
+		state: {backdropView: router.currentRoute.value.fullPath},
 	})
 }
 </script>
@@ -201,6 +214,14 @@ function openTask(e) {
 </style>
 
 <style scoped lang="scss">
+.gantt-container {
+	overflow-x: auto;
+
+	#g-gantt-chart {
+		width: 2000px;
+	}
+}
+
 .add-new-task {
 	padding: 1rem .7rem .4rem .7rem;
 	display: flex;