From c65bcc9ae91f265367b7ef3a838cea63f9205d14 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 16:22:07 +0200
Subject: [PATCH 1/9] Added loading indicator on single create event

---
 components/calendar/form/CreateEvent.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index 7729509..f2ccd2d 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import type { RPGDate } from '~/models/Date';
 
-import { PhAlarm, PhMapPinArea } from '@phosphor-icons/vue'
+import { PhAlarm, PhCircleNotch, PhMapPinArea } from '@phosphor-icons/vue'
 
 const { eventSkeleton } = storeToRefs(useCalendarEvents())
 const { resetSkeleton, submitSkeleton } = useCalendarEvents()
 const popoverOpen = ref(false)
+const isLoading = ref(false)
 
 const formErrors = reactive<{ message: string | null }>({
   message: null
@@ -31,6 +32,11 @@ function openEventCreatePopover() {
 }
 
 async function handleSubmit() {
+  // Prevent form submission if already loading
+  if (isLoading.value) return
+
+  isLoading.value = true
+
   try {
     await submitSkeleton()
 
@@ -39,6 +45,8 @@ async function handleSubmit() {
     if (err instanceof Error) {
       formErrors.message = err.message
     }
+  } finally {
+    isLoading.value = false
   }
 }
 </script>
@@ -119,7 +127,9 @@ async function handleSubmit() {
           </div>
 
           <div class="text-right">
-            <UiButton size="sm">
+            <UiButton size="sm" :disabled="isLoading">
+              <PhCircleNotch v-if="isLoading" size="20" class="opacity-50 animate-spin"/>
+
               Sauvegarder
             </UiButton>
           </div>

From 0c48350271325b529fdbd1c020cfa23dea4b793a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 16:45:36 +0200
Subject: [PATCH 2/9] Disabled close interactions on create event popover

---
 components/calendar/form/CreateEvent.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index f2ccd2d..32e5284 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -49,6 +49,17 @@ async function handleSubmit() {
     isLoading.value = false
   }
 }
+
+/**
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing(e: Event) {
+  console.log(e)
+  if (isLoading.value) {
+    e.preventDefault()
+  }
+}
 </script>
 
 <template>
@@ -60,7 +71,13 @@ async function handleSubmit() {
       :align="'center'"
       :side="'right'"
       :collision-padding="60"
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
       class="pl-3 min-w-96 bg-slate-900 border-slate-800"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="handleClosing"
     >
       <form @submit.prevent="handleSubmit">
         <div class="grid grid-cols-2 gap-y-4">

From a58c1eeab91524e2fcbffaa2e0b93a0a202a01b3 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 17:48:32 +0200
Subject: [PATCH 3/9] Added request cancel on create

This seems to not be always effective on really low connections, as the cancel request doesn't seem to be instantanneous.
---
 assets/main.css                          | 53 ++++++++++++++----------
 components/calendar/form/CreateEvent.vue | 22 ++++++++--
 stores/EventStore.ts                     | 30 ++++++++++++--
 3 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index 71f25ec..219337f 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -5,64 +5,64 @@
 :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   :root.dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 212.7 26.8% 83.9%;
 }
 
@@ -73,4 +73,15 @@
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}
+
+.fade-cancel-enter-active,
+.fade-cancel-leave-active {
+  transition: all .5s ease 1s;
+}
+
+.fade-cancel-enter-from,
+.fade-cancel-leave-to {
+  opacity: 0;
+  visibility: hidden;
+}
diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index 32e5284..71c9483 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -4,7 +4,7 @@ import type { RPGDate } from '~/models/Date';
 import { PhAlarm, PhCircleNotch, PhMapPinArea } from '@phosphor-icons/vue'
 
 const { eventSkeleton } = storeToRefs(useCalendarEvents())
-const { resetSkeleton, submitSkeleton } = useCalendarEvents()
+const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendarEvents()
 const popoverOpen = ref(false)
 const isLoading = ref(false)
 
@@ -60,6 +60,14 @@ function handleClosing(e: Event) {
     e.preventDefault()
   }
 }
+
+/**
+ * Click on the cancel button
+ */
+function handleCancel() {
+  cancelLatestRequest()
+  isLoading.value = false
+}
 </script>
 
 <template>
@@ -143,9 +151,17 @@ function handleClosing(e: Event) {
             </span>
           </div>
 
-          <div class="text-right">
+          <div class="flex gap-2 justify-end">
+            <Transition name="fade-cancel">
+              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
+                Annuler
+              </UiButton>
+            </Transition>
+
             <UiButton size="sm" :disabled="isLoading">
-              <PhCircleNotch v-if="isLoading" size="20" class="opacity-50 animate-spin"/>
+              <Transition name="fade-cancel">
+                <PhCircleNotch v-if="isLoading" size="20" class="opacity-50 animate-spin"/>
+              </Transition>
 
               Sauvegarder
             </UiButton>
diff --git a/stores/EventStore.ts b/stores/EventStore.ts
index 454bd24..47c9785 100644
--- a/stores/EventStore.ts
+++ b/stores/EventStore.ts
@@ -187,6 +187,8 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * EVENT CREATION FUNCTIONS
    */
   const lastActiveEvent = ref<CalendarEvent | null>()
+  let abortController: AbortController | null = null
+
   /**
    * Dummy event to hold creation data
    */
@@ -205,31 +207,52 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * We assume it's been sanitized by the caller
    */
   async function submitSkeleton() {
+    abortController = new AbortController()
+
     try {
-      const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: calendarId.value }})
+      const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
+
       baseEvents.value.push(res)
     } catch (err) {
       console.log(err)
+    } finally {
+      abortController = null
+    }
+  }
+
+  function cancelLatestRequest() {
+    if (abortController) {
+      abortController.abort()
     }
   }
 
   async function updateEventFromSkeleton() {
+    abortController = new AbortController()
+
     try {
-      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: calendarId.value }})
+      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
+
       const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
       baseEvents.value[eventIndex] = res
     } catch (err) {
       console.log(err)
+    } finally {
+      abortController = null
     }
   }
 
   async function deleteEventFromSkeleton() {
+    abortController = new AbortController()
+
     try {
-      await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'DELETE' })
+      await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'DELETE', signal: abortController.signal })
+
       const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
       baseEvents.value.splice(eventIndex, 1)
     } catch (err) {
       console.log(err)
+    } finally {
+      abortController = null
     }
   }
 
