chore; extract code to reminder-period.vue

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

@@ -1,179 +1,79 @@
 <template>
 	<div class="reminder-detail">
-		<BaseButton class="show" v-if="!!reminder?.relativePeriod" @click.stop="togglePeriodPopup"
+		<ReminderPeriod v-if="showRelativeReminder()" v-model="reminder" @update:modelValue="() => updateData()"></ReminderPeriod>
-								:disabled="disabled || undefined">
+		<Datepicker
-			{{ formatDuration(reminder.relativePeriod) }} <span v-html="formatBeforeAfter(reminder.relativePeriod)"></span>
+				v-if="showAbsoluteReminder()"
-			{{ formatRelativeTo(reminder.relativeTo) }}
+				v-model="reminderDate"
-		</BaseButton>
+				:disabled="disabled"
-		<CustomTransition name="fade">
+				@close-on-change="() => setReminderDate()"
-			<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 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>
-					</div>
-				</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 { ref, watch, type PropType } from 'vue'
 
-import BaseButton from '@/components/base/BaseButton.vue'
+import Datepicker from '@/components/input/datepicker.vue'
-import CustomTransition from '@/components/misc/CustomTransition.vue'
+import ReminderPeriod from '@/components/tasks/partials/reminder-period.vue'
-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 {useI18n} from 'vue-i18n'
-
-const {t} = useI18n({useScope: 'global'})
 
 const props = defineProps({
 	modelValue: {
 		type: Object as PropType<ITaskReminder>,
-		required: true,
+		required: false,
 	},
 	disabled: {
-		type: Boolean,
 		default: false,
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])
+const emit = defineEmits(['update:modelValue', 'update:Reminder', 'close', 'close-on-change'])
 
 const reminder = ref<ITaskReminder>()
-const show = ref(false)
+const reminderDate = ref()
-
-const periodInput = reactive({
-	duration: {days: 0, hours: 0, minutes: 0, seconds: 0},
-	relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
-	sign: -1,
-})
 
 
 watch(
 	() => props.modelValue,
 	(value) => {
+			console.log('reminder-detail.watch', value)
 			reminder.value = value
-			if (value.relativePeriod != 0) {
+			if (reminder.value && reminder.value.reminder) {
-				Object.assign(periodInput.duration, secondsToPeriod(Math.abs(value.relativePeriod)))
+				reminderDate.value = new Date(reminder.value.reminder)
-				periodInput.relativeTo = value.relativeTo
-				periodInput.sign = value.relativePeriod <= 0 ? -1 : 1
 			}
 		},
 		{immediate: true},
 )
 
+function setReminderDate() {
+	console.log('reminder-detail.setReminderDate', reminderDate.value)
+	console.log('reminder-detail.setReminderDate.reminder', reminder.value)
+	if (!reminderDate.value) {
+		return
+	}
+	if (!reminder.value) {
+		reminder.value = new TaskReminderModel()
+	}
+	reminder.value.reminder = new Date(reminderDate.value)
+	updateData()
+}
+
 
 function updateData() {
-	changed.value = true
+	console.log('reminder-detail.updateData', reminder.value)
-	console.log('updateData', periodInput)
-	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)
 }
 
-function togglePeriodPopup() {
+function showAbsoluteReminder() {
-	if (props.disabled) {
+	return !reminder.value || !reminder.value?.relativeTo
-		return
 }
 
-	show.value = !show.value
+function showRelativeReminder() {
+	console.log('showRelativeReminder', reminder.value)
+	return !reminder.value || reminder.value?.relativeTo
 }
 
-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
-		emit('close', changed.value)
-		if (changed.value) {
-			changed.value = false
-			emit('close-on-change', changed.value)
-		}
-	}, 200)
-}
-
-
-
-function formatDuration(reminderPeriod: number): string {
-	if (Math.abs(reminderPeriod) < 60) {
-		return '00:00'
-	}
-	const duration = secondsToPeriod(Math.abs(reminderPeriod))
-	console.log('formatDuration', duration, reminderPeriod)
-	return (duration.days > 0 ? duration.days + ' d ' : '') +
-			('' + duration.hours).padStart(2, '0') + ':' +
-			('' + duration.minutes).padStart(2, '0')
-}
-
-function formatBeforeAfter(reminderPeriod: number): string {
-	if (reminderPeriod <= 0) {
-		return '&le;'
-	}
-	return '&gt;'
-}
-
-function formatRelativeTo(relativeTo: IReminderPeriodRelativeTo | null): string | null {
-	switch (relativeTo) {
-		case REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE:
-			return t('task.attributes.dueDate')
-		case REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE:
-			return t('task.attributes.startDate')
-		case REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE:
-			return t('task.attributes.endDate')
-		default:
-			return relativeTo
-	}
-}
 </script>
 
 <style lang="scss" scoped>
