From 7c5de2654ef4d6eab9c9e0471e06c71fab46f0ee Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Thu, 25 Apr 2024 16:17:12 +0200
Subject: [PATCH] Added basic year view

---
 src/components/calendar/Calendar.vue          | 18 ++++----
 src/components/calendar/state/Year.vue        |  3 --
 .../{Century.vue => centennially/Layout.vue}  |  0
 .../{Decade.vue => decennially/Layout.vue}    |  0
 .../monthly/DayTile.vue}                      |  6 +--
 .../state/{Monthly.vue => monthly/Layout.vue} |  8 ++--
 .../calendar/state/yearly/DayTile.vue         | 43 +++++++++++++++++++
 .../calendar/state/yearly/Layout.vue          | 18 ++++++++
 .../calendar/state/yearly/MonthTile.vue       | 32 ++++++++++++++
 src/stores/CalendarStore.ts                   |  1 -
 10 files changed, 110 insertions(+), 19 deletions(-)
 delete mode 100644 src/components/calendar/state/Year.vue
 rename src/components/calendar/state/{Century.vue => centennially/Layout.vue} (100%)
 rename src/components/calendar/state/{Decade.vue => decennially/Layout.vue} (100%)
 rename src/components/calendar/{CalendarTile.vue => state/monthly/DayTile.vue} (97%)
 rename src/components/calendar/state/{Monthly.vue => monthly/Layout.vue} (91%)
 create mode 100644 src/components/calendar/state/yearly/DayTile.vue
 create mode 100644 src/components/calendar/state/yearly/Layout.vue
 create mode 100644 src/components/calendar/state/yearly/MonthTile.vue

diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 1636137..dd739ea 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -1,28 +1,30 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
 import { computed } from 'vue'
+
 import CalendarMenu from './CalendarMenu.vue'
-import Century from './state/Century.vue'
-import Decade from './state/Decade.vue'
-import Monthly from './state/Monthly.vue'
-import Year from './state/Year.vue'
+
+import MonthlyLayout from './state/monthly/Layout.vue'
+import CenturyLayout from './state/centennially/Layout.vue'
+import DecadeLayout from './state/decennially/Layout.vue'
+import YearLayout from './state/yearly/Layout.vue'
 
 const { currentConfig } = useCalendar()
 
 const currentViewComponent = computed(() => {
   switch (currentConfig.viewType) {
     case 'month':
-      return Monthly
+      return MonthlyLayout
 
     case 'year':
-      return Year
+      return YearLayout
 
     case 'decade':
-      return Decade
+      return DecadeLayout
 
     case 'century':
     default:
-      return Century
+      return CenturyLayout
   }
 })
 </script>
