2023-03-15 21:26:57 +00:00
|
|
|
<template>
|
2023-03-30 10:40:19 +00:00
|
|
|
<div
|
2023-06-09 11:19:47 +00:00
|
|
|
class="reminder-period control"
|
2023-03-30 10:40:19 +00:00
|
|
|
>
|
2023-06-09 11:19:47 +00:00
|
|
|
<input
|
|
|
|
class="input"
|
|
|
|
v-model.number="period.duration"
|
|
|
|
type="number"
|
|
|
|
min="0"
|
|
|
|
@change="updateData"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<div class="select">
|
|
|
|
<select v-model="period.durationUnit" @change="updateData">
|
2023-06-09 11:54:17 +00:00
|
|
|
<option value="minutes">{{ $t('time.units.minutes', period.duration) }}</option>
|
|
|
|
<option value="hours">{{ $t('time.units.hours', period.duration) }}</option>
|
|
|
|
<option value="days">{{ $t('time.units.days', period.duration) }}</option>
|
|
|
|
<option value="weeks">{{ $t('time.units.weeks', period.duration) }}</option>
|
2023-06-09 11:19:47 +00:00
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="select">
|
|
|
|
<select v-model.number="period.sign" @change="updateData">
|
|
|
|
<option value="-1">
|
2023-06-09 11:54:17 +00:00
|
|
|
{{ $t('task.reminder.beforeShort') }}
|
2023-06-09 11:19:47 +00:00
|
|
|
</option>
|
|
|
|
<option value="1">
|
2023-06-09 11:54:17 +00:00
|
|
|
{{ $t('task.reminder.afterShort') }}
|
2023-06-09 11:19:47 +00:00
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="select">
|
|
|
|
<select v-model="period.relativeTo" @change="updateData">
|
|
|
|
<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE">
|
|
|
|
{{ $t('task.attributes.dueDate') }}
|
|
|
|
</option>
|
|
|
|
<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE">
|
|
|
|
{{ $t('task.attributes.startDate') }}
|
|
|
|
</option>
|
|
|
|
<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE">
|
|
|
|
{{ $t('task.attributes.endDate') }}
|
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
2023-03-15 21:26:57 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2023-06-09 11:19:47 +00:00
|
|
|
import {ref, watch, type PropType} from 'vue'
|
2023-03-30 10:40:19 +00:00
|
|
|
import {useI18n} from 'vue-i18n'
|
2023-06-05 14:16:10 +00:00
|
|
|
import {toRef} from '@vueuse/core'
|
2023-03-30 10:40:19 +00:00
|
|
|
|
2023-06-09 11:19:47 +00:00
|
|
|
import {periodToSeconds, PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
|
2023-03-30 10:40:19 +00:00
|
|
|
|
2023-03-15 21:26:57 +00:00
|
|
|
import TaskReminderModel from '@/models/taskReminder'
|
2023-03-30 10:40:19 +00:00
|
|
|
|
2023-03-17 09:34:37 +00:00
|
|
|
import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
|
|
|
|
import {REMINDER_PERIOD_RELATIVE_TO_TYPES, type IReminderPeriodRelativeTo} from '@/types/IReminderPeriodRelativeTo'
|
2023-03-15 21:26:57 +00:00
|
|
|
|
|
|
|
const {t} = useI18n({useScope: 'global'})
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
modelValue: {
|
|
|
|
type: Object as PropType<ITaskReminder>,
|
|
|
|
required: false,
|
|
|
|
},
|
|
|
|
disabled: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
2023-03-30 10:40:19 +00:00
|
|
|
const emit = defineEmits(['update:modelValue'])
|
2023-03-15 21:26:57 +00:00
|
|
|
|
2023-06-09 11:19:47 +00:00
|
|
|
const reminder = ref<ITaskReminder>(new TaskReminderModel())
|
2023-03-15 21:26:57 +00:00
|
|
|
|
2023-06-05 14:16:10 +00:00
|
|
|
const showForm = ref(false)
|
|
|
|
|
2023-06-09 11:19:47 +00:00
|
|
|
interface PeriodInput {
|
|
|
|
duration: number,
|
|
|
|
durationUnit: PeriodUnit,
|
|
|
|
relativeTo: IReminderPeriodRelativeTo,
|
|
|
|
sign: -1 | 1,
|
|
|
|
}
|
|
|
|
|
|
|
|
const period = ref<PeriodInput>({
|
|
|
|
duration: 0,
|
|
|
|
durationUnit: 'hours',
|
2023-03-15 21:26:57 +00:00
|
|
|
relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
|
|
|
|
sign: -1,
|
|
|
|
})
|
|
|
|
|
2023-06-05 14:16:10 +00:00
|
|
|
const modelValue = toRef(props, 'modelValue')
|
2023-03-15 21:26:57 +00:00
|
|
|
watch(
|
2023-06-09 11:19:47 +00:00
|
|
|
modelValue,
|
|
|
|
(value) => {
|
|
|
|
console.log({value})
|
|
|
|
const p = secondsToPeriod(value?.relativePeriod)
|
|
|
|
period.value.durationUnit = p.unit
|
|
|
|
period.value.duration = p.amount
|
|
|
|
period.value.relativeTo = value?.relativeTo
|
|
|
|
},
|
|
|
|
{immediate: true},
|
2023-03-15 21:26:57 +00:00
|
|
|
)
|
|
|
|
|
|
|
|
function updateData() {
|
2023-06-09 11:19:47 +00:00
|
|
|
reminder.value.relativePeriod = period.value.sign * periodToSeconds(period.value.duration, period.value.durationUnit)
|
|
|
|
reminder.value.relativeTo = period.value.relativeTo
|
|
|
|
reminder.value.reminder = null
|
2023-03-17 09:34:37 +00:00
|
|
|
|
2023-06-09 11:19:47 +00:00
|
|
|
emit('update:modelValue', reminder.value)
|
2023-03-15 21:26:57 +00:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2023-06-09 11:19:47 +00:00
|
|
|
.reminder-period {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: .25rem;
|
|
|
|
|
|
|
|
.input, .select select {
|
|
|
|
width: 100% !important;
|
|
|
|
height: auto;
|
|
|
|
}
|
2023-03-15 21:26:57 +00:00
|
|
|
}
|
|
|
|
</style>
|