feat: use async / await where it makes sense

src/components/tasks/partials/attachments.vue

@@ -218,21 +218,19 @@ export default {
 		uploadFiles(files) {
 			uploadFiles(this.attachmentService, this.taskId, files)
 		},
-		deleteAttachment() {
-			this.attachmentService
-				.delete(this.attachmentToDelete)
-				.then((r) => {
-					this.$store.commit(
-						'attachments/removeById',
-						this.attachmentToDelete.id,
-					)
-					this.$message.success(r)
-				})
-				.finally(() => {
-					this.showDeleteModal = false
-				})
+		async deleteAttachment() {
+			try {
+				const r = await this.attachmentService.delete(this.attachmentToDelete)
+				this.$store.commit(
+					'attachments/removeById',
+					this.attachmentToDelete.id,
+				)
+				this.$message.success(r)
+			} finally{
+				this.showDeleteModal = false
+			}
 		},
-		viewOrDownload(attachment) {
+		async viewOrDownload(attachment) {
 			if (
 				attachment.file.name.endsWith('.jpg') ||
 				attachment.file.name.endsWith('.png') ||
@@ -240,9 +238,7 @@ export default {
 				attachment.file.name.endsWith('.gif')
 			) {
 				this.showImageModal = true
-				this.attachmentService.getBlobUrl(attachment).then((url) => {
-					this.attachmentImageBlobUrl = url
-				})
+				this.attachmentImageBlobUrl = await this.attachmentService.getBlobUrl(attachment)
 			} else {
 				this.downloadAttachment(attachment)
 			}

src/components/tasks/partials/comments.vue

@@ -134,9 +134,9 @@
 
 		<transition name="modal">
 			<modal
-				@close="showDeleteModal = false"
-				@submit="deleteComment()"
 				v-if="showDeleteModal"
+				@close="showDeleteModal = false"
+				@submit="() => deleteComment(commentToDelete)"
 			>
 				<template #header><span>{{ $t('task.comment.delete') }}</span></template>
 
@@ -186,7 +186,6 @@ export default {
 			taskCommentService: new TaskCommentService(),
 			newComment: new TaskCommentModel(),
 			editorActive: true,
-			actions: {},
 
 			saved: null,
 			saving: null,
@@ -195,40 +194,46 @@ export default {
 	},
 	watch: {
 		taskId: {
-			handler(taskId) {
-				if (!this.enabled) {
-					return
-				}
-
-				this.loadComments()
-				this.newComment.taskId = taskId
-				this.commentEdit.taskId = taskId
-				this.commentToDelete.taskId = taskId
-			},
+			handler: 'loadComments',
 			immediate: true,
 		},
-		canWrite() {
-			this.makeActions()
+	},
+	computed: {
+		...mapState({
+			userAvatar: state => state.auth.info.getAvatarUrl(48),
+			enabled: state => state.config.taskCommentsEnabled,
+		}),
+		actions() {
+			if (!this.canWrite) {
+				return {}
+			}
+			return Object.fromEntries(this.comments.map((c) => ([
+				c.id,
+				[{
+					action: () => this.toggleDelete(c.id),
+					title: this.$t('misc.delete'),
+				}],
+			])))
 		},
 	},
-	computed: mapState({
-		userAvatar: state => state.auth.info.getAvatarUrl(48),
-		enabled: state => state.config.taskCommentsEnabled,
-	}),
+
 	methods: {
 		attachmentUpload(...args) {
 			return uploadFile(this.taskId, ...args)
 		},
 
-		loadComments() {
-			this.taskCommentService
-				.getAll({taskId: this.taskId})
-				.then(r => {
-					this.comments = r
-					this.makeActions()
-				})
+		async loadComments(taskId) {
+			if (!this.enabled) {
+				return
+			}
+
+			this.newComment.taskId = taskId
+			this.commentEdit.taskId = taskId
+			this.commentToDelete.taskId = taskId
+			this.comments = await this.taskCommentService.getAll({taskId})
 		},
-		addComment() {
+
+		async addComment() {
 			if (this.newComment.comment === '') {
 				return
 			}
@@ -242,27 +247,27 @@ export default {
 			this.$nextTick(() => (this.editorActive = true))
 			this.creating = true
 
-			this.taskCommentService
-				.create(this.newComment)
-				.then((r) => {
-					this.comments.push(r)
-					this.newComment.comment = ''
-					this.$message.success({message: this.$t('task.comment.addedSuccess')})
-					this.makeActions()
-				})
-				.finally(() => {
-					this.creating = false
-				})
+			try {
+				const comment = await this.taskCommentService.create(this.newComment)
+				this.comments.push(comment)
+				this.newComment.comment = ''
+				this.$message.success({message: this.$t('task.comment.addedSuccess')})
+			} finally {
+				this.creating = false
+			}
 		},
+
 		toggleEdit(comment) {
 			this.isCommentEdit = !this.isCommentEdit
 			this.commentEdit = comment
 		},
+
 		toggleDelete(commentId) {
 			this.showDeleteModal = !this.showDeleteModal
 			this.commentToDelete.id = commentId
 		},
-		editComment() {
+
+		async editComment() {
 			if (this.commentEdit.comment === '') {
 				return
 			}
@@ -270,48 +275,30 @@ export default {
 			this.saving = this.commentEdit.id
 
 			this.commentEdit.taskId = this.taskId
-			this.taskCommentService
-				.update(this.commentEdit)
-				.then((r) => {
-					for (const c in this.comments) {
-						if (this.comments[c].id === this.commentEdit.id) {
-							this.comments[c] = r
-						}
+			try {
+				const comment = this.taskCommentService.update(this.commentEdit)
+				for (const c in this.comments) {
+					if (this.comments[c].id === this.commentEdit.id) {
+						this.comments[c] = comment
 					}
-					this.saved = this.commentEdit.id
-					setTimeout(() => {
-						this.saved = null
-					}, 2000)
-				})
-				.finally(() => {
-					this.isCommentEdit = false
-					this.saving = null
-				})
+				}
+				this.saved = this.commentEdit.id
+				setTimeout(() => {
+					this.saved = null
+				}, 2000)
+			} finally {
+				this.isCommentEdit = false
+				this.saving = null
+			}
 		},
-		deleteComment() {
-			this.taskCommentService
-				.delete(this.commentToDelete)
-				.then(() => {
-					for (const a in this.comments) {
-						if (this.comments[a].id === this.commentToDelete.id) {
-							this.comments.splice(a, 1)
-						}
-					}
-				})
-				.finally(() => {
-					this.showDeleteModal = false
-				})
-		},
-		makeActions() {
-			if (this.canWrite) {
-				this.comments.forEach((c) => {
-					this.actions[c.id] = [
-						{
-							action: () => this.toggleDelete(c.id),
-							title: this.$t('misc.delete'),
-						},
-					]
-				})
+
+		async deleteComment(commentToDelete) {
+			try {
+				await this.taskCommentService.delete(commentToDelete)
+				const index = this.comments.findIndex(({id}) => id === commentToDelete.id)
+				this.comments.splice(index, 1)
+			} finally {
+				this.showDeleteModal = false
 			}
 		},
 	},

src/components/tasks/partials/defer-task.vue

@@ -112,7 +112,8 @@ export default {
 			this.dueDate = this.dueDate.setDate(this.dueDate.getDate() + days)
 			this.updateDueDate()
 		},
-		updateDueDate() {
+
+		async updateDueDate() {
 			if (!this.dueDate) {
 				return
 			}
@@ -122,13 +123,10 @@ export default {
 			}
 
 			this.task.dueDate = new Date(this.dueDate)
-			this.taskService
-				.update(this.task)
-				.then((r) => {
-					this.lastValue = r.dueDate
-					this.task = r
-					this.$emit('update:modelValue', r)
-				})
+			const task = await this.taskService.update(this.task)
+			this.lastValue = task.dueDate
+			this.task = task
+			this.$emit('update:modelValue', task)
 		},
 	},
 }

src/components/tasks/partials/description.vue

@@ -71,21 +71,19 @@ export default {
 		},
 	},
 	methods: {
-		save() {
+		async save() {
 			this.saving = true
 
-			this.$store.dispatch('tasks/update', this.task)
-				.then(t => {
-					this.task = t
-					this.$emit('update:modelValue', t)
-					this.saved = true
-					setTimeout(() => {
-						this.saved = false
-					}, 2000)
-				})
-				.finally(() => {
-					this.saving = false
-				})
+			try {
+				this.task = await this.$store.dispatch('tasks/update', this.task)
+				this.$emit('update:modelValue', this.task)
+				this.saved = true
+				setTimeout(() => {
+					this.saved = false
+				}, 2000)
+			} finally {
+				this.saving = false
+			}
 		},
 	},
 }

src/components/tasks/partials/editAssignees.vue

@@ -78,40 +78,40 @@ export default {
 		},
 	},
 	methods: {
-		addAssignee(user) {
-			this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId})
-				.then(() => {
-					this.$emit('update:modelValue', this.assignees)
-					this.$message.success({message: this.$t('task.assignee.assignSuccess')})
-				})
+		async addAssignee(user) {
+			await this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId})
+			this.$emit('update:modelValue', this.assignees)
+			this.$message.success({message: this.$t('task.assignee.assignSuccess')})
 		},
-		removeAssignee(user) {
-			this.$store.dispatch('tasks/removeAssignee', {user: user, taskId: this.taskId})
-				.then(() => {
-					// Remove the assignee from the list
-					for (const a in this.assignees) {
-						if (this.assignees[a].id === user.id) {
-							this.assignees.splice(a, 1)
-						}
-					}
-					this.$message.success({message: this.$t('task.assignee.unassignSuccess')})
-				})
+
+		async removeAssignee(user) {
+			await this.$store.dispatch('tasks/removeAssignee', {user: user, taskId: this.taskId})
+
+			// Remove the assignee from the list
+			for (const a in this.assignees) {
+				if (this.assignees[a].id === user.id) {
+					this.assignees.splice(a, 1)
+				}
+			}
+			this.$message.success({message: this.$t('task.assignee.unassignSuccess')})
 		},
-		findUser(query) {
+
+		async findUser(query) {
 			if (query === '') {
 				this.clearAllFoundUsers()
 				return
 			}
 
-			this.listUserService.getAll({listId: this.listId}, {s: query})
-				.then(response => {
-					// Filter the results to not include users who are already assigned
-					this.foundUsers = response.filter(({id}) => !includesById(this.assignees, id))
-				})
+			const response = await this.listUserService.getAll({listId: this.listId}, {s: query})
+
+			// Filter the results to not include users who are already assigned
+			this.foundUsers = response.filter(({id}) => !includesById(this.assignees, id))
 		},
+
 		clearAllFoundUsers() {
 			this.foundUsers = []
 		},
+
 		focus() {
 			this.$refs.multiselect.focus()
 		},

src/components/tasks/partials/editLabels.vue

@@ -93,7 +93,8 @@ export default {
 		findLabel(query) {
 			this.query = query
 		},
-		addLabel(label, showNotification = true) {
+
+		async addLabel(label, showNotification = true) {
 			const bubble = () => {
 				this.$emit('update:modelValue', this.labels)
 				this.$emit('change', this.labels)
@@ -104,15 +105,14 @@ export default {
 				return
 			}
 
-			this.$store.dispatch('tasks/addLabel', {label: label, taskId: this.taskId})
-				.then(() => {
-					bubble()
-					if (showNotification) {
-						this.$message.success({message: this.$t('task.label.addSuccess')})
-					}
-				})
+			await this.$store.dispatch('tasks/addLabel', {label: label, taskId: this.taskId})
+			bubble()
+			if (showNotification) {
+				this.$message.success({message: this.$t('task.label.addSuccess')})
+			}
 		},
-		removeLabel(label) {
+
+		async removeLabel(label) {
 			const removeFromState = () => {
 				for (const l in this.labels) {
 					if (this.labels[l].id === label.id) {
@@ -128,24 +128,21 @@ export default {
 				return
 			}
 
-			this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
-				.then(() => {
-					removeFromState()
-					this.$message.success({message: this.$t('task.label.removeSuccess')})
-				})
+			await this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
+			removeFromState()
+			this.$message.success({message: this.$t('task.label.removeSuccess')})
 		},
-		createAndAddLabel(title) {
+
+		async createAndAddLabel(title) {
 			if (this.taskId === 0) {
 				return
 			}
 
 			const newLabel = new LabelModel({title: title})
-			this.$store.dispatch('labels/createLabel', newLabel)
-				.then(r => {
-					this.addLabel(r, false)
-					this.labels.push(r)
-					this.$message.success({message: this.$t('task.label.addCreateSuccess')})
-				})
+			const label = await this.$store.dispatch('labels/createLabel', newLabel)
+			this.addLabel(label, false)
+			this.labels.push(label)
+			this.$message.success({message: this.$t('task.label.addCreateSuccess')})
 		},
 
 	},

src/components/tasks/partials/heading.vue

@@ -58,7 +58,7 @@ export default {
 	emits: ['update:modelValue'],
 
 	methods: {
-		save(title) {
+		async save(title) {
 			// We only want to save if the title was actually changed.
 			// Because the contenteditable does not have a change event
 			// we're building it ourselves and only continue
@@ -74,17 +74,17 @@ export default {
 				title,
 			}
 
-			this.$store.dispatch('tasks/update', newTask)
-				.then((task) => {
-					this.$emit('update:modelValue', task)
-					this.showSavedMessage = true
-					setTimeout(() => {
-						this.showSavedMessage = false
-					}, 2000)
-				})
-				.finally(() => {
-					this.saving = false
-				})
+			try {
+				const task = await this.$store.dispatch('tasks/update', newTask)
+				this.$emit('update:modelValue', task)
+				this.showSavedMessage = true
+				setTimeout(() => {
+					this.showSavedMessage = false
+				}, 2000)
+			}
+			finally {
+				this.saving = false
+			}
 		},
 	},
 }

src/components/tasks/partials/kanban-card.vue

@@ -6,9 +6,9 @@
 			'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
 		}"
 		:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
-		@click.ctrl="() => markTaskAsDone(task)"
+		@click.ctrl="() => toggleTaskDone(task)"
 		@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
-		@click.meta="() => markTaskAsDone(task)"
+		@click.meta="() => toggleTaskDone(task)"
 		class="task loader-container draggable"
 	>
 		<span class="task-id">
@@ -93,20 +93,19 @@ export default {
 		},
 	},
 	methods: {
-		markTaskAsDone(task) {
+		async toggleTaskDone(task) {
 			this.loadingInternal = true
-			this.$store.dispatch('tasks/update', {
-				...task,
-				done: !task.done,
-			})
-				.then(() => {
-					if (task.done) {
-						playPop()
-					}
-				})
-				.finally(() => {
-					this.loadingInternal = false
+			try {
+				await this.$store.dispatch('tasks/update', {
+					...task,
+					done: !task.done,
 				})
+				if (task.done) {
+					playPop()
+				}
+			} finally {
+				this.loadingInternal = false
+			}
 		},
 	},
 }

src/components/tasks/partials/listSearch.vue

@@ -50,25 +50,25 @@ export default {
 		},
 	},
 	methods: {
-		findLists(query) {
+		async findLists(query) {
 			if (query === '') {
 				this.clearAll()
 				return
 			}
 
-			this.listSerivce.getAll({}, {s: query})
-				.then(response => {
-					this.foundLists = response
-				})
+			this.foundLists = await this.listSerivce.getAll({}, {s: query})
 		},
+
 		clearAll() {
 			this.foundLists = []
 		},
+
 		select(list) {
 			this.list = list
 			this.$emit('selected', list)
 			this.$emit('update:modelValue', list)
 		},
+
 		namespace(namespaceId) {
 			const namespace = this.$store.getters['namespaces/getNamespaceById'](namespaceId)
 			if (namespace !== null) {

src/components/tasks/partials/relatedTasks.vue

@@ -188,58 +188,59 @@ export default {
 		async findTasks(query) {
 			this.foundTasks = await this.taskService.getAll({}, {s: query})
 		},
-		addTaskRelation() {
-			let rel = new TaskRelationModel({
+
+		async addTaskRelation() {
+			const rel = new TaskRelationModel({
 				taskId: this.taskId,
 				otherTaskId: this.newTaskRelationTask.id,
 				relationKind: this.newTaskRelationKind,
 			})
-			this.taskRelationService.create(rel)
-				.then(() => {
-					if (!this.relatedTasks[this.newTaskRelationKind]) {
-						this.relatedTasks[this.newTaskRelationKind] = []
-					}
-					this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
-					this.newTaskRelationTask = null
-					this.saved = true
-					this.showNewRelationForm = false
-					setTimeout(() => {
-						this.saved = false
-					}, 2000)
-				})
+			await this.taskRelationService.create(rel)
+			if (!this.relatedTasks[this.newTaskRelationKind]) {
+				this.relatedTasks[this.newTaskRelationKind] = []
+			}
+			this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
+			this.newTaskRelationTask = null
+			this.saved = true
+			this.showNewRelationForm = false
+			setTimeout(() => {
+				this.saved = false
+			}, 2000)
 		},
-		removeTaskRelation() {
+
+		async removeTaskRelation() {
 			const rel = new TaskRelationModel({
 				relationKind: this.relationToDelete.relationKind,
 				taskId: this.taskId,
 				otherTaskId: this.relationToDelete.otherTaskId,
 			})
-			this.taskRelationService.delete(rel)
-				.then(() => {
-					Object.keys(this.relatedTasks).forEach(relationKind => {
-						for (const t in this.relatedTasks[relationKind]) {
-							if (this.relatedTasks[relationKind][t].id === this.relationToDelete.otherTaskId && relationKind === this.relationToDelete.relationKind) {
-								this.relatedTasks[relationKind].splice(t, 1)
-							}
-						}
-					})
-					this.saved = true
-					setTimeout(() => {
-						this.saved = false
-					}, 2000)
-				})
-				.finally(() => {
-					this.showDeleteModal = false
+			try {
+				await this.taskRelationService.delete(rel)
+
+				Object.entries(this.relatedTasks).some(([relationKind, t]) => {
+					const found = this.relatedTasks[relationKind][t].id === this.relationToDelete.otherTaskId &&
+						relationKind === this.relationToDelete.relationKind
+					if (!found) return false
+
+					this.relatedTasks[relationKind].splice(t, 1)
+					return true
 				})
+
+				this.saved = true
+				setTimeout(() => {
+					this.saved = false
+				}, 2000)
+			} finally {
+				this.showDeleteModal = false
+			}
 		},
-		createAndRelateTask(title) {
+
+		async createAndRelateTask(title) {
 			const newTask = new TaskModel({title: title, listId: this.listId})
-			this.taskService.create(newTask)
-				.then(r => {
-					this.newTaskRelationTask = r
-					this.addTaskRelation()
-				})
+			this.newTaskRelationTask = await this.taskService.create(newTask)
+			await this.addTaskRelation()
 		},
+
 		relationKindTitle(kind, length) {
 			return this.$tc(`task.relation.kinds.${kind}`, length)
 		},

src/components/tasks/partials/singleTaskInList.vue

@@ -166,50 +166,47 @@ export default {
 		},
 	},
 	methods: {
-		markAsDone(checked) {
-			const updateFunc = () => {
-				this.taskService.update(this.task)
-					.then(t => {
-						if (this.task.done) {
-							playPop()
-						}
-						this.task = t
-						this.$emit('task-updated', t)
-						this.$message.success({
-							message: this.task.done ?
-								this.$t('task.doneSuccess') :
-								this.$t('task.undoneSuccess'),
-						}, [{
-							title: 'Undo',
-							callback: () => {
-								this.task.done = !this.task.done
-								this.markAsDone(!checked)
-							},
-						}])
-					})
+		async markAsDone(checked) {
+			const updateFunc = async () => {
+				const task = await this.taskService.update(this.task)
+				if (this.task.done) {
+					playPop()
+				}
+				this.task = task
+				this.$emit('task-updated', task)
+				this.$message.success({
+					message: this.task.done ?
+						this.$t('task.doneSuccess') :
+						this.$t('task.undoneSuccess'),
+				}, [{
+					title: 'Undo',
+					callback() {
+						this.task.done = !this.task.done
+						this.markAsDone(!checked)
+					},
+				}])
 			}
 
 			if (checked) {
 				setTimeout(updateFunc, 300) // Delay it to show the animation when marking a task as done
 			} else {
-				updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
+				await updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
 			}
 		},
-		toggleFavorite() {
+
+		async toggleFavorite() {
 			this.task.isFavorite = !this.task.isFavorite
-			this.taskService.update(this.task)
-				.then(t => {
-					this.task = t
-					this.$emit('task-updated', t)
-					this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
-				})
+			this.task = await this.taskService.update(this.task)
+			this.$emit('task-updated', this.task)
+			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
 		},
 		hideDeferDueDatePopup(e) {
-			if (this.showDefer) {
-				closeWhenClickedOutside(e, this.$refs.deferDueDate.$el, () => {
-					this.showDefer = false
-				})
+			if (!this.showDefer) {
+				return
 			}
+			closeWhenClickedOutside(e, this.$refs.deferDueDate.$el, () => {
+				this.showDefer = false
+			})
 		},
 	},
 }