diff --git a/src/components/calendar/state/Year.vue b/src/components/calendar/state/Year.vue
deleted file mode 100644
index b5256a2..0000000
--- a/src/components/calendar/state/Year.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Annuel</div>
-</template>
diff --git a/src/components/calendar/state/Century.vue b/src/components/calendar/state/centennially/Layout.vue
similarity index 100%
rename from src/components/calendar/state/Century.vue
rename to src/components/calendar/state/centennially/Layout.vue
diff --git a/src/components/calendar/state/Decade.vue b/src/components/calendar/state/decennially/Layout.vue
similarity index 100%
rename from src/components/calendar/state/Decade.vue
rename to src/components/calendar/state/decennially/Layout.vue
diff --git a/src/components/calendar/CalendarTile.vue b/src/components/calendar/state/monthly/DayTile.vue
similarity index 97%
rename from src/components/calendar/CalendarTile.vue
rename to src/components/calendar/state/monthly/DayTile.vue
index 3d3a184..f1c3a4e 100644
--- a/src/components/calendar/CalendarTile.vue
+++ b/src/components/calendar/state/monthly/DayTile.vue
@@ -7,7 +7,7 @@ import { storeToRefs } from 'pinia'
 import { computed, ref, type ComputedRef } from 'vue'
 
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import CalendarEventButton from './CalendarEvent.vue'
+import CalendarEventButton from '../../CalendarEvent.vue'
 import type { CalendarEvent } from '@/models/Events'
 
 const props = defineProps<{
@@ -107,8 +107,8 @@ const eventsNotDisplayed = computed(
               <span
                 class="inline-flex w-12 h-12 aspect-square items-center justify-center text-lg font-semibold text-slate-300 bg-slate-800 rounded-full"
               >
-                {{ date.day }}</span
-              >
+                {{ date.day }}
+              </span>
             </div>
             <ul class="grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity">
               <li
diff --git a/src/components/calendar/state/Monthly.vue b/src/components/calendar/state/monthly/Layout.vue
similarity index 91%
rename from src/components/calendar/state/Monthly.vue
rename to src/components/calendar/state/monthly/Layout.vue
index 6d1bcae..4b48dd8 100644
--- a/src/components/calendar/state/Monthly.vue
+++ b/src/components/calendar/state/monthly/Layout.vue
@@ -4,7 +4,7 @@ import { useCalendar } from '@/stores/CalendarStore'
 import { useThrottleFn } from '@vueuse/core'
 import { computed } from 'vue'
 
-import CalendarTile from '../CalendarTile.vue'
+import DayTile from './DayTile.vue'
 
 const { staticConfig, currentDate, decrementMonth, incrementMonth } = useCalendar()
 
@@ -54,8 +54,8 @@ const moveCalendarRight = useThrottleFn(() => {
 </script>
 
 <template>
-  <div class="grid" :class="`grid-cols-10`" @wheel="handleWheel">
-    <CalendarTile
+  <div class="grid grid-cols-10" @wheel="handleWheel">
+    <DayTile
       v-for="day in daysPerMonth"
       :key="day"
       :date="{
@@ -65,7 +65,7 @@ const moveCalendarRight = useThrottleFn(() => {
         period: currentDate.currentPeriod
       }"
     />
-    <CalendarTile
+    <DayTile
       v-for="nextMonthDay in 8"
       :key="nextMonthDay"
       faded
diff --git a/src/components/calendar/state/yearly/DayTile.vue b/src/components/calendar/state/yearly/DayTile.vue
new file mode 100644
index 0000000..332ffb3
--- /dev/null
+++ b/src/components/calendar/state/yearly/DayTile.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { areDatesIdentical, type LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/CalendarStore'
+import { storeToRefs } from 'pinia'
+import { computed, type ComputedRef } from 'vue'
+
+const { currentDate, defaultDate, selectDate } = useCalendar()
+const { selectedDate } = storeToRefs(useCalendar())
+
+const props = defineProps<{
+  monthNumber: number
+  dayNumber: number
+}>()
+
+const tileDate: ComputedRef<LeimDate> = computed(() => {
+  return {
+    day: props.dayNumber,
+    month: props.monthNumber,
+    year: currentDate.currentYear
+  }
+})
+
+const isDefaultDate = computed(() => {
+  return areDatesIdentical(tileDate.value, defaultDate)
+})
+
+const isSelectedDate = computed(() => {
+  return areDatesIdentical(tileDate.value, selectedDate.value)
+})
+</script>
+
+<template>
+  <button
+    class="grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors hover:bg-slate-800 hover:border-slate-800"
+    :class="{
+      'bg-slate-800 hover:bg-slate-600 hover:border-slate-600': isDefaultDate && !isSelectedDate,
+      'text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600': isSelectedDate
+    }"
+    @click="selectDate(tileDate)"
+  >
+    <span class="text-slate-300 text-[.85em]">{{ dayNumber }}</span>
+  </button>
+</template>
diff --git a/src/components/calendar/state/yearly/Layout.vue b/src/components/calendar/state/yearly/Layout.vue
new file mode 100644
index 0000000..aea2a2b
--- /dev/null
+++ b/src/components/calendar/state/yearly/Layout.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useCalendar } from '@/stores/CalendarStore'
+import { computed } from 'vue'
+
+import MonthTile from './MonthTile.vue'
+
+const { staticConfig } = useCalendar()
+
+const monthsPerYear = computed(() => staticConfig.monthsPerYear)
+</script>
+
+<template>
+  <div class="container mt-[10vh] mb-auto">
+    <div class="grid grid-cols-5 gap-x-8 gap-y-16">
+      <MonthTile v-for="month in monthsPerYear" :key="month" :month-number="month - 1" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/calendar/state/yearly/MonthTile.vue b/src/components/calendar/state/yearly/MonthTile.vue
new file mode 100644
index 0000000..e6600ac
--- /dev/null
+++ b/src/components/calendar/state/yearly/MonthTile.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/CalendarStore'
+import { computed, type ComputedRef } from 'vue'
+
+import DayTile from './DayTile.vue'
+
+const { staticConfig, currentDate, getMonthName } = useCalendar()
+
+const props = defineProps<{
+  monthNumber: number
+}>()
+
+const daysPerMonth = computed(() => staticConfig.daysPerMonth)
+const tileMonthName = computed(() => getMonthName(props.monthNumber))
+</script>
+
+<template>
+  <div>
+    <div class="font-medium">
+      {{ tileMonthName }}
+    </div>
+    <div class="grid grid-cols-7">
+      <DayTile
+        v-for="day in daysPerMonth"
+        :key="day"
+        :month-number="monthNumber"
+        :day-number="day"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/stores/CalendarStore.ts b/src/stores/CalendarStore.ts
index cd1aaed..087f38b 100644
--- a/src/stores/CalendarStore.ts
+++ b/src/stores/CalendarStore.ts
@@ -378,7 +378,6 @@ export const useCalendar = defineStore('calendar', () => {
    */
   function jumpToDefaultDate(): void {
     jumpToDate(defaultDate.value)
-    currentConfig.value.viewType = 'month'
   }
 
   /**