Added delete modal confirmation

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>