From f1641a184773eb8a3d0c10457bf4b1a1570a06ca Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 18 Jul 2025 18:18:19 +0200
Subject: [PATCH] feat(task): autosave description on route leave (#1140)

---
 frontend/cypress/e2e/task/task.spec.ts        | 23 +++++++++++++++++++
 .../components/tasks/partials/Description.vue | 17 +++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/frontend/cypress/e2e/task/task.spec.ts b/frontend/cypress/e2e/task/task.spec.ts
index 0d8f4b225..b0029600d 100644
--- a/frontend/cypress/e2e/task/task.spec.ts
+++ b/frontend/cypress/e2e/task/task.spec.ts
@@ -291,6 +291,29 @@ describe('Task', () => {
 				.should('exist')
 		})
 
+		it('autosaves the description when leaving the task view', () => {
+			TaskFactory.create(1, {
+				id: 1,
+				project_id: projects[0].id,
+				description: 'Old Description',
+			})
+
+			cy.visit('/tasks/1')
+			
+			cy.get('.task-view .details.content.description .tiptap button.done-edit', {timeout: 30_000})
+				.click()
+			cy.get('.task-view .details.content.description .tiptap__editor .tiptap.ProseMirror')
+				.type('{selectall}New Description')
+			
+			cy.get('.task-view h6.subtitle a')
+				.first()
+				.click()
+			
+			cy.visit('/tasks/1')
+			cy.get('.task-view .details.content.description')
+				.should('contain.text', 'New Description')
+		})
+
 		it('Shows an empty editor when the description of a task is empty', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
diff --git a/frontend/src/components/tasks/partials/Description.vue b/frontend/src/components/tasks/partials/Description.vue
index 980b8af6f..be4a0bb1a 100644
--- a/frontend/src/components/tasks/partials/Description.vue
+++ b/frontend/src/components/tasks/partials/Description.vue
@@ -38,7 +38,8 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watchEffect, onBeforeUnmount} from 'vue'
+import {ref, computed, watchEffect, onMounted, onBeforeUnmount} from 'vue'
+import {onBeforeRouteLeave} from 'vue-router'
 
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import Editor from '@/components/input/AsyncEditor'
@@ -73,6 +74,10 @@ const loading = computed(() => taskStore.isLoading)
 
 const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 
+onMounted(() => {
+	window.addEventListener('beforeunload', save)
+})
+
 async function saveWithDelay() {
 	if (changeTimeout.value !== null) {
 		clearTimeout(changeTimeout.value)
@@ -87,8 +92,11 @@ onBeforeUnmount(() => {
 	if (changeTimeout.value !== null) {
 		clearTimeout(changeTimeout.value)
 	}
+	window.removeEventListener('beforeunload', save)
 })
 
+onBeforeRouteLeave(() => save())
+
 async function save() {
 	if (changeTimeout.value !== null) {
 		clearTimeout(changeTimeout.value)
@@ -107,6 +115,13 @@ async function save() {
 		setTimeout(() => {
 			saved.value = false
 		}, 2000)
+	} catch (error) {
+		// If the task was deleted (404), silently skip saving
+		if (error?.response?.status === 404) {
+			return
+		}
+		// Re-throw other errors
+		throw error
 	} finally {
 		saving.value = false
 	}