@@ -197,15 +97,4 @@ function formatRelativeTo(relativeTo: IReminderPeriodRelativeTo | null): string
 	}
 }
 
-.input {
-	max-width: 70px;
-	width: 70px;
-}
-
-.datepicker__close-button {
-	margin: 1rem;
-	width: calc(100% - 2rem);
-}
-
-
 </style>

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

@@ -0,0 +1,218 @@
+<template>
+	<div class="datepicker">
+		<BaseButton class="show" v-if="!!reminder?.relativeTo" @click.stop="togglePeriodPopup"
+								:disabled="disabled || undefined">
+			{{ 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 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>
+					</div>
+				</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 { 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 { useI18n } from 'vue-i18n'
+
+const {t} = useI18n({useScope: 'global'})
+
+const props = defineProps({
+	modelValue: {
+		type: Object as PropType<ITaskReminder>,
+		required: false,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])
+
+const reminder = ref<ITaskReminder>()
+const show = ref(false)
+
+const periodInput = reactive({
+	duration: {days: 0, hours: 0, minutes: 0, seconds: 0},
+	relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
+	sign: -1,
+})
+
+
+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)))
+				periodInput.relativeTo = value.relativeTo
+				periodInput.sign = value.relativePeriod <= 0 ? -1 : 1
+			} else {
+				reminder.value = new TaskReminderModel()
+				show.value = true
+			}
+		},
+		{immediate: true},
+)
+
+
+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)
+	emit('update:modelValue', reminder.value)
+}
+
+function togglePeriodPopup() {
+	if (props.disabled) {
+		return
+	}
+
+	show.value = !show.value
+}
+
+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
+		emit('close', changed.value)
+		if (changed.value) {
+			changed.value = false
+			emit('close-on-change', changed.value)
+		}
+	}, 200)
+}
+
+
+function formatDuration(reminderPeriod: number): string {
+	if (Math.abs(reminderPeriod) < 60) {
+		return '00:00'
+	}
+	const duration = secondsToPeriod(Math.abs(reminderPeriod))
+	return (duration.days > 0 ? duration.days + ' d ' : '') +
+			('' + duration.hours).padStart(2, '0') + ':' +
+			('' + duration.minutes).padStart(2, '0')
+}
+
+function formatBeforeAfter(reminderPeriod: number): string {
+	if (reminderPeriod <= 0) {
+		return '&le;'
+	}
+	return '&gt;'
+}
+
+function formatRelativeTo(relativeTo: IReminderPeriodRelativeTo | null): string | null {
+	switch (relativeTo) {
+		case REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE:
+			return t('task.attributes.dueDate')
+		case REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE:
+			return t('task.attributes.startDate')
+		case REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE:
+			return t('task.attributes.endDate')
+		default:
+			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);
+}
+
+
+</style>

src/components/tasks/partials/reminders.vue

@@ -1,38 +1,33 @@
 <template>
 	<div class="reminders">
