Added popover close on start/end select

src/components/calendar/CalendarEvent.vue

@@ -5,6 +5,7 @@ import type { CalendarEvent } from '@/models/Events'
 
 import CalendarEventDetails from './CalendarEventDetails.vue'
 import { areDatesIdentical, type LeimDate } from '@/models/Date'
+import { ref } from 'vue'
 
 const props = defineProps<{
   event: CalendarEvent
@@ -16,10 +17,16 @@ const spansMultipleDays = Boolean(props.event.startDate && props.event.endDate)
 const isStartEvent = spansMultipleDays && areDatesIdentical(props.tileDate, props.event.startDate)
 const isEndEvent =
   spansMultipleDays && props.event.endDate && areDatesIdentical(props.tileDate, props.event.endDate)
+
+const isPopoverOpen = ref<boolean>(false)
+
+function handleClosePopover() {
+  isPopoverOpen.value = false
+}
 </script>
 
 <template>
-  <Popover>
+  <Popover v-model:open="isPopoverOpen">
     <PopoverTrigger as-child>
       <button
         class="text-xs px-2 py-1 block w-full text-left rounded-sm whitespace-nowrap overflow-hidden text-ellipsis"
@@ -53,6 +60,13 @@ const isEndEvent =
       </button>
     </PopoverTrigger>
 
-    <CalendarEventDetails :event :spans-multiple-days :is-start-event :is-end-event v-once />
+    <CalendarEventDetails
+      :event
+      :spans-multiple-days
+      :is-start-event
+      :is-end-event
+      @query:close-popover="handleClosePopover"
+      v-once
+    />
   </Popover>
 </template>

src/components/calendar/CalendarEventDetails.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getRelativeString } from '@/models/Date'
+import { getRelativeString, type LeimDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
 
@@ -7,7 +7,7 @@ import { PhHourglassMedium, PhAlarm, PhHourglassHigh, PhHourglassLow } from '@ph
 import { Badge } from '@/components/ui/badge'
 import { PopoverContent } from '@/components/ui/popover'
 
-const { defaultDate, getFormattedDateTitle } = useCalendar()
+const { defaultDate, getFormattedDateTitle, jumpToDate } = useCalendar()
 
 const props = defineProps<{
   event: CalendarEvent
@@ -16,10 +16,17 @@ const props = defineProps<{
   isEndEvent?: boolean
 }>()
 
+const emit = defineEmits(['query:close-popover'])
+
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate
   ? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
   : null
+
+function handleJumpToDate(date: LeimDate) {
+  jumpToDate(date)
+  emit('query:close-popover')
+}
 </script>
 
 <template>
@@ -105,12 +112,22 @@ const dateDuration: string | null = props.event.endDate
       </template>
     </div>
 
-    <Badge v-if="isStartEvent" class="absolute -top-2 left-2 hover:bg-slate-300 hover:opacity-100">
+    <nav v-if="event.startDate && event.endDate" class="absolute -top-2 right-2 flex gap-2">
-      <PhHourglassHigh size="16" weight="fill" /> Début
+      <Badge class="hover:opacity-100 hover:bg-slate-300" as-child>
-    </Badge>
+        <button
-    <Badge v-if="isEndEvent" class="absolute -top-2 left-2 hover:bg-slate-300 hover:opacity-100">
+          class="flex gap-1"
-      <PhHourglassLow size="16" weight="fill" /> Fin
+          @click="handleJumpToDate(event.startDate!)"
-    </Badge>
+          title="Naviguer au début"
+        >
+          <PhHourglassHigh size="16" weight="fill" /> Début
+        </button>
+      </Badge>
+      <Badge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin">
+        <button class="flex gap-1" @click="handleJumpToDate(event.endDate!)">
+          <PhHourglassLow size="16" weight="fill" /> Fin
+        </button>
+      </Badge>
+    </nav>
   </PopoverContent>
 </template>