Start adding vue-ganttastic

package.json

@@ -22,6 +22,7 @@
     "highlight.js": "10.7.2",
     "lodash": "4.17.21",
     "marked": "2.0.3",
+    "moment": "^2.29.1",
     "register-service-worker": "1.7.2",
     "sass": "1.32.13",
     "snake-case": "3.0.4",
@@ -30,6 +31,7 @@
     "vue-advanced-cropper": "1.5.2",
     "vue-drag-resize": "1.5.4",
     "vue-easymde": "1.4.0",
+    "vue-ganttastic": "^0.9.32",
     "vue-shortkey": "3.1.7",
     "vue-smooth-dnd": "0.8.1",
     "vuex": "3.6.2"

src/components/tasks/gantt-component.vue

@@ -16,6 +16,40 @@
 				v-model="params"
 			/>
 		</div>
+
+
+		<g-gantt-chart
+			:chart-start="dateFrom.toString()"
+			:chart-end="dateTo.toString()"
+			:push-on-overlap="true"
+			row-label-width="0"
+			:grid="true"
+		>
+			<g-gantt-row
+				v-for="(t, k) in theTasks"
+				:key="t ? t.id : 'k'+k"
+				label=""
+				bar-start="start"
+				bar-end="end"
+				:bars="[{
+					start: t.startDate.toString(),
+					end: t.endDate.toString(),
+					label: t.title,
+					ganttBarConfig: {
+						color: colorIsDark(t.getHexColor()) ? 'white' : 'black',
+						backgroundColor: t.getHexColor(),
+						handles: true,
+					}
+				}]"
+				:highlight-on-hover="true"
+			>
+				<template v-slot:label>
+					<span>{{ t.title }}</span>
+				</template>
+			</g-gantt-row>
+		</g-gantt-chart>
+
+
 		<div class="dates">
 			<template v-for="(y, yk) in days">
 				<div :key="yk + 'year'" class="months">
@@ -191,6 +225,7 @@
 
 <script>
 import VueDragResize from 'vue-drag-resize'
+import {GGanttChart, GGanttRow} from 'vue-ganttastic'
 import EditTask from './edit-task'
 
 import TaskService from '../../services/task'
@@ -209,6 +244,8 @@ export default {
 		PriorityLabel,
 		EditTask,
 		VueDragResize,
+		GGanttChart,
+		GGanttRow,
 	},
 	props: {
 		listId: {

yarn.lock

@@ -9543,6 +9543,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@~0.5.0:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -13340,6 +13345,11 @@ vue-flatpickr-component@8.1.6:
   dependencies:
     flatpickr "^4.6.6"
 
+vue-ganttastic@^0.9.32:
+  version "0.9.32"
+  resolved "https://registry.yarnpkg.com/vue-ganttastic/-/vue-ganttastic-0.9.32.tgz#7dc37db63fddd39413444a6674c85d3300f552af"
+  integrity sha512-xVWOFXwBFJ/1piQyQ842RZtpEIRZWOjfhSZeQUTX5oGWskRe1P7yOdZ6SI30x+S/kNGVICcyfawbnMHNix/TYg==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"