Added reactivity when adding an event

components/calendar/Calendar.vue

@@ -7,7 +7,7 @@ import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'
 import YearLayout from './state/yearly/Layout.vue'
 
-const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
+const { isAdvancedSearchOpen, isEditEventModalOpen } = storeToRefs(useCalendar())
 
 const route = useRoute()
 const worldId = route.params.id
@@ -110,5 +110,6 @@ onMounted(() => {
     </template>
 
     <CalendarSearch v-model:model-value="isAdvancedSearchOpen" />
+    <CalendarFormUpdateEvent v-model:model-value="isEditEventModalOpen" />
   </div>
 </template>

components/calendar/CalendarEvent.vue

@@ -17,15 +17,15 @@ const isStartEvent = spansMultipleDays && areDatesIdentical(props.tileDate, prop
 const isEndEvent =
   spansMultipleDays && props.event.endDate && areDatesIdentical(props.tileDate, props.event.endDate)
 
-const isPopoverOpen = ref<boolean>(false)
+const isPopoverDetailsOpen = ref<boolean>(false)
 
 function handleClosePopover() {
-  isPopoverOpen.value = false
+  isPopoverDetailsOpen.value = false
 }
 </script>
 
 <template>
-  <UiPopover v-model:open="isPopoverOpen">
+  <UiPopover v-model:open="isPopoverDetailsOpen">
     <UiPopoverTrigger as-child>
       <button
         class="text-xs px-2 py-1 block w-full text-left rounded-sm whitespace-nowrap overflow-hidden text-ellipsis"

components/calendar/CalendarEventDetails.vue

@@ -11,7 +11,8 @@ import {
   PhDotsThreeOutlineVertical
 } from '@phosphor-icons/vue'
 
-const { defaultDate, getFormattedDateTitle, jumpToDate } = useCalendar()
+const { defaultDate, getFormattedDateTitle, jumpToDate, revealEditEventModal, getRelativeString } = useCalendar()
+const { lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const props = defineProps<{
   event: CalendarEvent
@@ -25,8 +26,6 @@ const eventDetails = ref<HTMLElement>()
 
 const emit = defineEmits(['query:close-popover'])
 
-const { getRelativeString } = useCalendar()
-
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate
   ? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
@@ -41,11 +40,11 @@ function handleJumpToDate(date: RPGDate) {
  * Edit event
  */
 const commandMenuOpened = ref(false)
-const editModelOpened = ref(false)
 
 function deployEditModal() {
+  lastActiveEvent.value = { ...props.event }
+  revealEditEventModal()
   commandMenuOpened.value = false
-  editModelOpened.value = true
 }
 </script>
 
@@ -154,8 +153,6 @@ function deployEditModal() {
       </UiPopover>
     </menu>
 
-    <CalendarFormUpdateEvent v-model:model-value="editModelOpened" :event :anchor="eventDetails" />
-
     <nav v-if="event.startDate && event.endDate" class="mt-2 flex gap-2">
       <UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child>
         <button

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>