Added client side realtime for calendars

components/calendar/dialog/Update.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
 import { PhX } from "@phosphor-icons/vue";
 import type { Calendar } from "~/models/CalendarConfig";
+import type { World } from "~/models/World";
 
 const props = defineProps<{
-  calendarId: number,
+  calendar: Calendar | null,
+  world: World | null,
   modalState?: boolean
 }>()
 
-const { data: calendar } = await useFetch<{ data: Calendar }>("/api/calendars/query", { query: { id: props.calendarId } })
-
-const calendarSkeletonName = ref<string>("")
+const calendarSkeletonName = ref<string>(props.calendar?.name ?? "")
 
 function onChangedName(newName: string) {
   calendarSkeletonName.value = newName
@@ -28,7 +28,7 @@ function handleClose() {
     <UiAlertDialogContent class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6" @close-auto-focus="(e) => e.preventDefault()">
       <UiAlertDialogTitle>
         <span class="text-2xl">
-          <strong class="font-bold">{{ calendar?.data.world?.name }}</strong>
+          <strong class="font-bold">{{ world?.name }}</strong>
           <span class="opacity-30"> — </span>
           <span v-if="calendarSkeletonName">
             {{ calendarSkeletonName }}
@@ -43,7 +43,7 @@ function handleClose() {
         <PhX size="20" />
       </UiButton>
 
-      <CalendarFormUpdate v-if="calendar?.data" :calendar="calendar.data" @on-changed-name="onChangedName" @on-close="handleClose" />
+      <CalendarFormUpdate v-if="calendar" :world="world" :calendar="calendar" @on-changed-name="onChangedName" @on-close="handleClose" />
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>

components/calendar/form/Update.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import type { Calendar } from "~/models/CalendarConfig";
 import { PhCircleNotch, PhWrench } from "@phosphor-icons/vue";
+import type { World } from "~/models/World";
 
 const props = defineProps<{
   calendar: Calendar | null,
+  world: World | null,
 }>()
 
 const calendarSkeleton = ref<Calendar>({ ...props.calendar } as Calendar)
@@ -34,7 +36,7 @@ const isUpdatingCalendar = ref<boolean>(false)
 async function handleSubmit() {
   try {
     isUpdatingCalendar.value = true
-    await $fetch(`/api/calendars/${calendarSkeleton.value.id}`, { method: "PATCH", body: { ...calendarSkeleton.value, worldId: props.calendar?.world?.id } })
+    await $fetch(`/api/calendars/${calendarSkeleton.value.id}`, { method: "PATCH", body: { ...calendarSkeleton.value, worldId: props.world?.id } })
 
     emit("on-close")
   } catch (err) {

pages/my/worlds/[id].vue

@@ -47,27 +47,6 @@ function handleInsertedCalendar(newCalendar: CalendarChannelPayload) {
   }
 }
 
-/** Handles calendar insertion realtime events */
-function handleUpdatedCalendar(newCalendar: CalendarChannelPayload) {
-  if (!world.value) return
-
-  try {
-    world.value.data.calendars = world.value.data.calendars?.map(c => {
-      if (c.id === newCalendar.id) {
-        const eventNb = c.eventNb
-        c = newCalendar
-        c.createdAt = newCalendar.created_at
-        c.updatedAt = newCalendar.updated_at
-        c.eventNb = eventNb
-      }
-
-      return c
-    })
-  } catch (err) {
-    console.log(err)
-  }
-}
-
 /** Handles calendar deletion realtime events */
 function handleDeletedCalendar(id: number) {
   if (!world.value) return
@@ -84,7 +63,7 @@ onMounted(() => {
     .on(
       "postgres_changes",
       { event: "*", schema: "public", table: "calendars" },
-      (payload) => {
+      async (payload) => {
         switch (payload.eventType) {
           case "INSERT":
             handleInsertedCalendar(payload.new as Calendar)
@@ -94,8 +73,11 @@ onMounted(() => {
             handleDeletedCalendar(payload.old.id)
             break
 
+          // Maybe this case could be handled better than doing a separate API call
           case "UPDATE":
-            handleUpdatedCalendar(payload.new as Calendar)
+            if (!world.value?.data) return
+
+            world.value.data = (await $fetch<{ data: World }>("/api/worlds/query", { query: { id, full: true } })).data
             break
 
           default:
@@ -249,7 +231,7 @@ function hideEditModal() {
 
       <WorldDialogEdit :world="world.data" :modal-state="isEditWorldModalOpen" @on-close="hideEditModal" />
       <CalendarDialogCreate :world="world.data" :modal-state="isCreateCalendarModalOpen" @on-close="hideCreateDialog" />
-      <CalendarDialogUpdate v-if="markedCalendar?.id" :calendar-id="markedCalendar.id" :modal-state="isUpdateCalendarModalOpen" @on-close="hideUpdateDialog" />
+      <CalendarDialogUpdate v-if="markedCalendar?.id" :world="world.data" :calendar="markedCalendar" :modal-state="isUpdateCalendarModalOpen" @on-close="hideUpdateDialog" />
       <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteCalendarModal"/>
     </template>
     <template v-else>

server/api/calendars/[id].patch.ts

@@ -23,6 +23,8 @@ export default defineEventHandler(async (event) => {
   }
 
   if (bodyError) {
+    console.log(bodyData)
+    console.log(bodyError)
     const error = createError({
       cause: "Utilisateur",
       fatal: false,

server/api/calendars/create.post.ts

@@ -29,6 +29,7 @@ export default defineEventHandler(async (event) => {
           name: bodyData.name,
           today: bodyData.today,
           color: bodyData.color,
+          state: bodyData.state,
           world_id: bodyData.worldId
         } as never
       )

server/api/worlds/query.get.ts

@@ -27,6 +27,7 @@ export default defineEventHandler(async (event) => {
       color,
       today,
       state,
+      months:calendar_months(*),
       createdAt:created_at,
       updatedAt:updated_at,
       eventNb:calendar_events(count)
@@ -43,6 +44,7 @@ export default defineEventHandler(async (event) => {
     calendars (
       createdAt:created_at,
       updatedAt:updated_at,
+      months:calendar_months(*),
       eventNb:calendar_events(count)
     )
   `