ami/tl-vikunja
1
0
Fork 0
Code

feat: use withDefaults in ReminderDetail

Browse Source
This commit is contained in:
Dominik Pschenitschni 2024-06-26 19:22:46 +02:00 committed by konrad
parent 42c458a736
commit a56331d39d
3 changed files with 53 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/date/DatepickerWithValues.vue
View File

@ -2,7 +2,7 @@
<div class="datepicker-with-range-container">
<Popup
:open="open"
@close="() => emit('close')"
@update:open="(open) => !open && emit('close')"
>
<template #content="{isOpen}">
<div

21
frontend/src/components/misc/Popup.vue
View File

@ -34,7 +34,22 @@ const props = withDefaults(defineProps<{
open: false,
})
const emit = defineEmits(['close'])
const emit = defineEmits<{
'update:open': [open: boolean]
}>()
defineSlots<{
trigger(props: {
isOpen: boolean,
toggle: () => boolean,
close: () => void,
}) : void
content(props: {
isOpen: boolean,
toggle: () => boolean,
close: () => void
}): void
}>()
const openValue = ref(props.open)
watchEffect(() => {
@ -43,11 +58,13 @@ watchEffect(() => {
function close() {
openValue.value = false
emit('close')
emit('update:open', false)
}
function toggle() {
openValue.value = !openValue.value
emit('update:open', openValue.value)
return openValue.value
}
const popup = ref<HTMLElement | null>(null)

65
frontend/src/components/tasks/partials/ReminderDetail.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<Popup @close="showFormSwitch = null">
<Popup @update:open="showFormSwitch = null">
<template #trigger="{toggle}">
<SimpleButton
v-tooltip="reminder.reminder && reminder.relativeTo !== null ? formatDateShort(reminder.reminder) : null"
@ -50,7 +50,7 @@
/>
<DatepickerInline
v-if="activeForm === 'absolute'"
v-else-if="activeForm === 'absolute'"
v-model="reminderDate"
@update:modelValue="setReminderDateAndClose(close)"
/>
@ -88,38 +88,38 @@ import Card from '@/components/misc/Card.vue'
import SimpleButton from '@/components/input/SimpleButton.vue'
import {useDebounceFn} from '@vueuse/core'
const {
modelValue,
clearAfterUpdate = false,
defaultRelativeTo = REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
} = defineProps<{
modelValue?: ITaskReminder,
const props = withDefaults(defineProps<{
modelValue: ITaskReminder | undefined,
clearAfterUpdate?: boolean,
defaultRelativeTo?: null | IReminderPeriodRelativeTo,
}>()
defaultRelativeTo?: IReminderPeriodRelativeTo | null,
}>(), {
modelValue: new TaskReminderModel() as ITaskReminder,
clearAfterUpdate: false,
defaultRelativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
})
const emit = defineEmits(['update:modelValue'])
const emit = defineEmits<{
'update:modelValue': [value: ITaskReminder | undefined],
}>()
const {t} = useI18n({useScope: 'global'})
const reminder = ref<ITaskReminder>(new TaskReminderModel())
const presets = computed<TaskReminderModel[]>(() => [
{reminder: null, relativePeriod: 0, relativeTo: defaultRelativeTo},
{reminder: null, relativePeriod: -2 * SECONDS_A_HOUR, relativeTo: defaultRelativeTo},
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY, relativeTo: defaultRelativeTo},
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 3, relativeTo: defaultRelativeTo},
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 7, relativeTo: defaultRelativeTo},
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 30, relativeTo: defaultRelativeTo},
])
const presets = computed(() => [
{reminder: null, relativePeriod: 0, relativeTo: props.defaultRelativeTo},
{reminder: null, relativePeriod: -2 * SECONDS_A_HOUR, relativeTo: props.defaultRelativeTo},
{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},
] as ITaskReminder[])
const reminderDate = ref<Date | null>(null)
type availableForms = null | 'relative' | 'absolute'
const showFormSwitch = ref<null | 'relative' | 'absolute'>(null)
const showFormSwitch = ref<availableForms>(null)
const activeForm = computed<availableForms>(() => {
if (defaultRelativeTo === null) {
const activeForm = computed(() => {
if (props.defaultRelativeTo === null) {
return 'absolute'
}
@ -127,7 +127,6 @@ const activeForm = computed<availableForms>(() => {
})
const reminderText = computed(() => {
if (reminder.value.relativeTo !== null) {
return formatReminder(reminder.value)
}
@ -140,7 +139,7 @@ const reminderText = computed(() => {
})
watch(
() => modelValue,
() => props.modelValue,
(newReminder) => {
if (newReminder) {
reminder.value = newReminder
@ -160,12 +159,12 @@ watch(
function updateData() {
emit('update:modelValue', reminder.value)
if (clearAfterUpdate) {
if (props.clearAfterUpdate) {
reminder.value = new TaskReminderModel()
}
}
function setReminderDateAndClose(close) {
function setReminderDateAndClose(close: () => void) {
reminder.value.reminder = reminderDate.value === null
? null
: new Date(reminderDate.value)
@ -175,7 +174,7 @@ function setReminderDateAndClose(close) {
}
function setReminderFromPreset(preset, close) {
function setReminderFromPreset(preset: ITaskReminder, close: () => void) {
reminder.value = preset
updateData()
close()
@ -183,14 +182,14 @@ function setReminderFromPreset(preset, close) {
const updateDataAndMaybeClose = useDebounceFn(updateDataAndMaybeCloseNow, 500)
function updateDataAndMaybeCloseNow(close) {
function updateDataAndMaybeCloseNow(close: () => void) {
updateData()
if (clearAfterUpdate) {
if (props.clearAfterUpdate) {
close()
}
}
function formatReminder(reminder: TaskReminderModel) {
function formatReminder(reminder: ITaskReminder) {
const period = secondsToPeriod(reminder.relativePeriod)
if (period.amount === 0) {
@ -248,6 +247,8 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
return t('time.units.weeks', amount)
case 'years':
return t('time.units.years', amount)
default:
throw new Error(`Unknown unit: ${unit}`)
}
}
</script>