feat: start adding relative reminder picker with more options

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,
+	modelValue,
-		(newReminder) => {
+	(newReminder) => {
-			reminder.value = newReminder || new TaskReminderModel()
+		reminder.value = newReminder || new TaskReminderModel()
-		},
+	},
-		{immediate: true},
+	{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>

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
 		}

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>
+	<Story>
-    <Variant title="Default">
+		<Variant title="Default">
-      <reminders />
+			<reminders/>
-    </Variant>
+		</Variant>
-  </Story>
+		<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>