48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
|
|
const { resetSkeleton } = useCalendar();
|
|
|
|
// Watch the popover state
|
|
watch(isEditEventModalOpen, (hasOpened, _o) => {
|
|
if (hasOpened && lastActiveEvent.value) {
|
|
eventSkeleton.value = structuredClone(toRaw(lastActiveEvent.value))
|
|
}
|
|
})
|
|
|
|
/**
|
|
* Prevents the modal from closing if's still loading
|
|
*
|
|
* @param e The closing event (can be keydown or click)
|
|
*/
|
|
function handleClosing() {
|
|
isEditEventModalOpen.value = false
|
|
setTimeout(() => resetSkeleton(), 100)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UiDialog v-model:open="isEditEventModalOpen">
|
|
<UiDialogContent
|
|
:disable-outside-pointer-events="true"
|
|
:trap-focus="true"
|
|
class="pl-3 md:min-w-96 max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
|
|
@escape-key-down="handleClosing"
|
|
@focus-outside="handleClosing"
|
|
@interact-outside="handleClosing"
|
|
@pointer-down-outside.prevent
|
|
>
|
|
<header class="pl-8 grid gap-y-2 max-md:mb-8">
|
|
<UiDialogTitle>
|
|
{{ $t('entity.calendar.event.editDialog.title') }}
|
|
</UiDialogTitle>
|
|
|
|
<UiDialogDescription>
|
|
{{ $t('entity.calendar.event.editDialog.subtitle') }}
|
|
</UiDialogDescription>
|
|
</header>
|
|
|
|
<CalendarFormUpdateEvent @event-updated="handleClosing" />
|
|
</UiDialogContent>
|
|
</UiDialog>
|
|
</template>
|