From d73fe9381288de121a55bdc8ebbf593e194f0094 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 4 Mar 2025 14:15:57 +0100
Subject: [PATCH] Fixed event skeleton not being reset on edit close

---
 components/calendar/dialog/CreateEvent.vue      |  1 +
 components/calendar/dialog/QuickCreateEvent.vue | 17 ++++++++++++++++-
 components/calendar/dialog/UpdateEvent.vue      |  2 ++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/calendar/dialog/CreateEvent.vue b/components/calendar/dialog/CreateEvent.vue
index e53174f..ea87e02 100644
--- a/components/calendar/dialog/CreateEvent.vue
+++ b/components/calendar/dialog/CreateEvent.vue
@@ -38,6 +38,7 @@ function openEventCreatePopover() {
 function handleClosing(e: Event) {
   e.preventDefault()
   popoverOpen.value = false
+  setTimeout(() => resetSkeleton(), 100)
 }
 </script>
 
diff --git a/components/calendar/dialog/QuickCreateEvent.vue b/components/calendar/dialog/QuickCreateEvent.vue
index a29c4ea..53f0446 100644
--- a/components/calendar/dialog/QuickCreateEvent.vue
+++ b/components/calendar/dialog/QuickCreateEvent.vue
@@ -2,11 +2,22 @@
 import { PhPlus } from "@phosphor-icons/vue";
 
 const isDialogOpen = ref<boolean>(false);
+const { resetSkeleton } = useCalendar();
 
 // Toggles the dialog
 function toggleDialog() {
   isDialogOpen.value = !isDialogOpen.value;
 };
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing(e: Event) {
+  e.preventDefault()
+  setTimeout(() => resetSkeleton(), 100)
+}
 </script>
 
 <template>
@@ -19,7 +30,11 @@ function toggleDialog() {
   </UiButton>
 
   <UiDialog v-model:open="isDialogOpen">
-    <UiDialogContent class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950">
+    <UiDialogContent
+      class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+      @escape-key-down="handleClosing"
+      @pointer-down-outside="handleClosing"
+    >
       <UiDialogTitle>
         {{ $t("entity.calendar.event.addSingle") }}
       </UiDialogTitle>
diff --git a/components/calendar/dialog/UpdateEvent.vue b/components/calendar/dialog/UpdateEvent.vue
index 279613f..ba4d32b 100644
--- a/components/calendar/dialog/UpdateEvent.vue
+++ b/components/calendar/dialog/UpdateEvent.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
+const { resetSkeleton } = useCalendar();
 
 // Watch the popover state
 watch(isEditEventModalOpen, (hasOpened, _o) => {
@@ -15,6 +16,7 @@ watch(isEditEventModalOpen, (hasOpened, _o) => {
  */
 function handleClosing() {
   isEditEventModalOpen.value = false
+  setTimeout(() => resetSkeleton(), 100)
 }
 </script>