Added delete modal confirmation

components/calendar/CalendarEventDetails.vue

@@ -12,7 +12,7 @@ import {
 } from '@phosphor-icons/vue'
 
 const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString } = useCalendar()
-const { deleteEvent, revealEditEventModal } = useCalendarEvents()
+const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
 const { lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const props = defineProps<{
@@ -47,6 +47,15 @@ function deployEditModal() {
   revealEditEventModal()
   commandMenuOpened.value = false
 }
+
+/**
+ * Confirm event deletion
+ */
+function deployDeleteModal() {
+  lastActiveEvent.value = { ...props.event }
+  revealDeleteEventModal()
+  commandMenuOpened.value = false
+}
 </script>
 
 <template>
@@ -146,7 +155,7 @@ function deployEditModal() {
             <UiCommandList>
               <UiCommandGroup>
                 <UiCommandItem value="edit-event" @select="deployEditModal"> Modifier </UiCommandItem>
-                <UiCommandItem value="delete-event" @select="deleteEvent(event.id!)"> Supprimer </UiCommandItem>
+                <UiCommandItem value="delete-event" @select="deployDeleteModal"> Supprimer </UiCommandItem>
               </UiCommandGroup>
             </UiCommandList>
           </UiCommand>

components/calendar/form/DeleteEvent.vue

@@ -1,9 +1,6 @@
 <script lang="ts" setup>
-import { PhAlarm } from '@phosphor-icons/vue'
-import { VisuallyHidden } from 'radix-vue'
-
 const isModalOpened = defineModel<boolean>({ default: false })
-const { resetSkeleton, updateEventFromSkeleton } = useCalendarEvents()
+const { resetSkeleton, deleteEventFromSkeleton } = useCalendarEvents()
 const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const formErrors = reactive<{ message: string | null }>({
@@ -21,7 +18,7 @@ watch(isModalOpened, (hasOpened, _o) => {
 
 async function handleSubmit() {
   try {
-    await updateEventFromSkeleton()
+    await deleteEventFromSkeleton()
 
     isModalOpened.value = false
   } catch (err) {
@@ -42,58 +39,14 @@ async function handleSubmit() {
       :trap-focus="true"
       class="pl-3 min-w-96 bg-slate-900 border-slate-800"
     >
-      <VisuallyHidden>
-        <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
+      <UiDialogTitle> Supprimer l'évènement</UiDialogTitle>
 
-        <UiDialogDescription>
-          Mettre à jour les données de l'évènement
-        </UiDialogDescription>
-      </VisuallyHidden>
+      <UiDialogDescription>
+        Les données associés à cet évènement seront supprimées et vous ne pourrez plus les récupérer !
+      </UiDialogDescription>
 
       <form @submit.prevent="handleSubmit">
         <div class="grid grid-cols-2 gap-y-4">
-          <div class="col-span-2 ml-8">
-            <input
-              id="new-event-title"
-              v-model="eventSkeleton.title"
-              type="text"
-              name="new-event-title"
-              required
-              placeholder="Titre de l'évènement"
-              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
-          </div>
-
-          <div class="col-span-2 ml-8">
-            <textarea
-              id="new-event-description"
-              v-model="eventSkeleton.description"
-              name="new-event-description"
-              placeholder="Description brève de l'évènement"
-              class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
-            />
-          </div>
-
-          <div class="col-span-2">
-            <div class="flex items-center gap-2">
-              <PhAlarm size="18" weight="fill" />
-
-              <CalendarInputRPGDate
-                v-model:model-value="eventSkeleton.startDate"
-                placeholder="Date de début"
-                :initial-date="lastActiveEvent?.startDate"
-                :required="true"
-              />
-
-              <span>—</span>
-
-              <CalendarInputRPGDate
-                v-model:model-value="eventSkeleton.endDate"
-                placeholder="Date de fin"
-                :initial-date="lastActiveEvent?.endDate"
-              />
-            </div>
-          </div>
-
           <div class="text-red-500 ml-8">
             <span class="text-sm">
               {{ formErrors.message }}
@@ -101,8 +54,8 @@ async function handleSubmit() {
           </div>
 
           <div class="text-right">
-            <UiButton size="sm" type="submit">
-              Sauvegarder
+            <UiButton size="sm" type="submit" variant="destructive">
+              Supprimer
             </UiButton>
           </div>
         </div>

stores/EventStore.ts

@@ -223,14 +223,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     }
   }
 
-  async function deleteEvent(eventId: number) {
-    if (!eventId) {
-      throw new Error('ID of the event is required')
-    }
-
+  async function deleteEventFromSkeleton() {
     try {
-      await $fetch(`/api/calendars/events/${eventId}`, { method: 'DELETE' })
-      const eventIndex = baseEvents.value.findIndex(e => e.id === eventId)
+      await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'DELETE' })
+      const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
       baseEvents.value.splice(eventIndex, 1)
     } catch (err) {
       console.log(err)
@@ -248,7 +244,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     submitSkeleton,
     lastActiveEvent,
     updateEventFromSkeleton,
-    deleteEvent,
+    deleteEventFromSkeleton,
     isEditEventModalOpen,
     revealEditEventModal,
     isDeleteEventModalOpen,