Refactored the store system

components/calendar/Calendar.vue

@@ -2,93 +2,15 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { computed, type Component, type ComputedRef } from 'vue'
 
-import { PhMagnifyingGlass } from '@phosphor-icons/vue'
+// import { PhMagnifyingGlass } from '@phosphor-icons/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 route = useRoute()
+const { currentConfig, selectedDate, jumpToDate } = useCalendar()
-const worldId = route.params.id
 
-const { setCalendarId, setMonths, setDefaultDate, currentConfig, selectedDate, jumpToDate } = useCalendar()
+// const { setCharacters } = useCharacters()
-const { setEvents, setCategories } = useCalendarEvents()
-const { setCharacters } = useCharacters()
-
-const { months } = storeToRefs(useCalendar())
-
-const { data: calendar, pending: calPending, refresh: calRefresh } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
-const { data: characters, pending: charPending, refresh: charRefresh } = await useLazyFetch(`/api/characters/query?world_id=${worldId}`)
-const { data: categories, pending: categoryPending, refresh: categoryRefresh } = await useLazyFetch(`/api/calendars/categories/query`)
-
-if (!calendar.value) {
-  await calRefresh()
-} else {
-  if (calendar.value?.data?.id) {
-    setCalendarId(calendar.value?.data?.id)
-  }
-  if (calendar.value?.data?.months) {
-    setMonths(calendar.value?.data?.months)
-  }
-  if (calendar.value?.data?.months) {
-    setMonths(calendar.value?.data?.months)
-  }
-  if (calendar.value?.data?.today) {
-    setDefaultDate(calendar.value?.data?.today)
-  }
-  if (calendar.value?.data?.events) {
-    setEvents(calendar.value?.data?.events)
-  }
-}
-
-if (!categories.value) {
-  await categoryRefresh()
-} else {
-  if (categories.value?.data) {
-    setCategories(categories.value?.data)
-  }
-}
-
-if (!characters.value) {
-  await charRefresh()
-} else {
-  if (characters.value?.data) {
-    setCharacters(characters.value?.data)
-  }
-}
-
-watch(calPending, (newStatus) => {
-  if (!newStatus) {
-    if (calendar.value?.data?.id) {
-      setCalendarId(calendar.value?.data?.id)
-    }
-    if (calendar.value?.data?.months) {
-      setMonths(calendar.value?.data?.months)
-    }
-    if (calendar.value?.data?.today) {
-      setDefaultDate(calendar.value?.data?.today)
-    }
-    if (calendar.value?.data?.events) {
-      setEvents(calendar.value?.data?.events)
-    }
-  }
-})
-watch(categoryPending, (newStatus) => {
-  if (!newStatus) {
-    if (categories.value?.data) {
-      setCategories(categories.value?.data)
-    }
-  }
-})
-watch(charPending, (newStatus) => {
-  if (!newStatus) {
-    if (characters.value?.data) {
-      setCharacters(characters.value?.data)
-    }
-  }
-})
-
-const progressPercent = computed(() => 100 / [charPending.value, calPending.value, categoryPending.value].filter(Boolean).length)
 
 const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   switch (currentConfig.viewType) {
@@ -107,42 +29,22 @@ const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   }
 })
 
-const { setCurrentMenu } = useUiStore()
-
 onMounted(() => {
   jumpToDate(selectedDate)
-
-  setCurrentMenu([
-    {
-      phIcon: shallowRef(PhMagnifyingGlass),
-      tooltip: 'Recherche avancée',
-      action: 'event-search'
-    }
-  ])
 })
 </script>
 
 <template>
   <div class="h-full w-full relative">
-    <TransitionGroup name="screen">
+    <div class="h-full grid grid-rows-[auto,1fr]">
-      <div v-if="calPending || charPending || categoryPending" class="h-full w-full grid place-items-center">
-        <div class="flex flex-col items-center w-1/2">
-          <UiProgress :model-value="progressPercent" />
-          <p class="text-lg mt-2">Chargement en cours…</p>
-        </div>
-      </div>
-      <div v-else-if="months.length > 0" class="h-full grid grid-rows-[auto,1fr]">
       <CalendarMenu />
 
-        <KeepAlive>
       <component :is="currentViewComponent" />
-        </KeepAlive>
 
       <LazyCalendarSearch />
       <LazyCalendarFormUpdateEvent />
       <LazyCalendarFormDeleteEvent />
     </div>