@@ -239,6 +262,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     currentEvents,
     getRelativeEventFromDate,
     getRelativeEventFromEvent,
+    cancelLatestRequest,
     eventSkeleton,
     resetSkeleton,
     submitSkeleton,

From a07afc8351d00bede5c04f05ac73de5fe9a66912 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 18:08:08 +0200
Subject: [PATCH 4/9] Prevented other popovers from opening when an operation
 is underway

---
 components/calendar/form/CreateEvent.vue      | 11 ++++++--
 components/calendar/state/monthly/DayTile.vue |  2 +-
 stores/EventStore.ts                          | 26 ++++++++++++++-----
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index 71c9483..ac6cec8 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -3,7 +3,7 @@ import type { RPGDate } from '~/models/Date';
 
 import { PhAlarm, PhCircleNotch, PhMapPinArea } from '@phosphor-icons/vue'
 
-const { eventSkeleton } = storeToRefs(useCalendarEvents())
+const { eventSkeleton, operationInProgress } = storeToRefs(useCalendarEvents())
 const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendarEvents()
 const popoverOpen = ref(false)
 const isLoading = ref(false)
@@ -21,6 +21,14 @@ const props = defineProps<{
  * Opens event creation's popover
  */
 function openEventCreatePopover() {
+  console.log(operationInProgress.value)
+  if (operationInProgress.value) {
+    popoverOpen.value = false
+    return
+  }
+
+  console.log('open still what ?')
+
   resetSkeleton()
 
   popoverOpen.value = true
@@ -55,7 +63,6 @@ async function handleSubmit() {
  * @param e The closing event (can be keydown or click)
  */
 function handleClosing(e: Event) {
-  console.log(e)
   if (isLoading.value) {
     e.preventDefault()
   }
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index 0ae0b5d..bcd9b15 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -146,7 +146,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
     </ClientOnly>
 
     <ClientOnly>
-      <CalendarFormCreateEvent :date btn-class="absolute inset-0 w-full h-full cursor-default z-0" />
+      <LazyCalendarFormCreateEvent :date btn-class="absolute inset-0 w-full h-full cursor-default z-0" />
     </ClientOnly>
   </div>
 </template>
diff --git a/stores/EventStore.ts b/stores/EventStore.ts
index 47c9785..b3294e9 100644
--- a/stores/EventStore.ts
+++ b/stores/EventStore.ts
@@ -187,6 +187,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * EVENT CREATION FUNCTIONS
    */
   const lastActiveEvent = ref<CalendarEvent | null>()
+  const isCreatingEvent = ref<boolean>(false)
+  const isUpdatingEvent = ref<boolean>(false)
+  const isDeletingEvent = ref<boolean>(false)
+  const operationInProgress = computed(() => isCreatingEvent.value || isUpdatingEvent.value || isDeletingEvent.value)
   let abortController: AbortController | null = null
 
   /**
@@ -208,6 +212,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    */
   async function submitSkeleton() {
     abortController = new AbortController()
+    isCreatingEvent.value = true
 
     try {
       const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
@@ -217,17 +222,13 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
       console.log(err)
     } finally {
       abortController = null
-    }
-  }
-
-  function cancelLatestRequest() {
-    if (abortController) {
-      abortController.abort()
+      isCreatingEvent.value = false
     }
   }
 
   async function updateEventFromSkeleton() {
     abortController = new AbortController()
+    isUpdatingEvent.value = true
 
     try {
       const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
@@ -238,11 +239,13 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
       console.log(err)
     } finally {
       abortController = null
+      isUpdatingEvent.value = false
     }
   }
 
   async function deleteEventFromSkeleton() {
     abortController = new AbortController()
+    isDeletingEvent.value = true
 
     try {
       await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'DELETE', signal: abortController.signal })
@@ -253,6 +256,13 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
       console.log(err)
     } finally {
       abortController = null
+      isDeletingEvent.value = false
+    }
+  }
+
+  function cancelLatestRequest() {
+    if (abortController) {
+      abortController.abort()
     }
   }
 
@@ -263,6 +273,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     getRelativeEventFromDate,
     getRelativeEventFromEvent,
     cancelLatestRequest,
+    isCreatingEvent,
+    isUpdatingEvent,
+    isDeletingEvent,
+    operationInProgress,
     eventSkeleton,
     resetSkeleton,
     submitSkeleton,

From 721e26d8e4e45594e636ace473ae58ee9e60213a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 21:53:16 +0200
Subject: [PATCH 5/9] Added loading and cancelling to updating popover

---
 assets/main.css                          | 14 ++++--
 components/calendar/form/CreateEvent.vue | 11 +++--
 components/calendar/form/UpdateEvent.vue | 62 +++++++++++++++++++-----
 3 files changed, 67 insertions(+), 20 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index 219337f..ad39aa5 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -75,13 +75,19 @@
   }
 }
 
