chore: addressing ui concerns

frontend/src/components/tasks/partials/SingleTaskInProject.vue

@@ -13,12 +13,12 @@
 			@keyup.enter="openTaskDetail"
 		>
 			<span
-				v-tooltip="!canMarkAsDone ? $t('task.readOnlyCheckbox') : ''"
+				v-tooltip="!canMarkAsDone ? $t('task.readOnlyCheckbox') : isBlockedByIncomplete ? $t('task.blockedCheckbox') : ''"
 				class="is-inline-flex is-align-items-center"
 			>
 				<FancyCheckbox
 					v-model="task.done"
-					:disabled="isArchived || disabled || !canMarkAsDone"
+					:disabled="isArchived || disabled || !canMarkAsDone || isBlockedByIncomplete"
 					:aria-label="$t('task.detail.markAsDone', {task: task.title})"
 					@update:modelValue="markAsDone"
 					@click.stop
@@ -219,7 +219,8 @@ import Popup from '@/components/misc/Popup.vue'
 import TaskService from '@/services/task'
 
 import {formatDisplayDate, formatISO, formatDateLong} from '@/helpers/time/formatDate'
-import {success} from '@/message'
+import {success, error} from '@/message'
+import {RELATION_KIND} from '@/types/IRelationKind'
 
 import {useProjectStore} from '@/stores/projects'
 import {useBaseStore} from '@/stores/base'
@@ -323,13 +324,23 @@ const isOverdue = computed(() => (
 	task.value.dueDate.getTime() <= now.value.getTime()
 ))
 
+const isBlockedByIncomplete = computed(() =>
+	task.value.relatedTasks?.[RELATION_KIND.BLOCKED]?.some(t => !t.done) ?? false
+)
+
 let oldTask
 
 async function markAsDone(checked: boolean, wasReverted: boolean = false) {
 	const updateFunc = async () => {
 		oldTask = {...task.value}
-		const newTask = await taskStore.update(task.value)
-		task.value = newTask
+		try {
+			const newTask = await taskStore.update(task.value)
+			task.value = newTask
+		} catch (e) {
+			task.value.done = !checked
+			error(e)
+			return
+		}
 
 		updateDueDate()
 
@@ -340,7 +351,7 @@ async function markAsDone(checked: boolean, wasReverted: boolean = false) {
 		if (checked) {
 			playPopSound()
 		}
-		emit('taskUpdated', newTask)
+		emit('taskUpdated', task.value)
 
 		let message = t('task.doneSuccess')
 		if (!task.value.done && !isRepeating.value) {

frontend/src/i18n/lang/en.json

@@ -939,6 +939,7 @@
     "doneSuccess": "The task was successfully marked as done.",
     "undoneSuccess": "The task was successfully un-marked as done.",
     "readOnlyCheckbox": "You only have read access to this task and cannot mark it as done.",
+    "blockedCheckbox": "This task is blocked by incomplete tasks and cannot be marked as done.",
     "movedToProject": "The task was moved to {project}.",
     "undo": "Undo",
     "checklistTotal": "{checked} of {total} tasks",
@@ -1457,7 +1458,8 @@
     "13002": "The provided link share password is invalid.",
     "13003": "The provided link share token is invalid.",
     "14001": "The provided api token is invalid.",
-    "14002": "The permission {permission} of group {group} is invalid."
+    "14002": "The permission {permission} of group {group} is invalid.",
+    "20001": "This task is blocked by incomplete tasks and cannot be marked as done."
   },
   "about": {
     "title": "About",

frontend/src/views/tasks/TaskDetailView.vue

@@ -441,7 +441,9 @@
 					<template v-if="canWrite">
 						<XButton
 							v-shortcut="'KeyT'"
+							v-tooltip="!task.done && isBlockedByIncomplete ? $t('task.blockedCheckbox') : ''"
 							:class="{'is-pending': !task.done}"
+							:disabled="!task.done && isBlockedByIncomplete"
 							class="button--mark-done"
 							icon="check-double"
 							variant="secondary"
@@ -708,8 +710,9 @@ import {useConfigStore} from '@/stores/config'
 import {useTitle} from '@/composables/useTitle'
 import {useTaskDetailShortcuts} from '@/composables/useTaskDetailShortcuts'
 
-import {success} from '@/message'
+import {success, error} from '@/message'
 import type {Action as MessageAction} from '@/message'
+import {RELATION_KIND} from '@/types/IRelationKind'
 
 const props = defineProps<{
 	taskId: ITask['id'],
@@ -836,6 +839,10 @@ const color = computed(() => {
 
 const isModal = computed(() => Boolean(props.backdropView))
 
+const isBlockedByIncomplete = computed(() =>
+	task.value.relatedTasks?.[RELATION_KIND.BLOCKED]?.some(t => !t.done) ?? false
+)
+
 async function attachmentUpload(file: File, onSuccess?: (url: string) => void) {
 	const uploaded = await uploadFile(props.taskId, file, onSuccess)
 	if (uploaded.length > 0) {
@@ -1106,7 +1113,14 @@ async function saveTask(
 		currentTask.endDate = currentTask.dueDate
 	}
 
-	const updatedTask = await taskStore.update(currentTask) // TODO: markraw ?
+	let updatedTask: ITask
+	try {
+		updatedTask = await taskStore.update(currentTask) // TODO: markraw ?
+	} catch (e) {
+		task.value.done = !currentTask.done
+		error(e)
+		return
+	}
 	Object.assign(task.value, updatedTask)
 	setActiveFields()