Make it look more like the old gantt chart

src/components/tasks/gantt-component.vue

@@ -23,30 +23,25 @@
 			:chart-end="dateTo.toString()"
 			:push-on-overlap="true"
 			row-label-width="0"
+			:row-height="37"
 			:grid="true"
 			@dragend-bar="dragged($event)"
 		>
 			<g-gantt-row
-				v-for="(t, k) in theTasks"
+				v-for="(t, k) in ganttBars"
 				:key="t ? t.id : 'k'+k"
 				label=""
 				bar-start="start"
 				bar-end="end"
-				:bars="[{
+				:bars="t.bars"
-					start: t.startDate.toString(),
-					end: t.endDate.toString(),
-					label: t.title,
-					ganttBarConfig: {
-						color: colorIsDark(t.getHexColor()) ? 'black' : 'white',
-						backgroundColor: t.getHexColor(),
-						handles: true,
-					}
-				}]"
 				:highlight-on-hover="true"
 			>
-<!--				<template #bar-label="{bar}">-->
+				<template v-slot:bar-label>
-<!--					<span>{{ bar.label }}</span>-->
+					{{ t.title }}
-<!--				</template>-->
+				</template>
+				<!--				<template #bar-label="{bar}">-->
+				<!--					<span>{{ bar.label }}</span>-->
+				<!--				</template>-->
 			</g-gantt-row>
 		</g-gantt-chart>
 
@@ -228,15 +223,16 @@
 import VueDragResize from 'vue-drag-resize'
 import {GGanttChart, GGanttRow} from 'vue-ganttastic'
 import EditTask from './edit-task'
+import {mapState} from 'vuex'
 
 import TaskService from '../../services/task'
 import TaskModel from '../../models/task'
 import priorities from '../../models/priorities'
 import PriorityLabel from './partials/priorityLabel'
 import TaskCollectionService from '../../services/taskCollection'
-import {mapState} from 'vuex'
 import Rights from '../../models/rights.json'
 import FilterPopup from '@/components/list/partials/filter-popup'
+import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 export default {
 	name: 'GanttChart',
@@ -289,6 +285,8 @@ export default {
 			taskCollectionService: TaskCollectionService,
 			showTaskFilter: false,
 
+			ganttBars: [],
+
 			params: {
 				sort_by: ['done', 'id'],
 				order_by: ['asc', 'desc'],
@@ -398,6 +396,25 @@ export default {
 							if (a.startDate > b.startDate) return 1
 							return 0
 						})
+
+					this.ganttBars = this.theTasks.map(t => {
+						return {
+							id: t.id,
+							title: t.title,
+							bars: [{
+								id: t.id,
+								start: t.startDate.toString(),
+								end: t.endDate.toString(),
+								label: t.title,
+								ganttBarConfig: {
+									color: colorIsDark(t.getHexColor()) ? 'black' : 'white',
+									backgroundColor: t.getHexColor(),
+									handles: true,
+								},
+							}],
+						}
+					})
+
 				})
 				.catch((e) => {
 					this.error(e, this)
@@ -526,7 +543,13 @@ export default {
 				})
 		},
 		dragged(e) {
-			console.log(e)
+			const bar = e.movedBars.entries().next().value[0]
+			const index = this.theTasks.findIndex(t => t.id === bar.id)
+			const task = this.theTasks[index]
+			console.log(bar, task)
+			task.startDate = new Date(bar.start)
+			task.endDate = new Date(bar.end)
+			this.$set(this.theTasks, index, task)
 		},
 	},
 }

src/styles/components/gantt.scss

@@ -234,4 +234,37 @@ $gantt-vertical-border-color: $grey-100;
 
 .vdr.active::before {
   display: none;
+}
+
+#g-gantt-chart {
+  * {
+    font-family: $family-sans-serif !important;
+  }
+
+  // .85rem
+
+  .g-gantt-bar {
+    border-radius: 6px !important;
+    overflow: visible !important;
+
+    .g-gantt-bar-label {
+      font-size: .85rem;
+      justify-content: start;
+      padding: 0 .5rem !important;
+      overflow: hidden;
+    }
+
+    .g-gantt-bar-handle-left, .g-gantt-bar-handle-right {
+      width: 8px !important;
+      height: 8px !important;
+      opacity: 1 !important;
+      border-radius: 0 !important;
+      margin-left: -2px !important;
+      border: 1px solid $grey-700 !important;
+    }
+
+    .g-gantt-bar-handle-right {
+      margin-right: -2px !important;
+    }
+  }
 }