feat: use async / await where it makes sense

src/views/tasks/ShowTasks.vue

@@ -141,7 +141,7 @@ export default {
 				},
 			})
 		},
-		loadPendingTasks() {
+		async loadPendingTasks() {
 			// Since this route is authentication only, users would get an error message if they access the page unauthenticated.
 			// Since this component is mounted as the home page before unauthenticated users get redirected
 			// to the login page, they will almost always see the error message.
@@ -163,7 +163,10 @@ export default {
 			if (this.showAll) {
 				this.setTitle(this.$t('task.show.titleCurrent'))
 			} else {
-				this.setTitle(this.$t('task.show.titleDates', { from: this.cStartDate.toLocaleDateString(), to: this.cEndDate.toLocaleDateString()}))
+				this.setTitle(this.$t('task.show.titleDates', {
+					from: this.cStartDate.toLocaleDateString(),
+					to: this.cEndDate.toLocaleDateString(),
+				}))
 			}
 
 			const params = {
@@ -197,21 +200,19 @@ export default {
 				}
 			}
 
-			this.$store.dispatch('tasks/loadTasks', params)
-				.then(r => {
+			const tasks = await this.$store.dispatch('tasks/loadTasks', params)
 
-					// Sort all tasks to put those with a due date before the ones without a due date, the
-					// soonest before the later ones.
-					// We can't use the api sorting here because that sorts tasks with a due date after
-					// ones without a due date.
-					r.sort((a, b) => {
-						return a.dueDate === null && b.dueDate === null ? -1 : 1
-					})
-					const tasks = r.filter(t => t.dueDate !== null).concat(r.filter(t => t.dueDate === null))
-
-					this.tasks = tasks
-				})
+			// FIXME: sort tasks in computed
+			// Sort all tasks to put those with a due date before the ones without a due date, the
+			// soonest before the later ones.
+			// We can't use the api sorting here because that sorts tasks with a due date after
+			// ones without a due date.
+			this.tasks = tasks.sort((a, b) => {
+				return Number(b.dueDate === null) - Number(a.dueDate === null)
+			})
 		},
+
+		// FIXME: this modification should happen in the store
 		updateTasks(updatedTask) {
 			for (const t in this.tasks) {
 				if (this.tasks[t].id === updatedTask.id) {
@@ -225,18 +226,21 @@ export default {
 				}
 			}
 		},
+
 		setDatesToNextWeek() {
 			this.cStartDate = new Date()
 			this.cEndDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
 			this.showOverdue = false
 			this.setDate()
 		},
+
 		setDatesToNextMonth() {
 			this.cStartDate = new Date()
 			this.cEndDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
 			this.showOverdue = false
 			this.setDate()
 		},
+
 		showTodaysTasks() {
 			const d = new Date()
 			this.cStartDate = new Date()

src/views/tasks/TaskDetailView.vue

@@ -561,23 +561,22 @@ export default {
 			return uploadFile(this.taskId, ...args)
 		},
 
-		loadTask(taskId) {
+		async loadTask(taskId) {
 			if (taskId === undefined) {
 				return
 			}
 
-			this.taskService.get({id: taskId})
-				.then(r => {
-					this.task = r
-					this.$store.commit('attachments/set', r.attachments)
-					this.taskColor = this.task.hexColor
-					this.setActiveFields()
-					this.setTitle(this.task.title)
-				})
-				.finally(() => {
-					this.$nextTick(() => this.visible = true)
-					this.scrollToHeading()
-				})
+			try {
+				this.task = await this.taskService.get({id: taskId})
+				this.$store.commit('attachments/set', this.task.attachments)
+				this.taskColor = this.task.hexColor
+				this.setActiveFields()
+				this.setTitle(this.task.title)
+			} finally {
+				this.scrollToHeading()
+				await this.$nextTick()
+				this.visible = true
+			}
 		},
 		scrollToHeading() {
 			this.$refs.heading.$el.scrollIntoView({block: 'center'})
@@ -633,6 +632,7 @@ export default {
 			}
 			this.$message.success({message: this.$t('task.detail.updateSuccess')}, actions)
 		},
+
 		setFieldActive(fieldName) {
 			this.activeFields[fieldName] = true
 			this.$nextTick(() => {
@@ -651,13 +651,13 @@ export default {
 				}
 			})
 		},
-		deleteTask() {
-			this.$store.dispatch('tasks/delete', this.task)
-				.then(() => {
-					this.$message.success({message: this.$t('task.detail.deleteSuccess')})
-					this.$router.push({name: 'list.index', params: {listId: this.task.listId}})
-				})
+
+		async deleteTask() {
+			await this.$store.dispatch('tasks/delete', this.task)
+			this.$message.success({message: this.$t('task.detail.deleteSuccess')})
+			this.$router.push({name: 'list.index', params: {listId: this.task.listId}})
 		},
+
 		toggleTaskDone() {
 			this.task.done = !this.task.done
 
@@ -665,36 +665,26 @@ export default {
 				playPop()
 			}
 
-			this.saveTask(true, () => this.toggleTaskDone())
+			this.saveTask(true, this.toggleTaskDone)
 		},
+
 		setDescriptionChanged(e) {
 			if (e.key === 'Enter' || e.key === 'Control') {
 				return
 			}
 			this.descriptionChanged = true
 		},
-		saveTaskIfDescriptionChanged() {
-			// We want to only save the description if it was changed.
-			// Since we can either trigger this with ctrl+enter or @change, it would be possible to save a task first
-			// with ctrl+enter and then with @change although nothing changed since the last save when @change gets fired.
-			// To only save one time we added this method.
-			if (this.descriptionChanged) {
-				this.descriptionChanged = false
-				this.saveTask()
-			}
-		},
+
 		async changeList(list) {
 			this.$store.commit('kanban/removeTaskInBucket', this.task)
 			this.task.listId = list.id
 			await this.saveTask()
 		},
-		toggleFavorite() {
+
+		async toggleFavorite() {
 			this.task.isFavorite = !this.task.isFavorite
-			this.taskService.update(this.task)
-				.then(t => {
-					this.task = t
-					this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
-				})
+			this.task = await this.taskService.update(this.task)
+			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
 		},
 	},
 }