-.fade-cancel-enter-active,
-.fade-cancel-leave-active {
+.fade-enter-active,
+.fade-leave-active {
+  transition: all .5s ease;
+}
+.fade-delay-enter-active,
+.fade-delay-leave-active {
   transition: all .5s ease 1s;
 }
 
-.fade-cancel-enter-from,
-.fade-cancel-leave-to {
+.fade-enter-from,
+.fade-leave-to,
+.fade-delay-enter-from,
+.fade-delay-leave-to {
   opacity: 0;
   visibility: hidden;
 }
diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index ac6cec8..524121f 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -21,14 +21,12 @@ const props = defineProps<{
  * Opens event creation's popover
  */
 function openEventCreatePopover() {
-  console.log(operationInProgress.value)
+  // If another operation is in progress, whether it's another create popup or a modal, don't bother opening it
   if (operationInProgress.value) {
     popoverOpen.value = false
     return
   }
 
-  console.log('open still what ?')
-
   resetSkeleton()
 
   popoverOpen.value = true
@@ -59,6 +57,7 @@ async function handleSubmit() {
 }
 
 /**
+ * Prevents the modal from closing if's still loading
  *
  * @param e The closing event (can be keydown or click)
  */
@@ -70,6 +69,8 @@ function handleClosing(e: Event) {
 
 /**
  * Click on the cancel button
+ *
+ * Must cancel the abortController in the store, and stop the loading
  */
 function handleCancel() {
   cancelLatestRequest()
@@ -159,14 +160,14 @@ function handleCancel() {
           </div>
 
           <div class="flex gap-2 justify-end">
-            <Transition name="fade-cancel">
+            <Transition name="fade-delay">
               <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
                 Annuler
               </UiButton>
             </Transition>
 
             <UiButton size="sm" :disabled="isLoading">
-              <Transition name="fade-cancel">
+              <Transition name="fade">
                 <PhCircleNotch v-if="isLoading" size="20" class="opacity-50 animate-spin"/>
               </Transition>
 
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 7350394..040a2c8 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
-import { PhAlarm, PhMapPinArea } from '@phosphor-icons/vue'
+import { PhAlarm, PhCircleNotch, PhMapPinArea } from '@phosphor-icons/vue'
 import { VisuallyHidden } from 'radix-vue'
 
 const { isEditEventModalOpen } = storeToRefs(useCalendarEvents())
 
-const { resetSkeleton, updateEventFromSkeleton } = useCalendarEvents()
+const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendarEvents()
 const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
+const isLoading = ref(false)
+
 const formErrors = reactive<{ message: string | null }>({
   message: null
 })
@@ -19,6 +21,10 @@ watch(isEditEventModalOpen, (hasOpened, _o) => {
 })
 
 async function handleAction() {
+  if (isLoading.value) return
+
+  isLoading.value = true
+
   try {
     await updateEventFromSkeleton()
 
@@ -29,8 +35,30 @@ async function handleAction() {
     }
   } finally {
     resetSkeleton()
+    isLoading.value = false
   }
 }
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing(e: Event) {
+  if (isLoading.value) {
+    e.preventDefault()
+  }
+}
+
+/**
+ * Click on the cancel button
+ *
+ * Must cancel the abortController in the store, and stop the loading
+ */
+function handleCancel() {
+  cancelLatestRequest()
+  isLoading.value = false
+}
 </script>
 
 <template>
@@ -42,6 +70,10 @@ async function handleAction() {
       :disable-outside-pointer-events="true"
       :trap-focus="true"
       class="pl-3 min-w-96 bg-slate-900 border-slate-800"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="handleClosing"
     >
       <VisuallyHidden>
         <UiAlertDialogTitle> Modifier l'évènement</UiAlertDialogTitle>
@@ -51,7 +83,7 @@ async function handleAction() {
         </UiAlertDialogDescription>
       </VisuallyHidden>
 
-      <form>
+      <form @submit.prevent="handleAction">
         <div class="grid grid-cols-2 gap-y-4">
           <div class="col-span-2 ml-8">
             <input
@@ -115,15 +147,23 @@ async function handleAction() {
             </span>
           </div>
         </div>
+
+        <div class="flex gap-2 justify-end">
+          <Transition name="fade-delay">
+            <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
+              Annuler
+            </UiButton>
+          </Transition>
+
+          <UiButton size="sm" :disabled="isLoading">
+            <Transition name="fade">
+              <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+            </Transition>
+
+            Sauvegarder
+          </UiButton>
+        </div>
       </form>
-      <UiAlertDialogFooter>
-        <UiAlertDialogCancel>
-          Annuler
-        </UiAlertDialogCancel>
-        <UiAlertDialogAction @click="handleAction">
-          Sauvegarder
-        </UiAlertDialogAction>
-      </UiAlertDialogFooter>
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>

From 6738ac76c406fbd704364dc49b4f1012dac7b4c8 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 22:00:07 +0200
Subject: [PATCH 6/9] Added loading and cancelling to deleting popover

---
 components/calendar/form/DeleteEvent.vue | 63 +++++++++++++++++++-----
 components/calendar/form/UpdateEvent.vue |  6 +--
 2 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index 224d563..e36854f 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -1,9 +1,13 @@
 <script lang="ts" setup>
+import { PhCircleNotch } from '@phosphor-icons/vue';
+
 const { isDeleteEventModalOpen } = storeToRefs(useCalendarEvents())
 
-const { resetSkeleton, deleteEventFromSkeleton } = useCalendarEvents()
+const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendarEvents()
 const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
+const isLoading = ref(false)
+
 const formErrors = reactive<{ message: string | null }>({
   message: null
 })
@@ -16,6 +20,10 @@ watch(isDeleteEventModalOpen, (hasOpened, _o) => {
 })
 
 async function handleAction() {
+  if (isLoading.value) return
+
+  isLoading.value = true
+
   try {
     await deleteEventFromSkeleton()
 
@@ -26,8 +34,30 @@ async function handleAction() {
     }
   } finally {
     resetSkeleton()
+    isLoading.value = false
   }
 }
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing(e: Event) {
+  if (isLoading.value) {
+    e.preventDefault()
+  }
+}
+
+/**
+ * Click on the cancel button
+ *
+ * Must cancel the abortController in the store, and stop the loading
+ */
+function handleCancel() {
+  cancelLatestRequest()
+  isLoading.value = false
+}
 </script>
 
 <template>
@@ -39,6 +69,10 @@ async function handleAction() {
       :disable-outside-pointer-events="true"
       :trap-focus="true"
       class="min-w-96 bg-slate-900 border-slate-800"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="handleClosing"
     >
       <UiAlertDialogTitle> Supprimer l'évènement</UiAlertDialogTitle>
 
@@ -46,7 +80,7 @@ async function handleAction() {
         Les données associés à cet évènement seront supprimées et vous ne pourrez plus les récupérer !
       </UiAlertDialogDescription>
 
-      <form>
+      <form @submit.prevent="handleAction">
         <div class="grid grid-cols-2 gap-y-4">
           <div class="text-red-500 ml-8">
             <span class="text-sm">
@@ -54,16 +88,23 @@ async function handleAction() {
             </span>
           </div>
         </div>
-      </form>
 
-      <UiAlertDialogFooter>
-        <UiAlertDialogCancel>
-          Annuler
-        </UiAlertDialogCancel>
-        <UiAlertDialogAction class="destructive" @click="handleAction">
-          Supprimer
-        </UiAlertDialogAction>
-      </UiAlertDialogFooter>
+        <footer class="flex gap-2 justify-end">
+          <Transition name="fade-delay">
+            <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
+              Annuler
+            </UiButton>
+          </Transition>
+
+          <UiButton size="sm" :disabled="isLoading">
+            <Transition name="fade">
+              <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+            </Transition>
+
+            Supprimer
+          </UiButton>
+        </footer>
+      </form>
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 040a2c8..5cc9f14 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -148,7 +148,7 @@ function handleCancel() {
           </div>
         </div>
 
-        <div class="flex gap-2 justify-end">
+        <footer class="flex gap-2 justify-end">
           <Transition name="fade-delay">
             <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
               Annuler
@@ -160,9 +160,9 @@ function handleCancel() {
               <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
             </Transition>
 
-            Sauvegarder
+            Enregistrer
           </UiButton>
-        </div>
+        </footer>
       </form>
     </UiAlertDialogContent>
   </UiAlertDialog>

From 6bb874f79948e9ab049f63e79dfd5f41af2c105b Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 22:06:23 +0200
Subject: [PATCH 7/9] Fixed ref being used for component and not shallowRef

---
 components/calendar/Calendar.vue          | 2 +-
 components/global/sidebar/SidebarProps.ts | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index 950b36b..d66314e 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -93,7 +93,7 @@ onMounted(() => {
 
   setCurrentMenu([
     {
-      phIcon: PhMagnifyingGlass,
+      phIcon: shallowRef(PhMagnifyingGlass),
       tooltip: 'Recherche avancée',
       action: 'event-search'
     }
diff --git a/components/global/sidebar/SidebarProps.ts b/components/global/sidebar/SidebarProps.ts
index 4414df0..bb3cd9e 100644
--- a/components/global/sidebar/SidebarProps.ts
+++ b/components/global/sidebar/SidebarProps.ts
@@ -1,7 +1,9 @@
+import type { ShallowRef } from "vue"
+
 export type SidebarMenuActionType = "event-search"
 
 export interface SidebarMenuItem {
-  phIcon: Component
+  phIcon: ShallowRef
   tooltip: string
   action?: SidebarMenuActionType
   to?: string

From d88ede5e210d750192e7b2c2207d1c79deaaa462 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 22:13:21 +0200
Subject: [PATCH 8/9] Removed extraneous props

---
 components/calendar/Calendar.vue         | 8 ++++----
 components/calendar/form/DeleteEvent.vue | 3 ---
 components/calendar/form/UpdateEvent.vue | 3 ---
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index d66314e..9506e05 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -116,10 +116,10 @@ onMounted(() => {
           <component :is="currentViewComponent"/>
         </KeepAlive>
       </div>
-    </template>
 
-    <LazyCalendarSearch />
-    <LazyCalendarFormUpdateEvent />
-    <LazyCalendarFormDeleteEvent />
+      <LazyCalendarSearch />
+      <LazyCalendarFormUpdateEvent />
+      <LazyCalendarFormDeleteEvent />
+    </template>
   </div>
 </template>
diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index e36854f..caeb0a0 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -63,9 +63,6 @@ function handleCancel() {
 <template>
   <UiAlertDialog v-model:open="isDeleteEventModalOpen">
     <UiAlertDialogContent
-      :align="'center'"
-      :side="'right'"
-      :collision-padding="60"
       :disable-outside-pointer-events="true"
       :trap-focus="true"
       class="min-w-96 bg-slate-900 border-slate-800"
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 5cc9f14..224c0e8 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -64,9 +64,6 @@ function handleCancel() {
 <template>
   <UiAlertDialog v-model:open="isEditEventModalOpen">
     <UiAlertDialogContent
-      :align="'center'"
-      :side="'right'"
-      :collision-padding="60"
       :disable-outside-pointer-events="true"
       :trap-focus="true"
       class="pl-3 min-w-96 bg-slate-900 border-slate-800"

From d7ecb379fde350f8e32227e83a0430630c21b9a7 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 22:15:56 +0200
Subject: [PATCH 9/9] Changed alert dialog for regular dialog in update event
 form

---
 components/calendar/form/UpdateEvent.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 224c0e8..4e072f7 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -62,22 +62,22 @@ function handleCancel() {
 </script>
 
 <template>
-  <UiAlertDialog v-model:open="isEditEventModalOpen">
-    <UiAlertDialogContent
+  <UiDialog v-model:open="isEditEventModalOpen">
+    <UiDialogContent
       :disable-outside-pointer-events="true"
       :trap-focus="true"
       class="pl-3 min-w-96 bg-slate-900 border-slate-800"
       @escape-key-down="handleClosing"
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"
-      @pointer-down-outside="handleClosing"
+      @pointer-down-outside="(e) => e.preventDefault()"
     >
       <VisuallyHidden>
-        <UiAlertDialogTitle> Modifier l'évènement</UiAlertDialogTitle>
+        <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
 
-        <UiAlertDialogDescription>
+        <UiDialogDescription>
           Mettre à jour les données de l'évènement
-        </UiAlertDialogDescription>
+        </UiDialogDescription>
       </VisuallyHidden>
 
       <form @submit.prevent="handleAction">
@@ -161,6 +161,6 @@ function handleCancel() {
           </UiButton>
         </footer>
       </form>
-    </UiAlertDialogContent>
-  </UiAlertDialog>
+    </UiDialogContent>
+  </UiDialog>
 </template>