Updated form component

I'll need to refactor this to a Calendar level component

components/calendar/CalendarEventDetails.vue

@@ -2,19 +2,16 @@
 import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/CalendarEvent'
 import { useCalendar } from '@/stores/CalendarStore'
-import { useCalendarEvents } from '@/stores/EventStore'
 
 import {
   PhHourglassMedium,
   PhAlarm,
   PhHourglassHigh,
   PhHourglassLow,
-  PhArrowBendDoubleUpLeft,
-  PhArrowBendDoubleUpRight
+  PhDotsThreeOutlineVertical
 } from '@phosphor-icons/vue'
 
 const { defaultDate, getFormattedDateTitle, jumpToDate } = useCalendar()
-const { getRelativeEventFromEvent } = useCalendarEvents()
 
 const props = defineProps<{
   event: CalendarEvent
@@ -23,9 +20,10 @@ const props = defineProps<{
   isEndEvent?: boolean
 }>()
 
-const emit = defineEmits<{
-  (e: 'query:close-popover'): void
-}>()
+// Ref for the popover
+const eventDetails = ref<HTMLElement>()
+
+const emit = defineEmits(['query:close-popover'])
 
 const { getRelativeString } = useCalendar()
 
@@ -39,14 +37,15 @@ function handleJumpToDate(date: RPGDate) {
   emit('query:close-popover')
 }
 
-function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
-  try {
-    const { targetDate } = getRelativeEventFromEvent(props.event, position, props.isEndEvent)
+/**
+ * Edit event
+ */
+const commandMenuOpened = ref(false)
+const editModelOpened = ref(false)
 
-    handleJumpToDate(targetDate)
-  } catch (err) {
-    console.log(err)
-  }
+function deployEditModal() {
+  commandMenuOpened.value = false
+  editModelOpened.value = true
 }
 </script>
 
@@ -80,22 +79,24 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
       'border-yellow-600': event.category?.name === 'commerce'
     }"
   >
-    <div class="grid gap-1">
-      <div class="text-lg font-semibold">
-        {{ event.title }}
-      </div>
+    <div ref="eventDetails" class="grid gap-1">
+      <header class="pr-12">
+        <div class="text-lg font-semibold">
+          {{ event.title }}
+        </div>
 
-      <div class="mb-1">
-        <template v-if="!event.endDate">
-          <p class="font-semibold">{{ getFormattedDateTitle(event.startDate, true) }}</p>
-        </template>
-        <template v-else>
-          <p class="font-semibold">
-            Du {{ getFormattedDateTitle(event.startDate, true) }} au
-            {{ getFormattedDateTitle(event.endDate, true) }}
-          </p>
-        </template>
-      </div>
+        <div class="mb-1">
+          <template v-if="!event.endDate">
+            <p class="font-semibold">{{ getFormattedDateTitle(event.startDate, true) }}</p>
+          </template>
+          <template v-else>
+            <p class="font-semibold">
+              Du {{ getFormattedDateTitle(event.startDate, true) }} au
+              {{ getFormattedDateTitle(event.endDate, true) }}
+            </p>
+          </template>
+        </div>
+      </header>
 
       <div class="mb-1 space-y-1">
         <p class="text-sm italic opacity-75 flex items-center gap-1">
@@ -133,7 +134,29 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
       </template>
     </div>
 
-    <nav v-if="event.startDate && event.endDate" class="absolute -top-2 right-2 flex gap-2">
+    <menu class="absolute top-4 right-4">
+      <UiPopover v-model:open="commandMenuOpened">
+        <UiPopoverTrigger as-child>
+          <UiButton size="icon" variant="ghost">
+            <PhDotsThreeOutlineVertical size="20" weight="fill" />
+          </UiButton>
+        </UiPopoverTrigger>
+        <UiPopoverContent class="w-fit p-0" align="start" side="right" :collision-padding="20" >
+          <UiCommand>
+            <UiCommandList>
+              <UiCommandGroup>
+                <UiCommandItem value="edit-event" @select="deployEditModal"> Modifier </UiCommandItem>
+                <UiCommandItem value="delete-event"> Supprimer </UiCommandItem>
+              </UiCommandGroup>
+            </UiCommandList>
+          </UiCommand>
+        </UiPopoverContent>
+      </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
           class="flex gap-1"
@@ -153,27 +176,6 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
         </button>
       </UiBadge>
     </nav>
-
-    <nav class="mt-2 flex gap-2">
-      <UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child>
-        <button
-          class="flex gap-1"
-          title="Évènement précédent"
-          @click="handleGotoRelativeEvent('prev')"
-        >
-          <PhArrowBendDoubleUpLeft size="16" weight="fill" /> Précédent
-        </button>
-      </UiBadge>
-      <UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin">
-        <button
-          class="flex gap-1"
-          title="Évènement suivant"
-          @click="handleGotoRelativeEvent('next')"
-        >
-          <PhArrowBendDoubleUpRight size="16" weight="fill" /> Suivant
-        </button>
-      </UiBadge>
-    </nav>
   </UiPopoverContent>
 </template>