From 4c4adfdf4e79eff3e101d9f0bd68bc3e5bb76495 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Sat, 12 Nov 2022 16:14:32 +0000
Subject: [PATCH] fix: reactive const assignment (#2692)

Resolves #2691

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2692
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 src/components/tasks/partials/heading.vue    |  4 +---
 src/components/tasks/partials/listSearch.vue | 17 ++++++++-----
 src/views/tasks/TaskDetailView.vue           | 25 +++++++++++++-------
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue
index 73758a9fd..5fab34b74 100644
--- a/src/components/tasks/partials/heading.vue
+++ b/src/components/tasks/partials/heading.vue
@@ -85,9 +85,7 @@ const showSavedMessage = ref(false)
 
 async function save(title: string) {
 	// 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
-	// if the task title changed.
+	// so we only continue if the task title changed.
 	if (title === props.task.title) {
 		return
 	}
diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue
index 2774f66bb..7e42e152f 100644
--- a/src/components/tasks/partials/listSearch.vue
+++ b/src/components/tasks/partials/listSearch.vue
@@ -2,12 +2,13 @@
 	<Multiselect
 		class="control is-expanded"
 		:placeholder="$t('list.search')"
-		@search="findLists"
 		:search-results="foundLists"
-		@select="select"
 		label="title"
-		v-model="list"
 		:select-placeholder="$t('list.searchSelect')"
+		:model-value="list"
+		@update:model-value="Object.assign(list, $event)"
+		@select="select"
+		@search="findLists"
 	>
 		<template #searchResult="{option}">
 			<span class="list-namespace-title search-result">{{ namespace((option as IList).namespaceId) }} ></span>
@@ -20,12 +21,16 @@
 import {reactive, ref, watch} from 'vue'
 import type {PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
-import ListModel from '@/models/list'
+
 import type {IList} from '@/modelTypes/IList'
-import Multiselect from '@/components/input/multiselect.vue'
+import type {INamespace} from '@/modelTypes/INamespace'
+
 import {useListStore} from '@/stores/lists'
 import {useNamespaceStore} from '@/stores/namespaces'
-import type { INamespace } from '@/modelTypes/INamespace'
+
+import ListModel from '@/models/list'
+
+import Multiselect from '@/components/input/multiselect.vue'
 
 const props = defineProps({
 	modelValue: {
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index f337a18af..6b7a71918 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -8,7 +8,12 @@
 		}"
 	>
 		<div class="task-view">
-			<Heading v-model:task="task" :can-write="canWrite" ref="heading"/>
+			<Heading
+				:task="task"
+				@update:task="Object.assign(task, $event)"
+				:can-write="canWrite"
+				ref="heading"
+			/>
 			<h6 class="subtitle" v-if="parent && parent.namespace && parent.list">
 				{{ getNamespaceTitle(parent.namespace) }} >
 				<router-link :to="{ name: 'list.index', params: { listId: parent.list.id } }">
@@ -61,14 +66,14 @@
 								<div class="date-input">
 									<datepicker
 										v-model="task.dueDate"
-										@close-on-change="() => saveTask()"
+										@close-on-change="saveTask()"
 										:choose-date-label="$t('task.detail.chooseDueDate')"
 										:disabled="taskService.loading || !canWrite"
 										:ref="e => setFieldRef('dueDate', e)"
 									/>
 									<BaseButton
-										@click="() => {task.dueDate = null;saveTask()}"
 										v-if="task.dueDate && canWrite"
+										@click="() => {task.dueDate = null;saveTask()}"
 										class="remove">
 										<span class="icon is-small">
 											<icon icon="times"></icon>
@@ -101,7 +106,7 @@
 								<div class="date-input">
 									<datepicker
 										v-model="task.startDate"
-										@close-on-change="() => saveTask()"
+										@close-on-change="saveTask()"
 										:choose-date-label="$t('task.detail.chooseStartDate')"
 										:disabled="taskService.loading || !canWrite"
 										:ref="e => setFieldRef('startDate', e)"
@@ -128,7 +133,7 @@
 								<div class="date-input">
 									<datepicker
 										v-model="task.endDate"
-										@close-on-change="() => saveTask()"
+										@close-on-change="saveTask()"
 										:choose-date-label="$t('task.detail.chooseEndDate')"
 										:disabled="taskService.loading || !canWrite"
 										:ref="e => setFieldRef('endDate', e)"
@@ -179,8 +184,11 @@
 								<repeat-after
 									:disabled="!canWrite"
 									:ref="e => setFieldRef('repeatAfter', e)"
-									v-model="task"
-									@update:model-value="saveTask"
+									:model-value="task"
+									@update:model-value="(newTask) => {
+										Object.assign(task, newTask)
+										saveTask()
+									}"
 								/>
 							</div>
 						</transition>
@@ -219,7 +227,8 @@
 					<!-- Description -->
 					<div class="details content description">
 						<description
-							v-model="task"
+							:model-value="task"
+							@update:modelValue="Object.assign(task, $event)"
 							:can-write="canWrite"
 							:attachment-upload="attachmentUpload"
 						/>