Added reactivity when adding an event

components/calendar/form/UpdateEvent.vue

@@ -1,28 +1,19 @@
 <script lang="ts" setup>
-import {
-  PhAlarm
-} from '@phosphor-icons/vue'
-import type { CalendarEvent } from '~/models/CalendarEvent';
+import { PhAlarm } from '@phosphor-icons/vue'
+import { VisuallyHidden } from 'radix-vue'
 
-import { PopoverAnchor } from 'radix-vue'
-
-const popoverOpened = defineModel<boolean>()
-const { eventSkeleton } = storeToRefs(useCalendarEvents())
+const isModalOpened = defineModel<boolean>({ default: false })
 const { resetSkeleton } = useCalendarEvents()
+const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const formErrors = reactive<{ message: string | null }>({
   message: null
 })
 
-const props = defineProps<{
-  event: CalendarEvent,
-  anchor?: HTMLElement
-}>()
-
 // Watch the popover state
-watch(popoverOpened, (hasOpened, _o) => {
-  if (hasOpened) {
-    eventSkeleton.value = { ...props.event }
+watch(isModalOpened, (hasOpened, _o) => {
+  if (hasOpened && lastActiveEvent.value) {
+    eventSkeleton.value = { ...lastActiveEvent.value }
   } else {
     resetSkeleton()
   }
@@ -30,17 +21,26 @@ watch(popoverOpened, (hasOpened, _o) => {
 </script>
 
 <template>
-  <UiPopover v-model:open="popoverOpened" :modal="true">
-    <PopoverAnchor v-if="anchor" :element="anchor" />
-    <UiPopoverContent
+  <UiDialog v-model:open="isModalOpened" :modal="true">
+    <UiDialogContent
       :align="'center'"
       :side="'right'"
       :collision-padding="60"
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
       class="pl-3 min-w-96 bg-slate-900 border-slate-800"
     >
+      <VisuallyHidden>
+        <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
+
+        <UiDialogDescription>
+          Mettre à jour les données de l'évènement
+        </UiDialogDescription>
+      </VisuallyHidden>
+
       <form>
         <div class="grid grid-cols-2 gap-y-4">
-          <div class="col-span-2 pl-8">
+          <div class="col-span-2 ml-8">
             <input
               id="new-event-title"
               v-model="eventSkeleton.title"
@@ -51,7 +51,7 @@ watch(popoverOpened, (hasOpened, _o) => {
               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 pl-8">
+          <div class="col-span-2 ml-8">
             <textarea
               id="new-event-description"
               v-model="eventSkeleton.description"
@@ -68,7 +68,7 @@ watch(popoverOpened, (hasOpened, _o) => {
               <CalendarInputRPGDate
                 v-model:model-value="eventSkeleton.startDate"
                 placeholder="Date de début"
-                :initial-date="props.event.startDate"
+                :initial-date="lastActiveEvent?.startDate"
                 :required="true"
               />
 
@@ -77,12 +77,12 @@ watch(popoverOpened, (hasOpened, _o) => {
               <CalendarInputRPGDate
                 v-model:model-value="eventSkeleton.endDate"
                 placeholder="Date de fin"
-                :initial-date="props.event.endDate"
+                :initial-date="lastActiveEvent?.endDate"
               />
             </div>
           </div>
 
-          <div class="text-red-500 pl-8">
+          <div class="text-red-500 ml-8">
             <span class="text-sm">
               {{ formErrors.message }}
             </span>
@@ -95,6 +95,6 @@ watch(popoverOpened, (hasOpened, _o) => {
           </div>
         </div>
       </form>
-    </UiPopoverContent>
-  </UiPopover>
+    </UiDialogContent>
+  </UiDialog>
 </template>