From 833cf056aa3faa548db80a6c20d4aa1cce15f3fe Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 7 Sep 2022 17:47:07 +0200
Subject: [PATCH 1/3] feat: allow marking a related task done directly from the
 list

---
 .../tasks/partials/relatedTasks.vue           | 43 ++++++++++++++++---
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 2e717fd95..8cb4783bb 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/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>
\ No newline at end of file
-- 
2.45.1


From f24ac01e3611c4aeaceb62ab69bf856f6c76e169 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 8 Sep 2022 13:51:47 +0200
Subject: [PATCH 2/3] feat: play pop sound from store

---
 src/components/tasks/partials/kanban-card.vue      | 4 ----
 src/components/tasks/partials/relatedTasks.vue     | 5 -----
 src/components/tasks/partials/singleTaskInList.vue | 6 +-----
 src/store/modules/tasks.ts                         | 4 ++++
 src/views/tasks/TaskDetailView.vue                 | 4 ----
 5 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 73abace13..66e7e9332 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -68,7 +68,6 @@
 <script lang="ts">
 import {defineComponent, type PropType} from 'vue'
 
-import {playPop} from '../../../helpers/playPop'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
 import User from '../../../components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
@@ -125,9 +124,6 @@ export default defineComponent({
 					...task,
 					done,
 				})
-				if (done) {
-					playPop()
-				}
 			} finally {
 				this.loadingInternal = false
 			}
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 8cb4783bb..c2d034be5 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -154,7 +154,6 @@ 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',
@@ -323,10 +322,6 @@ 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
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 5c466e428..a759d526e 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -107,7 +107,6 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import Fancycheckbox from '../../input/fancycheckbox.vue'
 import DeferTask from './defer-task.vue'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {playPop} from '@/helpers/playPop'
 import ChecklistSummary from './checklist-summary.vue'
 import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatDate'
 
@@ -195,10 +194,7 @@ export default defineComponent({
 
 		async markAsDone(checked: boolean) {
 			const updateFunc = async () => {
-				const task = await this.taskService.update(this.task)
-				if (this.task.done) {
-					playPop()
-				}
+				const task = await this.$store.dispatch('tasks/update', this.task)
 				this.task = task
 				this.$emit('task-updated', task)
 				this.$message.success({
diff --git a/src/store/modules/tasks.ts b/src/store/modules/tasks.ts
index 332286917..e448a33d8 100644
--- a/src/store/modules/tasks.ts
+++ b/src/store/modules/tasks.ts
@@ -25,6 +25,7 @@ import type { IAttachment } from '@/modelTypes/IAttachment'
 import type { IList } from '@/modelTypes/IList'
 
 import type { RootStoreState, TaskState } from '@/store/types'
+import {playPop} from '@/helpers/playPop'
 
 // IDEA: maybe use a small fuzzy search here to prevent errors
 function findPropertyByValue(object, key, value) {
@@ -94,6 +95,9 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 			try {
 				const updatedTask = await taskService.update(task)
 				ctx.commit('kanban/setTaskInBucket', updatedTask, {root: true})
+				if (task.done) {
+					playPop()
+				}
 				return updatedTask
 			} finally {
 				cancel()
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 903ca84d8..424f7d6ec 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -446,7 +446,6 @@ import ColorPicker from '../../components/input/colorPicker.vue'
 import heading from '@/components/tasks/partials/heading.vue'
 import Datepicker from '@/components/input/datepicker.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
-import {playPop} from '@/helpers/playPop'
 import TaskSubscription from '@/components/misc/subscription.vue'
 import {CURRENT_LIST} from '@/store/mutation-types'
 
@@ -716,9 +715,6 @@ export default defineComponent({
 				...this.task,
 				done: !this.task.done,
 			}
-			if (newTask.done) {
-				playPop()
-			}
 
 			this.saveTask({
 				task: newTask,
-- 
2.45.1


From 3f16d17cefeaa961de3df4dd82784fd56f4c381c Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 13 Sep 2022 21:56:05 +0200
Subject: [PATCH 3/3] chore: add FIXME

---
 src/components/tasks/partials/relatedTasks.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index c2d034be5..90f044e94 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -408,6 +408,9 @@ export default defineComponent({
 	padding: 0.5rem;
 }
 
+// FIXME: The height of the actual checkbox in the <Fancycheckbox/> component is too much resulting in a 
+//  weired positioning of the checkbox. Setting the height here is a workaround until we fix the styling 
+//  of the component.
 .task-done-checkbox {
 	padding: 0;
 	height: 18px; // The exact height of the checkbox in the container
-- 
2.45.1