From f747d5b2fcadb7459c389372dca4507b75cdd4fa Mon Sep 17 00:00:00 2001
From: ce72 <christoph.ernst72@googlemail.com>
Date: Sat, 11 Mar 2023 19:20:07 +0100
Subject: [PATCH 01/27] feat:  Use new Reminders API instead of reminder_dates

---
 src/components/tasks/partials/reminders.vue | 33 +++++++--------------
 src/modelTypes/ITask.ts                     |  3 +-
 src/modelTypes/ITaskReminder.ts             |  8 +++++
 src/models/task.ts                          |  7 +++--
 src/models/taskReminder.ts                  | 17 +++++++++++
 src/services/task.ts                        | 14 ++++-----
 src/types/IReminderPeriodRelativeTo.ts      |  8 +++++
 src/views/tasks/TaskDetailView.vue          |  4 +--
 8 files changed, 60 insertions(+), 34 deletions(-)
 create mode 100644 src/modelTypes/ITaskReminder.ts
 create mode 100644 src/models/taskReminder.ts
 create mode 100644 src/types/IReminderPeriodRelativeTo.ts

diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index 47c842954..a0af652cd 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -3,11 +3,11 @@
 		<div
 			v-for="(r, index) in reminders"
 			:key="index"
-			:class="{ 'overdue': r < new Date()}"
+			:class="{ 'overdue': r.reminder < new Date()}"
 			class="reminder-input"
 		>
 			<Datepicker
-				v-model="reminders[index]"
+				v-model="reminders[index].reminder"
 				:disabled="disabled"
 				@close-on-change="() => addReminderDate(index)"
 			/>
