Added loading and cancelling to deleting popover

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>