Refactored the store system

2024-08-20 09:15:05 +02:00
parent 7244120219
commit e978acfc71
26 changed files with 446 additions and 240 deletions
--- a/components/calendar/Calendar.vue
+++ b/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 worldId = route.params.id
+const { currentConfig, selectedDate, jumpToDate } = useCalendar()

-const { setCalendarId, setMonths, setDefaultDate, currentConfig, selectedDate, jumpToDate } = useCalendar()
-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 { setCharacters } = useCharacters()

 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 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 />
+    <div class="h-full grid grid-rows-[auto,1fr]">
+      <CalendarMenu />

-        <KeepAlive>
-          <component :is="currentViewComponent"/>
-        </KeepAlive>
+      <component :is="currentViewComponent" />

-        <LazyCalendarSearch />
-        <LazyCalendarFormUpdateEvent />
-        <LazyCalendarFormDeleteEvent />
-      </div>
-    </TransitionGroup>
+      <LazyCalendarSearch />
+      <LazyCalendarFormUpdateEvent />
+      <LazyCalendarFormDeleteEvent />
+    </div>
  </div>
 </template>

--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -8,9 +8,8 @@ const props = defineProps<{
  tileDate: RPGDate
 }>()

-const { areDatesIdentical } = useCalendar()
-const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
-const { lastActiveEvent } = storeToRefs(useCalendarEvents())
+const { areDatesIdentical, revealEditEventModal, revealDeleteEventModal } = useCalendar()
+const { lastActiveEvent } = storeToRefs(useCalendar())

 const spansMultipleDays = computed(() => Boolean(props.event.startDate && props.event.endDate))
 const isStartEvent = computed(() => spansMultipleDays.value && areDatesIdentical(props.tileDate, props.event.startDate))
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -14,9 +14,8 @@ import {
  PhEye
 } from '@phosphor-icons/vue'

-const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString } = useCalendar()
-const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
-const { lastActiveEvent } = storeToRefs(useCalendarEvents())
+const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString, revealEditEventModal, revealDeleteEventModal } = useCalendar()
+const { lastActiveEvent } = storeToRefs(useCalendar())

 const props = defineProps<{
  event: CalendarEvent
--- a/components/calendar/CalendarMenuSubnav.vue
+++ b/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 { getRelativeEventFromDate } = useCalendarEvents()
+const { currentDate, currentConfig, jumpToDate, getRelativeEventFromDate } = useCalendar()

 function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
  let fromDate: RPGDate
--- a/components/calendar/CalendarMenuToday.vue
+++ b/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)

--- a/components/calendar/form/CreateEvent.vue
+++ b/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 { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendarEvents()
+const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
+const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendar()
 const popoverOpen = ref(false)
 const isLoading = ref(false)

--- a/components/calendar/form/DeleteEvent.vue
+++ b/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 } = useCalendarEvents()
-const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
+const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendar()
+const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())

 const isLoading = ref(false)

--- a/components/calendar/form/UpdateEvent.vue
+++ b/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 } = useCalendarEvents()
-const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
+const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
+const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())

 const isLoading = ref(false)

--- a/components/calendar/input/EventCategories.vue
+++ b/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>('')

--- a/components/calendar/input/EventCategory.vue
+++ b/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>('')

--- a/components/calendar/search/CalendarSearch.vue
+++ b/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 { allEvents } = storeToRefs(useCalendarEvents())
+const { isAdvancedSearchOpen, allEvents } = storeToRefs(useCalendar())
 const { characters } = storeToRefs(useCharacters())

 const searchQuery = ref<string>('')
--- a/components/calendar/search/lists/EventCallout.vue
+++ b/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 { defaultDate, getFormattedDateTitle } = useCalendar()
+const { getRelativeString, defaultDate, getFormattedDateTitle } = useCalendar()

 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/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 { currentEvents } = storeToRefs(useCalendarEvents())
