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,
+  PhDotsThreeOutlineVertical
-  PhArrowBendDoubleUpRight
 } 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<{
+// Ref for the popover
-  (e: 'query:close-popover'): void
+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 {
+ * Edit event
-    const { targetDate } = getRelativeEventFromEvent(props.event, position, props.isEndEvent)
+ */
+const commandMenuOpened = ref(false)
+const editModelOpened = ref(false)
 
-    handleJumpToDate(targetDate)
+function deployEditModal() {
-  } catch (err) {
+  commandMenuOpened.value = false
-    console.log(err)
+  editModelOpened.value = true
-  }
 }
 </script>
 
@@ -80,7 +79,8 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
       'border-yellow-600': event.category?.name === 'commerce'
     }"
   >
-    <div class="grid gap-1">
+    <div ref="eventDetails" class="grid gap-1">
+      <header class="pr-12">
         <div class="text-lg font-semibold">
           {{ event.title }}
         </div>
@@ -96,6 +96,7 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
             </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>
 

components/calendar/form/UpdateEvent.vue

@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import {
+  PhAlarm
+} from '@phosphor-icons/vue'
+import type { CalendarEvent } from '~/models/CalendarEvent';
+
+import { PopoverAnchor } from 'radix-vue'
+
+const popoverOpened = defineModel<boolean>()
+const { eventSkeleton } = storeToRefs(useCalendarEvents())
+const { resetSkeleton } = 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 }
+  } else {
+    resetSkeleton()
+  }
+})
+</script>
+
+<template>
+  <UiPopover v-model:open="popoverOpened" :modal="true">
+    <PopoverAnchor v-if="anchor" :element="anchor" />
+    <UiPopoverContent
+      :align="'center'"
+      :side="'right'"
+      :collision-padding="60"
+      class="pl-3 min-w-96 bg-slate-900 border-slate-800"
+    >
+      <form>
+        <div class="grid grid-cols-2 gap-y-4">
+          <div class="col-span-2 pl-8">
+            <input
+              id="new-event-title"
+              v-model="eventSkeleton.title"
+              type="text"
+              name="new-event-title"
+              required
+              placeholder="Titre de l'évènement"
+              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">
+            <textarea
+              id="new-event-description"
+              v-model="eventSkeleton.description"
+              name="new-event-description"
+              placeholder="Description brève de l'évènement"
+              class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+            />
+          </div>
+
+          <div class="col-span-2">
+            <div class="flex items-center gap-2">
+              <PhAlarm size="18" weight="fill" />
+
+              <CalendarInputRPGDate
+                v-model:model-value="eventSkeleton.startDate"
+                placeholder="Date de début"
+                :initial-date="props.event.startDate"
+                :required="true"
+              />
+
+              <span>—</span>
+
+              <CalendarInputRPGDate
+                v-model:model-value="eventSkeleton.endDate"
+                placeholder="Date de fin"
+                :initial-date="props.event.endDate"
+              />
+            </div>
+          </div>
+
+          <div class="text-red-500 pl-8">
+            <span class="text-sm">
+              {{ formErrors.message }}
+            </span>
+          </div>
+
+          <div class="text-right">
+            <UiButton size="sm">
+              Sauvegarder
+            </UiButton>
+          </div>
+        </div>
+      </form>
+    </UiPopoverContent>
+  </UiPopover>
+</template>