fix(task): bubble date changes from the picker up

Resolves https://github.com/go-vikunja/frontend/issues/142

src/components/input/datepickerInline.vue

@@ -128,9 +128,11 @@ const flatPickrDate = computed({
 			return
 		}
 
-		const oldDate = formatDate(date.value, 'yyy-LL-dd H:mm')
-		if (oldDate !== newValue) {
-			return
+		if (date.value !== null) {
+			const oldDate = formatDate(date.value, 'yyy-LL-dd H:mm')
+			if (oldDate === newValue) {
+				return
+			}
 		}
 		date.value = createDateFromString(newValue)
 		updateData()

src/components/misc/popup.vue

@@ -1,5 +1,5 @@
 <template>
-	<slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
+	<slot name="trigger" :isOpen="open" :toggle="toggle" :close="close"></slot>
 	<div
 		class="popup"
 		:class="{
@@ -8,7 +8,7 @@
 		}"
 		ref="popup"
 	>
-		<slot name="content" :isOpen="open" :toggle="toggle"/>
+		<slot name="content" :isOpen="open" :toggle="toggle" :close="close"/>
 	</div>
 </template>
 

src/components/tasks/partials/reminder-detail.vue

@@ -9,7 +9,7 @@
 					{{ reminderText }}
 				</SimpleButton>
 			</template>
-			<template #content="{isOpen, toggle}">
+			<template #content="{isOpen, close}">
 				<Card class="reminder-options-popup" :class="{'is-open': isOpen}" :padding="false">
 					<div class="options" v-if="activeForm === null">
 						<SimpleButton
@@ -17,7 +17,7 @@
 							:key="k"
 							class="option-button"
 							:class="{'currently-active': p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo}"
-							@click="setReminderFromPreset(p, toggle)"
+							@click="setReminderFromPreset(p, close)"
 						>
 							{{ formatReminder(p) }}
 						</SimpleButton>
@@ -40,20 +40,20 @@
 					<ReminderPeriod
 						v-if="activeForm === 'relative'"
 						v-model="reminder"
-						@update:modelValue="updateDataAndMaybeClose(toggle)"
+						@update:modelValue="updateDataAndMaybeClose(close)"
 					/>
 
 					<DatepickerInline
 						v-if="activeForm === 'absolute'"
 						v-model="reminderDate"
-						@update:modelValue="setReminderDate(toggle)"
+						@update:modelValue="setReminderDate(close)"
 					/>
 
 					<x-button
 						v-if="showFormSwitch !== null"
 						class="reminder__close-button"
 						:shadow="false"
-						@click="toggle"
+						@click="updateDataAndMaybeClose(close)"
 					>
 						{{ $t('misc.confirm') }}
 					</x-button>
@@ -148,25 +148,26 @@ function updateData() {
 	}
 }
 
-function setReminderDate(toggle) {
+function setReminderDate(close) {
 	reminder.value.reminder = reminderDate.value === null
 		? null
 		: new Date(reminderDate.value)
 	reminder.value.relativeTo = null
 	reminder.value.relativePeriod = 0
-	updateDataAndMaybeClose(toggle)
+	updateDataAndMaybeClose(close)
 }
 
-function setReminderFromPreset(preset, toggle) {
+
+function setReminderFromPreset(preset, close) {
 	reminder.value = preset
 	updateData()
-	toggle()
+	close()
 }
 
-function updateDataAndMaybeClose(toggle) {
+function updateDataAndMaybeClose(close) {
 	updateData()
 	if (clearAfterUpdate) {
-		toggle()
+		close()
 	}
 }
 

src/components/tasks/partials/reminder-period.vue

@@ -55,6 +55,7 @@ import TaskReminderModel from '@/models/taskReminder'
 
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 import {REMINDER_PERIOD_RELATIVE_TO_TYPES, type IReminderPeriodRelativeTo} from '@/types/IReminderPeriodRelativeTo'
+import {useDebounceFn} from '@vueuse/core'
 
 const {
 	modelValue,
@@ -105,7 +106,7 @@ function updateData() {
 	reminder.value.relativeTo = period.value.relativeTo
 	reminder.value.reminder = null
 
-	emit('update:modelValue', reminder.value)
+	useDebounceFn(() => emit('update:modelValue', reminder.value), 1000)
 }
 </script>