First draft of calendar deletion

components/calendar/dialog/Delete.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { PhCircleNotch } from '@phosphor-icons/vue';
+import type { Calendar } from '~/models/CalendarConfig';
+
+const props = defineProps<{
+  modalState: boolean,
+  calendar: Calendar | null
+}>()
+
+const isLoading = ref<boolean>(false)
+
+const emit = defineEmits(['on-close'])
+
+async function handleAction(): Promise<void> {
+  if (isLoading.value) return
+  if (!props.calendar) return
+
+  isLoading.value = true
+
+  try {
+    await $fetch(`/api/calendars/${props.calendar.id}`, { method: 'DELETE' })
+
+    // isDeleteEventModalOpen.value = false
+  } catch (err) {
+    if (err instanceof Error) {
+      // formErrors.message = err.message
+    }
+  } finally {
+    isLoading.value = false
+  }
+}
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing() {
+  if (!isLoading.value) {
+    emit('on-close')
+  }
+}
+</script>
+
+<template>
+  <UiAlertDialog :open="modalState">
+    <UiAlertDialogContent
+      :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> Êtes-vous sûr de supprimer ce calendrier ?</UiAlertDialogTitle>
+
+      <UiAlertDialogDescription>
+        Les évènements ne seront plus accessibles et vous ne pourrez plus récupérer les données !
+      </UiAlertDialogDescription>
+
+      <form @submit.prevent="handleAction">
+        <div class="grid grid-cols-2 gap-y-4">
+          <div class="text-red-500 ml-8">
+            <span class="text-sm">
+              <!-- {{ formErrors.message }} -->
+            </span>
+          </div>
+        </div>
+
+        <footer class="flex gap-2 justify-between">
+          <UiButton type="button" size="sm" variant="ghost" @click="handleClosing">
+            Retour
+          </UiButton>
+
+          <div class="flex gap-2 justify-end">
+            <Transition name="fade-delay">
+              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
+                Annuler
+              </UiButton>
+            </Transition>
+
+            <UiButton v-if="calendar" size="sm" variant="destructive" :disabled="isLoading">
+              <Transition name="fade">
+                <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+              </Transition>
+
+              Supprimer "{{ calendar?.name }}"
+            </UiButton>
+          </div>
+        </footer>
+      </form>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>

components/calendar/form/DeleteEvent.vue

@@ -4,7 +4,7 @@ import { PhCircleNotch } from '@phosphor-icons/vue';
 const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendar()
 const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
 
-const isLoading = ref(false)
+const isLoading = ref<boolean>(false)
 
 const formErrors = reactive<{ message: string | null }>({
   message: null
@@ -17,7 +17,7 @@ watch(isDeleteEventModalOpen, (hasOpened, _o) => {
   }
 })
 
-async function handleAction() {
+async function handleAction(): Promise<void> {
   if (isLoading.value) return
 
   isLoading.value = true
@@ -41,7 +41,7 @@ async function handleAction() {
  *
  * @param e The closing event (can be keydown or click)
  */
-function handleClosing(e: Event) {
+function handleClosing(e: Event): void {
   if (isLoading.value) {
     e.preventDefault()
   }
@@ -52,7 +52,7 @@ function handleClosing(e: Event) {
  *
  * Must cancel the abortController in the store, and stop the loading
  */
-function handleCancel() {
+function handleCancel(): void {
   cancelLatestRequest()
   isLoading.value = false
 }

components/ui/card/Card.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 <template>
   <div
     :class="
-      cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all', props.class, {
+      cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all isolate', props.class, {
         'relative outline outline-2 outline-offset-4 outline-transparent hover:-translate-y-[.2rem]':
           props.link
       })
@@ -22,7 +22,7 @@ const props = defineProps<{
     <NuxtLink
       v-if="props.link"
       :to="props.link"
-      class="absolute inset-0 focus-visible:outline-none"
+      class="absolute inset-0 z-10 focus-visible:outline-none"
     />
   </div>
 </template>