Huge refactor for backend and client

This is barely functionnal, but at least it can display some data without crashing
Most other functionnalities other than displaying events are broken, and so are the relative date operations, they need to be fixed asap

components/calendar/Calendar.vue

@@ -2,8 +2,6 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { computed, type Component, type ComputedRef } from 'vue'
 
-import CalendarMenu from './CalendarMenu.vue'
-
 import MonthlyLayout from './state/monthly/Layout.vue'
 import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'

components/calendar/CalendarEvent.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { cn } from '@/lib/utils'
-import { areDatesIdentical, type LeimDate } from '@/models/Date'
+import { areDatesIdentical, type RPGDate } from '@/models/Date'
 
-import type { CalendarEvent } from '@/models/Events'
+import type { CalendarEvent } from '~/models/CalendarEvent'
 import CalendarEventDetails from './CalendarEventDetails.vue'
 
 const props = defineProps<{
   event: CalendarEvent
-  tileDate: LeimDate
+  tileDate: RPGDate
 }>()
 
 const spansMultipleDays = Boolean(props.event.startDate && props.event.endDate)

components/calendar/CalendarEventDetails.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getRelativeString, type LeimDate } from '@/models/Date'
+import { getRelativeString, type RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
 import { useCalendarEvents } from '@/stores/EventStore'
@@ -32,7 +32,7 @@ const dateDuration: string | null = props.event.endDate
   ? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
   : null
 
-function handleJumpToDate(date: LeimDate) {
+function handleJumpToDate(date: RPGDate) {
   jumpToDate(date)
   emit('query:close-popover')
 }

components/calendar/CalendarMenuSubnav.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { daysPerMonth, monthsPerYear, type LeimDate } from '@/models/Date'
+import { daysPerMonth, monthsPerYear, type RPGDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
 import { useCalendarEvents } from '@/stores/EventStore'
 
@@ -9,7 +9,7 @@ const { currentDate, currentConfig, jumpToDate } = useCalendar()
 const { getRelativeEventFromDate } = useCalendarEvents()
 
 function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
-  let fromDate: LeimDate
+  let fromDate: RPGDate
   const toDay = position === 'next' ? daysPerMonth : 1
   const toMonth = position === 'next' ? monthsPerYear : 0
 

components/calendar/Dashboard.vue

@@ -2,11 +2,15 @@
 const route = useRoute()
 const worldId = route.params.id
 
-const { data: calendar } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
+const { months } = storeToRefs(useCalendar())
+
+const { data: res } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
+
+if (res.value?.data?.months) {
+  months.value = res.value?.data?.months
+}
 </script>
 
 <template>
-  <pre>
-    {{ calendar }}
-  </pre>
+  <Calendar />
 </template>

components/calendar/search/CalendarSearch.vue

@@ -5,13 +5,13 @@ import {
   type Character,
   type CharacterCategory
 } from '@/models/Characters'
-import type { LeimDateOrder } from '@/models/Date'
+import type { RPGDateOrder } from '@/models/Date'
 import {
   calendarEventCategories,
   isCalendarEvent,
   type CalendarEvent,
   type CalendarEventCategory
-} from '@/models/Events'
+} from '~/models/CalendarEvent'
 import { useCharacters } from '@/stores/CharacterStore'
 import { useCalendarEvents } from '@/stores/EventStore'
 import { capitalize } from '@/utils/Strings'
@@ -41,7 +41,7 @@ const searchQuery = ref<string>('')
 const selectedEntity = useStorage('se', 'events' as SearchMode)
 
 // Order
-const selectedOrder = ref<LeimDateOrder>('asc')
+const selectedOrder = ref<RPGDateOrder>('asc')
 function setOrderAsc() {
   selectedOrder.value = 'asc'
   resetPage()

components/calendar/search/lists/CharacterCallout.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Character } from '@/models/Characters'
-import type { LeimDate } from '@/models/Date'
+import type { RPGDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
 
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
@@ -12,7 +12,7 @@ defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'query:date-jump', payload: LeimDate): void
+  (e: 'query:date-jump', payload: RPGDate): void
 }>()
 
 const { getFormattedDateTitle } = useCalendar()

components/calendar/search/lists/EventCallout.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getRelativeString, type LeimDate } from '@/models/Date'
+import { getRelativeString, type RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
 
@@ -12,7 +12,7 @@ const props = defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'query:date-jump', payload: LeimDate): void
+  (e: 'query:date-jump', payload: RPGDate): void
 }>()
 
 const { defaultDate, getFormattedDateTitle } = useCalendar()

components/calendar/search/lists/SearchList.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { isCharacter, type Character } from '@/models/Characters'
-import { compareDates, type LeimDate, type LeimDateOrder } from '@/models/Date'
-import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
+import { compareDates, type RPGDate, type RPGDateOrder } from '@/models/Date'
+import { isCalendarEvent, type CalendarEvent } from '~/models/CalendarEvent'
 import { useCalendar } from '@/stores/CalendarStore'
 import { computed } from 'vue'
 import type { SearchMode } from '../../SearchMode'
