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 }
 })

tailwind.config.js

@@ -1,93 +1,93 @@
-const animate = require("tailwindcss-animate")
+const animate = require('tailwindcss-animate')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
-  safelist: ["dark"],
-  prefix: "",
-  
+  darkMode: ['class'],
+  safelist: ['dark'],
+  prefix: '',
+
   content: [
     './pages/**/*.{ts,tsx,vue}',
     './components/**/*.{ts,tsx,vue}',
     './app/**/*.{ts,tsx,vue}',
-    './src/**/*.{ts,tsx,vue}',
-	],
-  
+    './src/**/*.{ts,tsx,vue}'
+  ],
+
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
-      },
+        '2xl': '1400px'
+      }
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))'
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
+        }
       },
       borderRadius: {
-      	xl: "calc(var(--radius) + 4px)",
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        xl: 'calc(var(--radius) + 4px)',
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)'
       },
       keyframes: {
-        "accordion-down": {
+        'accordion-down': {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 'var(--radix-accordion-content-height)' }
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 }
         },
-        "collapsible-down": {
+        'collapsible-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--radix-collapsible-content-height)' }
         },
-        "collapsible-up": {
+        'collapsible-up': {
           from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: 0 },
-        },
+          to: { height: 0 }
+        }
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "collapsible-down": "collapsible-down 0.2s ease-in-out",
-        "collapsible-up": "collapsible-up 0.2s ease-in-out",
-      },
-    },
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-in-out'
+      }
+    }
   },
-  plugins: [animate],
-}
+  plugins: [animate]
+}