From ec11bf0468e52b165a3f4835ddc6a70254167ba7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 12 Jan 2024 15:37:04 +0100
Subject: [PATCH] fix: Add debounce to update due date
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/card/CardSidebarTabDetails.vue | 8 +++++++-
 src/components/card/DueDateSelector.vue       | 5 ++++-
 src/views/CreateNewCardCustomPicker.vue       | 5 ++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
index df21c0ecb..241cdfadf 100644
--- a/src/components/card/CardSidebarTabDetails.vue
+++ b/src/components/card/CardSidebarTabDetails.vue
@@ -37,7 +37,8 @@
 
 		<DueDateSelector :card="card"
 			:can-edit="canEdit"
-			@change="updateCardDue" />
+			@change="updateCardDue"
+			@input="debouncedUpdateCardDue" />
 
 		<div v-if="projectsEnabled" class="section-wrapper">
 			<CollectionList v-if="card.id"
@@ -68,6 +69,7 @@ import Description from './Description.vue'
 import TagSelector from './TagSelector.vue'
 import AssignmentSelector from './AssignmentSelector.vue'
 import DueDateSelector from './DueDateSelector.vue'
+import { debounce } from 'lodash'
 
 export default {
 	name: 'CardSidebarTabDetails',
@@ -162,6 +164,10 @@ export default {
 			})
 		},
 
+		debouncedUpdateCardDue: debounce(function(val) {
+			this.updateCardDue(val)
+		}, 500),
+
 		addLabelToCard(newLabel) {
 			this.copiedCard.labels.push(newLabel)
 			const data = {
diff --git a/src/components/card/DueDateSelector.vue b/src/components/card/DueDateSelector.vue
index 1bfb8bd88..eb2680827 100644
--- a/src/components/card/DueDateSelector.vue
+++ b/src/components/card/DueDateSelector.vue
@@ -156,7 +156,7 @@ export default defineComponent({
 				return this.card?.duedate ? new Date(this.card.duedate) : null
 			},
 			set(val) {
-				this.$emit('change', val ? new Date(val) : null)
+				this.$emit('input', val ? new Date(val) : null)
 			},
 		},
 
@@ -216,9 +216,12 @@ export default defineComponent({
 		},
 		removeDue() {
 			this.duedate = null
+			this.$emit('change', null)
+
 		},
 		selectShortcut(shortcut) {
 			this.duedate = shortcut.timestamp
+			this.$emit('change', shortcut.timestamp)
 		},
 		getTimestamp(momentObject) {
 			return momentObject?.minute(0).second(0).millisecond(0).toDate() || null
diff --git a/src/views/CreateNewCardCustomPicker.vue b/src/views/CreateNewCardCustomPicker.vue
index 90a61121c..32824b916 100644
--- a/src/views/CreateNewCardCustomPicker.vue
+++ b/src/views/CreateNewCardCustomPicker.vue
@@ -64,7 +64,10 @@
 				@select="onSelectUser"
 				@remove="onRemoveUser" />
 
-			<DueDateSelector :card="card" :can-edit="!loading && !!selectedBoard" @change="updateCardDue" />
+			<DueDateSelector :card="card"
+				:can-edit="!loading && !!selectedBoard"
+				@change="updateCardDue"
+				@input="updateCardDue" />
 
 			<Description :key="card.id"
 				:card="card"