-    </TransitionGroup>
   </div>
 </template>
 

components/calendar/CalendarEvent.vue

@@ -8,9 +8,8 @@ const props = defineProps<{
   tileDate: RPGDate
 }>()
 
-const { areDatesIdentical } = useCalendar()
+const { areDatesIdentical, revealEditEventModal, revealDeleteEventModal } = useCalendar()
-const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
+const { lastActiveEvent } = storeToRefs(useCalendar())
-const { lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const spansMultipleDays = computed(() => Boolean(props.event.startDate && props.event.endDate))
 const isStartEvent = computed(() => spansMultipleDays.value && areDatesIdentical(props.tileDate, props.event.startDate))

components/calendar/CalendarEventDetails.vue

@@ -14,9 +14,8 @@ import {
   PhEye
 } from '@phosphor-icons/vue'
 
-const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString } = useCalendar()
+const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString, revealEditEventModal, revealDeleteEventModal } = useCalendar()
-const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
+const { lastActiveEvent } = storeToRefs(useCalendar())
-const { lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const props = defineProps<{
   event: CalendarEvent

components/calendar/CalendarMenuSubnav.vue

@@ -1,12 +1,9 @@
 <script lang="ts" setup>
 import { type RPGDate } from '@/models/Date'
-import { useCalendar } from '@/stores/CalendarStore'
-import { useCalendarEvents } from '@/stores/EventStore'
 
 import { PhArrowLineLeft, PhArrowLineRight } from '@phosphor-icons/vue'
 
-const { currentDate, currentConfig, jumpToDate } = useCalendar()
+const { currentDate, currentConfig, jumpToDate, getRelativeEventFromDate } = useCalendar()
-const { getRelativeEventFromDate } = useCalendarEvents()
 
 function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
   let fromDate: RPGDate

components/calendar/CalendarMenuToday.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
-const { defaultDate, areDatesIdentical } = useCalendar()
+const { defaultDate, areDatesIdentical, jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
 const { selectedDate } = storeToRefs(useCalendar())
-const { jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
 
 const defaultDateFormatted: string = getFormattedDateTitle(defaultDate, true)
 

components/calendar/form/CreateEvent.vue

@@ -2,8 +2,8 @@
 import type { RPGDate } from '~/models/Date';
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from '@phosphor-icons/vue'
 
-const { eventSkeleton, operationInProgress } = storeToRefs(useCalendarEvents())
+const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
-const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendarEvents()
+const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendar()
 const popoverOpen = ref(false)
 const isLoading = ref(false)
 

components/calendar/form/DeleteEvent.vue

@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 import { PhCircleNotch } from '@phosphor-icons/vue';
 
-const { isDeleteEventModalOpen } = storeToRefs(useCalendarEvents())
+const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendar()
-
+const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
-const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendarEvents()
-const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const isLoading = ref(false)
 

components/calendar/form/UpdateEvent.vue

@@ -2,10 +2,8 @@
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from '@phosphor-icons/vue'
 import { VisuallyHidden } from 'radix-vue'
 
-const { isEditEventModalOpen } = storeToRefs(useCalendarEvents())
+const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
-
+const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
-const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendarEvents()
-const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const isLoading = ref(false)
 

components/calendar/input/EventCategories.vue

@@ -16,7 +16,7 @@ watch(modelBuffer.value, () => {
   model.value = [ ...modelBuffer.value ]
 })
 
-const { categories: availableCategories } = useCalendarEvents()
+const { categories: availableCategories } = useCalendar()
 
 const searchTerm = ref<string>('')
 

components/calendar/input/EventCategory.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 
 const model = defineModel<Category>()
 
-const { categories: availableCategories } = useCalendarEvents()
+const { categories: availableCategories } = useCalendar()
 
 const searchTerm = ref<string>('')
 

components/calendar/search/CalendarSearch.vue

@@ -8,8 +8,6 @@ import {
   isCalendarEvent,
   type CalendarEvent,
 } from '~/models/CalendarEvent'
-import { useCharacters } from '@/stores/CharacterStore'
-import { useCalendarEvents } from '@/stores/EventStore'
 import { capitalize } from '@/utils/Strings'
 import { useMagicKeys, useScroll, useStorage, whenever } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
@@ -27,8 +25,7 @@ import {
 import SearchList from './lists/SearchList.vue'
 import type { Category } from '~/models/Category'
 
-const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
+const { isAdvancedSearchOpen, allEvents } = storeToRefs(useCalendar())
-const { allEvents } = storeToRefs(useCalendarEvents())
 const { characters } = storeToRefs(useCharacters())
 
 const searchQuery = ref<string>('')

components/calendar/search/lists/EventCallout.vue

@@ -2,7 +2,6 @@
 import { cn } from '@/lib/utils'
 import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/CalendarEvent'
-import { useCalendar } from '@/stores/CalendarStore'
 
 import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from '@phosphor-icons/vue'
 
@@ -14,9 +13,7 @@ defineEmits<{
   (e: 'query:date-jump', payload: RPGDate): void
 }>()
 
-const { getRelativeString } = useCalendar()
+const { getRelativeString, defaultDate, getFormattedDateTitle } = useCalendar()
-
-const { defaultDate, getFormattedDateTitle } = useCalendar()
 
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate

components/calendar/state/monthly/DayTile.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/CalendarEvent'
-import { useCalendar } from '@/stores/CalendarStore'
-import { useCalendarEvents } from '@/stores/EventStore'
 import { useElementBounding } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, ref, type ComputedRef } from 'vue'
@@ -18,8 +16,7 @@ const calendarTile = ref()
 const calendarEventsList = ref()
 
 const { defaultDate, selectDate, areDatesIdentical } = useCalendar()
-const { selectedDate } = storeToRefs(useCalendar())
+const { selectedDate, currentEvents } = storeToRefs(useCalendar())
-const { currentEvents } = storeToRefs(useCalendarEvents())
 
 /**
  * All events with a startDate / endDate that starts or ends on the tile

components/calendar/state/monthly/Layout.vue

@@ -2,8 +2,7 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { useThrottleFn } from '@vueuse/core'
 
-const { currentDate, decrementMonth, incrementMonth } = useCalendar()
+const { currentDate, decrementMonth, incrementMonth, currentMonthData } = useCalendar()
-const { currentMonthData } = storeToRefs(useCalendar())
 
 function handleWheel(e: WheelEvent) {
   const isMovingUp = e.deltaY < 0
@@ -26,7 +25,7 @@ const moveCalendarRight = useThrottleFn(() => {
 <template>
   <div class="grid grid-cols-10" @wheel="handleWheel">
     <CalendarStateMonthlyDayTile
-      v-for="day in currentMonthData.days"
+      v-for="day in currentMonthData?.days"
       :key="`layout-month-grid-${day}`"
       :date="{
         day: day,

components/calendar/state/yearly/DayTile.vue

@@ -1,21 +1,16 @@
 <script lang="ts" setup>
 import type { RPGDate } from '@/models/Date'
-import { useCalendar } from '@/stores/CalendarStore'
-import { useCalendarEvents } from '@/stores/EventStore'
 import { storeToRefs } from 'pinia'
 import { computed, type ComputedRef } from 'vue'
 
-const { currentDate, defaultDate, selectDate } = useCalendar()
+const { currentDate, defaultDate, selectDate, areDatesIdentical } = useCalendar()
-const { selectedDate } = storeToRefs(useCalendar())
+const { selectedDate, currentEvents } = storeToRefs(useCalendar())
-const { currentEvents } = storeToRefs(useCalendarEvents())
 
 const props = defineProps<{
   monthNumber: number
   dayNumber: number
 }>()
 
-const { areDatesIdentical } = useCalendar()
-
 const tileDate: ComputedRef<RPGDate> = computed(() => {
   return {
     day: props.dayNumber,

components/global/sidebar/Sidebar.vue

@@ -2,15 +2,11 @@
 import { PhHouse, PhList } from '@phosphor-icons/vue'
 import type { SidebarMenuActionType } from './SidebarProps';
 
-const route = useRoute()
-
-const isHome = computed<boolean>(() => {
-  return route.fullPath === '/'
-})
-
 const { revealAdvancedSearch } = useCalendar()
 const { currentMenu } = storeToRefs(useUiStore())
 
+const user = useSupabaseUser()
+
 function handleMenuItemAction(actionType: SidebarMenuActionType) {
   if (actionType === 'event-search') {
     revealAdvancedSearch()
@@ -27,8 +23,8 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
         </UiButton>
       </li>
 
-      <li v-if="!isHome">
+      <template v-if="!user">
-        <UiTooltipProvider :delay-duration="100">
+        <UiTooltipProvider :delay-duration="50">
           <UiTooltip>
             <UiTooltipTrigger as-child>
               <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
@@ -37,15 +33,15 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
                 </RouterLink>
               </UiButton>
             </UiTooltipTrigger>
-            <UiTooltipContent :side="'right'">
+            <UiTooltipContent :side="'right'" :side-offset="6">
               <p>Retourner aux outils</p>
             </UiTooltipContent>
           </UiTooltip>
         </UiTooltipProvider>
-      </li>
+      </template>
 
       <li v-for="(item, i) in currentMenu" :key="i">
-        <UiTooltipProvider :delay-duration="100">
+        <UiTooltipProvider :delay-duration="50">
           <UiTooltip>
             <UiTooltipTrigger as-child>
               <UiButton v-if="item.to" variant="ghost" size="icon" class="rounded-full" as-child>
@@ -57,7 +53,7 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
                 <component :is="item.phIcon" size="24" weight="fill" />
               </UiButton>
             </UiTooltipTrigger>
-            <UiTooltipContent :side="'right'">
+            <UiTooltipContent :side="'right'" :side-offset="6">
               <p>{{ item.tooltip }}</p>
             </UiTooltipContent>
           </UiTooltip>

components/global/sidebar/SidebarProps.ts

@@ -3,7 +3,7 @@ import type { ShallowRef } from "vue"
 export type SidebarMenuActionType = "event-search"
 
 export interface SidebarMenuItem {
-  phIcon: ShallowRef
+  phIcon: ShallowRef // use shallowRef to build phIcon
   tooltip: string
   action?: SidebarMenuActionType
   to?: string

models/Date.ts

@@ -2,7 +2,7 @@ import { z } from "zod"
 
 export interface RPGDate {
   day: number
-  month: number | string
+  month: number
   year: number
 }
 

pages/i/calendar/[id].vue

@@ -13,8 +13,14 @@ watch(user, (n, _o) => {
     navigateTo('/')
   }
 })
+
+const route = useRoute()
+const id = route.params.id
+const calendarStore = useCalendar()
+
+const { pending: calendarPending } = await useAsyncData('calendar', () => calendarStore.fetchCalendar(Number(id)).then(() => true))
 </script>
 
 <template>
-  <Calendar />
+  <Calendar v-if="!calendarPending" />
 </template>

pages/i/index.vue

@@ -20,9 +20,6 @@ watch(user, (n, _o) => {
     navigateTo('/')
   }
 })
-
-const { setCurrentMenu } = useUiStore()
-setCurrentMenu([])
 </script>
 
 <template>

pages/i/world/[id].vue

@@ -25,9 +25,6 @@ watch(user, (n, _o) => {
   }
 })
 
-const { setCurrentMenu } = useUiStore()
-setCurrentMenu([])
-
 const modalOpened = ref<boolean>(false)
 </script>
 
@@ -69,7 +66,7 @@ const modalOpened = ref<boolean>(false)
               <UiCard
                 v-if="calendar"
                 class="w-full transition-all text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900"
-                :link="`/i/world/${world.id}/calendar`"
+                :link="`/i/calendar/${calendar.id}`"
               >
                 <UiCardHeader>
                   <UiCardTitle>{{ calendar.name }}</UiCardTitle>

pages/index.vue

@@ -2,9 +2,6 @@
 useHead({
   title: 'Dashboard'
 })
-
-const { setCurrentMenu } = useUiStore()
-setCurrentMenu([])
 </script>
 
 <template>

server/api/calendars/events/query.get.ts

@@ -3,7 +3,7 @@ import { z } from 'zod'
 import type { CalendarEvent } from "~/models/CalendarEvent";
 
 const querySchema = z.object({
-  world_id: z.number({ coerce: true }).positive().int()
+  calendarId: z.number({ coerce: true }).positive().int()
 })
 
 export default defineEventHandler(async (event) => {
@@ -17,11 +17,15 @@ export default defineEventHandler(async (event) => {
       title,
       description,
       location,
-      world_calendars (id, world_id)
+      startDate:start_date,
+      endDate:end_date,
+      wiki,
+      category:calendar_event_categories!calendar_events_category_fkey (*),
+      secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
     `)
 
-  if (query.world_id) {
+  if (query.calendarId) {
-    output.eq('world_calendars.world_id', query.world_id)
+    output.eq('calendar_id', query.calendarId)
   }
 
   return output.returns<CalendarEvent[]>()

server/api/calendars/query.get.ts

@@ -3,16 +3,22 @@ import { z } from 'zod'
 import type { Calendar } from "~/models/CalendarConfig";
 
 const querySchema = z.object({
-  world_id: z.number({ coerce: true }).positive().int()
+  id: z.number({ coerce: true }).positive().int().optional(),
+  full: z.boolean({ coerce: true }).optional()
 })
 
 export default defineEventHandler(async (event) => {
   const client = await serverSupabaseClient(event)
   const query = await getValidatedQuery(event, querySchema.parse)
 
-  const output = client
+  const partialFields = `
-    .from('calendars')
+    id,
-    .select(`
+    name,
+    today,
+    months:calendar_months (*)
+  `
+
+  const fullFields = `
     id,
     name,
     today,
@@ -29,10 +35,19 @@ export default defineEventHandler(async (event) => {
       category:calendar_event_categories!calendar_events_category_fkey (*),
       secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
     )
-    `)
+  `
-    .eq('world_id', query.world_id)
-    .limit(1)
-    .single<Calendar>()
 
-  return output
+  let output
+
+  if (query.full) {
+    output = client.from('calendars').select(fullFields)
+  } else {
+    output = client.from('calendars').select(partialFields)
+  }
+
+  if (query.id) {
+    return output.eq('id', query.id).single<Calendar>()
+  }
+
+  return output.returns<Calendar[]>()
 })

stores/CalendarStore.ts

@@ -5,7 +5,10 @@ import {
 import { useLocalStorage, useUrlSearchParams } from '@vueuse/core'
 import { defineStore, skipHydrate } from 'pinia'
 import { computed, ref, type ComputedRef, type Ref } from 'vue'
+import type { Calendar } from '~/models/CalendarConfig'
+import type { CalendarEvent } from '~/models/CalendarEvent'
 import type { CalendarMonth } from '~/models/CalendarMonth'
+import type { Category } from '~/models/Category'
 
 type CalendarViewType = 'month' | 'year' | 'decade' | 'century'
 
@@ -27,7 +30,6 @@ export const useCalendar = defineStore('calendar', () => {
 
   /**
    * Static calendar config
-   * This shouldn't change
    */
   const currentConfig: Ref<CalendarCurrentConfig> = ref({
     viewType: 'month'
@@ -37,18 +39,33 @@ export const useCalendar = defineStore('calendar', () => {
     'year'
   ])
 
-  const calendarId = ref<number>(0)
+  const activeCalendar = ref<{ id: number; name: string; today: RPGDate} | null>(null)
 
-  function setCalendarId(data: number) {
-    calendarId.value = data
-  }
   /**
    * Month list (queried from API)
    */
   const months: Ref<CalendarMonth[]> = ref<CalendarMonth[]>([])
 
-  function setMonths(data: CalendarMonth[]) {
+  async function fetchCalendar(id: number) {
-    months.value = data
+    try {
+      const res = await $fetch('/api/calendars/query', { query: { id, full: true } })
+
+      const calendarData = res.data as Calendar
+
+      if (!calendarData.id) return
+
+      activeCalendar.value = {
+        id: calendarData.id,
+        name: calendarData.name,
+        today: calendarData.today
+      }
+
+      months.value = calendarData.months
+
+      baseEvents.value = calendarData.events
+    } catch (err) {
+      console.log(err)
+    }
   }
 
   /**
@@ -98,7 +115,7 @@ export const useCalendar = defineStore('calendar', () => {
    */
   function setDefaultDate(date: RPGDate) {
     defaultDay.value = date.day
-    defaultMonth.value = date.month
+    defaultMonth.value = date.month as number
     defaultYear.value = date.year
   }
 
@@ -160,9 +177,9 @@ export const useCalendar = defineStore('calendar', () => {
 
   const currentRPGDate = computed<RPGDate>(() => {
     return {
-      day: currentDate.currentDay.value,
+      day: currentDay.value,
-      month: currentDate.currentMonth.value,
+      month: currentMonth.value,
-      year: currentDate.currentYear.value,
+      year: currentYear.value,
     }
   })
 
@@ -622,11 +639,280 @@ export const useCalendar = defineStore('calendar', () => {
     }
   }
 
+  const baseEvents = ref<CalendarEvent[]>([])
+
+  async function fetchCalendarEvents(calendarId: number) {
+    try {
+      const res = await $fetch('/api/calendars/events/query', { query: { calendarId } })
+
+      const eventData = res.data as CalendarEvent[]
+
+      if (!eventData.length) return
+
+      baseEvents.value = eventData
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  const categories = ref<Category[]>([])
+
+  // Order base events by dates
+  const allEvents = computed(() => baseEvents.value.sort((a, b) => {
+    return compareDates(a.startDate, b.startDate, 'desc')
+  }))
+
+  // Gets all current event in its default state
+  const currentEvents: Ref<CalendarEvent[]> = ref([])
+
+  // Watch for currentDate or events' list changes
+  // This is deep because we're watching an array, and changes need to trigger and mutations like .push and .splice
+  watch([currentRPGDate, allEvents], () => {
+    currentEvents.value = computeCurrentEvents()
+  }, { deep: true, immediate: true })
+
+  /**
+   * Determines if the event can appear in the front end
+   *
+   * This function takes into consideration the viewType of the calendar config
+   *
+   * @param event The event to analyze
+   * @returns Whether the event should appear in the current view
+   */
+  function shouldEventBeDisplayed(event: CalendarEvent): boolean {
+    const isEventOnCurrentScreen =
+      (event.startDate.year === currentRPGDate.value.day &&
+        event.startDate.month === currentRPGDate.value.month) ||
+      (event.endDate &&
+        event.endDate.year === currentRPGDate.value.year &&
+        event.endDate.month === currentRPGDate.value.month)
+
+    switch (currentConfig.value.viewType) {
+      case 'month':
+        return isEventOnCurrentScreen!
+
+      case 'year':
+        return event.startDate.year === currentRPGDate.value.year
+
+      case 'decade':
+        return (
+          event.startDate.year >= currentRPGDate.value.year &&
+          event.startDate.year <= currentRPGDate.value.year + 10
+        )
+
+      case 'century':
+        return (
+          event.startDate.year >= currentRPGDate.value.year &&
+          event.startDate.year <= currentRPGDate.value.year + 100
+        )
+
+      default:
+        return false
+    }
+  }
+
+  /**
+   * Fetches all the current events for the current view
+   *
+   * @returns A list of events that can appear in the current view
+   */
+  function computeCurrentEvents(): CalendarEvent[] {
+    return [...allEvents.value].filter((event) => shouldEventBeDisplayed(event))
+  }
+
+  /**
+   * From a base event, gets the next or previous one in the timeline
+   *
+   * @param event The event at a given position in the data
+   * @param position Whether we should get the next or previous event
+   * @returns The next event in chronological order
+   */
+  function getRelativeEventFromEvent(
+    event: CalendarEvent,
+    position: 'next' | 'prev' = 'next',
+    initialIsEnd: boolean = false
+  ): { event: CalendarEvent; targetDate: RPGDate } {
+    let dateToParse: RPGDate // Day value of the date that the user interacted with
+
+    if (initialIsEnd && event.endDate) {
+      dateToParse = event.endDate
+    } else {
+      dateToParse = event.startDate
+    }
+
+    return getRelativeEventFromDate(dateToParse, position)
+  }
+
+  /**
+   * From a date, gets the next or previous event in the timeline
+   *
+   * @param date The starting date from which to get the next event
+   * @param position Whether we should get the next or previous event
+   * @returns The next event in chronological order
+   */
+  function getRelativeEventFromDate(
+    date: RPGDate,
+    position: 'next' | 'prev' = 'next'
+  ): { event: CalendarEvent; targetDate: RPGDate } {
+    const pivotValue = convertDateToDays(date)
+    let t: { eventData: CalendarEvent; distance: number; targetKey: 'startDate' | 'endDate' }[] = []
+
+    // Loop over all event once to convert the structure to a usable one
+    for (let i = 0; i < allEvents.value.length; i++) {
+      const e: CalendarEvent = allEvents.value[i]
+
+      // Estimate distance from pivot
+      const startDateDays: number = convertDateToDays(e.startDate)
+      const startDistance: number = startDateDays - pivotValue
+
+      // Push startDate to comparator array
+      t.push({
+        eventData: e,
+        distance: startDistance,
+        targetKey: 'startDate'
+      })
+
+      // Check the same things for endDate
+      if (e.endDate) {
+        const endDateDays: number = convertDateToDays(e.endDate)
+        const endDistance: number = endDateDays - pivotValue
+
+        // Push optional endDate to comparator array
+        t.push({
+          eventData: e,
+          distance: endDistance,
+          targetKey: 'endDate'
+        })
+      }
+    }
+
+    // Based on the direction, either ignore negative distance (past) or positive distance (future)
+    t = t.filter((i) => {
+      return position === 'next' ? i.distance > 0 : i.distance < 0
+    })
+
+    if (!t.length) {
+      throw new Error(
+        "Aucun évènement suivant ou précédent trouvé ; Peut-être l'évènement se situe au début ou à la fin du calendrier ?"
+      )
+    }
+
+    // Get event with remaining minimum distance
+    const closestEvent = t.reduce((a, b) => {
+      return Math.abs(b.distance) < Math.abs(a.distance) ? b : a
+    })
+
     return {
-    calendarId,
+      event: closestEvent.eventData,
-    setCalendarId,
+      targetDate: closestEvent.eventData[closestEvent.targetKey]!
+    }
+  }
+
+  /**
+   * State for event modal edition
+   */
+  const isEditEventModalOpen: Ref<boolean> = ref<boolean>(false)
+
+  function revealEditEventModal() {
+    isEditEventModalOpen.value = true
+  }
+
+  /**
+   * State for event modal edition
+   */
+  const isDeleteEventModalOpen: Ref<boolean> = ref<boolean>(false)
+
+  function revealDeleteEventModal() {
+    isDeleteEventModalOpen.value = true
+  }
+
+  /**
+   * EVENT CREATION FUNCTIONS
+   */
+  const lastActiveEvent = ref<CalendarEvent | null>()
+  const isCreatingEvent = ref<boolean>(false)
+  const isUpdatingEvent = ref<boolean>(false)
+  const isDeletingEvent = ref<boolean>(false)
+  const operationInProgress = computed(() => isCreatingEvent.value || isUpdatingEvent.value || isDeletingEvent.value)
+  let abortController: AbortController | null = null
+
+  /**
+   * Dummy event to hold creation data
+   */
+  const eventSkeleton: Ref<CalendarEvent> = ref<CalendarEvent>({ title: '', startDate: defaultDate.value })
+
+  /**
+   * Resets the dummy event data
+   */
+  function resetSkeleton() {
+    eventSkeleton.value = { title: '', startDate: defaultDate.value }
+  }
+
+  /**
+   * Submits the skeleton event and creates a real event from its data
+   *
+   * We assume it's been sanitized by the caller
+   */
+  async function submitSkeleton() {
+    abortController = new AbortController()
+    isCreatingEvent.value = true
+
+    try {
+      const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: activeCalendar.value?.id }, signal: abortController.signal })
+
+      baseEvents.value.push(res)
+    } catch (err) {
+      console.log(err)
+    } finally {
+      abortController = null
+      isCreatingEvent.value = false
+    }
+  }
+
+  async function updateEventFromSkeleton() {
+    abortController = new AbortController()
+    isUpdatingEvent.value = true
+
+    try {
+      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: activeCalendar.value?.id }, signal: abortController.signal })
+
+      const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
+      baseEvents.value[eventIndex] = res
+    } catch (err) {
+      console.log(err)
+    } finally {
+      abortController = null
+      isUpdatingEvent.value = false
+    }
+  }
+
+  async function deleteEventFromSkeleton() {
+    abortController = new AbortController()
+    isDeletingEvent.value = true
+
+    try {
+      await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'DELETE', signal: abortController.signal })
+
+      const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
+      baseEvents.value.splice(eventIndex, 1)
+    } catch (err) {
+      console.log(err)
+    } finally {
+      abortController = null
+      isDeletingEvent.value = false
+    }
+  }
+
+  function cancelLatestRequest() {
+    if (abortController) {
+      abortController.abort()
+    }
+  }
+
+  return {
+    fetchCalendar,
+    activeCalendar,
     months,
-    setMonths,
     sortedMonths,
     daysPerYear,
     monthsPerYear,
@@ -661,5 +947,27 @@ export const useCalendar = defineStore('calendar', () => {
     areDatesIdentical,
     compareDates,
     getRelativeString,
+    baseEvents,
+    allEvents,
+    fetchCalendarEvents,
+    categories,
+    currentEvents,
+    getRelativeEventFromDate,
+    getRelativeEventFromEvent,
+    cancelLatestRequest,
+    isCreatingEvent,
+    isUpdatingEvent,
+    isDeletingEvent,
+    operationInProgress,
+    eventSkeleton,
+    resetSkeleton,
+    submitSkeleton,
+    lastActiveEvent,
+    updateEventFromSkeleton,
+    deleteEventFromSkeleton,
+    isEditEventModalOpen,
+    revealEditEventModal,
+    isDeleteEventModalOpen,
+    revealDeleteEventModal
   }
 })

stores/EventStore.ts

@@ -6,13 +6,23 @@ import type { Category } from '~/models/Category'
 import { useCalendar } from './CalendarStore'
 
 export const useCalendarEvents = defineStore('calendar-events', () => {
-  const { currentDate, defaultDate, currentConfig, convertDateToDays, compareDates } = useCalendar()
+  const { activeCalendar, defaultDate, currentConfig, convertDateToDays, compareDates } = useCalendar()
-  const { calendarId } = storeToRefs(useCalendar())
+  const { currentRPGDate } = storeToRefs(useCalendar())
 
   const baseEvents = ref<CalendarEvent[]>([])
 
-  function setEvents(data: CalendarEvent[]) {
+  async function fetchCalendarEvents(calendarId: number) {
-    baseEvents.value = data
+    try {
+      const res = await $fetch('/api/calendars/events/query', { query: { calendarId } })
+
+      const eventData = res.data as CalendarEvent[]
+
+      if (!eventData.length) return
+
+      baseEvents.value = eventData
+    } catch (err) {
+      console.log(err)
+    }
   }
 
   const categories = ref<Category[]>([])
@@ -31,7 +41,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
 
   // Watch for currentDate or events' list changes
   // This is deep because we're watching an array, and changes need to trigger and mutations like .push and .splice
-  watch([currentDate, allEvents], () => {
+  watch([currentRPGDate, allEvents], () => {
     currentEvents.value = computeCurrentEvents()
   }, { deep: true, immediate: true })
 
@@ -45,29 +55,29 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    */
   function shouldEventBeDisplayed(event: CalendarEvent): boolean {
     const isEventOnCurrentScreen =
-      (event.startDate.year === currentDate.currentYear &&
+      (event.startDate.year === currentRPGDate.value.day &&
-        event.startDate.month === currentDate.currentMonth) ||
+        event.startDate.month === currentRPGDate.value.month) ||
       (event.endDate &&
-        event.endDate.year === currentDate.currentYear &&
+        event.endDate.year === currentRPGDate.value.year &&
-        event.endDate.month === currentDate.currentMonth)
+        event.endDate.month === currentRPGDate.value.month)
 
     switch (currentConfig.viewType) {
       case 'month':
         return isEventOnCurrentScreen!
 
       case 'year':
-        return event.startDate.year === currentDate.currentYear
+        return event.startDate.year === currentRPGDate.value.year
 
       case 'decade':
         return (
-          event.startDate.year >= currentDate.currentYear &&
+          event.startDate.year >= currentRPGDate.value.year &&
-          event.startDate.year <= currentDate.currentYear + 10
+          event.startDate.year <= currentRPGDate.value.year + 10
         )
 
       case 'century':
         return (
-          event.startDate.year >= currentDate.currentYear &&
+          event.startDate.year >= currentRPGDate.value.year &&
-          event.startDate.year <= currentDate.currentYear + 100
+          event.startDate.year <= currentRPGDate.value.year + 100
         )
 
       default:
@@ -222,7 +232,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     isCreatingEvent.value = true
 
     try {
-      const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
+      const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: activeCalendar?.id }, signal: abortController.signal })
 
       baseEvents.value.push(res)
     } catch (err) {
@@ -238,7 +248,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     isUpdatingEvent.value = true
 
     try {
-      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
+      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: activeCalendar?.id }, signal: abortController.signal })
 
       const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
       baseEvents.value[eventIndex] = res
@@ -275,7 +285,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
 
   return {
     allEvents,
-    setEvents,
+    fetchCalendarEvents,
     categories,
     setCategories,
     currentEvents,