From 14e26988331ca72afae01b8264969458cdb4a509 Mon Sep 17 00:00:00 2001
From: ce72 <christoph.ernst72@googlemail.com>
Date: Thu, 16 Mar 2023 09:54:18 +0100
Subject: [PATCH] feat: edit relative reminders

---
 .../tasks/partials/reminder-detail.vue        |  64 ++-----
 .../tasks/partials/reminder-period.vue        | 171 ++++++++----------
 src/components/tasks/partials/reminders.vue   |  38 ++--
 src/models/taskReminder.ts                    |   2 +-
 4 files changed, 114 insertions(+), 161 deletions(-)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 426c55783..497e1ca09 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="reminder-detail">
-		<ReminderPeriod v-if="showRelativeReminder()" v-model="reminder" @update:modelValue="() => updateData()"></ReminderPeriod>
+	<div>
+		<ReminderPeriod v-if="showRelativeReminder()" v-model="reminder" :disabled="disabled" @update:modelValue="() => updateData()"></ReminderPeriod>
 		<Datepicker
 				v-if="showAbsoluteReminder()"
 				v-model="reminderDate"
@@ -11,12 +11,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, type PropType } from 'vue'
-
 import Datepicker from '@/components/input/datepicker.vue'
 import ReminderPeriod from '@/components/tasks/partials/reminder-period.vue'
 import TaskReminderModel from '@/models/taskReminder'
 import type { ITaskReminder } from '@/modelTypes/ITaskReminder'
