Added basic search and jump function

src/components/calendar/CalendarEventList.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/calendar'
+import type { CalendarEvent } from '@/stores/events'
+
+defineProps<{
+  events: CalendarEvent[]
+}>()
+
+const emit = defineEmits(['jumpedToDate'])
+
+const { jumpToDate } = useCalendar()
+
+function handleJumpToDate(date: LeimDate) {
+  jumpToDate(date)
+  emit('jumpedToDate')
+}
+</script>
+
+<template>
+  <ul class="grid gap-3">
+    <li v-for="e in events" :key="e.title">
+      <button
+        class="block w-full text-left p-2 rounded-sm"
+        :class="{
+          'bg-slate-600 hover:bg-slate-700': !e.category,
+          'bg-green-700 hover:bg-green-800': e.category === 'birth',
+          'bg-stone-600 hover:bg-stone-800': e.category === 'death',
+          'bg-red-600 hover:bg-red-800': e.category === 'catastrophe',
+          'bg-pink-600 hover:bg-pink-800': e.category === 'natural-disaster',
+          'bg-blue-600 hover:bg-blue-800': e.category === 'legal',
+          'bg-amber-700 hover:bg-amber-800': e.category === 'player'
+        }"
+        @click="handleJumpToDate(e.date)"
+      >
+        <div>
+          {{ e.title }}
+        </div>
+
+        <div v-if="e.description" class="text-sm">
+          <hr class="my-2 border-white opacity-25" />
+          <span class="opacity-75">
+            {{ e.description }}
+          </span>
+        </div>
+      </button>
+    </li>
+  </ul>
+</template>

src/components/calendar/CalendarMenuSearch.vue

@@ -1,12 +1,46 @@
 <script lang="ts" setup>
+import { ref, computed } from 'vue'
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { useCalendarEvents } from '@/stores/events'
+import CalendarEventList from './CalendarEventList.vue'
+
+const { allEvents } = useCalendarEvents()
+
+const modalOpen = ref(false)
+
+const searchQuery = ref('')
+const searchEnough = computed(() => searchQuery.value.length >= 2)
+const displaySearch = computed(() => searchQuery.value && searchEnough.value)
+
+const unifier = new RegExp(/[^a-zA-Z0-9\-'']/g)
+
+const searchResults = computed(() => {
+  return allEvents.filter((event) => {
+    const queryString = new String(searchQuery.value).replace(unifier, '').toLocaleLowerCase()
+    const hitTitle = event.title.replace(unifier, '').toLocaleLowerCase().includes(queryString)
+    const hitDesc = event.description
+      ?.replace(unifier, '')
+      .toLocaleLowerCase()
+      .includes(queryString)
+
+    return hitTitle || hitDesc
+  })
+})
+
+function resetSearch() {
+  searchQuery.value = ''
+}
+
+function closeDialog() {
+  modalOpen.value = false
+}
 </script>
 
 <template>
-  <Dialog>
+  <Dialog v-model:open="modalOpen" @update:open="resetSearch">
     <DialogTrigger>
       <Button>
         <PhMagnifyingGlass size="20" weight="light" />
@@ -14,18 +48,29 @@ import { PhMagnifyingGlass } from '@phosphor-icons/vue'
       </Button>
     </DialogTrigger>
 
-    <DialogContent>
-      <div class="relative w-full items-center">
+    <DialogContent
+      class="flex flex-col flex-nowrap top-32 -translate-y-0 data-[state=closed]:slide-out-to-top-[2rem] data-[state=open]:slide-in-from-top-[2rem]"
+      :class="{
+        'bottom-16': displaySearch && searchResults.length > 0
+      }"
+    >
+      <div class="relative w-full h-fit">
         <Input
           id="search"
           type="text"
           placeholder="Rechercher un évènement, un personnage…"
           class="pl-10 py-6 text-lg"
+          v-model:model-value="searchQuery"
         />
         <span class="absolute start-1 inset-y-0 flex items-center justify-center px-2 opacity-50">
           <PhMagnifyingGlass size="20" />
         </span>
       </div>
+
+      <div v-if="displaySearch && searchResults.length > 0" class="overflow-y-auto">
+        <hr class="mb-4" />
+        <CalendarEventList :events="searchResults" @jumped-to-date="closeDialog()" />
+      </div>
     </DialogContent>
   </Dialog>
 </template>

src/components/calendar/CalendarMenuSearchResults.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup></script>
+
+<template>
+  <ul>
+    <li>
+      <button>Yes</button>
+    </li>
+  </ul>
+</template>

src/stores/calendar.ts

@@ -296,10 +296,14 @@ export const useCalendar = defineStore('calendar', () => {
     return JSON.stringify({ ...date1 }) === JSON.stringify({ ...date2 })
   }
 
+  function jumpToDate(date: LeimDate) {
+    params.day = date.day.toString()
+    params.month = date.month.toString()
+    params.year = date.year.toString()
+  }
+
   function jumpToDefaultDate() {
-    params.day = defaultDay.toString()
-    params.month = defaultMonth.toString()
-    params.year = defaultYear.toString()
+    jumpToDate(defaultDate.value)
     currentConfig.value.viewType = 'month'
   }
 
@@ -316,6 +320,7 @@ export const useCalendar = defineStore('calendar', () => {
     setMonth,
     incrementYear,
     decrementYear,
+    jumpToDate,
     jumpToDefaultDate,
     compareTwoDates,
     getFormattedDateTitle,

src/stores/events.ts

@@ -73,6 +73,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     })
   })
 
+  const allEvents = computed(() => {
+    return [...characterBirthEvents.value, ...characterDeathEvents.value, ...baseEvents.value]
+  })
+
   // Gets all current event in its default state
   const currentEvents: Ref<CalendarEvent[]> = ref(computeCurrentEvents())
 
@@ -123,14 +127,8 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * @returns A list of events that can appear in the current view
    */
   function computeCurrentEvents(): CalendarEvent[] {
-    const allEvents = [
-      ...characterBirthEvents.value,
-      ...characterDeathEvents.value,
-      ...baseEvents.value
-    ]
-
-    return allEvents.filter((event) => shouldEventBeDisplayed(event))
+    return allEvents.value.filter((event) => shouldEventBeDisplayed(event))
   }
 
-  return { currentEvents }
+  return { allEvents, currentEvents }
 })