From 1893cd3400d85f46a5dee185c2bdf470abe30a8e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 29 Apr 2024 23:21:50 +0200
Subject: [PATCH] Added search CTA to sidebar

---
 src/components/calendar/CalendarMenu.vue      | 10 ++--
 src/components/calendar/CalendarMenuNav.vue   |  1 -
 src/components/calendar/Sidebar.vue           | 47 ++++++++++++++++---
 .../calendar/search/CalendarSearch.vue        |  9 +---
 src/stores/CalendarStore.ts                   | 10 +++-
 src/views/CalendarPage.vue                    |  8 +++-
 6 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/src/components/calendar/CalendarMenu.vue b/src/components/calendar/CalendarMenu.vue
index 83a408d..d6869b8 100644
--- a/src/components/calendar/CalendarMenu.vue
+++ b/src/components/calendar/CalendarMenu.vue
@@ -1,14 +1,13 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
 
+import { Button } from '@/components/ui/button'
 import CalendarMenuNav from './CalendarMenuNav.vue'
 import CalendarMenuToday from './CalendarMenuToday.vue'
 import CalendarSwitch from './CalendarSwitch.vue'
 import CalendarCurrentDate from './CalendarCurrentDate.vue'
 
-import CalendarSearch from './search/CalendarSearch.vue'
-
-const { currentDate } = useCalendar()
+const { currentDate, revealAdvancedSearch } = useCalendar()
 </script>
 
 <template>
@@ -28,7 +27,10 @@ const { currentDate } = useCalendar()
 
       <menu class="flex items-center gap-2">
         <li>
-          <CalendarSearch />
+          <Button search-slash @click="revealAdvancedSearch()">
+            <PhMagnifyingGlass size="20" weight="light" />
+            Recherche avancée
+          </Button>
         </li>
         <li>
           <CalendarSwitch />
diff --git a/src/components/calendar/CalendarMenuNav.vue b/src/components/calendar/CalendarMenuNav.vue
index 9442b65..05d303e 100644
--- a/src/components/calendar/CalendarMenuNav.vue
+++ b/src/components/calendar/CalendarMenuNav.vue
@@ -145,7 +145,6 @@ function toFutureFar(): void {
 
 <template>
   <div class="flex items-center gap-2">
-    <!-- Implement decrementDate to account for other mods -->
     <TooltipProvider :delayDuration="250">
       <Tooltip>
         <TooltipTrigger>
diff --git a/src/components/calendar/Sidebar.vue b/src/components/calendar/Sidebar.vue
index 0203df6..7041540 100644
--- a/src/components/calendar/Sidebar.vue
+++ b/src/components/calendar/Sidebar.vue
@@ -1,22 +1,55 @@
 <script lang="ts" setup>
-import { PhList, PhHouse } from '@phosphor-icons/vue'
+import { useCalendar } from '@/stores/CalendarStore'
+
+import { PhList, PhHouse, PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import Button from '../ui/button/Button.vue'
+
+const { revealAdvancedSearch } = useCalendar()
 </script>
 
 <template>
   <nav class="w-16 py-6 border-r-[1px] border-l-slate-500 grid justify-center">
-    <menu>
+    <menu class="flex flex-col gap-4">
       <li class="mb-12">
         <Button variant="ghost" size="icon" @click="console.log" class="rounded-full">
           <PhList size="27" />
         </Button>
       </li>
       <li>
-        <Button variant="ghost" size="icon" class="rounded-full" as-child>
-          <RouterLink to="/">
-            <PhHouse size="24" weight="fill" />
-          </RouterLink>
-        </Button>
+        <TooltipProvider :delayDuration="100">
+          <Tooltip>
+            <TooltipTrigger>
+              <Button variant="ghost" size="icon" class="rounded-full" as-child>
+                <RouterLink to="/">
+                  <PhHouse size="24" weight="fill" />
+                </RouterLink>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent :side="'right'">
+              <p>Retourner aux outils</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </li>
+      <li>
+        <TooltipProvider :delayDuration="100">
+          <Tooltip>
+            <TooltipTrigger>
+              <Button
+                variant="ghost"
+                size="icon"
+                class="rounded-full"
+                @click="revealAdvancedSearch()"
+              >
+                <PhMagnifyingGlass size="24" weight="fill" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent :side="'right'">
+              <p>Recherche avancée</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </li>
     </menu>
   </nav>
diff --git a/src/components/calendar/search/CalendarSearch.vue b/src/components/calendar/search/CalendarSearch.vue
index e001f6e..0996da2 100644
--- a/src/components/calendar/search/CalendarSearch.vue
+++ b/src/components/calendar/search/CalendarSearch.vue
@@ -62,7 +62,7 @@ import SearchList from './lists/SearchList.vue'
 const { characters } = useCharacters()
 const { baseEvents } = useCalendarEvents()
 
-const modalOpen = ref<boolean>(false)
+const modalOpen = defineModel({ default: false })
 
 const searchQuery = ref<string>('')
 // const searchEnough = computed<boolean>(() => searchQuery.value.length >= 2)
@@ -243,13 +243,6 @@ function handleCategorySelect(e: any) {
 
 <template>
   <Dialog v-model:open="modalOpen" @update:open="resetSearch()">
-    <DialogTrigger>
-      <Button search-slash>
-        <PhMagnifyingGlass size="20" weight="light" />
-        Recherche avancée
-      </Button>
-    </DialogTrigger>
-
     <DialogContent
       class="flex flex-col flex-nowrap top-16 -translate-y-0 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-top-[5%]"
       :class="{
diff --git a/src/stores/CalendarStore.ts b/src/stores/CalendarStore.ts
index 1813580..0d63f99 100644
--- a/src/stores/CalendarStore.ts
+++ b/src/stores/CalendarStore.ts
@@ -388,6 +388,12 @@ export const useCalendar = defineStore('calendar', () => {
     selectedDate.value = date
   }
 
+  const isAdvancedSearchOpen: Ref<boolean> = ref<boolean>(false)
+
+  function revealAdvancedSearch() {
+    isAdvancedSearchOpen.value = true
+  }
+
   return {
     staticConfig,
     viewTypeOptions,
@@ -413,6 +419,8 @@ export const useCalendar = defineStore('calendar', () => {
     getMonthName,
     setViewType,
     getViewTypeTitle,
-    isCurrentScreenActive
+    isCurrentScreenActive,
+    isAdvancedSearchOpen,
+    revealAdvancedSearch
   }
 })
diff --git a/src/views/CalendarPage.vue b/src/views/CalendarPage.vue
index 4a6dd65..13b0984 100644
--- a/src/views/CalendarPage.vue
+++ b/src/views/CalendarPage.vue
@@ -1,12 +1,16 @@
 <script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { onMounted } from 'vue'
 import { useCalendar } from '@/stores/CalendarStore'
 
 import Calendar from '@/components/calendar/Calendar.vue'
 import Sidebar from '@/components/calendar/Sidebar.vue'
+import CalendarSearch from '@/components/calendar/search/CalendarSearch.vue'
 
 const { validateUrlParams } = useCalendar()
+const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
 
-validateUrlParams()
+onMounted(() => validateUrlParams())
 </script>
 
 <template>
@@ -14,4 +18,6 @@ validateUrlParams()
     <Sidebar />
     <Calendar />
   </main>
+
+  <CalendarSearch v-model:model-value="isAdvancedSearchOpen" />
 </template>