src/components/tasks/partials/relatedTasks.vue

@@ -84,9 +84,11 @@
 			<span class="title">{{ rts.title }}</span>
 			<div class="tasks">
 				<div :key="t.id" class="task" v-for="t in rts.tasks">
-					<router-link
-						:to="{ name: $route.name, params: { id: t.id } }"
-						:class="{ 'is-strikethrough': t.done}">
+					<div class="is-flex is-align-items-center">
+						<Fancycheckbox class="task-done-checkbox" v-model="t.done" @change="toggleTaskDone(t)"/>
+						<router-link
+							:to="{ name: $route.name, params: { id: t.id } }"
+							:class="{ 'is-strikethrough': t.done}">
 						<span
 							class="different-list"
 							v-if="t.listId !== listId"
@@ -102,8 +104,9 @@
 								{{ t.differentList }} >
 							</span>
 						</span>
-						{{ t.title }}
-					</router-link>
+							{{ t.title }}
+						</router-link>
+					</div>
 					<BaseButton
 						v-if="editEnabled"
 						@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
@@ -145,10 +148,13 @@ import TaskService from '../../../services/task'
 import TaskModel from '../../../models/task'
 import TaskRelationService from '../../../services/taskRelation'
 import TaskRelationModel from '@/models/taskRelation'
-import { RELATION_KIND, RELATION_KINDS } from '@/types/IRelationKind'
+import {RELATION_KIND, RELATION_KINDS} from '@/types/IRelationKind'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import type {ITask} from '@/modelTypes/ITask'
+import {playPop} from '@/helpers/playPop'
 
 export default defineComponent({
 	name: 'relatedTasks',
@@ -169,6 +175,7 @@ export default defineComponent({
 		}
 	},
 	components: {
+		Fancycheckbox,
 		BaseButton,
 		Multiselect,
 	},
@@ -314,6 +321,25 @@ export default defineComponent({
 					}
 				})
 		},
+		
+		async toggleTaskDone(task: ITask) {
+			if (task.done) {
+				playPop()
+			}
+
+			await this.$store.dispatch('tasks/update', task)
+			
+			// Find the task in the list and update it so that it is correctly strike through
+			Object.entries(this.relatedTasks).forEach(([kind, tasks]) => {
+				tasks.forEach((t, key) => {
+					if (t.id === task.id) {
+						this.relatedTasks[kind][key] = task
+					}
+				})
+			})
+
+			this.$message.success({message: this.$t('task.detail.updateSuccess')})
+		},
 	},
 })
 </script>
@@ -387,5 +413,10 @@ export default defineComponent({
 	padding: 0.5rem;
 }
 
+.task-done-checkbox {
+	padding: 0;
+	height: 18px; // The exact height of the checkbox in the container
+}
+
 @include modal-transition();
 </style>