+import { ref, watch, type PropType } from 'vue'
 
 const props = defineProps({
 	modelValue: {
@@ -28,16 +27,14 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'update:Reminder', 'close', 'close-on-change'])
+const emit = defineEmits(['update:modelValue'])
 
 const reminder = ref<ITaskReminder>()
 const reminderDate = ref()
 
-
 watch(
 	() => props.modelValue,
 	(value) => {
-			console.log('reminder-detail.watch', value)
 			reminder.value = value
 			if (reminder.value && reminder.value.reminder) {
 				reminderDate.value = new Date(reminder.value.reminder)
@@ -46,9 +43,19 @@ watch(
 		{immediate: true},
 )
 
+function updateData() {
+	emit('update:modelValue', reminder.value)
+}
+
+function showAbsoluteReminder() {
+	return !reminder.value || !reminder.value?.relativeTo
+}
+
+function showRelativeReminder() {
+	return !reminder.value || reminder.value?.relativeTo
+}
+
 function setReminderDate() {
-	console.log('reminder-detail.setReminderDate', reminderDate.value)
-	console.log('reminder-detail.setReminderDate.reminder', reminder.value)
 	if (!reminderDate.value) {
 		return
 	}
@@ -58,43 +65,4 @@ function setReminderDate() {
 	reminder.value.reminder = new Date(reminderDate.value)
 	updateData()
 }
-
-
-function updateData() {
-	console.log('reminder-detail.updateData', reminder.value)
-	emit('update:modelValue', reminder.value)
-}
-
-function showAbsoluteReminder() {
-	return !reminder.value || !reminder.value?.relativeTo
-}
-
-function showRelativeReminder() {
-	console.log('showRelativeReminder', reminder.value)
-	return !reminder.value || reminder.value?.relativeTo
-}
-
 </script>
-
-<style lang="scss" scoped>
-.reminders {
-	.reminder-input {
-		display: flex;
-		align-items: center;
-
-		&.overdue :deep(.datepicker .show) {
-			color: var(--danger);
-		}
-
-		&:last-child {
-			margin-bottom: 0.75rem;
-		}
-
-		.remove {
-			color: var(--danger);
-			padding-left: .5rem;
-		}
-	}
-}
-
-</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
index 27adc5522..8c9157d3c 100644
--- a/src/components/tasks/partials/reminder-period.vue
+++ b/src/components/tasks/partials/reminder-period.vue
@@ -1,78 +1,79 @@
 <template>
 	<div class="datepicker">
-		<BaseButton class="show" v-if="!!reminder?.relativeTo" @click.stop="togglePeriodPopup"
-								:disabled="disabled || undefined">
+		<BaseButton :disabled="disabled" class="show" v-if="!!reminder?.relativeTo" @click.stop="togglePeriodPopup">
 			{{ formatDuration(reminder.relativePeriod) }} <span v-html="formatBeforeAfter(reminder.relativePeriod)"></span>
 			{{ formatRelativeTo(reminder.relativeTo) }}
 		</BaseButton>
 		<CustomTransition name="fade">
-			<div v-if="show" class="control is-flex is-align-items-center mb-2">
-				<input
-						:disabled="disabled || undefined"
-						class="input"
-						placeholder="d"
-						v-model="periodInput.duration.days"
-						type="number"
-						min="0"
-				/> d
-				<input
-						:disabled="disabled || undefined"
-						class="input"
-						placeholder="HH"
-						v-model="periodInput.duration.hours"
-						type="number"
-						min="0"
-				/>:
-				<input
-						:disabled="disabled || undefined"
-						class="input"
-						placeholder="MM"
-						v-model="periodInput.duration.minutes"
-						type="number"
-						min="0"
-				/>
-				<div class="select">
-					<select v-model="periodInput.sign" id="sign">
-						<option value="-1">&le;</option>
-						<option value="1">&gt;</option>
-					</select>
-				</div>
-				<div class="control">
+			<div v-if="isShowForm" class="mt-2" ref="periodPopup">
+				<div class="control is-flex is-align-items-center">
+					<input
+							:disabled="disabled"
+							class="input"
+							placeholder="d"
+							v-model="periodInput.duration.days"
+							type="number"
+							min="0"
+					/> d
+					<input
+							:disabled="disabled"
+							class="input"
+							placeholder="HH"
+							v-model="periodInput.duration.hours"
+							type="number"
+							min="0"
+					/>:
+					<input
+							:disabled="disabled"
+							class="input"
+							placeholder="MM"
+							v-model="periodInput.duration.minutes"
+							type="number"
+							min="0"
+					/>
 					<div class="select">
-						<select v-model="periodInput.relativeTo" id="relativeTo">
-							<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE">{{ $t('task.attributes.dueDate') }}</option>
-							<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE">{{
-									$t('task.attributes.startDate')
-								}}
-							</option>
-							<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE">{{ $t('task.attributes.endDate') }}</option>
+						<select :disabled="disabled" v-model="periodInput.sign" id="sign">
+							<option value="-1">&le;</option>
+							<option value="1">&gt;</option>
 						</select>
 					</div>
+					<div class="control">
+						<div class="select">
+							<select :disabled="disabled" v-model="periodInput.relativeTo" id="relativeTo">
+								<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE">{{ $t('task.attributes.dueDate') }}</option>
+								<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE">{{
+										$t('task.attributes.startDate')
+									}}
+								</option>
+								<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE">{{ $t('task.attributes.endDate') }}</option>
+							</select>
+						</div>
+					</div>
+				</div>
+				<div class="control">
+					<x-button
+							:disabled="disabled"
+							class="close-button"
+							:shadow="false"
+							@click="submitForm"
+					>
+						{{ $t('misc.confirm') }}
+					</x-button>
 				</div>
-
-				<x-button
-						class="datepicker__close-button"
-						:shadow="false"
-						@click="close"
-						v-cy="'closeDatepicker'"
-				>
-					{{ $t('misc.confirm') }}
-				</x-button>
-
 			</div>
 		</CustomTransition>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch, type PropType } from 'vue'
-
 import BaseButton from '@/components/base/BaseButton.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
+import { closeWhenClickedOutside } from '@/helpers/closeWhenClickedOutside'
 import { periodToSeconds, secondsToPeriod } from '@/helpers/time/period'
 import TaskReminderModel from '@/models/taskReminder'
 import type { ITaskReminder } from '@/modelTypes/ITaskReminder'
 import { REMINDER_PERIOD_RELATIVE_TO_TYPES, type IReminderPeriodRelativeTo } from '@/types/IReminderPeriodRelativeTo'
