Removed redundant data pass

components/calendar/form/UpdateEvent.vue

@@ -2,7 +2,8 @@
 import { PhAlarm } from '@phosphor-icons/vue'
 import { VisuallyHidden } from 'radix-vue'
 
-const isModalOpened = defineModel<boolean>({ default: false })
+const { isEditEventModalOpen } = storeToRefs(useCalendarEvents())
+
 const { resetSkeleton, updateEventFromSkeleton } = useCalendarEvents()
 const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
@@ -11,7 +12,7 @@ const formErrors = reactive<{ message: string | null }>({
 })
 
 // Watch the popover state
-watch(isModalOpened, (hasOpened, _o) => {
+watch(isEditEventModalOpen, (hasOpened, _o) => {
   if (hasOpened && lastActiveEvent.value) {
     eventSkeleton.value = { ...lastActiveEvent.value }
   } else {
@@ -23,7 +24,7 @@ async function handleSubmit() {
   try {
     await updateEventFromSkeleton()
 
-    isModalOpened.value = false
+    isEditEventModalOpen.value = false
   } catch (err) {
     if (err instanceof Error) {
       formErrors.message = err.message
@@ -33,8 +34,8 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <UiDialog v-model:open="isModalOpened" :modal="true">
-    <UiDialogContent
+  <UiAlertDialog v-model:open="isEditEventModalOpen" :modal="true">
+    <UiAlertDialogContent
       :align="'center'"
       :side="'right'"
       :collision-padding="60"
@@ -43,11 +44,11 @@ async function handleSubmit() {
       class="pl-3 min-w-96 bg-slate-900 border-slate-800"
     >
       <VisuallyHidden>
-        <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
+        <UiAlertDialogTitle> Modifier l'évènement</UiAlertDialogTitle>
 
-        <UiDialogDescription>
+        <UiAlertDialogDescription>
           Mettre à jour les données de l'évènement
-        </UiDialogDescription>
+        </UiAlertDialogDescription>
       </VisuallyHidden>
 
       <form @submit.prevent="handleSubmit">
@@ -100,13 +101,16 @@ async function handleSubmit() {
             </span>
           </div>
 
-          <div class="text-right">
+          <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>
-    </UiDialogContent>
-  </UiDialog>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
 </template>