Added base calendar formatting

src/App.vue

@@ -3,5 +3,7 @@ import { RouterView } from 'vue-router'
 </script>
 
 <template>
-  <RouterView />
+  <div class="h-screen">
+    <RouterView />
+  </div>
 </template>

src/components/Calendar.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { useCalendar } from '@/stores/calendar'
+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'
+
+const { currentConfig } = useCalendar()
+
+let currentViewComponent: any
+
+switch (currentConfig.viewType) {
+  case 'month':
+    currentViewComponent = Monthly
+    break
+
+  case 'year':
+    currentViewComponent = Year
+    break
+
+  case 'decade':
+    currentViewComponent = Decade
+    break
+
+  case 'century':
+    currentViewComponent = Century
+    break
+
+  default:
+    break
+}
+</script>
+
+<template>
+  <div>
+    <CalendarMenu />
+    <component :is="currentViewComponent" />
+  </div>
+</template>

src/components/CalendarMenu.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { useCalendar } from '@/stores/calendar'
+import { computed } from 'vue'
+
+const { currentConfig, currentDate, getPeriodOfYear } = useCalendar()
+
+const navbarTitle = computed(() => {
+  switch (currentConfig.viewType) {
+    case 'month':
+      return `${currentDate.currentMonthName} ${currentDate.currentYear} ${currentDate.currentPeriodAbbr}`
+
+    case 'year':
+      return `Année ${currentDate.currentYear} ${currentDate.currentPeriodAbbr}`
+
+    case 'decade':
+      return `Années ${Number(currentDate.currentYear)} ${getPeriodOfYear(Number(currentDate.currentYear)).short} - ${Number(currentDate.currentYear) + 10} ${getPeriodOfYear(Number(currentDate.currentYear) + 10).short}`
+
+    case 'century':
+      return `Années ${Number(currentDate.currentYear)} ${getPeriodOfYear(Number(currentDate.currentYear)).short} - ${Number(currentDate.currentYear) + 100} ${getPeriodOfYear(Number(currentDate.currentYear) + 100).short}`
+
+    default:
+      return ''
+  }
+})
+</script>
+
+<template>
+  <header>
+    <h1 class="text-2xl font-bold">
+      {{ navbarTitle }}
+    </h1>
+  </header>
+</template>

src/components/state/Century.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { useCalendarEvents } from '@/stores/events'
+
+const { currentEvents } = useCalendarEvents()
+</script>
+
+<template>
+  <div>Century</div>
+</template>

src/components/state/Decade.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Decade</div>
+</template>

src/components/state/Monthly.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Monthly</div>
+</template>

src/components/state/Year.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Annuel</div>
+</template>

src/models/Date.ts

@@ -6,3 +6,4 @@ export type LeimDate = {
 }
 
 export type LeimPeriod = 'ante' | 'nante'
+export type LeimPeriodShort = 'A.R' | 'N.R'

src/stores/calendar.ts

@@ -1,7 +1,7 @@
 import { computed, type Ref, type ComputedRef, ref } from 'vue'
 import { defineStore } from 'pinia'
 import { useUrlSearchParams } from '@vueuse/core'
-import type { LeimPeriod } from '@/models/Date'
+import type { LeimPeriod, LeimPeriodShort } from '@/models/Date'
 
 type CalendarViewType = 'month' | 'year' | 'decade' | 'century'
 
@@ -18,11 +18,12 @@ type CalendarCurrentConfig = {
 }
 
 type CalendarCurrentDate = {
-  currentPeriod: Ref<LeimPeriod>
-  currentYear: ComputedRef<string | string[]>
-  currentMonth: ComputedRef<string | string[]>
   currentDay: ComputedRef<string | string[]>
+  currentMonth: ComputedRef<string | string[]>
   currentMonthName: ComputedRef<string>
+  currentYear: ComputedRef<string | string[]>
+  currentPeriod: Ref<LeimPeriod>
+  currentPeriodAbbr: Ref<LeimPeriodShort>
 }
 
 export const useCalendar = defineStore('calendar', () => {
@@ -60,7 +61,7 @@ export const useCalendar = defineStore('calendar', () => {
   }
 
   const currentConfig: Ref<CalendarCurrentConfig> = ref({
-    viewType: 'century'
+    viewType: 'month'
   })
 
   // Get date from URL params
@@ -100,14 +101,18 @@ export const useCalendar = defineStore('calendar', () => {
     const year = Number(currentYear.value)
     return year >= 0 ? 'nante' : 'ante'
   })
+  const currentPeriodAbbr: ComputedRef<LeimPeriodShort> = computed(() => {
+    return currentPeriod.value === 'ante' ? 'A.R' : 'N.R'
+  })
 
   // Create base config
   const currentDate: CalendarCurrentDate = {
     currentDay,
     currentMonth,
+    currentMonthName,
     currentYear,
     currentPeriod,
-    currentMonthName
+    currentPeriodAbbr
   }
 
   /**
@@ -174,11 +179,29 @@ export const useCalendar = defineStore('calendar', () => {
     params.year = newValue.toString()
   }
 
+  /**
+   * From a given year, returns a set of LeimPeriod identifier
+   *
+   * This is used in range use-cases
+   *
+   * @param year The year to display
+   * @returns An object containing both short and long LeimPeriod
+   */
+  function getPeriodOfYear(year: string | number): { long: LeimPeriod; short: LeimPeriodShort } {
+    const numYear = year as number
+
+    return {
+      long: numYear >= 0 ? 'nante' : 'ante',
+      short: numYear >= 0 ? 'N.R' : 'A.R'
+    }
+  }
+
   return {
     staticConfig,
     currentConfig,
     currentDate,
     params,
+    getPeriodOfYear,
     incrementMonth,
     decrementMonth,
     setMonth,

src/stores/events.ts

@@ -60,13 +60,13 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
 
       case 'decade':
         return (
-          event.date.year >= Number(currentDate.currentYear) - 10 &&
+          event.date.year >= Number(currentDate.currentYear) &&
           event.date.year <= Number(currentDate.currentYear) + 10
         )
 
       case 'century':
         return (
-          event.date.year >= Number(currentDate.currentYear) - 100 &&
+          event.date.year >= Number(currentDate.currentYear) &&
           event.date.year <= Number(currentDate.currentYear) + 100
         )
 

src/views/HomeView.vue

@@ -1,20 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import Calendar from '@/components/Calendar.vue'
-import { useCalendar } from '@/stores/calendar'
-import { useCalendarEvents } from '@/stores/events'
-import { storeToRefs } from 'pinia'
-
-const { currentDate, incrementMonth, decrementMonth, setMonth, incrementYear, decrementYear } =
-  useCalendar()
-
-const { currentEvents } = storeToRefs(useCalendarEvents())
-
-const monthTarget = ref(0)
 </script>
 
 <template>
-  <main class="container">
+  <main class="container h-full grid items-center">
-    <pre>
+    <Calendar />
+    <!-- <pre>
       {{ currentDate }}
     </pre>
     <div class="grid gap-2">
@@ -53,6 +44,6 @@ const monthTarget = ref(0)
     <pre>
       Current events:
       {{ currentEvents }}
-    </pre>
+    </pre> -->
   </main>
 </template>