2023-03-14 05:49:49 +00:00
|
|
|
<template>
|
2023-03-16 08:54:18 +00:00
|
|
|
<div>
|
2023-06-09 12:23:32 +00:00
|
|
|
<Popup @close="showFormSwitch = null">
|
|
|
|
<template #trigger="{toggle}">
|
|
|
|
<SimpleButton
|
2023-06-13 10:30:07 +00:00
|
|
|
v-tooltip="reminder.reminder && reminder.relativeTo !== null ? formatDateShort(reminder.reminder) : null"
|
2023-06-09 12:23:32 +00:00
|
|
|
@click.prevent.stop="toggle()"
|
|
|
|
>
|
|
|
|
{{ reminderText }}
|
|
|
|
</SimpleButton>
|
|
|
|
</template>
|
2023-06-09 12:27:11 +00:00
|
|
|
<template #content="{isOpen, toggle}">
|
2023-06-09 12:23:32 +00:00
|
|
|
<Card class="reminder-options-popup" :class="{'is-open': isOpen}" :padding="false">
|
2023-06-13 10:03:28 +00:00
|
|
|
<div class="options" v-if="activeForm === null">
|
2023-06-09 12:23:32 +00:00
|
|
|
<SimpleButton
|
2023-06-10 15:26:06 +00:00
|
|
|
v-for="(p, k) in presets"
|
|
|
|
:key="k"
|
2023-06-09 12:31:32 +00:00
|
|
|
class="option-button"
|
2023-06-10 15:35:50 +00:00
|
|
|
:class="{'currently-active': p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo}"
|
2023-06-09 12:37:26 +00:00
|
|
|
@click="setReminderFromPreset(p, toggle)"
|
2023-06-09 12:23:32 +00:00
|
|
|
>
|
|
|
|
{{ formatReminder(p) }}
|
|
|
|
</SimpleButton>
|
2023-06-10 16:54:39 +00:00
|
|
|
<SimpleButton
|
|
|
|
@click="showFormSwitch = 'relative'"
|
2023-06-10 15:35:50 +00:00
|
|
|
class="option-button"
|
2023-06-10 16:54:10 +00:00
|
|
|
:class="{'currently-active': typeof modelValue !== 'undefined' && modelValue?.relativeTo !== null && presets.find(p => p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo) === undefined}"
|
2023-06-10 15:35:50 +00:00
|
|
|
>
|
2023-06-09 12:31:32 +00:00
|
|
|
{{ $t('task.reminder.custom') }}
|
2023-06-09 12:23:32 +00:00
|
|
|
</SimpleButton>
|
2023-06-10 16:54:39 +00:00
|
|
|
<SimpleButton
|
|
|
|
@click="showFormSwitch = 'absolute'"
|
2023-06-10 15:35:50 +00:00
|
|
|
class="option-button"
|
|
|
|
:class="{'currently-active': modelValue?.relativeTo === null}"
|
|
|
|
>
|
2023-06-09 12:31:32 +00:00
|
|
|
{{ $t('task.reminder.dateAndTime') }}
|
2023-06-09 12:23:32 +00:00
|
|
|
</SimpleButton>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<ReminderPeriod
|
2023-06-13 10:03:28 +00:00
|
|
|
v-if="activeForm === 'relative'"
|
2023-06-09 12:23:32 +00:00
|
|
|
v-model="reminder"
|
2023-06-09 12:46:34 +00:00
|
|
|
@update:modelValue="updateDataAndMaybeClose(toggle)"
|
2023-06-09 12:23:32 +00:00
|
|
|
/>
|
|
|
|
|
|
|
|
<DatepickerInline
|
2023-06-13 10:03:28 +00:00
|
|
|
v-if="activeForm === 'absolute'"
|
2023-06-09 12:23:32 +00:00
|
|
|
v-model="reminderDate"
|
|
|
|
@update:modelValue="setReminderDate"
|
|
|
|
/>
|
2023-06-09 12:27:11 +00:00
|
|
|
|
|
|
|
<x-button
|
|
|
|
v-if="showFormSwitch !== null"
|
|
|
|
class="reminder__close-button"
|
|
|
|
:shadow="false"
|
|
|
|
@click="toggle"
|
|
|
|
>
|
|
|
|
{{ $t('misc.confirm') }}
|
|
|
|
</x-button>
|
2023-06-09 12:23:32 +00:00
|
|
|
</Card>
|
|
|
|
</template>
|
|
|
|
</Popup>
|
2023-03-14 05:49:49 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2023-06-13 10:03:28 +00:00
|
|
|
import {computed, ref, watch} from 'vue'
|
2023-06-05 14:16:10 +00:00
|
|
|
import {toRef} from '@vueuse/core'
|
|
|
|
import {SECONDS_A_DAY} from '@/constants/date'
|
2023-06-13 10:03:28 +00:00
|
|
|
import {IReminderPeriodRelativeTo, REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
|
2023-06-09 11:54:17 +00:00
|
|
|
import {useI18n} from 'vue-i18n'
|
2023-03-30 10:40:19 +00:00
|
|
|
|
2023-06-09 11:54:17 +00:00
|
|
|
import {PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
|
2023-03-30 10:40:19 +00:00
|
|
|
import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
|
2023-06-05 14:16:10 +00:00
|
|
|
import {formatDateShort} from '@/helpers/time/formatDate'
|
2023-03-30 10:40:19 +00:00
|
|
|
|
2023-06-09 11:19:47 +00:00
|
|
|
import DatepickerInline from '@/components/input/datepickerInline.vue'
|
2023-03-15 21:26:57 +00:00
|
|
|
import ReminderPeriod from '@/components/tasks/partials/reminder-period.vue'
|
2023-06-09 12:23:32 +00:00
|
|
|
import Popup from '@/components/misc/popup.vue'
|
2023-06-09 11:19:47 +00:00
|
|
|
|
2023-03-15 21:26:57 +00:00
|
|
|
import TaskReminderModel from '@/models/taskReminder'
|
2023-06-09 12:23:32 +00:00
|
|
|
import Card from '@/components/misc/card.vue'
|
|
|
|
import SimpleButton from '@/components/input/SimpleButton.vue'
|
2023-03-14 05:49:49 +00:00
|
|
|
|
2023-06-09 11:54:17 +00:00
|
|
|
const {t} = useI18n({useScope: 'global'})
|
|
|
|
|
2023-06-13 10:03:28 +00:00
|
|
|
const props = withDefaults(defineProps<{
|
|
|
|
modelValue?: ITaskReminder,
|
|
|
|
disabled?: boolean,
|
|
|
|
clearAfterUpdate?: boolean,
|
|
|
|
defaultRelativeTo?: null | IReminderPeriodRelativeTo,
|
|
|
|
}>(), {
|
|
|
|
disabled: false,
|
|
|
|
clearAfterUpdate: false,
|
|
|
|
defaultRelativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
|
2023-03-14 05:49:49 +00:00
|
|
|
})
|
|
|
|
|
2023-03-16 08:54:18 +00:00
|
|
|
const emit = defineEmits(['update:modelValue'])
|
2023-03-14 05:49:49 +00:00
|
|
|
|
2023-03-30 10:40:19 +00:00
|
|
|
const reminder = ref<ITaskReminder>(new TaskReminderModel())
|
2023-06-05 14:16:10 +00:00
|
|
|
|
2023-06-13 10:03:28 +00:00
|
|
|
const presets = computed<TaskReminderModel[]>(() => [
|
|
|
|
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY, relativeTo: props.defaultRelativeTo},
|
|
|
|
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 3, relativeTo: props.defaultRelativeTo},
|
|
|
|
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 7, relativeTo: props.defaultRelativeTo},
|
|
|
|
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 30, relativeTo: props.defaultRelativeTo},
|
|
|
|
])
|
2023-06-09 11:19:47 +00:00
|
|
|
const reminderDate = ref(null)
|
2023-03-14 05:49:49 +00:00
|
|
|
|
2023-06-13 10:03:28 +00:00
|
|
|
type availableForms = null | 'relative' | 'absolute'
|
|
|
|
|
|
|
|
const showFormSwitch = ref<availableForms>(null)
|
|
|
|
|
|
|
|
const activeForm = computed<availableForms>(() => {
|
|
|
|
if (props.defaultRelativeTo === null) {
|
|
|
|
return 'absolute'
|
|
|
|
}
|
|
|
|
|
|
|
|
return showFormSwitch.value
|
|
|
|
})
|
2023-03-17 09:34:37 +00:00
|
|
|
|
2023-06-05 14:16:10 +00:00
|
|
|
const reminderText = computed(() => {
|
2023-06-09 12:23:32 +00:00
|
|
|
|
2023-06-09 11:54:17 +00:00
|
|
|
if (reminder.value.relativeTo !== null) {
|
|
|
|
return formatReminder(reminder.value)
|
|
|
|
}
|
2023-06-05 14:16:10 +00:00
|
|
|
|
|
|
|
if (reminder.value.reminder !== null) {
|
|
|
|
return formatDateShort(reminder.value.reminder)
|
|
|
|
}
|
|
|
|
|
2023-06-09 11:54:17 +00:00
|
|
|
return t('task.addReminder')
|
2023-06-05 14:16:10 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
const modelValue = toRef(props, 'modelValue')
|
2023-03-14 05:49:49 +00:00
|
|
|
watch(
|
2023-06-05 14:16:10 +00:00
|
|
|
modelValue,
|
|
|
|
(newReminder) => {
|
|
|
|
reminder.value = newReminder || new TaskReminderModel()
|
|
|
|
},
|
|
|
|
{immediate: true},
|
2023-03-14 05:49:49 +00:00
|
|
|
)
|
|
|
|
|
2023-06-09 12:37:26 +00:00
|
|
|
function updateData() {
|
|
|
|
emit('update:modelValue', reminder.value)
|
|
|
|
|
|
|
|
if (props.clearAfterUpdate) {
|
|
|
|
reminder.value = new TaskReminderModel()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-03-16 08:54:18 +00:00
|
|
|
function setReminderDate() {
|
2023-06-09 11:19:47 +00:00
|
|
|
reminder.value.reminder = reminderDate.value === null
|
|
|
|
? null
|
|
|
|
: new Date(reminderDate.value)
|
2023-06-09 12:43:02 +00:00
|
|
|
reminder.value.relativeTo = null
|
|
|
|
reminder.value.relativePeriod = 0
|
2023-06-09 12:37:26 +00:00
|
|
|
updateData()
|
2023-03-14 05:49:49 +00:00
|
|
|
}
|
2023-06-05 14:16:10 +00:00
|
|
|
|
2023-06-09 12:37:26 +00:00
|
|
|
function setReminderFromPreset(preset, toggle) {
|
2023-06-09 12:31:32 +00:00
|
|
|
reminder.value = preset
|
2023-06-09 12:37:26 +00:00
|
|
|
updateData()
|
|
|
|
toggle()
|
2023-06-09 12:31:32 +00:00
|
|
|
}
|
|
|
|
|
2023-06-09 12:46:34 +00:00
|
|
|
function updateDataAndMaybeClose(toggle) {
|
|
|
|
updateData()
|
|
|
|
if (props.clearAfterUpdate) {
|
|
|
|
toggle()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-06-05 14:16:10 +00:00
|
|
|
function formatReminder(reminder: TaskReminderModel) {
|
|
|
|
const period = secondsToPeriod(reminder.relativePeriod)
|
2023-06-09 12:23:32 +00:00
|
|
|
|
2023-06-09 11:54:17 +00:00
|
|
|
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')
|
|
|
|
}
|
2023-06-05 14:16:10 +00:00
|
|
|
}
|
2023-06-09 12:23:32 +00:00
|
|
|
|
2023-06-09 11:54:17 +00:00
|
|
|
const amountAbs = Math.abs(period.amount)
|
2023-06-09 12:23:32 +00:00
|
|
|
|
2023-06-09 11:54:17 +00:00
|
|
|
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
|
2023-06-05 14:16:10 +00:00
|
|
|
}
|
2023-06-09 12:23:32 +00:00
|
|
|
|
2023-06-09 11:54:17 +00:00
|
|
|
if (reminder.relativePeriod <= 0) {
|
|
|
|
return t('task.reminder.before', {
|
|
|
|
amount: amountAbs,
|
|
|
|
unit: translateUnit(amountAbs, period.unit),
|
|
|
|
type: relativeTo,
|
|
|
|
})
|
|
|
|
}
|
2023-06-09 12:23:32 +00:00
|
|
|
|
2023-06-09 11:54:17 +00:00
|
|
|
return t('task.reminder.after', {
|
|
|
|
amount: amountAbs,
|
|
|
|
unit: translateUnit(amountAbs, period.unit),
|
|
|
|
type: relativeTo,
|
|
|
|
})
|
|
|
|
}
|
2023-06-05 14:16:10 +00:00
|
|
|
|
2023-06-09 11:54:17 +00:00
|
|
|
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 'years':
|
|
|
|
return t('time.units.years', amount)
|
|
|
|
}
|
2023-06-05 14:16:10 +00:00
|
|
|
}
|
2023-03-16 08:54:18 +00:00
|
|
|
</script>
|
2023-06-05 14:16:10 +00:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2023-06-09 11:19:47 +00:00
|
|
|
.options {
|
2023-06-05 14:16:10 +00:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: flex-start;
|
|
|
|
}
|
2023-06-09 12:23:32 +00:00
|
|
|
|
|
|
|
:deep(.popup) {
|
|
|
|
top: unset;
|
|
|
|
}
|
|
|
|
|
|
|
|
.reminder-options-popup {
|
2023-06-10 16:39:33 +00:00
|
|
|
width: 310px;
|
2023-06-09 12:23:32 +00:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2023-06-09 12:27:11 +00:00
|
|
|
|
|
|
|
.reminder__close-button {
|
|
|
|
margin: .5rem;
|
|
|
|
width: calc(100% - 1rem);
|
|
|
|
}
|
2023-06-10 15:35:50 +00:00
|
|
|
|
|
|
|
.currently-active {
|
|
|
|
color: var(--primary);
|
|
|
|
}
|
2023-06-05 14:16:10 +00:00
|
|
|
</style>
|