@@ -30,30 +30,19 @@ import {type PropType, ref, onMounted, watch} from 'vue'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Datepicker from '@/components/input/datepicker.vue'
-
-type Reminder = Date | string
-
-
+import TaskReminderModel from '@/models/taskReminder'
+import type { ITaskReminder } from '@/modelTypes/ITaskReminder'
 
 const props = defineProps({
 	modelValue: {
-		type: Array as PropType<Reminder[]>,
+		type: Array as PropType<ITaskReminder[]>,
 		default: () => [],
 		validator(prop) {
-			// This allows arrays of Dates and strings
+			// This allows arrays
 			if (!(prop instanceof Array)) {
 				return false
 			}
 
-			const isDate = (e: unknown) => e instanceof Date
-			const isString = (e: unknown) => typeof e === 'string'
-
-			for (const e of prop) {
-				if (!isDate(e) && !isString(e)) {
-					return false
-				}
-			}
-
 			return true
 		},
 	},
@@ -65,7 +54,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-const reminders = ref<Reminder[]>([])
+const reminders = ref<ITaskReminder[]>([])
 
 onMounted(() => {
 	reminders.value = [...props.modelValue]
@@ -75,8 +64,8 @@ watch(
 	() => props.modelValue,
 	(newVal) => {
 		for (const i in newVal) {
-			if (typeof newVal[i] === 'string') {
-				newVal[i] = new Date(newVal[i])
+			if (typeof newVal[i].reminder === 'string') {
+				newVal[i].reminder = new Date(newVal[i].reminder)
 			}
 		}
 		reminders.value = newVal
@@ -95,9 +84,9 @@ function addReminderDate(index : number | null = null) {
 		if (newReminder.value === null) {
 			return
 		}
-		reminders.value.push(new Date(newReminder.value))
+		reminders.value.push(new TaskReminderModel({reminder: new Date(newReminder.value)}))
 		newReminder.value = null
-	} else if(reminders.value[index] === null) {
+	} else if(reminders.value[index].reminder === null) {
 		return
 	}
 
diff --git a/src/modelTypes/ITask.ts b/src/modelTypes/ITask.ts
index e66d447ef..b4cfc4582 100644
--- a/src/modelTypes/ITask.ts
+++ b/src/modelTypes/ITask.ts
@@ -13,6 +13,7 @@ import type {IRepeatAfter} from '@/types/IRepeatAfter'
 import type {IRepeatMode} from '@/types/IRepeatMode'
 
 import type {PartialWithId} from '@/types/PartialWithId'
+import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 
 export interface ITask extends IAbstract {
 	id: number
@@ -30,7 +31,7 @@ export interface ITask extends IAbstract {
 	repeatAfter: number | IRepeatAfter
 	repeatFromCurrentDate: boolean
 	repeatMode: IRepeatMode
-	reminderDates: Date[]
+	reminders: ITaskReminder[]
 	parentTaskId: ITask['id']
 	hexColor: string
 	percentDone: number
diff --git a/src/modelTypes/ITaskReminder.ts b/src/modelTypes/ITaskReminder.ts
new file mode 100644
index 000000000..25aa493f2
--- /dev/null
+++ b/src/modelTypes/ITaskReminder.ts
@@ -0,0 +1,8 @@
+import type { IAbstract } from './IAbstract'
+import type { IReminderPeriodRelativeTo } from '@/types/IReminderPeriodRelativeTo'
+
+export interface ITaskReminder extends IAbstract {
+	reminder: Date
+	relativePeriod: number
+	relativeTo: IReminderPeriodRelativeTo
+}
\ No newline at end of file
diff --git a/src/models/task.ts b/src/models/task.ts
index 9974f41b9..7a35d9214 100644
--- a/src/models/task.ts
+++ b/src/models/task.ts
@@ -20,6 +20,8 @@ import LabelModel from './label'
 import UserModel from './user'
 import AttachmentModel from './attachment'
 import SubscriptionModel from './subscription'
+import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
+import TaskReminderModel from '@/models/taskReminder'
 
 export const TASK_DEFAULT_COLOR = '#1973ff'
 
@@ -68,7 +70,8 @@ export default class TaskModel extends AbstractModel<ITask> implements ITask {
 	repeatAfter: number | IRepeatAfter = 0
 	repeatFromCurrentDate = false
 	repeatMode: IRepeatMode = TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT
-	reminderDates: Date[] = []
+	reminderDates = null
+	reminders: ITaskReminder[] = []
 	parentTaskId: ITask['id'] = 0
 	hexColor = ''
 	percentDone = 0
@@ -115,7 +118,7 @@ export default class TaskModel extends AbstractModel<ITask> implements ITask {
 		// Parse the repeat after into something usable
 		this.repeatAfter = parseRepeatAfter(this.repeatAfter as number)
 
-		this.reminderDates = this.reminderDates.map(d => new Date(d))
+		this.reminders = this.reminders.map(r => new TaskReminderModel(r))
 
 		if (this.hexColor !== '' && this.hexColor.substring(0, 1) !== '#') {
 			this.hexColor = '#' + this.hexColor
diff --git a/src/models/taskReminder.ts b/src/models/taskReminder.ts
new file mode 100644
index 000000000..b0a52b519
--- /dev/null
+++ b/src/models/taskReminder.ts
@@ -0,0 +1,17 @@
+import AbstractModel from './abstractModel'
+import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
+import {parseDateOrNull} from '@/helpers/parseDateOrNull'
+import type {IReminderPeriodRelativeTo} from '@/types/IReminderPeriodRelativeTo'
+
+export default class TaskReminderModel extends AbstractModel<ITaskReminder> implements ITaskReminder {
+	reminder: Date | null
+	relativePeriod: number = 0
+	relativeTo: IReminderPeriodRelativeTo | null = null
+
+	constructor(data: Partial<ITaskReminder> = {}) {
+		super()
+		this.assignData(data)
+		this.reminder = parseDateOrNull(data.reminder)
+	}
+
+}
\ No newline at end of file
diff --git a/src/services/task.ts b/src/services/task.ts
index f40642b0c..a05bdacaf 100644
--- a/src/services/task.ts
+++ b/src/services/task.ts
@@ -54,17 +54,17 @@ export default class TaskService extends AbstractService<ITask> {
 		model.created = new Date(model.created).toISOString()
 		model.updated = new Date(model.updated).toISOString()
 
+		model.reminderDates = null
 		// remove all nulls, these would create empty reminders
-		for (const index in model.reminderDates) {
-			if (model.reminderDates[index] === null) {
-				model.reminderDates.splice(index, 1)
+		for (const index in model.reminders) {
+			if (model.reminders[index] === null) {
+				model.reminders.splice(index, 1)
 			}
 		}
-
 		// Make normal timestamps from js dates
-		if (model.reminderDates.length > 0) {
-			model.reminderDates = model.reminderDates.map(r => {
-				return new Date(r).toISOString()
+		if (model.reminders.length > 0) {
+			model.reminders.forEach(r => {
+				r.reminder = new Date(r.reminder).toISOString()
 			})
 		}
 
diff --git a/src/types/IReminderPeriodRelativeTo.ts b/src/types/IReminderPeriodRelativeTo.ts
new file mode 100644
index 000000000..4254ebf7b
--- /dev/null
+++ b/src/types/IReminderPeriodRelativeTo.ts
@@ -0,0 +1,8 @@
+export const REMINDER_PERIOD_RELATIVE_TO_TYPES = {
+	DUEDATE: 'due_date',
+	STARTDATE: 'start_date',
+	ENDDATE: 'end_date',
+} as const
+
+export type IReminderPeriodRelativeTo = typeof REMINDER_PERIOD_RELATIVE_TO_TYPES[keyof typeof REMINDER_PERIOD_RELATIVE_TO_TYPES]
+
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index e891869d9..7bb41375e 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -160,7 +160,7 @@
 								<reminders
 									:disabled="!canWrite"
 									:ref="e => setFieldRef('reminders', e)"
-									v-model="task.reminderDates"
+									v-model="task.reminders"
 									@update:model-value="saveTask"
 								/>
 							</div>
@@ -639,7 +639,7 @@ function setActiveFields() {
 	activeFields.percentDone = task.percentDone > 0
 	activeFields.priority = task.priority !== PRIORITIES.UNSET
 	activeFields.relatedTasks = Object.keys(task.relatedTasks).length > 0
-	activeFields.reminders = task.reminderDates.length > 0
+	activeFields.reminders = task.reminders.length > 0
 	activeFields.repeatAfter = task.repeatAfter.amount > 0
 	activeFields.startDate = task.startDate !== null
 }
-- 
2.40.1


From 5d38b8327fc323c571fced33442bdb923d6d3baa Mon Sep 17 00:00:00 2001
From: ce72 <christoph.ernst72@googlemail.com>
Date: Tue, 14 Mar 2023 06:49:49 +0100
Subject: [PATCH 02/27] feat: allow to edit existing relative reminders

---
 .../tasks/partials/reminder-detail.vue        | 211 ++++++++++++++++++
 src/components/tasks/partials/reminders.vue   |  18 +-
 src/helpers/time/period.ts                    |  19 ++
 src/modelTypes/ITaskReminder.ts               |   4 +-
 4 files changed, 243 insertions(+), 9 deletions(-)
 create mode 100644 src/components/tasks/partials/reminder-detail.vue
 create mode 100644 src/helpers/time/period.ts

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
new file mode 100644
index 000000000..2554a9043
--- /dev/null
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -0,0 +1,211 @@
+<template>
+	<div class="reminder-detail">
+		<BaseButton class="show" v-if="!!reminder?.relativePeriod" @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 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,
+	},
+	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) => {
+			reminder.value = value
+			if (value.relativePeriod != 0) {
+				Object.assign(periodInput.duration, secondsToPeriod(Math.abs(value.relativePeriod)))
+				periodInput.relativeTo = value.relativeTo
+				periodInput.sign = value.relativePeriod <= 0 ? -1 : 1
+			}
+		},
+		{immediate: true},
+)
+
+
+function updateData() {
+	changed.value = true
+	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() {
+	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))
+	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>
+.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>
\ No newline at end of file
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index a0af652cd..a8ff8afb7 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -6,7 +6,10 @@
 			:class="{ 'overdue': r.reminder < new Date()}"
 			class="reminder-input"
 		>
+			<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)"
@@ -26,10 +29,11 @@
 </template>
 
 <script setup lang="ts">
-import {type PropType, ref, onMounted, watch} from 'vue'
+import { onMounted, ref, watch, type PropType } from 'vue'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Datepicker from '@/components/input/datepicker.vue'
+import ReminderDetail from '@/components/tasks/partials/reminder-detail.vue'
 import TaskReminderModel from '@/models/taskReminder'
 import type { ITaskReminder } from '@/modelTypes/ITaskReminder'
 
@@ -39,11 +43,7 @@ const props = defineProps({
 		default: () => [],
 		validator(prop) {
 			// This allows arrays
-			if (!(prop instanceof Array)) {
-				return false
-			}
-
-			return true
+			return prop instanceof Array
 		},
 	},
 	disabled: {
@@ -78,7 +78,11 @@ function updateData() {
 }
 
 const newReminder = ref(null)
-function addReminderDate(index : number | null = null) {
+function addReminder(index: number | null = null) {
+	updateData()
+}
+
+function addReminderDate(index: number | null = null) {
 	// New Date
 	if (index === null) {
 		if (newReminder.value === null) {
diff --git a/src/helpers/time/period.ts b/src/helpers/time/period.ts
new file mode 100644
index 000000000..1ccc2e20f
--- /dev/null
+++ b/src/helpers/time/period.ts
@@ -0,0 +1,19 @@
+import {SECONDS_A_DAY, SECONDS_A_HOUR, SECONDS_A_MINUTE} from '@/constants/date'
+
+/**
+ * Convert time period given as seconds to days, hour, minutes, seconds
+ */
+export function secondsToPeriod(seconds: number) {
+	const d = Math.floor(seconds / SECONDS_A_DAY)
+	const h = Math.floor(seconds % SECONDS_A_DAY / 3600)
+	const m = Math.floor(seconds % SECONDS_A_HOUR / 60)
+	const s = Math.floor(seconds % 60)
+	return {days: d, hours: h, minutes: m, seconds: s}
+}
+
+/**
+ * Convert time period of days, hour, minutes, seconds to duration in seconds
+ */
+export function periodToSeconds(days: number, hours: number, minutes: number, seconds: number) : number{
+	return days * SECONDS_A_DAY + hours * SECONDS_A_HOUR + minutes * SECONDS_A_MINUTE + seconds
+}
diff --git a/src/modelTypes/ITaskReminder.ts b/src/modelTypes/ITaskReminder.ts
index 25aa493f2..a02e0ffc6 100644
--- a/src/modelTypes/ITaskReminder.ts
+++ b/src/modelTypes/ITaskReminder.ts
@@ -2,7 +2,7 @@ import type { IAbstract } from './IAbstract'
 import type { IReminderPeriodRelativeTo } from '@/types/IReminderPeriodRelativeTo'
 
 export interface ITaskReminder extends IAbstract {
-	reminder: Date
+	reminder: Date | null
 	relativePeriod: number
-	relativeTo: IReminderPeriodRelativeTo
+	relativeTo: IReminderPeriodRelativeTo | null
 }
\ No newline at end of file
-- 
2.40.1


From 0d6c0c8399c9fc73843bdbeb84ff19467edcaa90 Mon Sep 17 00:00:00 2001
From: ce72 <christoph.ernst72@googlemail.com>
Date: Wed, 15 Mar 2023 22:26:57 +0100
Subject: [PATCH 03/27] chore; extract code to reminder-period.vue

---
 .../tasks/partials/reminder-detail.vue        | 189 ++++-----------
 .../tasks/partials/reminder-period.vue        | 218 ++++++++++++++++++
 src/components/tasks/partials/reminders.vue   | 127 +++++-----
 3 files changed, 316 insertions(+), 218 deletions(-)
 create mode 100644 src/components/tasks/partials/reminder-period.vue

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 2554a9043..426c55783 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/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"
-								: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>
+		<ReminderPeriod v-if="showRelativeReminder()" v-model="reminder" @update:modelValue="() => updateData()"></ReminderPeriod>
+		<Datepicker
+				v-if="showAbsoluteReminder()"
+				v-model="reminderDate"
+				:disabled="disabled"
+				@close-on-change="() => setReminderDate()"
+		/>
 	</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 CustomTransition from '@/components/misc/CustomTransition.vue'
-import {periodToSeconds, secondsToPeriod} from '@/helpers/time/period'
-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'})
+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'
 
 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 periodInput = reactive({
-	duration: {days: 0, hours: 0, minutes: 0, seconds: 0},
-	relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
-	sign: -1,
-})
+const reminderDate = ref()
 
 
 watch(
-		() => props.modelValue,
-		(value) => {
+	() => props.modelValue,
+	(value) => {
+			console.log('reminder-detail.watch', value)
 			reminder.value = value
-			if (value.relativePeriod != 0) {
-				Object.assign(periodInput.duration, secondsToPeriod(Math.abs(value.relativePeriod)))
-				periodInput.relativeTo = value.relativeTo
-				periodInput.sign = value.relativePeriod <= 0 ? -1 : 1
+			if (reminder.value && reminder.value.reminder) {
+				reminderDate.value = new Date(reminder.value.reminder)
 			}
 		},
 		{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('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
+	console.log('reminder-detail.updateData', reminder.value)
 	emit('update:modelValue', reminder.value)
 }
 
-function togglePeriodPopup() {
-	if (props.disabled) {
-		return
-	}
-
-	show.value = !show.value
+function showAbsoluteReminder() {
+	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 showRelativeReminder() {
+	console.log('showRelativeReminder', reminder.value)
+	return !reminder.value || reminder.value?.relativeTo
 }
 
-
-
-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>
\ No newline at end of file
diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
new file mode 100644
index 000000000..27adc5522
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index a8ff8afb7..2293f4356 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -1,53 +1,43 @@
 <template>
 	<div class="reminders">
-		<div
-			v-for="(r, index) in reminders"
-			:key="index"
-			:class="{ 'overdue': r.reminder < new Date()}"
-			class="reminder-input"
-		>
-			<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 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>
+			<div>
+				<BaseButton @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
+					<icon icon="times"></icon>
+				</BaseButton>
+			</div>
 		</div>
 		<div class="reminder-input" v-if="!disabled">
-			<Datepicker
-				v-model="newReminder"
-				@close-on-change="() => addReminderDate()"
-				:choose-date-label="$t('task.addReminder')"
-			/>
+			<BaseButton @click.stop="toggleAddReminder" class="show" :disabled="disabled || undefined">
+				{{ $t('task.addReminder') }}
+			</BaseButton>
+
+			<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'
+import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 
 const props = defineProps({
 	modelValue: {
 		type: Array as PropType<ITaskReminder[]>,
 		default: () => [],
-		validator(prop) {
-			// This allows arrays
-			return prop instanceof Array
-		},
 	},
 	disabled: {
-		type: Boolean,
 		default: false,
 	},
 })
@@ -61,42 +51,42 @@ 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
-	},
+		() => props.modelValue,
+		(newVal) => {
+			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 addReminder(index: number | null = null) {
-	updateData()
-}
-
-function addReminderDate(index: number | null = null) {
-	// New Date
-	if (index === null) {
-		if (newReminder.value === null) {
-			return
-		}
-		reminders.value.push(new TaskReminderModel({reminder: new Date(newReminder.value)}))
-		newReminder.value = null
-	} else if(reminders.value[index].reminder === null) {
+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)
+	if (newReminder == null) {
+		return
+	}
+	reminders.value.push(newReminder)
+	newReminder = reactive(new TaskReminderModel())
+	updateData()
+}
+
+
 function removeReminderByIndex(index: number) {
 	reminders.value.splice(index, 1)
 	updateData()
@@ -105,22 +95,23 @@ function removeReminderByIndex(index: number) {
 
 <style lang="scss" scoped>
 .reminders {
-  .reminder-input {
-    display: flex;
-    align-items: center;
+	.reminder-input {
+		display: flex;
+		align-items: center;
 
-    &.overdue :deep(.datepicker .show) {
-      color: var(--danger);
-    }
+		&.overdue :deep(.datepicker .show) {
+			color: var(--danger);
+		}
 
-    &:last-child {
-      margin-bottom: 0.75rem;
-    }
+		&:last-child {
+			margin-bottom: 0.75rem;
+		}
 
-    .remove {
-      color: var(--danger);
-      padding-left: .5rem;
-    }
-  }
+		.remove {
+			color: var(--danger);
+			padding-left: 2rem;
+		}
+	}
 }
+
 </style>
\ No newline at end of file
-- 
2.40.1


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 04/27] 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> = {}) {
-- 
2.40.1


From fb14eca6340ac4c761b8f61027662328bf55ade4 Mon Sep 17 00:00:00 2001
From: ce72 <christoph.ernst72@googlemail.com>
Date: Fri, 17 Mar 2023 10:34:37 +0100
Subject: [PATCH 05/27] fix: review findings

---
 .../tasks/partials/reminder-detail.vue        | 24 ++++----
 .../tasks/partials/reminder-period.vue        | 57 ++++++++-----------
 src/helpers/time/period.ts                    |  4 +-
 src/i18n/lang/en.json                         |  5 ++
 4 files changed, 42 insertions(+), 48 deletions(-)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 497e1ca09..50776f42a 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -1,8 +1,9 @@
 <template>
 	<div>
-		<ReminderPeriod v-if="showRelativeReminder()" v-model="reminder" :disabled="disabled" @update:modelValue="() => updateData()"></ReminderPeriod>
+		<ReminderPeriod v-if="showRelativeReminder" v-model="reminder" :disabled="disabled"
+										@update:modelValue="() => updateData()"></ReminderPeriod>
 		<Datepicker
-				v-if="showAbsoluteReminder()"
+				v-if="showAbsoluteReminder"
 				v-model="reminderDate"
 				:disabled="disabled"
 				@close-on-change="() => setReminderDate()"
@@ -14,8 +15,8 @@
 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'
+import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
+import {computed, ref, watch, type PropType} from 'vue'
 
 const props = defineProps({
 	modelValue: {
@@ -32,9 +33,12 @@ const emit = defineEmits(['update:modelValue'])
 const reminder = ref<ITaskReminder>()
 const reminderDate = ref()
 
+const showAbsoluteReminder = computed(() => !reminder.value || !reminder.value?.relativeTo)
+const showRelativeReminder = computed(() => !reminder.value || reminder.value?.relativeTo)
+
 watch(
-	() => props.modelValue,
-	(value) => {
+		() => props.modelValue,
+		(value) => {
 			reminder.value = value
 			if (reminder.value && reminder.value.reminder) {
 				reminderDate.value = new Date(reminder.value.reminder)
@@ -47,14 +51,6 @@ 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() {
 	if (!reminderDate.value) {
 		return
diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
index 8c9157d3c..ee420e139 100644
--- a/src/components/tasks/partials/reminder-period.vue
+++ b/src/components/tasks/partials/reminder-period.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="datepicker">
 		<BaseButton :disabled="disabled" class="show" v-if="!!reminder?.relativeTo" @click.stop="togglePeriodPopup">
-			{{ formatDuration(reminder.relativePeriod) }} <span v-html="formatBeforeAfter(reminder.relativePeriod)"></span>
+			{{ formatDuration(reminder.relativePeriod) }} {{ reminder.relativePeriod <= 0 ? '&le;' : '&gt;' }}
 			{{ formatRelativeTo(reminder.relativeTo) }}
 		</BaseButton>
 		<CustomTransition name="fade">
@@ -10,15 +10,15 @@
 					<input
 							:disabled="disabled"
 							class="input"
-							placeholder="d"
+							:placeholder="$t('task.reminder.daysShort')"
 							v-model="periodInput.duration.days"
 							type="number"
 							min="0"
-					/> d
+					/> {{ $t('task.reminder.daysShort') }}
 					<input
 							:disabled="disabled"
 							class="input"
-							placeholder="HH"
+							:placeholder="$t('task.reminder.hoursShort')"
 							v-model="periodInput.duration.hours"
 							type="number"
 							min="0"
@@ -26,7 +26,7 @@
 					<input
 							:disabled="disabled"
 							class="input"
-							placeholder="MM"
+							:placeholder="$t('task.reminder.minutesShort')"
 							v-model="periodInput.duration.minutes"
 							type="number"
 							min="0"
@@ -37,17 +37,15 @@
 							<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 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 class="control">
@@ -68,13 +66,13 @@
 <script setup lang="ts">
 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 {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'
+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'})
 
@@ -101,7 +99,7 @@ const periodInput = reactive({
 })
 
 onMounted(() => document.addEventListener('click', hidePeriodPopup))
-onBeforeUnmount(() =>document.removeEventListener('click', hidePeriodPopup))
+onBeforeUnmount(() => document.removeEventListener('click', hidePeriodPopup))
 
 watch(
 		() => props.modelValue,
@@ -138,6 +136,7 @@ function togglePeriodPopup() {
 }
 
 const periodPopup = ref<HTMLElement | null>(null)
+
 function hidePeriodPopup(e: MouseEvent) {
 	if (isShowForm.value) {
 		closeWhenClickedOutside(e, periodPopup.value, close)
@@ -150,6 +149,7 @@ function submitForm() {
 }
 
 const changed = ref(false)
+
 function close() {
 	setTimeout(() => {
 		isShowForm.value = false
@@ -171,13 +171,6 @@ function formatDuration(reminderPeriod: number): string {
 			('' + 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:
@@ -195,8 +188,8 @@ function formatRelativeTo(relativeTo: IReminderPeriodRelativeTo | null): string
 
 <style lang="scss" scoped>
 .input {
-	max-width: 70px;
-	width: 70px;
+	max-width: 5rem;
+	width: 4rem;
 }
 
 .close-button {
diff --git a/src/helpers/time/period.ts b/src/helpers/time/period.ts
index 1ccc2e20f..6d3a04ee9 100644
--- a/src/helpers/time/period.ts
+++ b/src/helpers/time/period.ts
@@ -3,7 +3,7 @@ import {SECONDS_A_DAY, SECONDS_A_HOUR, SECONDS_A_MINUTE} from '@/constants/date'
 /**
  * Convert time period given as seconds to days, hour, minutes, seconds
  */
-export function secondsToPeriod(seconds: number) {
+export function secondsToPeriod(seconds: number): {days: number, hours: number, minutes: number, seconds: number} {
 	const d = Math.floor(seconds / SECONDS_A_DAY)
 	const h = Math.floor(seconds % SECONDS_A_DAY / 3600)
 	const m = Math.floor(seconds % SECONDS_A_HOUR / 60)
@@ -14,6 +14,6 @@ export function secondsToPeriod(seconds: number) {
 /**
  * Convert time period of days, hour, minutes, seconds to duration in seconds
  */
-export function periodToSeconds(days: number, hours: number, minutes: number, seconds: number) : number{
+export function periodToSeconds(days: number, hours: number, minutes: number, seconds: number): number {
 	return days * SECONDS_A_DAY + hours * SECONDS_A_HOUR + minutes * SECONDS_A_MINUTE + seconds
 }
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 6faaed9fb..2d92bb31d 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -720,6 +720,11 @@
         "copiedto": "Copied To | Copied To"
       }
     },
+    "reminder": {
+      "hoursShort": "HH",
+      "minutesShort": "MM",
+      "daysShort": "d"
+    },
     "repeat": {
       "everyDay": "Every Day",
       "everyWeek": "Every Week",
-- 
2.40.1


From 5fb45afb12479eb135323299409bd91d8be24e39 Mon Sep 17 00:00:00 2001
From: ce72 <christoph.ernst72@googlemail.com>
Date: Mon, 20 Mar 2023 21:05:11 +0100
Subject: [PATCH 06/27] fix: review findings

---
 src/components/tasks/partials/reminder-period.vue |  4 ++--
 src/helpers/time/period.ts                        | 13 +++++++------
 src/i18n/lang/en.json                             |  3 ++-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
index ee420e139..391f9b923 100644
--- a/src/components/tasks/partials/reminder-period.vue
+++ b/src/components/tasks/partials/reminder-period.vue
@@ -14,7 +14,7 @@
 							v-model="periodInput.duration.days"
 							type="number"
 							min="0"
-					/> {{ $t('task.reminder.daysShort') }}
+					/> {{ $t('task.reminder.days') }}
 					<input
 							:disabled="disabled"
 							class="input"
@@ -166,7 +166,7 @@ function formatDuration(reminderPeriod: number): string {
 		return '00:00'
 	}
 	const duration = secondsToPeriod(Math.abs(reminderPeriod))
-	return (duration.days > 0 ? duration.days + ' d ' : '') +
+	return (duration.days > 0 ? `${duration.days} ${t('task.reminder.days')} `: '') +
 			('' + duration.hours).padStart(2, '0') + ':' +
 			('' + duration.minutes).padStart(2, '0')
 }
diff --git a/src/helpers/time/period.ts b/src/helpers/time/period.ts
index 6d3a04ee9..a8e2b6eeb 100644
--- a/src/helpers/time/period.ts
+++ b/src/helpers/time/period.ts
@@ -3,12 +3,13 @@ import {SECONDS_A_DAY, SECONDS_A_HOUR, SECONDS_A_MINUTE} from '@/constants/date'
 /**
  * Convert time period given as seconds to days, hour, minutes, seconds
  */
-export function secondsToPeriod(seconds: number): {days: number, hours: number, minutes: number, seconds: number} {
-	const d = Math.floor(seconds / SECONDS_A_DAY)
-	const h = Math.floor(seconds % SECONDS_A_DAY / 3600)
-	const m = Math.floor(seconds % SECONDS_A_HOUR / 60)
-	const s = Math.floor(seconds % 60)
-	return {days: d, hours: h, minutes: m, seconds: s}
+export function secondsToPeriod(seconds: number): {days: number, hours: number, minutes: number, seconds: number}  {
+	return {
+		days: Math.floor(seconds / SECONDS_A_DAY),
+		hours: Math.floor(seconds % SECONDS_A_DAY / 3600),
+		minutes: Math.floor(seconds % SECONDS_A_HOUR / 60),
+		seconds: Math.floor(seconds % 60),
+	}
 }
 
 /**
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 2d92bb31d..ca7f394f9 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -723,7 +723,8 @@
     "reminder": {
       "hoursShort": "HH",
       "minutesShort": "MM",
-      "daysShort": "d"
+      "daysShort": "d",
+      "days": "days"
     },
     "repeat": {
       "everyDay": "Every Day",
-- 
2.40.1


From 85ffed4d9a26fc054fee51608bb83ccf2e3032f9 Mon Sep 17 00:00:00 2001
From: ce72 <christoph.ernst72@googlemail.com>
Date: Tue, 28 Mar 2023 07:51:46 +0200
Subject: [PATCH 07/27] fix: review findings

---
 src/models/task.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/models/task.ts b/src/models/task.ts
index 7a35d9214..770b74fbd 100644
--- a/src/models/task.ts
+++ b/src/models/task.ts
@@ -70,6 +70,11 @@ export default class TaskModel extends AbstractModel<ITask> implements ITask {
 	repeatAfter: number | IRepeatAfter = 0
 	repeatFromCurrentDate = false
 	repeatMode: IRepeatMode = TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT
+	/* Make sure to not return reminderDates to the server.
+	The server currently supports both reminderDates (old API) and reminder (new API) and assumes the old logic
+	if it still receives reminderDates.
+	This line and reminderDates attributes will be removed after https://kolaente.dev/vikunja/api/pulls/1448 was merged.
+	*/
 	reminderDates = null
 	reminders: ITaskReminder[] = []
 	parentTaskId: ITask['id'] = 0
-- 
2.40.1


From 811254e6a9528555974aa1915d6846b4771c3858 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Thu, 30 Mar 2023 12:40:19 +0200
Subject: [PATCH 08/27] wip: base review

(cherry picked from commit 3bb64f078cf333f174d247dc404355f2c8437cfd)
---
 .../tasks/partials/reminder-detail.vue        |  55 +++---
 .../tasks/partials/reminder-period.vue        | 156 ++++++++++--------
 .../tasks/partials/reminders.story.vue        |  11 ++
 src/components/tasks/partials/reminders.vue   |  79 ++++-----
 4 files changed, 167 insertions(+), 134 deletions(-)
 create mode 100644 src/components/tasks/partials/reminders.story.vue

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 50776f42a..778416fa6 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -1,22 +1,29 @@
 <template>
 	<div>
-		<ReminderPeriod v-if="showRelativeReminder" v-model="reminder" :disabled="disabled"
-										@update:modelValue="() => updateData()"></ReminderPeriod>
+		<ReminderPeriod
+			v-if="showRelativeReminder"
+			v-model="reminder"
+			:disabled="disabled"
+			@update:modelValue="emit('update:modelValue', reminder.value)"
+		/>
+
 		<Datepicker
-				v-if="showAbsoluteReminder"
-				v-model="reminderDate"
-				:disabled="disabled"
-				@close-on-change="() => setReminderDate()"
+			v-if="showAbsoluteReminder"
+			v-model="reminderDate"
+			:disabled="disabled"
+			@close-on-change="setReminderDate"
 		/>
 	</div>
 </template>
 
 <script setup lang="ts">
+import {computed, ref, watch, type PropType} from 'vue'
+
+import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
+
 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 {computed, ref, watch, type PropType} from 'vue'
 
 const props = defineProps({
 	modelValue: {
@@ -30,35 +37,35 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-const reminder = ref<ITaskReminder>()
-const reminderDate = ref()
+const reminder = ref<ITaskReminder>(new TaskReminderModel())
+const reminderDate = computed({
+	get() {
+		return reminder.value?.reminder
+	},
+	set(newReminderDate) {
+		if (!reminderDate.value) {
+			return
+		}
+		reminder.value.reminder = new Date(reminderDate.value)
+	}
+})
 
 const showAbsoluteReminder = computed(() => !reminder.value || !reminder.value?.relativeTo)
 const showRelativeReminder = computed(() => !reminder.value || reminder.value?.relativeTo)
 
 watch(
-		() => props.modelValue,
-		(value) => {
-			reminder.value = value
-			if (reminder.value && reminder.value.reminder) {
-				reminderDate.value = new Date(reminder.value.reminder)
-			}
+		props.modelValue,
+		(newReminder) => {
+			reminder.value = newReminder || new TaskReminderModel()
 		},
 		{immediate: true},
 )
 
-function updateData() {
-	emit('update:modelValue', reminder.value)
-}
-
 function setReminderDate() {
 	if (!reminderDate.value) {
 		return
 	}
-	if (!reminder.value) {
-		reminder.value = new TaskReminderModel()
-	}
 	reminder.value.reminder = new Date(reminderDate.value)
-	updateData()
+	emit('update:modelValue', reminder.value)
 }
 </script>
diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
index 391f9b923..365183c7c 100644
--- a/src/components/tasks/partials/reminder-period.vue
+++ b/src/components/tasks/partials/reminder-period.vue
@@ -1,78 +1,96 @@
 <template>
-	<div class="datepicker">
-		<BaseButton :disabled="disabled" class="show" v-if="!!reminder?.relativeTo" @click.stop="togglePeriodPopup">
-			{{ formatDuration(reminder.relativePeriod) }} {{ reminder.relativePeriod <= 0 ? '&le;' : '&gt;' }}
-			{{ formatRelativeTo(reminder.relativeTo) }}
-		</BaseButton>
-		<CustomTransition name="fade">
-			<div v-if="isShowForm" class="mt-2" ref="periodPopup">
-				<div class="control is-flex is-align-items-center">
-					<input
-							:disabled="disabled"
-							class="input"
-							:placeholder="$t('task.reminder.daysShort')"
-							v-model="periodInput.duration.days"
-							type="number"
-							min="0"
-					/> {{ $t('task.reminder.days') }}
-					<input
+	<div
+		v-if="!!reminder?.relativeTo"	
+		class="reminder-period"
+	>
+		<Popup>
+			<template #trigger="{toggle}">
+				<BaseButton
+					@click="toggle"
+					:disabled="disabled"
+					class="show"
+				>
+					{{ formatDuration(reminder.relativePeriod) }} {{ reminder.relativePeriod <= 0 ? '&le;' : '&gt;' }}
+					{{ formatRelativeTo(reminder.relativeTo) }}
+					<span class="icon"><icon icon="chevron-down"/></span>
+				</BaseButton>
+			</template>
+
+			<template #content>
+				<div class="mt-2">
+					<div class="control is-flex is-align-items-center">
+						<label>
+							<input
+								:disabled="disabled"
+								class="input"
+								:placeholder="$t('task.reminder.daysShort')"
+								v-model="periodInput.duration.days"
+								type="number"
+								min="0"
+							/> {{ $t('task.reminder.days') }}
+						</label>
+						<input
 							:disabled="disabled"
 							class="input"
 							:placeholder="$t('task.reminder.hoursShort')"
 							v-model="periodInput.duration.hours"
 							type="number"
 							min="0"
-					/>:
-					<input
+						/>:
+						<input
 							:disabled="disabled"
 							class="input"
 							:placeholder="$t('task.reminder.minutesShort')"
 							v-model="periodInput.duration.minutes"
 							type="number"
 							min="0"
-					/>
-					<div class="select">
-						<select :disabled="disabled" v-model="periodInput.sign" id="sign">
-							<option value="-1">&le;</option>
-							<option value="1">&gt;</option>
-						</select>
+						/>
+
+						<div class="select">
+							<select :disabled="disabled" v-model.number="periodInput.sign">
+								<option value="-1">&le;</option>
+								<option value="1">&gt;</option>
+							</select>
+						</div>
+
+						<div class="select">
+							<select :disabled="disabled" v-model="periodInput.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 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 class="control">
-					<x-button
+
+					<div class="control">
+						<x-button
 							:disabled="disabled"
 							class="close-button"
 							:shadow="false"
 							@click="submitForm"
-					>
-						{{ $t('misc.confirm') }}
-					</x-button>
+						>
+							{{ $t('misc.confirm') }}
+						</x-button>
+					</div>
 				</div>
-			</div>
-		</CustomTransition>
+			</template>
+		</Popup>
 	</div>
 </template>
 
 <script setup lang="ts">
+import {reactive, ref, watch, type PropType, computed} from 'vue'
+import {useI18n} from 'vue-i18n'
+
 import BaseButton from '@/components/base/BaseButton.vue'
-import CustomTransition from '@/components/misc/CustomTransition.vue'
-import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+import Popup from '@/components/misc/popup.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 {onMounted, onBeforeUnmount, reactive, ref, watch, type PropType} from 'vue'
-import {useI18n} from 'vue-i18n'
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -87,22 +105,23 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])
+const emit = defineEmits(['update:modelValue'])
 
 const reminder = ref<ITaskReminder>()
-const isShowForm = ref(false)
 
 const periodInput = reactive({
-	duration: {days: 0, hours: 0, minutes: 0, seconds: 0},
+	duration: {
+		days: 0,
+		hours: 0,
+		minutes: 0,
+		seconds: 0
+	},
 	relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
 	sign: -1,
 })
 
-onMounted(() => document.addEventListener('click', hidePeriodPopup))
-onBeforeUnmount(() => document.removeEventListener('click', hidePeriodPopup))
-
 watch(
-		() => props.modelValue,
+		props.modelValue,
 		(value) => {
 			reminder.value = value
 			if (value && value.relativeTo != null) {
@@ -121,28 +140,13 @@ watch(
 function updateData() {
 	changed.value = true
 	if (reminder.value) {
-		reminder.value.relativePeriod = parseInt(periodInput.sign) * periodToSeconds(periodInput.duration.days, periodInput.duration.hours, periodInput.duration.minutes, 0)
+		reminder.value.relativePeriod = 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() {
-	if (props.disabled) {
-		return
-	}
-	isShowForm.value = !isShowForm.value
-}
-
-const periodPopup = ref<HTMLElement | null>(null)
-
-function hidePeriodPopup(e: MouseEvent) {
-	if (isShowForm.value) {
-		closeWhenClickedOutside(e, periodPopup.value, close)
-	}
-}
-
 function submitForm() {
 	updateData()
 	close()
@@ -153,10 +157,8 @@ const changed = ref(false)
 function close() {
 	setTimeout(() => {
 		isShowForm.value = false
-		emit('close', changed.value)
 		if (changed.value) {
 			changed.value = false
-			emit('close-on-change', changed.value)
 		}
 	}, 200)
 }
@@ -171,6 +173,16 @@ function formatDuration(reminderPeriod: number): string {
 			('' + duration.minutes).padStart(2, '0')
 }
 
+const relativeToOptions = {
+	[REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE]: t('task.attributes.dueDate'),
+	[REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE]: t('task.attributes.startDate'),
+	[REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE]: t('task.attributes.endDate'),
+} as const
+
+const relativeTo = computed(() => relativeToOptions[periodInput.relativeTo]))
+
+
+
 function formatRelativeTo(relativeTo: IReminderPeriodRelativeTo | null): string | null {
 	switch (relativeTo) {
 		case REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE:
diff --git a/src/components/tasks/partials/reminders.story.vue b/src/components/tasks/partials/reminders.story.vue
new file mode 100644
index 000000000..05f25e546
--- /dev/null
+++ b/src/components/tasks/partials/reminders.story.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import reminders from './reminders.vue'
+</script>
+
+<template>
+  <Story>
+    <Variant title="Default">
+      <reminders />
+    </Variant>
+  </Story>
+</template>
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index a4e540838..f785d2166 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -1,32 +1,41 @@
 <template>
 	<div class="reminders">
-		<div v-for="(r, index) in reminders" :key="index" :class="{ 'overdue': r.reminder < new Date() }" class="reminder-input">
+		<div
+			v-for="(r, index) in reminders"
+			:key="index"
+			:class="{ 'overdue': r.reminder < new Date() }"
+			class="reminder-input"
+		>
 			<div class="reminder-detail">
-				<ReminderDetail :disabled="disabled" v-model="reminders[index]" @update:modelValue="() => editReminder(index)"/>
+				<ReminderDetail :disabled="disabled" v-model="reminders[index]" />
 			</div>
 			<div>
-				<BaseButton @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
-					<icon icon="times"></icon>
+				<BaseButton v-if="!disabled"  @click="removeReminderByIndex(index)" class="remove">
+					<icon icon="times" />
 				</BaseButton>
 			</div>
 		</div>
-		<div class="reminder-input">
-			<BaseButton @click.stop="toggleAddReminder"  v-if="!disabled">
+
+		<div v-if="!disabled" class="reminder-input">
+			<BaseButton @click="toggleAddReminder">
 				{{ $t('task.addReminder') }}
 			</BaseButton>
 		</div>
-		<div class="reminder-input">
-			<ReminderDetail v-if="isAddReminder" :disabled="disabled" @update:modelValue="addNewReminder"/>
+
+		<div v-if="isAddReminder" class="reminder-input">
+			<ReminderDetail :disabled="disabled" @update:modelValue="addNewReminder"/>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
+import {reactive, ref, watch, type PropType} from 'vue'
+
+import type { ITaskReminder } from '@/modelTypes/ITaskReminder'
+
 import BaseButton from '@/components/base/BaseButton.vue'
 import ReminderDetail from '@/components/tasks/partials/reminder-detail.vue'
 import TaskReminderModel from '@/models/taskReminder'
-import type { ITaskReminder } from '@/modelTypes/ITaskReminder'
-import { onMounted, reactive, ref, watch, type PropType } from 'vue'
 
 const props = defineProps({
 	modelValue: {
@@ -42,15 +51,12 @@ const emit = defineEmits(['update:modelValue'])
 
 const reminders = ref<ITaskReminder[]>([])
 
-onMounted(() => {
-	reminders.value = [...props.modelValue]
-})
-
 watch(
-		() => props.modelValue,
-		(newVal) => {
-			reminders.value = newVal
-		},
+	props.modelValue,
+	(newVal) => {
+		reminders.value = newVal
+	},
+	{immediate: true},
 )
 
 const isAddReminder = ref(false)
@@ -86,28 +92,25 @@ function removeReminderByIndex(index: number) {
 </script>
 
 <style lang="scss" scoped>
-.reminders {
-	.reminder-input {
-		display: flex;
-		align-items: center;
+.reminder-input {
+	display: flex;
+	align-items: center;
 
-		&.overdue :deep(.datepicker .show) {
-			color: var(--danger);
-		}
+	&.overdue :deep(.datepicker .show) {
+		color: var(--danger);
+	}
 
-		&:last-child {
-			margin-bottom: 0.75rem;
-		}
-
-		.reminder-detail {
-			width: 100%;
-		}
-		.remove {
-			color: var(--danger);
-			vertical-align: top;
-			padding-left: .5rem;
-			line-height: 1;
-		}
+	&::last-child {
+		margin-bottom: 0.75rem;
 	}
 }
+.reminder-detail {
+	width: 100%;
+}
+.remove {
+	color: var(--danger);
+	vertical-align: top;
+	padding-left: .5rem;
+	line-height: 1;
+}
 </style>
\ No newline at end of file
-- 
2.40.1


From 6c2dc483a20213f1f238e6224b9ecfb87faa2461 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 31 May 2023 16:27:20 +0200
Subject: [PATCH 09/27] fix: redundant )

---
 src/components/tasks/partials/reminder-period.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
index 365183c7c..c0a60d3db 100644
--- a/src/components/tasks/partials/reminder-period.vue
+++ b/src/components/tasks/partials/reminder-period.vue
@@ -179,9 +179,7 @@ const relativeToOptions = {
 	[REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE]: t('task.attributes.endDate'),
 } as const
 
-const relativeTo = computed(() => relativeToOptions[periodInput.relativeTo]))
-
-
+const relativeTo = computed(() => relativeToOptions[periodInput.relativeTo])
 
 function formatRelativeTo(relativeTo: IReminderPeriodRelativeTo | null): string | null {
 	switch (relativeTo) {
-- 
2.40.1


From 9df6950d1a4a361c075020319ce3037e19e0912d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 5 Jun 2023 16:16:10 +0200
Subject: [PATCH 10/27] feat: start adding relative reminder picker with more
 options

---
 .../tasks/partials/reminder-detail.vue        | 77 +++++++++++++++++--
 .../tasks/partials/reminder-period.vue        | 11 ++-
 .../tasks/partials/reminders.story.vue        | 25 ++++--
 3 files changed, 98 insertions(+), 15 deletions(-)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 778416fa6..f65a28aa6 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -1,5 +1,19 @@
 <template>
 	<div>
+
+		{{ reminderText }}
+
+		<div class="presets">
+			<BaseButton
+				v-for="p in presets"
+			>
+				{{ formatReminder(p) }}
+			</BaseButton>
+			<BaseButton>
+				Custom
+			</BaseButton>
+		</div>
+
 		<ReminderPeriod
 			v-if="showRelativeReminder"
 			v-model="reminder"
@@ -18,12 +32,18 @@
 
 <script setup lang="ts">
 import {computed, ref, watch, type PropType} from 'vue'
+import {toRef} from '@vueuse/core'
+import {SECONDS_A_DAY} from '@/constants/date'
+import {secondsToPeriod} from '@/helpers/time/period'
 
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
+import {formatDateShort} from '@/helpers/time/formatDate'
 
 import Datepicker from '@/components/input/datepicker.vue'
 import ReminderPeriod from '@/components/tasks/partials/reminder-period.vue'
 import TaskReminderModel from '@/models/taskReminder'
+import BaseButton from '@/components/base/BaseButton.vue'
+import {REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
 
 const props = defineProps({
 	modelValue: {
@@ -38,6 +58,13 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 const reminder = ref<ITaskReminder>(new TaskReminderModel())
+
+const presets: TaskReminderModel[] = [
+	{relativePeriod: SECONDS_A_DAY, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
+	{relativePeriod: SECONDS_A_DAY * 3, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
+	{relativePeriod: SECONDS_A_DAY * 7, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
+	{relativePeriod: SECONDS_A_DAY * 30, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
+]
 const reminderDate = computed({
 	get() {
 		return reminder.value?.reminder
@@ -47,18 +74,32 @@ const reminderDate = computed({
 			return
 		}
 		reminder.value.reminder = new Date(reminderDate.value)
-	}
+	},
 })
 
 const showAbsoluteReminder = computed(() => !reminder.value || !reminder.value?.relativeTo)
 const showRelativeReminder = computed(() => !reminder.value || reminder.value?.relativeTo)
 
+const reminderText = computed(() => {
+
+	if (reminder.value.reminder !== null) {
+		return formatDateShort(reminder.value.reminder)
+	}
+
+	if (reminder.value.relativeTo !== null) {
+		return formatReminder(reminder.value)
+	}
+
+	return 'Add a reminder…'
+})
+
+const modelValue = toRef(props, 'modelValue')
 watch(
-		props.modelValue,
-		(newReminder) => {
-			reminder.value = newReminder || new TaskReminderModel()
-		},
-		{immediate: true},
+	modelValue,
+	(newReminder) => {
+		reminder.value = newReminder || new TaskReminderModel()
+	},
+	{immediate: true},
 )
 
 function setReminderDate() {
@@ -68,4 +109,28 @@ function setReminderDate() {
 	reminder.value.reminder = new Date(reminderDate.value)
 	emit('update:modelValue', reminder.value)
 }
+
+function formatReminder(reminder: TaskReminderModel) {
+
+	const period = secondsToPeriod(reminder.relativePeriod)
+	let periodHuman = ''
+
+	if (period.days > 0) {
+		periodHuman = period.days + ' days'
+	}
+
+	if (period.days === 1) {
+		periodHuman = period.days + ' day'
+	}
+
+	return periodHuman + ' ' + (reminder.relativePeriod > 0 ? 'before' : 'after') + ' ' + reminder.relativeTo
+}
 </script>
+
+<style lang="scss" scoped>
+.presets {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+</style>
diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
index c0a60d3db..bc5216769 100644
--- a/src/components/tasks/partials/reminder-period.vue
+++ b/src/components/tasks/partials/reminder-period.vue
@@ -81,6 +81,7 @@
 <script setup lang="ts">
 import {reactive, ref, watch, type PropType, computed} from 'vue'
 import {useI18n} from 'vue-i18n'
+import {toRef} from '@vueuse/core'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Popup from '@/components/misc/popup.vue'
@@ -109,6 +110,8 @@ const emit = defineEmits(['update:modelValue'])
 
 const reminder = ref<ITaskReminder>()
 
+const showForm = ref(false)
+
 const periodInput = reactive({
 	duration: {
 		days: 0,
@@ -120,8 +123,9 @@ const periodInput = reactive({
 	sign: -1,
 })
 
+const modelValue = toRef(props, 'modelValue')
 watch(
-		props.modelValue,
+		modelValue,
 		(value) => {
 			reminder.value = value
 			if (value && value.relativeTo != null) {
@@ -130,13 +134,12 @@ watch(
 				periodInput.sign = value.relativePeriod <= 0 ? -1 : 1
 			} else {
 				reminder.value = new TaskReminderModel()
-				isShowForm.value = true
+				showForm.value = true
 			}
 		},
 		{immediate: true},
 )
 
-
 function updateData() {
 	changed.value = true
 	if (reminder.value) {
@@ -156,7 +159,7 @@ const changed = ref(false)
 
 function close() {
 	setTimeout(() => {
-		isShowForm.value = false
+		showForm.value = false
 		if (changed.value) {
 			changed.value = false
 		}
diff --git a/src/components/tasks/partials/reminders.story.vue b/src/components/tasks/partials/reminders.story.vue
index 05f25e546..2fb40a1cb 100644
--- a/src/components/tasks/partials/reminders.story.vue
+++ b/src/components/tasks/partials/reminders.story.vue
@@ -1,11 +1,26 @@
 <script setup lang="ts">
 import reminders from './reminders.vue'
+import {ref} from 'vue'
+import ReminderDetail from '@/components/tasks/partials/reminder-detail.vue'
+
+const reminderNow = ref({reminder: new Date(), relativePeriod: 0, relativeTo: null } )
+const relativeReminder = ref({reminder: null, relativePeriod: 1, relativeTo: 'due_date' } )
+const newReminder = ref(null)
 </script>
 
 <template>
-  <Story>
-    <Variant title="Default">
-      <reminders />
-    </Variant>
-  </Story>
+	<Story>
+		<Variant title="Default">
+			<reminders/>
+		</Variant>
+		<Variant title="Reminder Detail with fixed date">
+			<reminder-detail v-model="reminderNow"/>
+		</Variant>
+		<Variant title="Reminder Detail with relative date">
+			<reminder-detail v-model="relativeReminder"/>
+		</Variant>
+		<Variant title="New Reminder Detail">
+			<reminder-detail v-model="newReminder"/>
+		</Variant>
+	</Story>
 </template>
-- 
2.40.1


From 7b2a688b6e2e22129183b66524f7fceabfec2445 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 9 Jun 2023 12:07:23 +0200
Subject: [PATCH 11/27] feat(datepicker): separate datepicker popup and
 datepicker logic in different components

---
 src/components/input/datepicker.vue       | 174 +----------------
 src/components/input/datepickerInline.vue | 223 ++++++++++++++++++++++
 2 files changed, 229 insertions(+), 168 deletions(-)
 create mode 100644 src/components/input/datepickerInline.vue

diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 1e3839307..f36f6480e 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -7,72 +7,9 @@
 		<CustomTransition name="fade">
 			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
 
-				<BaseButton
-					v-if="(new Date()).getHours() < 21"
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('today')"
-				>
-					<span class="icon"><icon :icon="['far', 'calendar-alt']"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.today') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
-					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('tomorrow')"
-				>
-					<span class="icon"><icon :icon="['far', 'sun']"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.tomorrow') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
-					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('nextMonday')"
-				>
-					<span class="icon"><icon icon="coffee"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.nextMonday') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
-					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('thisWeekend')"
-				>
-					<span class="icon"><icon icon="cocktail"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.thisWeekend') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
-					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('laterThisWeek')"
-				>
-					<span class="icon"><icon icon="chess-knight"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
-					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('nextWeek')"
-				>
-					<span class="icon"><icon icon="forward"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.nextWeek') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
-					</span>
-				</BaseButton>
-
-				<flat-pickr
-					:config="flatPickerConfig"
-					class="input"
-					v-model="flatPickrDate"
+				<DatepickerInline
+					v-model="date"
+					@update:model-value="updateData"
 				/>
 
 				<x-button
@@ -89,20 +26,16 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted, onBeforeUnmount, toRef, watch, computed, type PropType} from 'vue'
-import flatPickr from 'vue-flatpickr-component'
-import 'flatpickr/dist/flatpickr.css'
+import {ref, onMounted, onBeforeUnmount, toRef, watch, type PropType} from 'vue'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 
-import {formatDate, formatDateShort} from '@/helpers/time/formatDate'
-import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
-import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
+import {formatDateShort} from '@/helpers/time/formatDate'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
-import {useAuthStore} from '@/stores/auth'
 import {useI18n} from 'vue-i18n'
+import DatepickerInline from '@/components/input/datepickerInline.vue'
 
 const props = defineProps({
 	modelValue: {
@@ -141,42 +74,6 @@ watch(
 	{immediate: true},
 )
 
-const authStore = useAuthStore()
-const weekStart = computed(() => authStore.settings.weekStart)
-const flatPickerConfig = computed(() => ({
-	altFormat: t('date.altFormatLong'),
-	altInput: true,
-	dateFormat: 'Y-m-d H:i',
-	enableTime: true,
-	time_24hr: true,
-	inline: true,
-	locale: {
-		firstDayOfWeek: weekStart.value,
-	},
-}))
-
-// Since flatpickr dates are strings, we need to convert them to native date objects.
-// To make that work, we need a separate variable since flatpickr does not have a change event.
-const flatPickrDate = computed({
-	set(newValue: string | Date | null) {
-		if (newValue === null) {
-			date.value = null
-			return
-		}
-
-		date.value = createDateFromString(newValue)
-		updateData()
-	},
-	get() {
-		if (!date.value) {
-			return ''
-		}
-
-		return formatDate(date.value, 'yyy-LL-dd H:mm')
-	},
-})
-
-
 function setDateValue(dateString: string | Date | null) {
 	if (dateString === null) {
 		date.value = null
@@ -217,29 +114,6 @@ function close() {
 		}
 	}, 200)
 }
-
-function setDate(dateString: string) {
-	if (date.value === null) {
-		date.value = new Date()
-	}
-
-	const interval = calculateDayInterval(dateString)
-	const newDate = new Date()
-	newDate.setDate(newDate.getDate() + interval)
-	newDate.setHours(calculateNearestHours(newDate))
-	newDate.setMinutes(0)
-	newDate.setSeconds(0)
-	date.value = newDate
-	flatPickrDate.value = newDate
-	updateData()
-}
-
-function getWeekdayFromStringInterval(dateString: string) {
-	const interval = calculateDayInterval(dateString)
-	const newDate = new Date()
-	newDate.setDate(newDate.getDate() + interval)
-	return formatDate(newDate, 'E')
-}
 </script>
 
 <style lang="scss" scoped>
@@ -262,42 +136,6 @@ function getWeekdayFromStringInterval(dateString: string) {
 	}
 }
 
-.datepicker__quick-select-date {
-	display: flex;
-	align-items: center;
-	padding: 0 .5rem;
-	width: 100%;
-	height: 2.25rem;
-	color: var(--text);
-	transition: all $transition;
-
-	&:first-child {
-		border-radius: $radius $radius 0 0;
-	}
-
-	&:hover {
-		background: var(--grey-100);
-	}
-
-	.text {
-		width: 100%;
-		font-size: .85rem;
-		display: flex;
-		justify-content: space-between;
-		padding-right: .25rem;
-
-		.weekday {
-			color: var(--text-light);
-			text-transform: capitalize;
-		}
-	}
-
-	.icon {
-		width: 2rem;
-		text-align: center;
-	}
-}
-	
 .datepicker__close-button {
 	margin: 1rem;
 	width: calc(100% - 2rem);
diff --git a/src/components/input/datepickerInline.vue b/src/components/input/datepickerInline.vue
new file mode 100644
index 000000000..20bc8a1b4
--- /dev/null
+++ b/src/components/input/datepickerInline.vue
@@ -0,0 +1,223 @@
+<template>
+	<BaseButton
+		v-if="(new Date()).getHours() < 21"
+		class="datepicker__quick-select-date"
+		@click.stop="setDate('today')"
+	>
+		<span class="icon"><icon :icon="['far', 'calendar-alt']"/></span>
+		<span class="text">
+			<span>{{ $t('input.datepicker.today') }}</span>
+			<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
+		</span>
+	</BaseButton>
+	<BaseButton
+		class="datepicker__quick-select-date"
+		@click.stop="setDate('tomorrow')"
+	>
+		<span class="icon"><icon :icon="['far', 'sun']"/></span>
+		<span class="text">
+			<span>{{ $t('input.datepicker.tomorrow') }}</span>
+			<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
+		</span>
+	</BaseButton>
+	<BaseButton
+		class="datepicker__quick-select-date"
+		@click.stop="setDate('nextMonday')"
+	>
+		<span class="icon"><icon icon="coffee"/></span>
+		<span class="text">
+			<span>{{ $t('input.datepicker.nextMonday') }}</span>
+			<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
+		</span>
+	</BaseButton>
+	<BaseButton
+		class="datepicker__quick-select-date"
+		@click.stop="setDate('thisWeekend')"
+	>
+		<span class="icon"><icon icon="cocktail"/></span>
+		<span class="text">
+			<span>{{ $t('input.datepicker.thisWeekend') }}</span>
+			<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
+		</span>
+	</BaseButton>
+	<BaseButton
+		class="datepicker__quick-select-date"
+		@click.stop="setDate('laterThisWeek')"
+	>
+		<span class="icon"><icon icon="chess-knight"/></span>
+		<span class="text">
+			<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
+			<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
+		</span>
+	</BaseButton>
+	<BaseButton
+		class="datepicker__quick-select-date"
+		@click.stop="setDate('nextWeek')"
+	>
+		<span class="icon"><icon icon="forward"/></span>
+		<span class="text">
+			<span>{{ $t('input.datepicker.nextWeek') }}</span>
+			<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
+		</span>
+	</BaseButton>
+
+	<flat-pickr
+		:config="flatPickerConfig"
+		class="input"
+		v-model="flatPickrDate"
+	/>
+</template>
+
+<script lang="ts" setup>
+import {ref, toRef, watch, computed, type PropType} from 'vue'
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
+
+import BaseButton from '@/components/base/BaseButton.vue'
+
+import {formatDate} from '@/helpers/time/formatDate'
+import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
+import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
+import {createDateFromString} from '@/helpers/time/createDateFromString'
+import {useAuthStore} from '@/stores/auth'
+import {useI18n} from 'vue-i18n'
+
+const props = defineProps({
+	modelValue: {
+		type: [Date, null, String] as PropType<Date | null | string>,
+		validator: prop => prop instanceof Date || prop === null || typeof prop === 'string',
+		default: null,
+	},
+})
+
+const emit = defineEmits(['update:modelValue', 'close-on-change'])
+
+const {t} = useI18n({useScope: 'global'})
+
+const date = ref<Date | null>()
+const show = ref(false)
+const changed = ref(false)
+
+const modelValue = toRef(props, 'modelValue')
+watch(
+	modelValue,
+	setDateValue,
+	{immediate: true},
+)
+
+const authStore = useAuthStore()
+const weekStart = computed(() => authStore.settings.weekStart)
+const flatPickerConfig = computed(() => ({
+	altFormat: t('date.altFormatLong'),
+	altInput: true,
+	dateFormat: 'Y-m-d H:i',
+	enableTime: true,
+	time_24hr: true,
+	inline: true,
+	locale: {
+		firstDayOfWeek: weekStart.value,
+	},
+}))
+
+// Since flatpickr dates are strings, we need to convert them to native date objects.
+// To make that work, we need a separate variable since flatpickr does not have a change event.
+const flatPickrDate = computed({
+	set(newValue: string | Date | null) {
+		if (newValue === null) {
+			date.value = null
+			return
+		}
+
+		date.value = createDateFromString(newValue)
+		updateData()
+	},
+	get() {
+		if (!date.value) {
+			return ''
+		}
+
+		return formatDate(date.value, 'yyy-LL-dd H:mm')
+	},
+})
+
+
+function setDateValue(dateString: string | Date | null) {
+	if (dateString === null) {
+		date.value = null
+		return
+	}
+	date.value = createDateFromString(dateString)
+}
+
+function updateData() {
+	changed.value = true
+	console.log('emit', date.value)
+	emit('update:modelValue', date.value)
+}
+
+function setDate(dateString: string) {
+	if (date.value === null) {
+		date.value = new Date()
+	}
+
+	const interval = calculateDayInterval(dateString)
+	const newDate = new Date()
+	newDate.setDate(newDate.getDate() + interval)
+	newDate.setHours(calculateNearestHours(newDate))
+	newDate.setMinutes(0)
+	newDate.setSeconds(0)
+	date.value = newDate
+	flatPickrDate.value = newDate
+	updateData()
+}
+
+function getWeekdayFromStringInterval(dateString: string) {
+	const interval = calculateDayInterval(dateString)
+	const newDate = new Date()
+	newDate.setDate(newDate.getDate() + interval)
+	return formatDate(newDate, 'E')
+}
+</script>
+
+<style lang="scss" scoped>
+.datepicker__quick-select-date {
+	display: flex;
+	align-items: center;
+	padding: 0 .5rem;
+	width: 100%;
+	height: 2.25rem;
+	color: var(--text);
+	transition: all $transition;
+
+	&:first-child {
+		border-radius: $radius $radius 0 0;
+	}
+
+	&:hover {
+		background: var(--grey-100);
+	}
+
+	.text {
+		width: 100%;
+		font-size: .85rem;
+		display: flex;
+		justify-content: space-between;
+		padding-right: .25rem;
+
+		.weekday {
+			color: var(--text-light);
+			text-transform: capitalize;
+		}
+	}
+
+	.icon {
+		width: 2rem;
+		text-align: center;
+	}
+}
+
+:deep(.flatpickr-calendar) {
+	margin: 0 auto 8px;
+	box-shadow: none;
+}
+</style>
-- 
2.40.1


From 95487d75694f86463d5952a9a5b2d3f95851d8fe Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 9 Jun 2023 13:19:47 +0200
Subject: [PATCH 12/27] feat(reminders): add proper time picker for relative
 dates

---
 src/components/input/datepickerInline.vue     |   1 -
 .../tasks/partials/reminder-detail.vue        |  56 ++---
 .../tasks/partials/reminder-period.vue        | 232 ++++++------------
 src/components/tasks/partials/reminders.vue   |  19 +-
 src/helpers/time/period.ts                    |  46 +++-
 src/models/task.ts                            |  21 +-
 src/types/IRepeatAfter.ts                     |   2 +
 7 files changed, 156 insertions(+), 221 deletions(-)

diff --git a/src/components/input/datepickerInline.vue b/src/components/input/datepickerInline.vue
index 20bc8a1b4..e4c684bef 100644
--- a/src/components/input/datepickerInline.vue
+++ b/src/components/input/datepickerInline.vue
@@ -151,7 +151,6 @@ function setDateValue(dateString: string | Date | null) {
 
 function updateData() {
 	changed.value = true
-	console.log('emit', date.value)
 	emit('update:modelValue', date.value)
 }
 
diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index f65a28aa6..ab8ba1006 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -3,29 +3,30 @@
 
 		{{ reminderText }}
 
-		<div class="presets">
+		<div class="options" v-if="showFormSwitch === null">
 			<BaseButton
 				v-for="p in presets"
 			>
 				{{ formatReminder(p) }}
 			</BaseButton>
-			<BaseButton>
+			<BaseButton @click="showFormSwitch = 'relative'">
 				Custom
 			</BaseButton>
+			<BaseButton @click="showFormSwitch = 'absolute'">
+				Date
+			</BaseButton>
 		</div>
 
 		<ReminderPeriod
-			v-if="showRelativeReminder"
+			v-if="showFormSwitch === 'relative'"
 			v-model="reminder"
-			:disabled="disabled"
-			@update:modelValue="emit('update:modelValue', reminder.value)"
+			@update:modelValue="emit('update:modelValue', reminder)"
 		/>
 
-		<Datepicker
-			v-if="showAbsoluteReminder"
+		<DatepickerInline
+			v-if="showFormSwitch === 'absolute'"
 			v-model="reminderDate"
-			:disabled="disabled"
-			@close-on-change="setReminderDate"
+			@update:modelValue="setReminderDate"
 		/>
 	</div>
 </template>
@@ -34,16 +35,17 @@
 import {computed, ref, watch, type PropType} from 'vue'
 import {toRef} from '@vueuse/core'
 import {SECONDS_A_DAY} from '@/constants/date'
-import {secondsToPeriod} from '@/helpers/time/period'
+import {REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
 
+import {secondsToPeriod} from '@/helpers/time/period'
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 import {formatDateShort} from '@/helpers/time/formatDate'
 
-import Datepicker from '@/components/input/datepicker.vue'
-import ReminderPeriod from '@/components/tasks/partials/reminder-period.vue'
-import TaskReminderModel from '@/models/taskReminder'
 import BaseButton from '@/components/base/BaseButton.vue'
-import {REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
+import DatepickerInline from '@/components/input/datepickerInline.vue'
+import ReminderPeriod from '@/components/tasks/partials/reminder-period.vue'
+
+import TaskReminderModel from '@/models/taskReminder'
 
 const props = defineProps({
 	modelValue: {
@@ -65,20 +67,9 @@ const presets: TaskReminderModel[] = [
 	{relativePeriod: SECONDS_A_DAY * 7, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
 	{relativePeriod: SECONDS_A_DAY * 30, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
 ]
-const reminderDate = computed({
-	get() {
-		return reminder.value?.reminder
-	},
-	set(newReminderDate) {
-		if (!reminderDate.value) {
-			return
-		}
-		reminder.value.reminder = new Date(reminderDate.value)
-	},
-})
+const reminderDate = ref(null)
 
-const showAbsoluteReminder = computed(() => !reminder.value || !reminder.value?.relativeTo)
-const showRelativeReminder = computed(() => !reminder.value || reminder.value?.relativeTo)
+const showFormSwitch = ref<null | 'relative' | 'absolute'>(null)
 
 const reminderText = computed(() => {
 
@@ -103,10 +94,9 @@ watch(
 )
 
 function setReminderDate() {
-	if (!reminderDate.value) {
-		return
-	}
-	reminder.value.reminder = new Date(reminderDate.value)
+	reminder.value.reminder = reminderDate.value === null
+		? null
+		: new Date(reminderDate.value)
 	emit('update:modelValue', reminder.value)
 }
 
@@ -123,12 +113,12 @@ function formatReminder(reminder: TaskReminderModel) {
 		periodHuman = period.days + ' day'
 	}
 
-	return periodHuman + ' ' + (reminder.relativePeriod > 0 ? 'before' : 'after') + ' ' + reminder.relativeTo
+	return periodHuman + ' ' + (reminder.relativePeriod <= 0 ? 'before' : 'after') + ' ' + reminder.relativeTo
 }
 </script>
 
 <style lang="scss" scoped>
-.presets {
+.options {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
index bc5216769..3b9de3cc5 100644
--- a/src/components/tasks/partials/reminder-period.vue
+++ b/src/components/tasks/partials/reminder-period.vue
@@ -1,92 +1,57 @@
 <template>
 	<div
-		v-if="!!reminder?.relativeTo"	
-		class="reminder-period"
+		class="reminder-period control"
 	>
-		<Popup>
-			<template #trigger="{toggle}">
-				<BaseButton
-					@click="toggle"
-					:disabled="disabled"
-					class="show"
-				>
-					{{ formatDuration(reminder.relativePeriod) }} {{ reminder.relativePeriod <= 0 ? '&le;' : '&gt;' }}
-					{{ formatRelativeTo(reminder.relativeTo) }}
-					<span class="icon"><icon icon="chevron-down"/></span>
-				</BaseButton>
-			</template>
+		<input
+			class="input"
+			v-model.number="period.duration"
+			type="number"
+			min="0"
+			@change="updateData"
+		/>
 
-			<template #content>
-				<div class="mt-2">
-					<div class="control is-flex is-align-items-center">
-						<label>
-							<input
-								:disabled="disabled"
-								class="input"
-								:placeholder="$t('task.reminder.daysShort')"
-								v-model="periodInput.duration.days"
-								type="number"
-								min="0"
-							/> {{ $t('task.reminder.days') }}
-						</label>
-						<input
-							:disabled="disabled"
-							class="input"
-							:placeholder="$t('task.reminder.hoursShort')"
-							v-model="periodInput.duration.hours"
-							type="number"
-							min="0"
-						/>:
-						<input
-							:disabled="disabled"
-							class="input"
-							:placeholder="$t('task.reminder.minutesShort')"
-							v-model="periodInput.duration.minutes"
-							type="number"
-							min="0"
-						/>
+		<div class="select">
+			<select v-model="period.durationUnit" @change="updateData">
+				<option value="minutes">{{ $t('task.reminder.minutes') }}</option>
+				<option value="hours">{{ $t('task.reminder.hours') }}</option>
+				<option value="days">{{ $t('task.reminder.days') }}</option>
+				<option value="weeks">{{ $t('task.reminder.weeks') }}</option>
+			</select>
+		</div>
 
-						<div class="select">
-							<select :disabled="disabled" v-model.number="periodInput.sign">
-								<option value="-1">&le;</option>
-								<option value="1">&gt;</option>
-							</select>
-						</div>
+		<div class="select">
+			<select v-model.number="period.sign" @change="updateData">
+				<option value="-1">
+					before
+				</option>
+				<option value="1">
+					after
+				</option>
+			</select>
+		</div>
 
-						<div class="select">
-							<select :disabled="disabled" v-model="periodInput.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 class="control">
-						<x-button
-							:disabled="disabled"
-							class="close-button"
-							:shadow="false"
-							@click="submitForm"
-						>
-							{{ $t('misc.confirm') }}
-						</x-button>
-					</div>
-				</div>
-			</template>
-		</Popup>
+		<div class="select">
+			<select v-model="period.relativeTo" @change="updateData">
+				<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>
 </template>
 
 <script setup lang="ts">
-import {reactive, ref, watch, type PropType, computed} from 'vue'
+import {ref, watch, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {toRef} from '@vueuse/core'
 
-import BaseButton from '@/components/base/BaseButton.vue'
-import Popup from '@/components/misc/popup.vue'
-
-import {periodToSeconds, secondsToPeriod} from '@/helpers/time/period'
+import {periodToSeconds, PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
 
 import TaskReminderModel from '@/models/taskReminder'
 
@@ -108,106 +73,55 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-const reminder = ref<ITaskReminder>()
+const reminder = ref<ITaskReminder>(new TaskReminderModel())
 
 const showForm = ref(false)
 
-const periodInput = reactive({
-	duration: {
-		days: 0,
-		hours: 0,
-		minutes: 0,
-		seconds: 0
-	},
+interface PeriodInput {
+	duration: number,
+	durationUnit: PeriodUnit,
+	relativeTo: IReminderPeriodRelativeTo,
+	sign: -1 | 1,
+}
+
+const period = ref<PeriodInput>({
+	duration: 0,
+	durationUnit: 'hours',
 	relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
 	sign: -1,
 })
 
 const modelValue = toRef(props, 'modelValue')
 watch(
-		modelValue,
-		(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()
-				showForm.value = true
-			}
-		},
-		{immediate: true},
+	modelValue,
+	(value) => {
+		console.log({value})
+		const p = secondsToPeriod(value?.relativePeriod)
+		period.value.durationUnit = p.unit
+		period.value.duration = p.amount
+		period.value.relativeTo = value?.relativeTo
+	},
+	{immediate: true},
 )
 
 function updateData() {
-	changed.value = true
-	if (reminder.value) {
-		reminder.value.relativePeriod = periodInput.sign * periodToSeconds(periodInput.duration.days, periodInput.duration.hours, periodInput.duration.minutes, 0)
-		reminder.value.relativeTo = periodInput.relativeTo
-		reminder.value.reminder = null
-	}
+	reminder.value.relativePeriod = period.value.sign * periodToSeconds(period.value.duration, period.value.durationUnit)
+	reminder.value.relativeTo = period.value.relativeTo
+	reminder.value.reminder = null
+
 	emit('update:modelValue', reminder.value)
 }
-
-function submitForm() {
-	updateData()
-	close()
-}
-
-const changed = ref(false)
-
-function close() {
-	setTimeout(() => {
-		showForm.value = false
-		if (changed.value) {
-			changed.value = false
-		}
-	}, 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} ${t('task.reminder.days')} `: '') +
-			('' + duration.hours).padStart(2, '0') + ':' +
-			('' + duration.minutes).padStart(2, '0')
-}
-
-const relativeToOptions = {
-	[REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE]: t('task.attributes.dueDate'),
-	[REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE]: t('task.attributes.startDate'),
-	[REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE]: t('task.attributes.endDate'),
-} as const
-
-const relativeTo = computed(() => relativeToOptions[periodInput.relativeTo])
-
-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>
-.input {
-	max-width: 5rem;
-	width: 4rem;
-}
+.reminder-period {
+	display: flex;
+	flex-direction: column;
+	gap: .25rem;
 
-.close-button {
-	margin: 0.5rem;
-	width: calc(100% - 1rem);
+	.input, .select select {
+		width: 100% !important;
+		height: auto;
+	}
 }
-
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index f785d2166..a6ff11504 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -7,11 +7,14 @@
 			class="reminder-input"
 		>
 			<div class="reminder-detail">
-				<ReminderDetail :disabled="disabled" v-model="reminders[index]" />
+				<ReminderDetail
+					:disabled="disabled"
+					v-model="reminders[index]"
+					@update:model-value="updateData"/>
 			</div>
 			<div>
-				<BaseButton v-if="!disabled"  @click="removeReminderByIndex(index)" class="remove">
-					<icon icon="times" />
+				<BaseButton v-if="!disabled" @click="removeReminderByIndex(index)" class="remove">
+					<icon icon="times"/>
 				</BaseButton>
 			</div>
 		</div>
@@ -31,7 +34,7 @@
 <script setup lang="ts">
 import {reactive, ref, watch, type PropType} from 'vue'
 
-import type { ITaskReminder } from '@/modelTypes/ITaskReminder'
+import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import ReminderDetail from '@/components/tasks/partials/reminder-detail.vue'
@@ -60,6 +63,7 @@ watch(
 )
 
 const isAddReminder = ref(false)
+
 function toggleAddReminder() {
 	isAddReminder.value = !isAddReminder.value
 }
@@ -76,8 +80,9 @@ function editReminder(index: number) {
 	updateData()
 }
 
-function addNewReminder(newReminder : ITaskReminder) {
-	if (newReminder == null) {
+function addNewReminder(newReminder: ITaskReminder) {
+	console.log('add new reminder', newReminder)
+	if (newReminder === null) {
 		return
 	}
 	reminders.value.push(newReminder)
@@ -104,9 +109,11 @@ function removeReminderByIndex(index: number) {
 		margin-bottom: 0.75rem;
 	}
 }
+
 .reminder-detail {
 	width: 100%;
 }
+
 .remove {
 	color: var(--danger);
 	vertical-align: top;
diff --git a/src/helpers/time/period.ts b/src/helpers/time/period.ts
index a8e2b6eeb..cea6ac74a 100644
--- a/src/helpers/time/period.ts
+++ b/src/helpers/time/period.ts
@@ -1,20 +1,50 @@
-import {SECONDS_A_DAY, SECONDS_A_HOUR, SECONDS_A_MINUTE} from '@/constants/date'
+import {
+	SECONDS_A_DAY,
+	SECONDS_A_HOUR,
+	SECONDS_A_MINUTE,
+	SECONDS_A_MONTH,
+	SECONDS_A_WEEK,
+	SECONDS_A_YEAR,
+} from '@/constants/date'
+
+export type PeriodUnit = 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'years'
 
 /**
  * Convert time period given as seconds to days, hour, minutes, seconds
  */
-export function secondsToPeriod(seconds: number): {days: number, hours: number, minutes: number, seconds: number}  {
+export function secondsToPeriod(seconds: number): { unit: PeriodUnit, amount: number } {
+	if (seconds % SECONDS_A_DAY === 0) {
+		if (seconds % SECONDS_A_WEEK === 0) {
+			return {unit: 'weeks', amount: seconds / SECONDS_A_WEEK}
+		} else if (seconds % SECONDS_A_MONTH === 0) {
+			return {unit: 'months', amount: seconds / SECONDS_A_MONTH}
+		} else if (seconds % SECONDS_A_YEAR === 0) {
+			return {unit: 'years', amount: seconds / SECONDS_A_YEAR}
+		} else {
+			return {unit: 'days', amount: seconds / SECONDS_A_DAY}
+		}
+	}
+
 	return {
-		days: Math.floor(seconds / SECONDS_A_DAY),
-		hours: Math.floor(seconds % SECONDS_A_DAY / 3600),
-		minutes: Math.floor(seconds % SECONDS_A_HOUR / 60),
-		seconds: Math.floor(seconds % 60),
+		unit: 'hours',
+		amount: seconds / SECONDS_A_HOUR,
 	}
 }
 
 /**
  * Convert time period of days, hour, minutes, seconds to duration in seconds
  */
-export function periodToSeconds(days: number, hours: number, minutes: number, seconds: number): number {
-	return days * SECONDS_A_DAY + hours * SECONDS_A_HOUR + minutes * SECONDS_A_MINUTE + seconds
+export function periodToSeconds(period: number, unit: PeriodUnit): number {
+	switch (unit) {
+		case 'minutes':
+			return period * SECONDS_A_MINUTE
+		case 'hours':
+			return period * SECONDS_A_HOUR
+		case 'days':
+			return period * SECONDS_A_DAY
+		case 'weeks':
+			return period * SECONDS_A_WEEK
+	}
+
+	return 0
 }
diff --git a/src/models/task.ts b/src/models/task.ts
index 770b74fbd..5869ab74b 100644
--- a/src/models/task.ts
+++ b/src/models/task.ts
@@ -22,6 +22,7 @@ import AttachmentModel from './attachment'
 import SubscriptionModel from './subscription'
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 import TaskReminderModel from '@/models/taskReminder'
+import {periodToSeconds, secondsToPeriod} from '@/helpers/time/period'
 
 export const TASK_DEFAULT_COLOR = '#1973ff'
 
@@ -37,21 +38,13 @@ export function	getHexColor(hexColor: string): string {
  * Parses `repeatAfterSeconds` into a usable js object.
  */
 export function parseRepeatAfter(repeatAfterSeconds: number): IRepeatAfter {
-	let repeatAfter: IRepeatAfter = {type: 'hours', amount: repeatAfterSeconds / SECONDS_A_HOUR}
-
-	// if its dividable by 24, its something with days, otherwise hours
-	if (repeatAfterSeconds % SECONDS_A_DAY === 0) {
-		if (repeatAfterSeconds % SECONDS_A_WEEK === 0) {
-			repeatAfter = {type: 'weeks', amount: repeatAfterSeconds / SECONDS_A_WEEK}
-		} else if (repeatAfterSeconds % SECONDS_A_MONTH === 0) {
-			repeatAfter = {type:'months', amount: repeatAfterSeconds / SECONDS_A_MONTH}
-		} else if (repeatAfterSeconds % SECONDS_A_YEAR === 0) {
-			repeatAfter = {type: 'years', amount: repeatAfterSeconds / SECONDS_A_YEAR}
-		} else {
-			repeatAfter = {type: 'days', amount: repeatAfterSeconds / SECONDS_A_DAY}
-		}
+	
+	const period = secondsToPeriod(repeatAfterSeconds)
+	
+	return {
+		type: period.unit,
+		amount: period.amount,
 	}
-	return repeatAfter
 }
 
 export default class TaskModel extends AbstractModel<ITask> implements ITask {
diff --git a/src/types/IRepeatAfter.ts b/src/types/IRepeatAfter.ts
index 0b132a2f7..b86e1d559 100644
--- a/src/types/IRepeatAfter.ts
+++ b/src/types/IRepeatAfter.ts
@@ -1,4 +1,6 @@
 export const REPEAT_TYPES = {
+	Seconds: 'seconds',
+	Minutes: 'minutes',
 	Hours: 'hours',
 	Days: 'days',
 	Weeks: 'weeks',
-- 
2.40.1


From e6c4c189748a4de574ffd8309a64f9498d95efba Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 9 Jun 2023 13:54:17 +0200
Subject: [PATCH 13/27] feat(reminders): translate all reminder form strings

---
 .../tasks/partials/reminder-detail.vue        | 79 +++++++++++++++----
 .../tasks/partials/reminder-period.vue        | 12 +--
 src/i18n/lang/en.json                         | 22 +++++-
 3 files changed, 89 insertions(+), 24 deletions(-)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index ab8ba1006..b89fb4ed4 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -36,8 +36,9 @@ import {computed, ref, watch, type PropType} from 'vue'
 import {toRef} from '@vueuse/core'
 import {SECONDS_A_DAY} from '@/constants/date'
 import {REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
+import {useI18n} from 'vue-i18n'
 
-import {secondsToPeriod} from '@/helpers/time/period'
+import {PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 import {formatDateShort} from '@/helpers/time/formatDate'
 
@@ -47,6 +48,8 @@ import ReminderPeriod from '@/components/tasks/partials/reminder-period.vue'
 
 import TaskReminderModel from '@/models/taskReminder'
 
+const {t} = useI18n({useScope: 'global'})
+
 const props = defineProps({
 	modelValue: {
 		type: Object as PropType<ITaskReminder>,
@@ -72,16 +75,16 @@ const reminderDate = ref(null)
 const showFormSwitch = ref<null | 'relative' | 'absolute'>(null)
 
 const reminderText = computed(() => {
+	
+	if (reminder.value.relativeTo !== null) {
+		return formatReminder(reminder.value)
+	}
 
 	if (reminder.value.reminder !== null) {
 		return formatDateShort(reminder.value.reminder)
 	}
 
-	if (reminder.value.relativeTo !== null) {
-		return formatReminder(reminder.value)
-	}
-
-	return 'Add a reminder…'
+	return t('task.addReminder')
 })
 
 const modelValue = toRef(props, 'modelValue')
@@ -103,17 +106,65 @@ function setReminderDate() {
 function formatReminder(reminder: TaskReminderModel) {
 
 	const period = secondsToPeriod(reminder.relativePeriod)
-	let periodHuman = ''
-
-	if (period.days > 0) {
-		periodHuman = period.days + ' days'
+	
+	if (period.amount === 0) {
+		switch (reminder.relativeTo) {
+			case REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE:
+				return t('task.reminder.onDueDate')
+			case REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE:
+				return t('task.reminder.onStartDate')
+			case REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE:
+				return t('task.reminder.onEndDate')
+		}
 	}
-
-	if (period.days === 1) {
-		periodHuman = period.days + ' day'
+	
+	const amountAbs = Math.abs(period.amount)
+	
+	let relativeTo = ''
+	switch (reminder.relativeTo) {
+		case REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE:
+			relativeTo = t('task.attributes.dueDate')
+			break
+		case REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE:
+			relativeTo = t('task.attributes.startDate')
+			break
+		case REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE:
+			relativeTo = t('task.attributes.endDate')
+			break
 	}
+	
+	if (reminder.relativePeriod <= 0) {
+		return t('task.reminder.before', {
+			amount: amountAbs,
+			unit: translateUnit(amountAbs, period.unit),
+			type: relativeTo,
+		})
+	}
+	
+	return t('task.reminder.after', {
+		amount: amountAbs,
+		unit: translateUnit(amountAbs, period.unit),
+		type: relativeTo,
+	})
+}
 
-	return periodHuman + ' ' + (reminder.relativePeriod <= 0 ? 'before' : 'after') + ' ' + reminder.relativeTo
+function translateUnit(amount: number, unit: PeriodUnit): string {
+	switch (unit) {
+		case 'seconds':
+			return t('time.units.seconds', amount)
+		case 'minutes':
+			return t('time.units.minutes', amount)
+		case 'hours':
+			return t('time.units.hours', amount)
+		case 'days':
+			return t('time.units.days', amount)
+		case 'weeks':
+			return t('time.units.weeks', amount)
+		case 'months':
+			return t('time.units.months', amount)
+		case 'years':
+			return t('time.units.years', amount)
+	}
 }
 </script>
 
diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
index 3b9de3cc5..59631156f 100644
--- a/src/components/tasks/partials/reminder-period.vue
+++ b/src/components/tasks/partials/reminder-period.vue
@@ -12,20 +12,20 @@
 
 		<div class="select">
 			<select v-model="period.durationUnit" @change="updateData">
-				<option value="minutes">{{ $t('task.reminder.minutes') }}</option>
-				<option value="hours">{{ $t('task.reminder.hours') }}</option>
-				<option value="days">{{ $t('task.reminder.days') }}</option>
-				<option value="weeks">{{ $t('task.reminder.weeks') }}</option>
+				<option value="minutes">{{ $t('time.units.minutes', period.duration) }}</option>
+				<option value="hours">{{ $t('time.units.hours', period.duration) }}</option>
+				<option value="days">{{ $t('time.units.days', period.duration) }}</option>
+				<option value="weeks">{{ $t('time.units.weeks', period.duration) }}</option>
 			</select>
 		</div>
 
 		<div class="select">
 			<select v-model.number="period.sign" @change="updateData">
 				<option value="-1">
-					before
+					{{ $t('task.reminder.beforeShort') }}
 				</option>
 				<option value="1">
-					after
+					{{ $t('task.reminder.afterShort') }}
 				</option>
 			</select>
 		</div>
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index ca7f394f9..ea435ff50 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -721,10 +721,13 @@
       }
     },
     "reminder": {
-      "hoursShort": "HH",
-      "minutesShort": "MM",
-      "daysShort": "d",
-      "days": "days"
+      "before": "{amount} {unit} before {type}",
+      "after": "{amount} {unit} after {type}",
+      "beforeShort": "before",
+      "afterShort": "after",
+      "onDueDate": "On the due date",
+      "onStartDate": "On the start date",
+      "onEndDate": "On the end date"
     },
     "repeat": {
       "everyDay": "Every Day",
@@ -990,5 +993,16 @@
     "title": "About",
     "frontendVersion": "Frontend Version: {version}",
     "apiVersion": "API Version: {version}"
+  },
+  "time": {
+    "units": {
+      "seconds": "second|seconds",
+      "minutes": "minute|minutes",
+      "hours": "hour|hours",
+      "days": "day|days",
+      "weeks": "week|weeks",
+      "months": "month|months",
+      "years": "year|years"
+    }
   }
 }
\ No newline at end of file
-- 
2.40.1


From ae177c73ea6f9f4ef90f75ce0375c2707c1532f7 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 9 Jun 2023 14:23:32 +0200
Subject: [PATCH 14/27] feat(reminders): move reminder settings to a popup

---
 src/components/input/SimpleButton.vue         |  26 +++++
 src/components/input/datepicker.vue           |   8 +-
 src/components/misc/popup.vue                 |   3 +
 .../tasks/partials/reminder-detail.vue        | 102 ++++++++++++------
 .../tasks/partials/reminder-period.vue        |   1 -
 5 files changed, 103 insertions(+), 37 deletions(-)
 create mode 100644 src/components/input/SimpleButton.vue

diff --git a/src/components/input/SimpleButton.vue b/src/components/input/SimpleButton.vue
new file mode 100644
index 000000000..ffe8c5b56
--- /dev/null
+++ b/src/components/input/SimpleButton.vue
@@ -0,0 +1,26 @@
+<template>
+	<BaseButton class="simple-button">
+		<slot/>
+	</BaseButton>
+</template>
+
+<script lang="ts" setup>
+import BaseButton from '@/components/base/BaseButton.vue'
+</script>
+
+<style lang="scss" scoped>
+.simple-button {
+	color: var(--text);
+	padding: .25rem .5rem;
+	transition: background-color $transition;
+	border-radius: $radius;
+	display: block;
+	margin: .1rem 0;
+	width: 100%;
+	text-align: left;
+
+	&:hover {
+		background: var(--white);
+	}
+}
+</style>
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index f36f6480e..b8a3f8d67 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="datepicker">
-		<BaseButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
+		<SimpleButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
 			{{ date === null ? chooseDateLabel : formatDateShort(date) }}
-		</BaseButton>
+		</SimpleButton>
 
 		<CustomTransition name="fade">
 			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
@@ -28,14 +28,14 @@
 <script setup lang="ts">
 import {ref, onMounted, onBeforeUnmount, toRef, watch, type PropType} from 'vue'
 
-import BaseButton from '@/components/base/BaseButton.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
+import DatepickerInline from '@/components/input/datepickerInline.vue'
+import SimpleButton from '@/components/input/SimpleButton.vue'
 
 import {formatDateShort} from '@/helpers/time/formatDate'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
 import {useI18n} from 'vue-i18n'
-import DatepickerInline from '@/components/input/datepickerInline.vue'
 
 const props = defineProps({
 	modelValue: {
diff --git a/src/components/misc/popup.vue b/src/components/misc/popup.vue
index 7d8139d3c..4ab453645 100644
--- a/src/components/misc/popup.vue
+++ b/src/components/misc/popup.vue
@@ -23,11 +23,14 @@ const props = defineProps({
 	},
 })
 
+const emit = defineEmits(['close'])
+
 const open = ref(false)
 const popup = ref<HTMLElement | null>(null)
 
 function close() {
 	open.value = false
+	emit('close')
 }
 
 function toggle() {
diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index b89fb4ed4..159c17dbd 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -1,33 +1,44 @@
 <template>
 	<div>
+		<Popup @close="showFormSwitch = null">
+			<template #trigger="{toggle}">
+				<SimpleButton
+					@click.prevent.stop="toggle()"
+				>
+					{{ reminderText }}
+				</SimpleButton>
+			</template>
+			<template #content="{isOpen}">
+				<Card class="reminder-options-popup" :class="{'is-open': isOpen}" :padding="false">
+					<div class="options" v-if="showFormSwitch === null">
+						<SimpleButton
+							class="option-button"
+							v-for="p in presets"
+						>
+							{{ formatReminder(p) }}
+						</SimpleButton>
+						<SimpleButton @click="showFormSwitch = 'relative'" class="option-button">
+							Custom
+						</SimpleButton>
+						<SimpleButton @click="showFormSwitch = 'absolute'" class="option-button">
+							Date
+						</SimpleButton>
+					</div>
 
-		{{ reminderText }}
+					<ReminderPeriod
+						v-if="showFormSwitch === 'relative'"
+						v-model="reminder"
+						@update:modelValue="emit('update:modelValue', reminder)"
+					/>
 
-		<div class="options" v-if="showFormSwitch === null">
-			<BaseButton
-				v-for="p in presets"
-			>
-				{{ formatReminder(p) }}
-			</BaseButton>
-			<BaseButton @click="showFormSwitch = 'relative'">
-				Custom
-			</BaseButton>
-			<BaseButton @click="showFormSwitch = 'absolute'">
-				Date
-			</BaseButton>
-		</div>
-
-		<ReminderPeriod
-			v-if="showFormSwitch === 'relative'"
-			v-model="reminder"
-			@update:modelValue="emit('update:modelValue', reminder)"
-		/>
-
-		<DatepickerInline
-			v-if="showFormSwitch === 'absolute'"
-			v-model="reminderDate"
-			@update:modelValue="setReminderDate"
-		/>
+					<DatepickerInline
+						v-if="showFormSwitch === 'absolute'"
+						v-model="reminderDate"
+						@update:modelValue="setReminderDate"
+					/>
+				</Card>
+			</template>
+		</Popup>
 	</div>
 </template>
 
@@ -45,8 +56,11 @@ import {formatDateShort} from '@/helpers/time/formatDate'
 import BaseButton from '@/components/base/BaseButton.vue'
 import DatepickerInline from '@/components/input/datepickerInline.vue'
 import ReminderPeriod from '@/components/tasks/partials/reminder-period.vue'
+import Popup from '@/components/misc/popup.vue'
 
 import TaskReminderModel from '@/models/taskReminder'
+import Card from '@/components/misc/card.vue'
+import SimpleButton from '@/components/input/SimpleButton.vue'
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -75,7 +89,7 @@ const reminderDate = ref(null)
 const showFormSwitch = ref<null | 'relative' | 'absolute'>(null)
 
 const reminderText = computed(() => {
-	
+
 	if (reminder.value.relativeTo !== null) {
 		return formatReminder(reminder.value)
 	}
@@ -106,7 +120,7 @@ function setReminderDate() {
 function formatReminder(reminder: TaskReminderModel) {
 
 	const period = secondsToPeriod(reminder.relativePeriod)
-	
+
 	if (period.amount === 0) {
 		switch (reminder.relativeTo) {
 			case REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE:
@@ -117,9 +131,9 @@ function formatReminder(reminder: TaskReminderModel) {
 				return t('task.reminder.onEndDate')
 		}
 	}
-	
+
 	const amountAbs = Math.abs(period.amount)
-	
+
 	let relativeTo = ''
 	switch (reminder.relativeTo) {
 		case REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE:
@@ -132,7 +146,7 @@ function formatReminder(reminder: TaskReminderModel) {
 			relativeTo = t('task.attributes.endDate')
 			break
 	}
-	
+
 	if (reminder.relativePeriod <= 0) {
 		return t('task.reminder.before', {
 			amount: amountAbs,
@@ -140,7 +154,7 @@ function formatReminder(reminder: TaskReminderModel) {
 			type: relativeTo,
 		})
 	}
-	
+
 	return t('task.reminder.after', {
 		amount: amountAbs,
 		unit: translateUnit(amountAbs, period.unit),
@@ -174,4 +188,28 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
 	flex-direction: column;
 	align-items: flex-start;
 }
+
+:deep(.popup) {
+	top: unset;
+}
+
+.reminder-options-popup {
+	width: 300px;
+	z-index: 99;
+
+	@media screen and (max-width: ($tablet)) {
+		width: calc(100vw - 5rem);
+	}
+
+	.option-button {
+		font-size: .85rem;
+		border-radius: 0;
+		padding: .5rem;
+		margin: 0;
+
+		&:hover {
+			background: var(--grey-100);
+		}
+	}
+}
 </style>
diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
index 59631156f..f431cb000 100644
--- a/src/components/tasks/partials/reminder-period.vue
+++ b/src/components/tasks/partials/reminder-period.vue
@@ -95,7 +95,6 @@ const modelValue = toRef(props, 'modelValue')
 watch(
 	modelValue,
 	(value) => {
-		console.log({value})
 		const p = secondsToPeriod(value?.relativePeriod)
 		period.value.durationUnit = p.unit
 		period.value.duration = p.amount
-- 
2.40.1


From 02da1e171eeef63b4adca48a51311652b2471023 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 9 Jun 2023 14:27:11 +0200
Subject: [PATCH 15/27] feat(reminders): add confirm button

---
 src/components/misc/popup.vue                    |  2 +-
 .../tasks/partials/reminder-detail.vue           | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/misc/popup.vue b/src/components/misc/popup.vue
index 4ab453645..d118a3e77 100644
--- a/src/components/misc/popup.vue
+++ b/src/components/misc/popup.vue
@@ -8,7 +8,7 @@
 		}"
 		ref="popup"
 	>
-		<slot name="content" :isOpen="open"/>
+		<slot name="content" :isOpen="open" :toggle="toggle"/>
 	</div>
 </template>
 
diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 159c17dbd..daacf6bf6 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -8,7 +8,7 @@
 					{{ reminderText }}
 				</SimpleButton>
 			</template>
-			<template #content="{isOpen}">
+			<template #content="{isOpen, toggle}">
 				<Card class="reminder-options-popup" :class="{'is-open': isOpen}" :padding="false">
 					<div class="options" v-if="showFormSwitch === null">
 						<SimpleButton
@@ -36,6 +36,15 @@
 						v-model="reminderDate"
 						@update:modelValue="setReminderDate"
 					/>
+
+					<x-button
+						v-if="showFormSwitch !== null"
+						class="reminder__close-button"
+						:shadow="false"
+						@click="toggle"
+					>
+						{{ $t('misc.confirm') }}
+					</x-button>
 				</Card>
 			</template>
 		</Popup>
@@ -212,4 +221,9 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
 		}
 	}
 }
+
+.reminder__close-button {
+	margin: .5rem;
+	width: calc(100% - 1rem);
+}
 </style>
-- 
2.40.1


From 39cc7a00d81fa3c8669c2eddebff6e64d97925fc Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 9 Jun 2023 14:31:32 +0200
Subject: [PATCH 16/27] feat(reminders): make relative presets actually work

---
 .../tasks/partials/reminder-detail.vue        | 21 ++++++++++++-------
 src/i18n/lang/en.json                         |  4 +++-
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index daacf6bf6..1929ce348 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -12,16 +12,17 @@
 				<Card class="reminder-options-popup" :class="{'is-open': isOpen}" :padding="false">
 					<div class="options" v-if="showFormSwitch === null">
 						<SimpleButton
-							class="option-button"
 							v-for="p in presets"
+							class="option-button"
+							@click="setReminderFromPreset(p)"
 						>
 							{{ formatReminder(p) }}
 						</SimpleButton>
 						<SimpleButton @click="showFormSwitch = 'relative'" class="option-button">
-							Custom
+							{{ $t('task.reminder.custom') }}
 						</SimpleButton>
 						<SimpleButton @click="showFormSwitch = 'absolute'" class="option-button">
-							Date
+							{{ $t('task.reminder.dateAndTime') }}
 						</SimpleButton>
 					</div>
 
@@ -62,7 +63,6 @@ import {PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 import {formatDateShort} from '@/helpers/time/formatDate'
 
-import BaseButton from '@/components/base/BaseButton.vue'
 import DatepickerInline from '@/components/input/datepickerInline.vue'
 import ReminderPeriod from '@/components/tasks/partials/reminder-period.vue'
 import Popup from '@/components/misc/popup.vue'
@@ -88,10 +88,10 @@ const emit = defineEmits(['update:modelValue'])
 const reminder = ref<ITaskReminder>(new TaskReminderModel())
 
 const presets: TaskReminderModel[] = [
-	{relativePeriod: SECONDS_A_DAY, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
-	{relativePeriod: SECONDS_A_DAY * 3, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
-	{relativePeriod: SECONDS_A_DAY * 7, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
-	{relativePeriod: SECONDS_A_DAY * 30, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 3, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 7, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 30, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
 ]
 const reminderDate = ref(null)
 
@@ -126,6 +126,11 @@ function setReminderDate() {
 	emit('update:modelValue', reminder.value)
 }
 
+function setReminderFromPreset(preset) {
+	reminder.value = preset
+	emit('update:modelValue', reminder.value)
+}
+
 function formatReminder(reminder: TaskReminderModel) {
 
 	const period = secondsToPeriod(reminder.relativePeriod)
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index ea435ff50..89e79c8b1 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -727,7 +727,9 @@
       "afterShort": "after",
       "onDueDate": "On the due date",
       "onStartDate": "On the start date",
-      "onEndDate": "On the end date"
+      "onEndDate": "On the end date",
+      "custom": "Custom",
+      "dateAndTime": "Date and time"
     },
     "repeat": {
       "everyDay": "Every Day",
-- 
2.40.1


From 11f94e403757701eef0d618350566382ee88378d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 9 Jun 2023 14:37:26 +0200
Subject: [PATCH 17/27] feat(reminders): make adding new reminders less
 confusing

---
 .../tasks/partials/reminder-detail.vue        | 21 +++++++++++++----
 src/components/tasks/partials/reminders.vue   | 23 ++++---------------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 1929ce348..ccb3cb983 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/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) {
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index a6ff11504..1c105263b 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -19,15 +19,11 @@
 			</div>
 		</div>
 
-		<div v-if="!disabled" class="reminder-input">
-			<BaseButton @click="toggleAddReminder">
-				{{ $t('task.addReminder') }}
-			</BaseButton>
-		</div>
-
-		<div v-if="isAddReminder" class="reminder-input">
-			<ReminderDetail :disabled="disabled" @update:modelValue="addNewReminder"/>
-		</div>
+		<ReminderDetail
+			:disabled="disabled"
+			@update:modelValue="addNewReminder"
+			:clear-after-update="true"
+		/>
 	</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()
 }
 
-- 
2.40.1


From eac19e28d675b5ee8cc714b2bdf5d71b348c67a3 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 9 Jun 2023 14:39:35 +0200
Subject: [PATCH 18/27] feat(reminders): add more spacing

---
 src/components/tasks/partials/reminder-period.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
index f431cb000..a6d7ec004 100644
--- a/src/components/tasks/partials/reminder-period.vue
+++ b/src/components/tasks/partials/reminder-period.vue
@@ -98,7 +98,7 @@ watch(
 		const p = secondsToPeriod(value?.relativePeriod)
 		period.value.durationUnit = p.unit
 		period.value.duration = p.amount
-		period.value.relativeTo = value?.relativeTo
+		period.value.relativeTo = value?.relativeTo || REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE
 	},
 	{immediate: true},
 )
@@ -117,6 +117,7 @@ function updateData() {
 	display: flex;
 	flex-direction: column;
 	gap: .25rem;
+	padding: .5rem .5rem 0;
 
 	.input, .select select {
 		width: 100% !important;
-- 
2.40.1


From 04642ae1ec99376907980772ec1b4e42726a6a08 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 9 Jun 2023 14:43:02 +0200
Subject: [PATCH 19/27] fix(reminders): set date over relative reminder

---
 src/components/tasks/partials/reminder-detail.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index ccb3cb983..0def39a28 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -135,6 +135,8 @@ function setReminderDate() {
 	reminder.value.reminder = reminderDate.value === null
 		? null
 		: new Date(reminderDate.value)
+	reminder.value.relativeTo = null
+	reminder.value.relativePeriod = 0
 	updateData()
 }
 
-- 
2.40.1


From dd3a5fe6b505ad91ad194564ba7755d25a681b37 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 9 Jun 2023 14:46:34 +0200
Subject: [PATCH 20/27] fix(reminders): duplicate reminder for each change

---
 src/components/tasks/partials/reminder-detail.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 0def39a28..d8c5e53f0 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -29,7 +29,7 @@
 					<ReminderPeriod
 						v-if="showFormSwitch === 'relative'"
 						v-model="reminder"
-						@update:modelValue="emit('update:modelValue', reminder)"
+						@update:modelValue="updateDataAndMaybeClose(toggle)"
 					/>
 
 					<DatepickerInline
@@ -146,6 +146,13 @@ function setReminderFromPreset(preset, toggle) {
 	toggle()
 }
 
+function updateDataAndMaybeClose(toggle) {
+	updateData()
+	if (props.clearAfterUpdate) {
+		toggle()
+	}
+}
+
 function formatReminder(reminder: TaskReminderModel) {
 
 	const period = secondsToPeriod(reminder.relativePeriod)
-- 
2.40.1


From 9ec29cad300fe1c25cb355fb86e165ca920df511 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 10 Jun 2023 17:26:06 +0200
Subject: [PATCH 21/27] fix: lint

---
 src/components/input/datepicker.vue               |  2 --
 src/components/input/datepickerInline.vue         |  1 -
 src/components/tasks/partials/reminder-detail.vue |  3 ++-
 src/components/tasks/partials/reminder-period.vue |  5 -----
 src/components/tasks/partials/reminders.vue       | 10 +---------
 src/models/task.ts                                |  3 +--
 6 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index b8a3f8d67..a937189d6 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -58,8 +58,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])
 
-const {t} = useI18n({useScope: 'global'})
-
 const date = ref<Date | null>()
 const show = ref(false)
 const changed = ref(false)
diff --git a/src/components/input/datepickerInline.vue b/src/components/input/datepickerInline.vue
index e4c684bef..e36773be8 100644
--- a/src/components/input/datepickerInline.vue
+++ b/src/components/input/datepickerInline.vue
@@ -95,7 +95,6 @@ const emit = defineEmits(['update:modelValue', 'close-on-change'])
 const {t} = useI18n({useScope: 'global'})
 
 const date = ref<Date | null>()
-const show = ref(false)
 const changed = ref(false)
 
 const modelValue = toRef(props, 'modelValue')
diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index d8c5e53f0..089696060 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -12,7 +12,8 @@
 				<Card class="reminder-options-popup" :class="{'is-open': isOpen}" :padding="false">
 					<div class="options" v-if="showFormSwitch === null">
 						<SimpleButton
-							v-for="p in presets"
+							v-for="(p, k) in presets"
+							:key="k"
 							class="option-button"
 							@click="setReminderFromPreset(p, toggle)"
 						>
diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
index a6d7ec004..8e456b08d 100644
--- a/src/components/tasks/partials/reminder-period.vue
+++ b/src/components/tasks/partials/reminder-period.vue
@@ -48,7 +48,6 @@
 
 <script setup lang="ts">
 import {ref, watch, type PropType} from 'vue'
-import {useI18n} from 'vue-i18n'
 import {toRef} from '@vueuse/core'
 
 import {periodToSeconds, PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
@@ -58,8 +57,6 @@ import TaskReminderModel from '@/models/taskReminder'
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 import {REMINDER_PERIOD_RELATIVE_TO_TYPES, type IReminderPeriodRelativeTo} from '@/types/IReminderPeriodRelativeTo'
 
-const {t} = useI18n({useScope: 'global'})
-
 const props = defineProps({
 	modelValue: {
 		type: Object as PropType<ITaskReminder>,
@@ -75,8 +72,6 @@ const emit = defineEmits(['update:modelValue'])
 
 const reminder = ref<ITaskReminder>(new TaskReminderModel())
 
-const showForm = ref(false)
-
 interface PeriodInput {
 	duration: number,
 	durationUnit: PeriodUnit,
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index 1c105263b..ea73774e8 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -28,13 +28,12 @@
 </template>
 
 <script setup lang="ts">
-import {reactive, ref, watch, type PropType} from 'vue'
+import {ref, watch, type PropType} from 'vue'
 
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import ReminderDetail from '@/components/tasks/partials/reminder-detail.vue'
-import TaskReminderModel from '@/models/taskReminder'
 
 const props = defineProps({
 	modelValue: {
@@ -62,13 +61,6 @@ function updateData() {
 	emit('update:modelValue', reminders.value)
 }
 
-function editReminder(index: number) {
-	if (reminders.value[index] === null) {
-		return
-	}
-	updateData()
-}
-
 function addNewReminder(newReminder: ITaskReminder) {
 	if (newReminder === null) {
 		return
diff --git a/src/models/task.ts b/src/models/task.ts
index 5869ab74b..7a7d69c60 100644
--- a/src/models/task.ts
+++ b/src/models/task.ts
@@ -1,5 +1,4 @@
 import {PRIORITIES, type Priority} from '@/constants/priorities'
-import {SECONDS_A_DAY, SECONDS_A_HOUR, SECONDS_A_MONTH, SECONDS_A_WEEK, SECONDS_A_YEAR} from '@/constants/date'
 
 import type {ITask} from '@/modelTypes/ITask'
 import type {ILabel} from '@/modelTypes/ILabel'
@@ -22,7 +21,7 @@ import AttachmentModel from './attachment'
 import SubscriptionModel from './subscription'
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 import TaskReminderModel from '@/models/taskReminder'
-import {periodToSeconds, secondsToPeriod} from '@/helpers/time/period'
+import {secondsToPeriod} from '@/helpers/time/period'
 
 export const TASK_DEFAULT_COLOR = '#1973ff'
 
-- 
2.40.1


From bfcb36e093263950bef437a376d61e9f3844776b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 10 Jun 2023 17:29:30 +0200
Subject: [PATCH 22/27] fix(reminders): align remove icon with the rest

---
 src/components/tasks/partials/reminders.vue | 23 +++++++++++----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index ea73774e8..b259fce5d 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -6,17 +6,18 @@
 			:class="{ 'overdue': r.reminder < new Date() }"
 			class="reminder-input"
 		>
-			<div class="reminder-detail">
-				<ReminderDetail
-					:disabled="disabled"
-					v-model="reminders[index]"
-					@update:model-value="updateData"/>
-			</div>
-			<div>
-				<BaseButton v-if="!disabled" @click="removeReminderByIndex(index)" class="remove">
-					<icon icon="times"/>
-				</BaseButton>
-			</div>
+			<ReminderDetail
+				class="reminder-detail"
+				:disabled="disabled"
+				v-model="reminders[index]"
+				@update:model-value="updateData"/>
+			<BaseButton
+				v-if="!disabled"
+				@click="removeReminderByIndex(index)"
+				class="remove"
+			>
+				<icon icon="times"/>
+			</BaseButton>
 		</div>
 
 		<ReminderDetail
-- 
2.40.1


From 2677f6254d142f4dce5c9b194b181f90403d206e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 10 Jun 2023 17:35:50 +0200
Subject: [PATCH 23/27] feat(reminders): highlight which preset or custom date
 is selected

---
 .../tasks/partials/reminder-detail.vue          | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 089696060..d908efd14 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -15,14 +15,23 @@
 							v-for="(p, k) in presets"
 							:key="k"
 							class="option-button"
+							:class="{'currently-active': p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo}"
 							@click="setReminderFromPreset(p, toggle)"
 						>
 							{{ formatReminder(p) }}
 						</SimpleButton>
-						<SimpleButton @click="showFormSwitch = 'relative'" class="option-button">
+						<SimpleButton 
+							@click="showFormSwitch = 'relative'" 
+							class="option-button"
+							:class="{'currently-active': modelValue?.relativeTo !== null && presets.find(p => p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo) === undefined}"
+						>
 							{{ $t('task.reminder.custom') }}
 						</SimpleButton>
-						<SimpleButton @click="showFormSwitch = 'absolute'" class="option-button">
+						<SimpleButton 
+							@click="showFormSwitch = 'absolute'" 
+							class="option-button"
+							:class="{'currently-active': modelValue?.relativeTo === null}"
+						>
 							{{ $t('task.reminder.dateAndTime') }}
 						</SimpleButton>
 					</div>
@@ -254,4 +263,8 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
 	margin: .5rem;
 	width: calc(100% - 1rem);
 }
+
+.currently-active {
+	color: var(--primary);
+}
 </style>
-- 
2.40.1


From 9a736cf65fb7c2146169290d3cedd613f5f9cbae Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 10 Jun 2023 18:39:33 +0200
Subject: [PATCH 24/27] fix(reminders): style flatpickr so that it blends in
 more

---
 src/components/tasks/partials/reminder-detail.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index d908efd14..ca7245bbe 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -240,7 +240,7 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
 }
 
 .reminder-options-popup {
-	width: 300px;
+	width: 310px;
 	z-index: 99;
 
 	@media screen and (max-width: ($tablet)) {
@@ -267,4 +267,9 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
 .currently-active {
 	color: var(--primary);
 }
+
+:deep(.flatpickr-calendar) {
+	margin: 0 auto;
+	box-shadow: none;
+}
 </style>
-- 
2.40.1


From 8930f615489b270272510204b9191e8caafb5a4e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 10 Jun 2023 18:46:15 +0200
Subject: [PATCH 25/27] fix(reminders): flatpickr styling improvements

---
 src/components/input/datepickerInline.vue     | 23 ++++++++++++-------
 .../tasks/partials/reminder-detail.vue        |  7 ++----
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/input/datepickerInline.vue b/src/components/input/datepickerInline.vue
index e36773be8..0b6e754b6 100644
--- a/src/components/input/datepickerInline.vue
+++ b/src/components/input/datepickerInline.vue
@@ -61,11 +61,12 @@
 		</span>
 	</BaseButton>
 
-	<flat-pickr
-		:config="flatPickerConfig"
-		class="input"
-		v-model="flatPickrDate"
-	/>
+	<div class="flatpickr-container">
+		<flat-pickr
+			:config="flatPickerConfig"
+			v-model="flatPickrDate"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -214,8 +215,14 @@ function getWeekdayFromStringInterval(dateString: string) {
 	}
 }
 
-:deep(.flatpickr-calendar) {
-	margin: 0 auto 8px;
-	box-shadow: none;
+.flatpickr-container {
+	:deep(.flatpickr-calendar) {
+		margin: 0 auto 8px;
+		box-shadow: none;
+	}
+
+	:deep(.input) {
+		border: none;
+	}
 }
 </style>
diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index ca7245bbe..099a9224b 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -166,6 +166,8 @@ function updateDataAndMaybeClose(toggle) {
 function formatReminder(reminder: TaskReminderModel) {
 
 	const period = secondsToPeriod(reminder.relativePeriod)
+	
+	// TODO: 0 does not work
 
 	if (period.amount === 0) {
 		switch (reminder.relativeTo) {
@@ -267,9 +269,4 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
 .currently-active {
 	color: var(--primary);
 }
-
-:deep(.flatpickr-calendar) {
-	margin: 0 auto;
-	box-shadow: none;
-}
 </style>
-- 
2.40.1


From 5e4eb4a728d48f684490921949f2a7f3af46e1e7 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 10 Jun 2023 18:54:10 +0200
Subject: [PATCH 26/27] fix(reminders): custom relative highlight now only when
 a custom relative reminder was actually selected

---
 src/components/tasks/partials/reminder-detail.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 099a9224b..44856d4ed 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -23,7 +23,7 @@
 						<SimpleButton 
 							@click="showFormSwitch = 'relative'" 
 							class="option-button"
-							:class="{'currently-active': modelValue?.relativeTo !== null && presets.find(p => p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo) === undefined}"
+							:class="{'currently-active': typeof modelValue !== 'undefined' && modelValue?.relativeTo !== null && presets.find(p => p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo) === undefined}"
 						>
 							{{ $t('task.reminder.custom') }}
 						</SimpleButton>
-- 
2.40.1


From 098b5fa2b1f4375aa18d1df45f4b61a2d9779a78 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 10 Jun 2023 18:54:39 +0200
Subject: [PATCH 27/27] fix(reminders): properly parse relative reminders which
 don't have an amount

---
 src/components/tasks/partials/reminder-detail.vue | 11 ++++-------
 src/models/taskReminder.ts                        |  3 +++
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 44856d4ed..9fd7b0309 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -20,15 +20,15 @@
 						>
 							{{ formatReminder(p) }}
 						</SimpleButton>
-						<SimpleButton 
-							@click="showFormSwitch = 'relative'" 
+						<SimpleButton
+							@click="showFormSwitch = 'relative'"
 							class="option-button"
 							:class="{'currently-active': typeof modelValue !== 'undefined' && modelValue?.relativeTo !== null && presets.find(p => p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo) === undefined}"
 						>
 							{{ $t('task.reminder.custom') }}
 						</SimpleButton>
-						<SimpleButton 
-							@click="showFormSwitch = 'absolute'" 
+						<SimpleButton
+							@click="showFormSwitch = 'absolute'"
 							class="option-button"
 							:class="{'currently-active': modelValue?.relativeTo === null}"
 						>
@@ -164,10 +164,7 @@ function updateDataAndMaybeClose(toggle) {
 }
 
 function formatReminder(reminder: TaskReminderModel) {
-
 	const period = secondsToPeriod(reminder.relativePeriod)
-	
-	// TODO: 0 does not work
 
 	if (period.amount === 0) {
 		switch (reminder.relativeTo) {
diff --git a/src/models/taskReminder.ts b/src/models/taskReminder.ts
index b93139ecb..e14e071ac 100644
--- a/src/models/taskReminder.ts
+++ b/src/models/taskReminder.ts
@@ -12,6 +12,9 @@ export default class TaskReminderModel extends AbstractModel<ITaskReminder> impl
 		super()
 		this.assignData(data)
 		this.reminder = parseDateOrNull(data.reminder)
+		if (this.relativeTo === '') {
+			this.relativeTo = null
+		}
 	}
 
 }
\ No newline at end of file
-- 
2.40.1