From 85e55d13008304704afdde05179b913c13b04abb Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 25 Apr 2021 16:01:17 +0000 Subject: [PATCH] Fix tasks moving infinitely in gantt chart (#493) Fixes https://kolaente.dev/vikunja/frontend/issues/489 Co-authored-by: kolaente Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/493 Co-authored-by: konrad Co-committed-by: konrad --- src/components/migrator/migration.vue | 2 +- src/components/tasks/gantt-component.vue | 143 ++++++++++++----------- src/styles/components/gantt.scss | 1 + src/views/tasks/TaskDetailView.vue | 2 - 4 files changed, 76 insertions(+), 72 deletions(-) diff --git a/src/components/migrator/migration.vue b/src/components/migrator/migration.vue index 9fe5bb3d..4b65fc9f 100644 --- a/src/components/migrator/migration.vue +++ b/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 } diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index 785c7036..d27bd37f 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -59,7 +59,8 @@
{ - if (this.isTaskEdit) { - return + if (this.isTaskEdit) { + return + } + + const didntHaveDates = this.taskDragged.startDate === null ? true : false + + let startDate = new Date(this.startDate) + startDate.setDate( + startDate.getDate() + newRect.left / this.dayWidth + ) + startDate.setUTCHours(0) + startDate.setUTCMinutes(0) + startDate.setUTCSeconds(0) + startDate.setUTCMilliseconds(0) + this.taskDragged.startDate = startDate + let endDate = new Date(startDate) + endDate.setDate( + startDate.getDate() + newRect.width / this.dayWidth + ) + this.taskDragged.startDate = startDate + this.taskDragged.endDate = endDate + + // We take the task from the overall tasks array because the one in it has bad data after it was updated once. + // FIXME: This is a workaround. We should use a better mechanism to get the task or, even better, + // prevent it from containing outdated Data in the first place. + for (const tt in this.theTasks) { + if (this.theTasks[tt].id === this.taskDragged.id) { + this.$set(this, 'taskDragged', this.theTasks[tt]) + break } + } - let didntHaveDates = - this.taskDragged.startDate === null ? true : false + const ganttData = { + endDate: this.taskDragged.endDate, + durationDays: this.taskDragged.durationDays, + offsetDays: this.taskDragged.offsetDays, + } - let startDate = new Date(this.startDate) - startDate.setDate( - startDate.getDate() + newRect.left / this.dayWidth - ) - startDate.setUTCHours(0) - startDate.setUTCMinutes(0) - startDate.setUTCSeconds(0) - startDate.setUTCMilliseconds(0) - this.taskDragged.startDate = startDate - let endDate = new Date(startDate) - endDate.setDate( - startDate.getDate() + newRect.width / this.dayWidth - ) - this.taskDragged.startDate = startDate - this.taskDragged.endDate = endDate + this.taskService + .update(this.taskDragged) + .then(r => { + r.endDate = ganttData.endDate + r.durationDays = ganttData.durationDays + r.offsetDays = ganttData.offsetDays - // We take the task from the overall tasks array because the one in it has bad data after it was updated once. - // FIXME: This is a workaround. We should use a better mechanism to get the task or, even better, - // prevent it from containing outdated Data in the first place. - for (const tt in this.theTasks) { - if (this.theTasks[tt].id === this.taskDragged.id) { - this.$set(this, 'taskDragged', this.theTasks[tt]) - break - } - } - - this.taskService - .update(this.taskDragged) - .then((r) => { - // If the task didn't have dates before, we'll update the list - if (didntHaveDates) { - for (const t in this.tasksWithoutDates) { - if (this.tasksWithoutDates[t].id === r.id) { - this.tasksWithoutDates.splice(t, 1) - break - } - } - this.theTasks.push(this.addGantAttributes(r)) - } else { - for (const tt in this.theTasks) { - if (this.theTasks[tt].id === r.id) { - this.$set( - this.theTasks, - tt, - this.addGantAttributes(r) - ) - break - } + // If the task didn't have dates before, we'll update the list + if (didntHaveDates) { + for (const t in this.tasksWithoutDates) { + if (this.tasksWithoutDates[t].id === r.id) { + this.tasksWithoutDates.splice(t, 1) + break } } - }) - .catch((e) => { - this.error(e, this) - }) - }, 100) + this.theTasks.push(this.addGantAttributes(r)) + } else { + for (const tt in this.theTasks) { + if (this.theTasks[tt].id === r.id) { + this.$set( + this.theTasks, + tt, + this.addGantAttributes(r) + ) + break + } + } + } + }) + .catch((e) => { + this.error(e, this) + }) }, editTask(task) { this.taskToEdit = task diff --git a/src/styles/components/gantt.scss b/src/styles/components/gantt.scss index da6c2d45..3685f657 100644 --- a/src/styles/components/gantt.scss +++ b/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 diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue index dce929f1..32476290 100644 --- a/src/views/tasks/TaskDetailView.vue +++ b/src/views/tasks/TaskDetailView.vue @@ -505,8 +505,6 @@ export default { this.listViewName = `list.${parts[1]}` } - console.log(this.task) - this.loadTask() }, computed: {