feat: Use new Reminders API instead of reminder_dates

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
 	}
 

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

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
+}

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

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)
+	}
+
+}

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()
 			})
 		}
 

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]
+

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
 }