+import { onMounted, onBeforeUnmount, reactive, ref, watch, type PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const {t} = useI18n({useScope: 'global'})
@@ -91,7 +92,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])
 
 const reminder = ref<ITaskReminder>()
-const show = ref(false)
+const isShowForm = ref(false)
 
 const periodInput = reactive({
 	duration: {days: 0, hours: 0, minutes: 0, seconds: 0},
@@ -99,11 +100,12 @@ const periodInput = reactive({
 	sign: -1,
 })
 
+onMounted(() => document.addEventListener('click', hidePeriodPopup))
+onBeforeUnmount(() =>document.removeEventListener('click', hidePeriodPopup))
 
 watch(
 		() => props.modelValue,
 		(value) => {
-			console.log('reminders-period.watch', value)
 			reminder.value = value
 			if (value && value.relativeTo != null) {
 				Object.assign(periodInput.duration, secondsToPeriod(Math.abs(value.relativePeriod)))
@@ -111,7 +113,7 @@ watch(
 				periodInput.sign = value.relativePeriod <= 0 ? -1 : 1
 			} else {
 				reminder.value = new TaskReminderModel()
-				show.value = true
+				isShowForm.value = true
 			}
 		},
 		{immediate: true},
@@ -120,10 +122,11 @@ watch(
 
 function updateData() {
 	changed.value = true
-	reminder.value.relativePeriod = parseInt(periodInput.sign) * periodToSeconds(periodInput.duration.days, periodInput.duration.hours, periodInput.duration.minutes, 0)
-	reminder.value.relativeTo = periodInput.relativeTo
-	reminder.value.reminder = null
-	console.log('reminders-period.updateData', reminder.value)
+	if (reminder.value) {
+		reminder.value.relativePeriod = parseInt(periodInput.sign) * periodToSeconds(periodInput.duration.days, periodInput.duration.hours, periodInput.duration.minutes, 0)
+		reminder.value.relativeTo = periodInput.relativeTo
+		reminder.value.reminder = null
+	}
 	emit('update:modelValue', reminder.value)
 }
 
@@ -131,18 +134,25 @@ function togglePeriodPopup() {
 	if (props.disabled) {
 		return
 	}
+	isShowForm.value = !isShowForm.value
+}
 
-	show.value = !show.value
+const periodPopup = ref<HTMLElement | null>(null)
+function hidePeriodPopup(e: MouseEvent) {
+	if (isShowForm.value) {
+		closeWhenClickedOutside(e, periodPopup.value, close)
+	}
+}
+
+function submitForm() {
+	updateData()
+	close()
 }
 
 const changed = ref(false)
-
 function close() {
-	// Kind of dirty, but the timeout allows us to enter a time and click on "confirm" without
-	// having to click on another input field before it is actually used.
-	updateData()
 	setTimeout(() => {
-		show.value = false
+		isShowForm.value = false
 		emit('close', changed.value)
 		if (changed.value) {
 			changed.value = false
@@ -151,7 +161,6 @@ function close() {
 	}, 200)
 }
 
-
 function formatDuration(reminderPeriod: number): string {
 	if (Math.abs(reminderPeriod) < 60) {
 		return '00:00'
@@ -181,38 +190,18 @@ function formatRelativeTo(relativeTo: IReminderPeriodRelativeTo | null): string
 			return relativeTo
 	}
 }
+
 </script>
 
 <style lang="scss" scoped>
-.reminders {
-	.reminder-input {
-		display: flex;
-		align-items: center;
-
-		&.overdue :deep(.datepicker .show) {
-			color: var(--danger);
-		}
-
-		&:last-child {
-			margin-bottom: 0.75rem;
-		}
-
-		.remove {
-			color: var(--danger);
-			padding-left: .5rem;
-		}
-	}
-}
-
 .input {
 	max-width: 70px;
 	width: 70px;
 }
 
-.datepicker__close-button {
-	margin: 1rem;
-	width: calc(100% - 2rem);
+.close-button {
+	margin: 0.5rem;
+	width: calc(100% - 1rem);
 }
 
-
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index 2293f4356..a4e540838 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -1,9 +1,8 @@
 <template>
 	<div class="reminders">
 		<div v-for="(r, index) in reminders" :key="index" :class="{ 'overdue': r.reminder < new Date() }" class="reminder-input">
-			<div>
-				<ReminderDetail :disabled="disabled" v-model="reminders[index]" mode="edit"
-												@update:modelValue="() => editReminder(index)"/>
+			<div class="reminder-detail">
+				<ReminderDetail :disabled="disabled" v-model="reminders[index]" @update:modelValue="() => editReminder(index)"/>
 			</div>
 			<div>
 				<BaseButton @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
@@ -11,26 +10,23 @@
 				</BaseButton>
 			</div>
 		</div>
-		<div class="reminder-input" v-if="!disabled">
-			<BaseButton @click.stop="toggleAddReminder" class="show" :disabled="disabled || undefined">
+		<div class="reminder-input">
+			<BaseButton @click.stop="toggleAddReminder"  v-if="!disabled">
 				{{ $t('task.addReminder') }}
 			</BaseButton>
-
-			<CustomTransition name="fade">
-				<ReminderDetail v-if="isAddReminder" :disabled="disabled" mode="add" @update:modelValue="addNewReminder"/>
-			</CustomTransition>
+		</div>
+		<div class="reminder-input">
+			<ReminderDetail v-if="isAddReminder" :disabled="disabled" @update:modelValue="addNewReminder"/>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import {onMounted, reactive, ref, watch, type PropType} from 'vue'
-
 import BaseButton from '@/components/base/BaseButton.vue'
-import CustomTransition from '@/components/misc/CustomTransition.vue'
 import ReminderDetail from '@/components/tasks/partials/reminder-detail.vue'
 import TaskReminderModel from '@/models/taskReminder'
-import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
+import type { ITaskReminder } from '@/modelTypes/ITaskReminder'
+import { onMounted, reactive, ref, watch, type PropType } from 'vue'
 
 const props = defineProps({
 	modelValue: {
@@ -63,21 +59,18 @@ function toggleAddReminder() {
 }
 
 function updateData() {
-	console.log('reminders.updateData', reminders.value)
-	emit('update:modelValue', reminders.value)
 	isAddReminder.value = false
+	emit('update:modelValue', reminders.value)
 }
 
 function editReminder(index: number) {
-	console.log('reminders.editReminder', reminders.value[index])
 	if (reminders.value[index] === null) {
 		return
 	}
 	updateData()
 }
 
-function addNewReminder(newReminder) {
-	console.log('reminders.addNewReminder to old reminders', newReminder)
+function addNewReminder(newReminder : ITaskReminder) {
 	if (newReminder == null) {
 		return
 	}
@@ -86,7 +79,6 @@ function addNewReminder(newReminder) {
 	updateData()
 }
 
-
 function removeReminderByIndex(index: number) {
 	reminders.value.splice(index, 1)
 	updateData()
@@ -107,11 +99,15 @@ function removeReminderByIndex(index: number) {
 			margin-bottom: 0.75rem;
 		}
 
+		.reminder-detail {
+			width: 100%;
+		}
 		.remove {
 			color: var(--danger);
-			padding-left: 2rem;
+			vertical-align: top;
+			padding-left: .5rem;
+			line-height: 1;
 		}
 	}
 }
-
 </style>
\ No newline at end of file
diff --git a/src/models/taskReminder.ts b/src/models/taskReminder.ts
index b0a52b519..b93139ecb 100644
--- a/src/models/taskReminder.ts
+++ b/src/models/taskReminder.ts
@@ -5,7 +5,7 @@ import type {IReminderPeriodRelativeTo} from '@/types/IReminderPeriodRelativeTo'
 
 export default class TaskReminderModel extends AbstractModel<ITaskReminder> implements ITaskReminder {
 	reminder: Date | null
-	relativePeriod: number = 0
+	relativePeriod = 0
 	relativeTo: IReminderPeriodRelativeTo | null = null
 
 	constructor(data: Partial<ITaskReminder> = {}) {