From f5f343b112a1836db24b79c67809dc301c56aef1 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 3 Apr 2024 20:57:48 +0200
Subject: [PATCH] Refactored calendar nav and added year nav

---
 src/components/calendar/CalendarMenu.vue      | 65 +--------------
 .../calendar/CalendarNavigation.vue           | 80 +++++++++++++++++++
 2 files changed, 84 insertions(+), 61 deletions(-)
 create mode 100644 src/components/calendar/CalendarNavigation.vue

diff --git a/src/components/calendar/CalendarMenu.vue b/src/components/calendar/CalendarMenu.vue
index 03e6f21..38be457 100644
--- a/src/components/calendar/CalendarMenu.vue
+++ b/src/components/calendar/CalendarMenu.vue
@@ -1,20 +1,10 @@
 <script lang="ts" setup>
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { useCalendar } from '@/stores/calendar'
-import Button from '../ui/button/Button.vue'
-import CalendarSwitch from './CalendarSwitch.vue'
 import CalendarJumpToday from './CalendarJumpToday.vue'
+import CalendarNavigation from './CalendarNavigation.vue'
+import CalendarSwitch from './CalendarSwitch.vue'
 
-const { currentConfig, currentDate, viewTypeOptions, decrementMonth, incrementMonth } =
-  useCalendar()
+const { currentDate } = useCalendar()
 </script>
 
 <template>
@@ -31,54 +21,7 @@ const { currentConfig, currentDate, viewTypeOptions, decrementMonth, incrementMo
                 <CalendarJumpToday />
               </li>
               <li>
-                <!-- Implement decrementDate to account for other mods -->
-                <TooltipProvider :delayDuration="250">
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <Button variant="outline" size="icon" @click="decrementMonth">
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="16"
-                          height="16"
-                          fill="#FFF"
-                          viewBox="0 0 256 256"
-                        >
-                          <path
-                            d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
-                          />
-                        </svg>
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>Mois précédent</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              </li>
-              <li>
-                <!-- Implement decrementDate to account for other mods -->
-                <TooltipProvider :delayDuration="250">
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <Button variant="outline" size="icon" @click="incrementMonth">
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="16"
-                          height="16"
-                          fill="#FFF"
-                          viewBox="0 0 256 256"
-                        >
-                          <path
-                            d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
-                          />
-                        </svg>
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>Mois suivant</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
+                <CalendarNavigation />
               </li>
             </menu>
             <h1 class="text-2xl font-bold">
diff --git a/src/components/calendar/CalendarNavigation.vue b/src/components/calendar/CalendarNavigation.vue
new file mode 100644
index 0000000..52dce7e
--- /dev/null
+++ b/src/components/calendar/CalendarNavigation.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { useCalendar } from '@/stores/calendar'
+import Button from '../ui/button/Button.vue'
+
+const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCalendar()
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <!-- Implement decrementDate to account for other mods -->
+
+    <TooltipProvider :delayDuration="250">
+      <Tooltip>
+        <TooltipTrigger>
+          <Button variant="outline" size="icon" @click="decrementYear()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+              <path
+                d="M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z"
+              />
+            </svg>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Année précédente</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+
+    <TooltipProvider :delayDuration="250">
+      <Tooltip>
+        <TooltipTrigger>
+          <Button variant="outline" size="icon" @click="decrementMonth()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+              <path
+                d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
+              />
+            </svg>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Mois précédent</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+
+    <TooltipProvider :delayDuration="250">
+      <Tooltip>
+        <TooltipTrigger>
+          <Button variant="outline" size="icon" @click="incrementMonth()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+              <path
+                d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
+              />
+            </svg>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Mois suivant</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+
+    <TooltipProvider :delayDuration="250">
+      <Tooltip>
+        <TooltipTrigger>
+          <Button variant="outline" size="icon" @click="incrementYear()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+              <path
+                d="M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z"
+              ></path></svg
+          ></Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Année suivante</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  </div>
+</template>