feat(reminders): make adding new reminders less confusing

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

@@ -14,7 +14,7 @@
 						<SimpleButton
 							v-for="p in presets"
 							class="option-button"
-							@click="setReminderFromPreset(p)"
+							@click="setReminderFromPreset(p, toggle)"
 						>
 							{{ formatReminder(p) }}
 						</SimpleButton>
@@ -81,6 +81,10 @@ const props = defineProps({
 	disabled: {
 		default: false,
 	},
+	clearAfterUpdate: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -119,16 +123,25 @@ watch(
 	{immediate: true},
 )
 
+function updateData() {
+	emit('update:modelValue', reminder.value)
+
+	if (props.clearAfterUpdate) {
+		reminder.value = new TaskReminderModel()
+	}
+}
+
 function setReminderDate() {
 	reminder.value.reminder = reminderDate.value === null
 		? null
 		: new Date(reminderDate.value)
-	emit('update:modelValue', reminder.value)
+	updateData()
 }
 
-function setReminderFromPreset(preset) {
+function setReminderFromPreset(preset, toggle) {
 	reminder.value = preset
-	emit('update:modelValue', reminder.value)
+	updateData()
+	toggle()
 }
 
 function formatReminder(reminder: TaskReminderModel) {

src/components/tasks/partials/reminders.vue

@@ -19,15 +19,11 @@
 			</div>
 		</div>
 
-		<div v-if="!disabled" class="reminder-input">
+		<ReminderDetail
-			<BaseButton @click="toggleAddReminder">
+			:disabled="disabled"
-				{{ $t('task.addReminder') }}
+			@update:modelValue="addNewReminder"
-			</BaseButton>
+			:clear-after-update="true"
-		</div>
+		/>
-
-		<div v-if="isAddReminder" class="reminder-input">
-			<ReminderDetail :disabled="disabled" @update:modelValue="addNewReminder"/>
-		</div>
 	</div>
 </template>
 
@@ -62,14 +58,7 @@ watch(
 	{immediate: true},
 )
 
-const isAddReminder = ref(false)
-
-function toggleAddReminder() {
-	isAddReminder.value = !isAddReminder.value
-}
-
 function updateData() {
-	isAddReminder.value = false
 	emit('update:modelValue', reminders.value)
 }
 
@@ -81,12 +70,10 @@ function editReminder(index: number) {
 }
 
 function addNewReminder(newReminder: ITaskReminder) {
-	console.log('add new reminder', newReminder)
 	if (newReminder === null) {
 		return
 	}
 	reminders.value.push(newReminder)
-	newReminder = reactive(new TaskReminderModel())
 	updateData()
 }