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, @@ -72,16 +75,16 @@ const reminderDate = ref(null) const showFormSwitch = ref(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) + } } 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 @@
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