@@ -12,7 +12,7 @@ import EventCallout from './EventCallout.vue'
 const props = defineProps<{
   results: (Character | CalendarEvent)[]
   currentEntity: SearchMode
-  order: LeimDateOrder
+  order: RPGDateOrder
   startAt: number
   endAt: number
   limit?: number
@@ -22,7 +22,7 @@ const emit = defineEmits(['jumpedToDate'])
 
 const { jumpToDate } = useCalendar()
 
-function handleJumpToDate(date?: LeimDate) {
+function handleJumpToDate(date?: RPGDate) {
   if (!date) return
 
   jumpToDate(date)
@@ -32,8 +32,8 @@ function handleJumpToDate(date?: LeimDate) {
 // Initial sorting of the results
 const sortedResults = computed(() => {
   return [...props.results].sort((a, b) => {
-    let firstDate: LeimDate
-    let secondDate: LeimDate
+    let firstDate: RPGDate
+    let secondDate: RPGDate
 
     if (isCalendarEvent(a)) {
       firstDate = a.startDate

components/calendar/state/monthly/DayTile.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { areDatesIdentical, type LeimDate } from '@/models/Date'
+import { areDatesIdentical, type RPGDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
 import { useCalendarEvents } from '@/stores/EventStore'
 import { useElementBounding } from '@vueuse/core'
@@ -7,10 +7,10 @@ import { storeToRefs } from 'pinia'
 import { computed, ref, type ComputedRef } from 'vue'
 
 import CalendarEventButton from '../../CalendarEvent.vue'
-import type { CalendarEvent } from '@/models/Events'
+import type { CalendarEvent } from '~/models/CalendarEvent'
 
 const props = defineProps<{
-  date: LeimDate
+  date: RPGDate
   faded?: boolean
 }>()
 

components/calendar/state/monthly/Layout.vue

@@ -1,38 +1,9 @@
 <script lang="ts" setup>
-import type { LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
 import { useThrottleFn } from '@vueuse/core'
 
-import DayTile from './DayTile.vue'
-
-const { staticConfig, currentDate, decrementMonth, incrementMonth } = useCalendar()
-
-const daysPerMonth = staticConfig.daysPerMonth
-
-function getNextMonthDate(day: number): LeimDate {
-  let nextDay = day
-  let nextMonth = currentDate.currentMonth + 1
-  let nextYear = currentDate.currentYear
-  let nextPeriod = currentDate.currentPeriod
-
-  // If the new value would exceed the max number of month per year
-  if (nextMonth >= staticConfig.monthsPerYear) {
-    nextMonth = 0
-    // Increment the year
-    nextYear++
-  }
-
-  if (nextYear >= 0) {
-    nextPeriod = 'nante'
-  }
-
-  return {
-    day: nextDay,
-    month: nextMonth,
-    year: nextYear,
-    period: nextPeriod
-  }
-}
+const { currentDate, decrementMonth, incrementMonth } = useCalendar()
+const { currentMonthData } = storeToRefs(useCalendar())
 
 function handleWheel(e: WheelEvent) {
   const isMovingUp = e.deltaY < 0
@@ -54,8 +25,8 @@ const moveCalendarRight = useThrottleFn(() => {
 
 <template>
   <div class="grid grid-cols-10" @wheel="handleWheel">
-    <DayTile
-      v-for="day in daysPerMonth"
+    <CalendarStateMonthlyDayTile
+      v-for="day in currentMonthData.days"
       :key="day"
       :date="{
         day: day,
@@ -63,11 +34,5 @@ const moveCalendarRight = useThrottleFn(() => {
         year: currentDate.currentYear
       }"
     />
-    <DayTile
-      v-for="nextMonthDay in 8"
-      :key="nextMonthDay"
-      faded
-      :date="getNextMonthDate(nextMonthDay)"
-    />
   </div>
 </template>

components/calendar/state/yearly/DayTile.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { areDatesIdentical, type LeimDate } from '@/models/Date'
+import { areDatesIdentical, type RPGDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
 import { useCalendarEvents } from '@/stores/EventStore'
 import { storeToRefs } from 'pinia'
@@ -14,7 +14,7 @@ const props = defineProps<{
   dayNumber: number
 }>()
 
-const tileDate: ComputedRef<LeimDate> = computed(() => {
+const tileDate: ComputedRef<RPGDate> = computed(() => {
   return {
     day: props.dayNumber,
     month: props.monthNumber,

components/calendar/state/yearly/Layout.vue

@@ -2,9 +2,8 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { useThrottleFn } from '@vueuse/core'
 
-import MonthTile from './MonthTile.vue'
-
-const { staticConfig, decrementYear, incrementYear } = useCalendar()
+const { decrementYear, incrementYear } = useCalendar()
+const { sortedMonths: months } = storeToRefs(useCalendar())
 
 function handleWheel(e: WheelEvent) {
   const isMovingUp = e.deltaY < 0
@@ -27,10 +26,10 @@ const moveCalendarRight = useThrottleFn(() => {
 <template>
   <div class="container mt-[10vh] mb-auto" @wheel="handleWheel">
     <div class="grid grid-cols-5 gap-x-8 gap-y-16">
-      <MonthTile
-        v-for="month in staticConfig.monthsPerYear"
-        :key="month"
-        :month-number="month - 1"
+      <CalendarStateYearlyMonthTile
+        v-for="month in months"
+        :key="month.id"
+        :month
       />
     </div>
   </div>

components/calendar/state/yearly/MonthTile.vue

@@ -1,27 +1,21 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
+import type { CalendarMonth } from '~/models/CalendarMonth';
 
-import DayTile from './DayTile.vue'
-
-const { staticConfig, getMonthName } = useCalendar()
-
-const props = defineProps<{
-  monthNumber: number
+defineProps<{
+  month: CalendarMonth
 }>()
-
-const tileMonthName: string = getMonthName(props.monthNumber)
 </script>
 
 <template>
   <div>
     <div class="font-medium">
-      {{ tileMonthName }}
+      {{ month.name }}
     </div>
     <div class="grid grid-cols-7">
-      <DayTile
-        v-for="day in staticConfig.daysPerMonth"
+      <CalendarStateYearlyDayTile
+        v-for="day in month.days"
         :key="day"
-        :month-number="monthNumber"
+        :month-number="month.position"
         :day-number="day"
       />
     </div>