+const { selectedDate, currentEvents } = storeToRefs(useCalendar())

 /**
 * All events with a startDate / endDate that starts or ends on the tile
--- a/components/calendar/state/monthly/Layout.vue
+++ b/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 { currentMonthData } = storeToRefs(useCalendar())
+const { currentDate, decrementMonth, incrementMonth, currentMonthData } = 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,
--- a/components/calendar/state/yearly/DayTile.vue
+++ b/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 { selectedDate } = storeToRefs(useCalendar())
-const { currentEvents } = storeToRefs(useCalendarEvents())
+const { currentDate, defaultDate, selectDate, areDatesIdentical } = useCalendar()
+const { selectedDate, currentEvents } = storeToRefs(useCalendar())

 const props = defineProps<{
  monthNumber: number
  dayNumber: number
 }>()

-const { areDatesIdentical } = useCalendar()
-
 const tileDate: ComputedRef<RPGDate> = computed(() => {
  return {
    day: props.dayNumber,
--- a/components/global/sidebar/Sidebar.vue
+++ b/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">
-        <UiTooltipProvider :delay-duration="100">
+      <template v-if="!user">
+        <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>
--- a/components/global/sidebar/SidebarProps.ts
+++ b/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
--- a/models/Date.ts
+++ b/models/Date.ts
@@ -2,7 +2,7 @@ import { z } from "zod"

 export interface RPGDate {
  day: number
-  month: number | string
+  month: number
  year: number
 }

--- a/pages/i/world/[id]/calendar.vue
+++ b/pages/i/world/[id]/calendar.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>
--- a/pages/i/index.vue
+++ b/pages/i/index.vue
@@ -20,9 +20,6 @@ watch(user, (n, _o) => {
    navigateTo('/')
  }
 })
-
-const { setCurrentMenu } = useUiStore()
-setCurrentMenu([])
 </script>

 <template>
--- a/pages/i/world/[id]/index.vue
+++ b/pages/i/world/[id]/index.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>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,9 +2,6 @@
 useHead({
  title: 'Dashboard'
 })
-
-const { setCurrentMenu } = useUiStore()
-setCurrentMenu([])
 </script>

 <template>
--- a/server/api/calendars/events/query.get.ts
+++ b/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) {
-    output.eq('world_calendars.world_id', query.world_id)
+  if (query.calendarId) {
+    output.eq('calendar_id', query.calendarId)
  }

  return output.returns<CalendarEvent[]>()
--- a/server/api/calendars/query.get.ts
+++ b/server/api/calendars/query.get.ts
@@ -3,36 +3,51 @@ 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
-    .from('calendars')
-    .select(`
-      id,
-      name,
-      today,
-      months:calendar_months (*),
-      events:calendar_events (
-        id,
-        title,
-        description,
-        location,
-        hidden,
-        startDate:start_date,
-        endDate:end_date,
-        wiki,
-        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>()
+  const partialFields = `
+    id,
+    name,
+    today,
+    months:calendar_months (*)
+  `

-  return output
+  const fullFields = `
+    id,
+    name,
+    today,
+    months:calendar_months (*),
+    events:calendar_events (
+      id,
+      title,
+      description,
+      location,
+      hidden,
+      startDate:start_date,
+      endDate:end_date,
+      wiki,
+      category:calendar_event_categories!calendar_events_category_fkey (*),
+      secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
+    )
+  `
+
+  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[]>()
 })
--- a/stores/CalendarStore.ts
+++ b/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[]) {
-    months.value = data
+  async function fetchCalendar(id: number) {
+    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,
-      month: currentDate.currentMonth.value,
-      year: currentDate.currentYear.value,
+      day: currentDay.value,
+      month: currentMonth.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 {
+      event: closestEvent.eventData,
+      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 {
-    calendarId,
-    setCalendarId,
+    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
  }
 })
--- a/stores/EventStore.ts
+++ b/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 { calendarId } = storeToRefs(useCalendar())
+  const { activeCalendar, defaultDate, currentConfig, convertDateToDays, compareDates } = useCalendar()
+  const { currentRPGDate } = storeToRefs(useCalendar())

  const baseEvents = ref<CalendarEvent[]>([])

-  function setEvents(data: CalendarEvent[]) {
-    baseEvents.value = data
+  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[]>([])
@@ -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.month === currentDate.currentMonth) ||
+      (event.startDate.year === currentRPGDate.value.day &&
+        event.startDate.month === currentRPGDate.value.month) ||
      (event.endDate &&
-        event.endDate.year === currentDate.currentYear &&
-        event.endDate.month === currentDate.currentMonth)
+        event.endDate.year === currentRPGDate.value.year &&
+        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 <= currentDate.currentYear + 10
+          event.startDate.year >= currentRPGDate.value.year &&
+          event.startDate.year <= currentRPGDate.value.year + 10
        )

      case 'century':
        return (
-          event.startDate.year >= currentDate.currentYear &&
-          event.startDate.year <= currentDate.currentYear + 100
+          event.startDate.year >= currentRPGDate.value.year &&
+          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,