-		<div
+		<div v-for="(r, index) in reminders" :key="index" :class="{ 'overdue': r.reminder < new Date() }" class="reminder-input">
-			v-for="(r, index) in reminders"
+			<div>
-			:key="index"
+				<ReminderDetail :disabled="disabled" v-model="reminders[index]" mode="edit"
-			:class="{ 'overdue': r.reminder < new Date()}"
+												@update:modelValue="() => editReminder(index)"/>
-			class="reminder-input"
+			</div>
-		>
+			<div>
-			<ReminderDetail v-if="!!r.relativePeriod" v-model="reminders[index]" @close-on-change="() => addReminder(index)"
-				/>
-			<Datepicker
-				v-if="!r.relativePeriod"
-				v-model="reminders[index].reminder"
-				:disabled="disabled"
-				@close-on-change="() => addReminderDate(index)"
-			/>
 				<BaseButton @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
 					<icon icon="times"></icon>
 				</BaseButton>
 			</div>
+		</div>
 		<div class="reminder-input" v-if="!disabled">
-			<Datepicker
+			<BaseButton @click.stop="toggleAddReminder" class="show" :disabled="disabled || undefined">
-				v-model="newReminder"
+				{{ $t('task.addReminder') }}
-				@close-on-change="() => addReminderDate()"
+			</BaseButton>
-				:choose-date-label="$t('task.addReminder')"
+
-			/>
+			<CustomTransition name="fade">
+				<ReminderDetail v-if="isAddReminder" :disabled="disabled" mode="add" @update:modelValue="addNewReminder"/>
+			</CustomTransition>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch, type PropType } from 'vue'
+import {onMounted, reactive, ref, watch, type PropType} from 'vue'
 
 import BaseButton from '@/components/base/BaseButton.vue'
-import Datepicker from '@/components/input/datepicker.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'
@@ -41,13 +36,8 @@ const props = defineProps({
 	modelValue: {
 		type: Array as PropType<ITaskReminder[]>,
 		default: () => [],
-		validator(prop) {
-			// This allows arrays
-			return prop instanceof Array
-		},
 	},
 	disabled: {
-		type: Boolean,
 		default: false,
 	},
 })
@@ -63,40 +53,40 @@ onMounted(() => {
 watch(
 		() => props.modelValue,
 		(newVal) => {
-		for (const i in newVal) {
-			if (typeof newVal[i].reminder === 'string') {
-				newVal[i].reminder = new Date(newVal[i].reminder)
-			}
-		}
 			reminders.value = newVal
 		},
 )
 
+const isAddReminder = ref(false)
+function toggleAddReminder() {
+	isAddReminder.value = !isAddReminder.value
+}
 
 function updateData() {
+	console.log('reminders.updateData', reminders.value)
 	emit('update:modelValue', reminders.value)
+	isAddReminder.value = false
 }
 
-const newReminder = ref(null)
+function editReminder(index: number) {
-function addReminder(index: number | null = null) {
+	console.log('reminders.editReminder', reminders.value[index])
+	if (reminders.value[index] === null) {
+		return
+	}
 	updateData()
 }
 
-function addReminderDate(index: number | null = null) {
+function addNewReminder(newReminder) {
-	// New Date
+	console.log('reminders.addNewReminder to old reminders', newReminder)
-	if (index === null) {
+	if (newReminder == null) {
-		if (newReminder.value === null) {
 		return
 	}
-		reminders.value.push(new TaskReminderModel({reminder: new Date(newReminder.value)}))
+	reminders.value.push(newReminder)
-		newReminder.value = null
+	newReminder = reactive(new TaskReminderModel())
-	} else if(reminders.value[index].reminder === null) {
-		return
-	}
-
 	updateData()
 }
 
+
 function removeReminderByIndex(index: number) {
 	reminders.value.splice(index, 1)
 	updateData()
@@ -119,8 +109,9 @@ function removeReminderByIndex(index: number) {
 
 		.remove {
 			color: var(--danger);
-      padding-left: .5rem;
+			padding-left: 2rem;
 		}
 	}
 }
+
 </style>