feat(reminders): only show relative reminders when there's a date to relate them to

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

@@ -10,7 +10,7 @@
 			</template>
 			<template #content="{isOpen, toggle}">
 				<Card class="reminder-options-popup" :class="{'is-open': isOpen}" :padding="false">
-					<div class="options" v-if="showFormSwitch === null">
+					<div class="options" v-if="activeForm === null">
 						<SimpleButton
 							v-for="(p, k) in presets"
 							:key="k"
@@ -37,13 +37,13 @@
 					</div>
 
 					<ReminderPeriod
-						v-if="showFormSwitch === 'relative'"
+						v-if="activeForm === 'relative'"
 						v-model="reminder"
 						@update:modelValue="updateDataAndMaybeClose(toggle)"
 					/>
 
 					<DatepickerInline
-						v-if="showFormSwitch === 'absolute'"
+						v-if="activeForm === 'absolute'"
 						v-model="reminderDate"
 						@update:modelValue="setReminderDate"
 					/>
@@ -63,10 +63,10 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, watch, type PropType} from 'vue'
+import {computed, ref, watch} from 'vue'
 import {toRef} from '@vueuse/core'
 import {SECONDS_A_DAY} from '@/constants/date'
-import {REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
+import {IReminderPeriodRelativeTo, REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
 import {useI18n} from 'vue-i18n'
 
 import {PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
@@ -83,33 +83,40 @@ import SimpleButton from '@/components/input/SimpleButton.vue'
 
 const {t} = useI18n({useScope: 'global'})
 
-const props = defineProps({
+const props = withDefaults(defineProps<{
-	modelValue: {
+	modelValue?: ITaskReminder,
-		type: Object as PropType<ITaskReminder>,
+	disabled?: boolean,
-		required: false,
+	clearAfterUpdate?: boolean,
-	},
+	defaultRelativeTo?: null | IReminderPeriodRelativeTo,
-	disabled: {
+}>(), {
-		default: false,
+	disabled: false,
-	},
+	clearAfterUpdate: false,
-	clearAfterUpdate: {
+	defaultRelativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
-		type: Boolean,
-		default: false,
-	},
 })
 
 const emit = defineEmits(['update:modelValue'])
 
 const reminder = ref<ITaskReminder>(new TaskReminderModel())
 
-const presets: TaskReminderModel[] = [
+const presets = computed<TaskReminderModel[]>(() => [
-	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY, relativeTo: props.defaultRelativeTo},
-	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 3, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 3, relativeTo: props.defaultRelativeTo},
-	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 7, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 7, relativeTo: props.defaultRelativeTo},
-	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 30, relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 30, relativeTo: props.defaultRelativeTo},
-]
+])
 const reminderDate = ref(null)
 
-const showFormSwitch = ref<null | 'relative' | 'absolute'>(null)
+type availableForms = null | 'relative' | 'absolute'
+
+const showFormSwitch = ref<availableForms>(null)
+
+const activeForm = computed<availableForms>(() => {
+	if (props.defaultRelativeTo === null) {
+		return 'absolute'
+	}
+
+	return showFormSwitch.value
+})
 
 const reminderText = computed(() => {
 

src/components/tasks/partials/reminders.vue

@@ -10,7 +10,9 @@
 				class="reminder-detail"
 				:disabled="disabled"
 				v-model="reminders[index]"
-				@update:model-value="updateData"/>
+				@update:model-value="updateData"
+				:default-relative-to="defaultRelativeTo"
+			/>
 			<BaseButton
 				v-if="!disabled"
 				@click="removeReminderByIndex(index)"
@@ -24,17 +26,20 @@
 			:disabled="disabled"
 			@update:modelValue="addNewReminder"
 			:clear-after-update="true"
+			:default-relative-to="defaultRelativeTo"
 		/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import {ref, watch, type PropType} from 'vue'
+import {ref, watch, type PropType, computed} 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 type {ITask} from '@/modelTypes/ITask'
+import {REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
 
 const props = defineProps({
 	modelValue: {
@@ -44,6 +49,10 @@ const props = defineProps({
 	disabled: {
 		default: false,
 	},
+	task: {
+		type: Object as PropType<ITask>,
+		required: false,
+	},
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -58,6 +67,26 @@ watch(
 	{immediate: true},
 )
 
+const defaultRelativeTo = computed(() => {
+	if (typeof props.task === 'undefined') {
+		return null
+	}
+	
+	if (props.task?.dueDate) {
+		return REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE
+	}
+	
+	if (props.task.dueDate === null && props.task.startDate !== null) {
+		return REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE
+	}
+	
+	if (props.task.dueDate === null && props.task.startDate === null && props.task.endDate !== null) {
+		return REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE
+	}
+	
+	return null
+})
+
 function updateData() {
 	emit('update:modelValue', reminders.value)
 }

src/views/tasks/TaskDetailView.vue

@@ -162,6 +162,7 @@
 									:ref="e => setFieldRef('reminders', e)"
 									v-model="task.reminders"
 									@update:model-value="saveTask"
+									:task="task"
 								/>
 							</div>
 						</CustomTransition>