Fix tasks moving infinitely in gantt chart (#493)

Fixes vikunja/frontend#489

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: vikunja/frontend#493
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/migrator/migration.vue

@@ -85,7 +85,7 @@ export default {
 		if (typeof this.$route.query.code !== 'undefined' || location.hash.startsWith('#token=')) {
 			if (location.hash.startsWith('#token=')) {
 				this.migratorAuthCode = location.hash.substring(7)
-				console.log(location.hash.substring(7))
+				console.debug(location.hash.substring(7))
 			} else {
 				this.migratorAuthCode = this.$route.query.code
 			}

src/components/tasks/gantt-component.vue

@@ -59,7 +59,8 @@
 		</div>
 		<div :style="{ width: fullWidth + 'px' }" class="tasks">
 			<div
-				:key="t.id"
+				v-for="(t, k) in theTasks"
+				:key="t ? t.id : 0"
 				:style="{
 					background:
 						'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' +
@@ -70,13 +71,11 @@
 						'px)',
 				}"
 				class="row"
-				v-for="(t, k) in theTasks"
 			>
 				<VueDragResize
 					:class="{
-						done: t.done,
-						'is-current-edit':
-							taskToEdit !== null && taskToEdit.id === t.id,
+						done: t ? t.done : false,
+						'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id,
 						'has-light-text': !colorIsDark(t.getHexColor()),
 						'has-dark-text': colorIsDark(t.getHexColor()),
 					}"
@@ -367,27 +366,24 @@ export default {
 				})
 		},
 		addGantAttributes(t) {
+			if (typeof t.durationDays !== 'undefined' && typeof t.offsetDays !== 'undefined') {
+				return t
+			}
+
 			t.endDate === null ? this.endDate : t.endDate
-			t.durationDays =
-				Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1
-			t.offsetDays =
-				Math.floor(
-					(t.startDate - this.startDate) / 1000 / 60 / 60 / 24
-				) + 1
+			t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24)
+			t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24)
 			return t
 		},
 		setTaskDragged(t) {
 			this.taskDragged = t
 		},
 		resizeTask(newRect) {
-			// Timeout to definitly catch if the user clicked on taskedit
-			setTimeout(() => {
 			if (this.isTaskEdit) {
 				return
 			}
 
-				let didntHaveDates =
-					this.taskDragged.startDate === null ? true : false
+			const didntHaveDates = this.taskDragged.startDate === null ? true : false
 
 			let startDate = new Date(this.startDate)
 			startDate.setDate(
@@ -415,9 +411,19 @@ export default {
 				}
 			}
 
+			const ganttData = {
+				endDate: this.taskDragged.endDate,
+				durationDays: this.taskDragged.durationDays,
+				offsetDays: this.taskDragged.offsetDays,
+			}
+
 			this.taskService
 				.update(this.taskDragged)
-					.then((r) => {
+				.then(r => {
+					r.endDate = ganttData.endDate
+					r.durationDays = ganttData.durationDays
+					r.offsetDays = ganttData.offsetDays
+
 					// If the task didn't have dates before, we'll update the list
 					if (didntHaveDates) {
 						for (const t in this.tasksWithoutDates) {
@@ -443,7 +449,6 @@ export default {
 				.catch((e) => {
 					this.error(e, this)
 				})
-			}, 100)
 		},
 		editTask(task) {
 			this.taskToEdit = task

src/styles/components/gantt.scss

@@ -72,6 +72,7 @@ $gantt-vertical-border-color: $grey-100;
         padding: 0.25rem 0.5rem;
         cursor: grab;
         position: relative;
+        height: 31px !important;
 
         -webkit-touch-callout: none; // iOS Safari
         -webkit-user-select: none; // Safari

src/views/tasks/TaskDetailView.vue

@@ -505,8 +505,6 @@ export default {
 			this.listViewName = `list.${parts[1]}`
 		}
 
-		console.log(this.task)
-
 		this.loadTask()
 	},
 	computed: {