Added loading logic to calendar page

components/calendar/Dashboard.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-const route = useRoute()
-const worldId = route.params.id
-
-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>
-  <Calendar />
-</template>

pages/calendar/[id].vue

@@ -1,16 +1,14 @@
 <script lang="ts" setup>
 import type { MenuItem } from '~/components/global/SidebarProps';
 
-const user = useSupabaseUser()
-
 useHead({
   title: 'Calendrier'
 })
-
 definePageMeta({
   middleware: ['auth-guard']
 })
 
+const user = useSupabaseUser()
 // Redirect user back home when they log out on the page
 watch(user, (n, _o) => {
   if (!n) {
@@ -19,12 +17,33 @@ watch(user, (n, _o) => {
 })
 
 const sidebarMenu: MenuItem[] = []
+
+const route = useRoute()
+const worldId = route.params.id
+
+const { setMonths } = useCalendar()
+const { months } = storeToRefs(useCalendar())
+
+const { data: calendar, pending, refresh } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
+
+if (calendar.value?.data?.months) {
+  if (!calendar.value) {
+    await refresh()
+  } else {
+    setMonths(calendar.value?.data?.months)
+  }
+}
 </script>
 
 <template>
   <div class="h-full grid grid-cols-[auto_1fr]">
     <Sidebar :menu-items="sidebarMenu" />
 
-    <CalendarDashboard />
+    <template v-if="pending">
+      Loading là
+    </template>
+    <template v-else>
+      <Calendar />
+    </template>
   </div>
 </template>

stores/CalendarStore.ts

@@ -29,6 +29,14 @@ export const useCalendar = defineStore('calendar', () => {
    * Month list
    */
   const months: Ref<CalendarMonth[]> = ref<CalendarMonth[]>([])
+
+  function setMonths(data: CalendarMonth[]) {
+    months.value = data
+  }
+
+  /**
+   * Sorted month data
+   */
   const sortedMonths = computed<CalendarMonth[]>(() => months.value.sort((a, b) => a.position - b.position))
   const monthsPerYear = computed(() => months.value.length)
   const daysPerYear = computed(() => months.value.reduce((acc, o) => acc + o.days, 0))
@@ -332,6 +340,7 @@ export const useCalendar = defineStore('calendar', () => {
 
   return {
     months,
+    setMonths,
     sortedMonths,
     daysPerYear,
     monthsPerYear,