Added actions / cancel to alert modals

components/calendar/form/DeleteEvent.vue

@@ -17,7 +17,7 @@ watch(isDeleteEventModalOpen, (hasOpened, _o) => {
   }
 })
 
-async function handleSubmit() {
+async function handleAction() {
   try {
     await deleteEventFromSkeleton()
 
@@ -46,21 +46,24 @@ async function handleSubmit() {
         Les données associés à cet évènement seront supprimées et vous ne pourrez plus les récupérer !
       </UiAlertDialogDescription>
 
-      <form @submit.prevent="handleSubmit">
+      <form>
         <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 class="text-right">
-            <UiButton size="sm" type="submit" variant="destructive">
-              Supprimer
-            </UiButton>
-          </div>
         </div>
       </form>
+
+      <UiAlertDialogFooter>
+        <UiAlertDialogCancel>
+          Annuler
+        </UiAlertDialogCancel>
+        <UiAlertDialogAction class="destructive" @click="handleAction">
+          Supprimer
+        </UiAlertDialogAction>
+      </UiAlertDialogFooter>
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>

components/calendar/form/UpdateEvent.vue

@@ -20,7 +20,7 @@ watch(isEditEventModalOpen, (hasOpened, _o) => {
   }
 })
 
-async function handleSubmit() {
+async function handleAction() {
   try {
     await updateEventFromSkeleton()
 
@@ -51,7 +51,7 @@ async function handleSubmit() {
         </UiAlertDialogDescription>
       </VisuallyHidden>
 
-      <form @submit.prevent="handleSubmit">
+      <form>
         <div class="grid grid-cols-2 gap-y-4">
           <div class="col-span-2 ml-8">
             <input
@@ -100,17 +100,16 @@ async function handleSubmit() {
               {{ formErrors.message }}
             </span>
           </div>
-
-          <div class="flex gap-2 justify-end">
-            <UiButton size="sm" type="button" variant="secondary">
-              Annuler
-            </UiButton>
-            <UiButton size="sm" type="submit">
-              Sauvegarder
-            </UiButton>
-          </div>
         </div>
       </form>
+      <UiAlertDialogFooter>
+        <UiAlertDialogCancel>
+          Annuler
+        </UiAlertDialogCancel>
+        <UiAlertDialogAction @click="handleAction">
+          Sauvegarder
+        </UiAlertDialogAction>
+      </UiAlertDialogFooter>
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>