Add pen icon to link to task detail

src/components/tasks/gantt-component.vue

@@ -37,11 +37,13 @@
 				:highlight-on-hover="true"
 			>
 				<template v-slot:bar-label>
+					<span>
 						{{ t.title }}
+					</span>
+					<router-link :to="{name: 'task.detail', params: {id: t.id}}" class="edit-task-link">
+						<icon icon="pen"/>
+					</router-link>
 				</template>
-				<!--				<template #bar-label="{bar}">-->
-				<!--					<span>{{ bar.label }}</span>-->
-				<!--				</template>-->
 			</g-gantt-row>
 		</g-gantt-chart>
 
@@ -546,7 +548,6 @@ export default {
 			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

@@ -246,12 +246,22 @@ $gantt-vertical-border-color: $grey-100;
   .g-gantt-bar {
     border-radius: 6px !important;
     overflow: visible !important;
+    cursor: grab;
+    
+    &:active {
+      cursor: grabbing;
+    }
 
     .g-gantt-bar-label {
       font-size: .85rem;
-      justify-content: start;
+      justify-content: space-between;
       padding: 0 .5rem !important;
       overflow: hidden;
+
+      .edit-task-link {
+        color: inherit;
+        padding: 0 .25rem;
+      }
     }
 
     .g-gantt-bar-handle-left, .g-gantt-bar-handle-right {