From 3002ae593c591ccfee5c089a41aba3fcc605246a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 14:18:19 +0200
Subject: [PATCH] Fixed crash with function stringify

---
 components/calendar/Calendar.vue          | 17 ++++++++++++++---
 components/calendar/CalendarEvent.vue     |  2 +-
 components/global/sidebar/Sidebar.vue     | 10 +++++++++-
 components/global/sidebar/SidebarProps.ts |  4 +++-
 pages/calendar/[id].vue                   | 13 -------------
 5 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index 202e877..950b36b 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -2,6 +2,7 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { computed, type Component, type ComputedRef } from 'vue'
 
+import { PhMagnifyingGlass } from '@phosphor-icons/vue'
 import MonthlyLayout from './state/monthly/Layout.vue'
 import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'
@@ -85,8 +86,18 @@ const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   }
 })
 
+const { setCurrentMenu } = useUiStore()
+
 onMounted(() => {
   jumpToDate(selectedDate)
+
+  setCurrentMenu([
+    {
+      phIcon: PhMagnifyingGlass,
+      tooltip: 'Recherche avancée',
+      action: 'event-search'
+    }
+  ])
 })
 </script>
 
@@ -107,8 +118,8 @@ onMounted(() => {
       </div>
     </template>
 
-    <CalendarSearch />
-    <CalendarFormUpdateEvent />
-    <CalendarFormDeleteEvent />
+    <LazyCalendarSearch />
+    <LazyCalendarFormUpdateEvent />
+    <LazyCalendarFormDeleteEvent />
   </div>
 </template>
diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index 2127b68..03e1795 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -65,7 +65,7 @@ function handleClosePopover() {
       </button>
     </UiPopoverTrigger>
 
-    <CalendarEventDetails
+    <LazyCalendarEventDetails
       :event
       :spans-multiple-days
       :is-start-event
diff --git a/components/global/sidebar/Sidebar.vue b/components/global/sidebar/Sidebar.vue
index 5676f49..8be84ff 100644
--- a/components/global/sidebar/Sidebar.vue
+++ b/components/global/sidebar/Sidebar.vue
@@ -1,7 +1,15 @@
 <script lang="ts" setup>
 import { PhHouse, PhList } from '@phosphor-icons/vue'
+import type { SidebarMenuActionType } from './SidebarProps';
 
+const { revealAdvancedSearch } = useCalendar()
 const { currentMenu } = storeToRefs(useUiStore())
+
+function handleMenuItemAction(actionType: SidebarMenuActionType) {
+  if (actionType === 'event-search') {
+    revealAdvancedSearch()
+  }
+}
 </script>
 
 <template>
@@ -39,7 +47,7 @@ const { currentMenu } = storeToRefs(useUiStore())
                   <component :is="item.phIcon" size="24" weight="fill" />
                 </RouterLink>
               </UiButton>
-              <UiButton v-if="item.clickHandler" variant="ghost" size="icon" class="rounded-full" @click="item.clickHandler">
+              <UiButton v-if="item.action" variant="ghost" size="icon" class="rounded-full" @click="handleMenuItemAction(item.action!)">
                 <component :is="item.phIcon" size="24" weight="fill" />
               </UiButton>
             </UiTooltipTrigger>
diff --git a/components/global/sidebar/SidebarProps.ts b/components/global/sidebar/SidebarProps.ts
index 0e8b992..4414df0 100644
--- a/components/global/sidebar/SidebarProps.ts
+++ b/components/global/sidebar/SidebarProps.ts
@@ -1,7 +1,9 @@
+export type SidebarMenuActionType = "event-search"
+
 export interface SidebarMenuItem {
   phIcon: Component
   tooltip: string
-  clickHandler?: () => void
+  action?: SidebarMenuActionType
   to?: string
 }
 
diff --git a/pages/calendar/[id].vue b/pages/calendar/[id].vue
index 31c08b3..8b233ee 100644
--- a/pages/calendar/[id].vue
+++ b/pages/calendar/[id].vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { PhMagnifyingGlass } from '@phosphor-icons/vue';
-
 useHead({
   title: 'Calendrier'
 })
@@ -15,17 +13,6 @@ watch(user, (n, _o) => {
     navigateTo('/')
   }
 })
-
-const { setCurrentMenu } = useUiStore()
-const { revealAdvancedSearch } = useCalendar()
-
-setCurrentMenu([
-  {
-    phIcon: PhMagnifyingGlass,
-    tooltip: 'Recherche avancée',
-    clickHandler: revealAdvancedSearch
-  }
-])
 </script>
 
 <template>