From 5f6a8e46c6926d8b6adf7515d288dd61ab7157ca Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 4 Jun 2024 12:01:19 +0200
Subject: [PATCH] Added update route for event

---
 components/calendar/form/UpdateEvent.vue  | 16 +++++-
 models/CalendarEvent.ts                   |  4 +-
 server/api/calendars/events/[id].patch.ts | 63 +++++++++++++++++++++++
 stores/EventStore.ts                      | 14 ++++-
 4 files changed, 91 insertions(+), 6 deletions(-)
 create mode 100644 server/api/calendars/events/[id].patch.ts

diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 92628cf..fe932d4 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -3,7 +3,7 @@ import { PhAlarm } from '@phosphor-icons/vue'
 import { VisuallyHidden } from 'radix-vue'
 
 const isModalOpened = defineModel<boolean>({ default: false })
-const { resetSkeleton } = useCalendarEvents()
+const { resetSkeleton, updateEventFromSkeleton } = useCalendarEvents()
 const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const formErrors = reactive<{ message: string | null }>({
@@ -18,6 +18,18 @@ watch(isModalOpened, (hasOpened, _o) => {
     resetSkeleton()
   }
 })
+
+async function handleSubmit() {
+  try {
+    await updateEventFromSkeleton()
+
+    isModalOpened.value = false
+  } catch (err) {
+    if (err instanceof Error) {
+      formErrors.message = err.message
+    }
+  }
+}
 </script>
 
 <template>
@@ -38,7 +50,7 @@ watch(isModalOpened, (hasOpened, _o) => {
         </UiDialogDescription>
       </VisuallyHidden>
 
-      <form>
+      <form @submit.prevent="handleSubmit">
         <div class="grid grid-cols-2 gap-y-4">
           <div class="col-span-2 ml-8">
             <input
diff --git a/models/CalendarEvent.ts b/models/CalendarEvent.ts
index b51da31..618ce65 100644
--- a/models/CalendarEvent.ts
+++ b/models/CalendarEvent.ts
@@ -20,9 +20,9 @@ export interface CalendarEvent {
 export const postEventBodySchema = z.object({
   event: z.object({
     title: z.string(),
-    description: z.string().optional(),
+    description: z.string().optional().nullable(),
     startDate: dateSchema.required(),
-    endDate: dateSchema.optional()
+    endDate: dateSchema.optional().nullable()
   }),
   calendarId: z.number().int().positive()
 })
diff --git a/server/api/calendars/events/[id].patch.ts b/server/api/calendars/events/[id].patch.ts
new file mode 100644
index 0000000..0e63993
--- /dev/null
+++ b/server/api/calendars/events/[id].patch.ts
@@ -0,0 +1,63 @@
+import { z } from 'zod'
+import { serverSupabaseClient } from "#supabase/server"
+import { postEventBodySchema, type CalendarEvent } from "~/models/CalendarEvent"
+
+const paramsSchema = z.object({
+  id: z.number({ coerce: true }).positive().int()
+})
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient(event)
+
+  const { data: params, error: paramsError} = await getValidatedRouterParams(event, paramsSchema.safeParse)
+  const { data: bodyData, error: bodyError } = await readValidatedBody(event, body => postEventBodySchema.safeParse(body))
+
+  if (paramsError) {
+    throw createError({
+      cause: 'Utilisateur',
+      fatal: false,
+      message: "L'identifiant de l'évènement est manquant ou mal renseigné.",
+      status: 401,
+    })
+  }
+
+  if (bodyError) {
+    console.log(bodyData)
+    throw createError({
+      cause: 'Utilisateur',
+      fatal: false,
+      message: "Le schéma de la requête n'est pas complet ou mal renseigné.",
+      status: 401,
+    })
+  }
+
+  try {
+    const { data, error } = await client
+      .from('calendar_events')
+      .update({ start_date: bodyData?.event.startDate, end_date: bodyData.event.endDate, title: bodyData?.event.title, description: bodyData.event.description, calendar_id: bodyData?.calendarId } as never)
+      .eq('id', params.id)
+      .select(`
+        id,
+        title,
+        description,
+        hidden,
+        startDate:start_date,
+        endDate:end_date,
+        wiki,
+        category:calendar_event_categories!calendar_events_category_fkey (*),
+        secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
+      `)
+      .single<CalendarEvent>()
+
+    if (error) throw error
+
+    return data
+  } catch (err) {
+    throw createError({
+      cause: 'Serveur',
+      status: 500,
+      fatal: false,
+      message: 'Une erreur inconnue est survenue.'
+    })
+  }
+})
diff --git a/stores/EventStore.ts b/stores/EventStore.ts
index c38a445..4d48e47 100644
--- a/stores/EventStore.ts
+++ b/stores/EventStore.ts
@@ -188,12 +188,22 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    */
   async function submitSkeleton() {
     try {
-      const res = await $fetch(`/api/calendars/events/create`, { method: 'POST', body: { event : eventSkeleton.value, calendarId: calendarId.value }})
+      const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: calendarId.value }})
       baseEvents.value.push(res)
     } catch (err) {
       console.log(err)
     }
   }
 
-  return { allEvents, setEvents, currentEvents, getRelativeEventFromDate, getRelativeEventFromEvent, eventSkeleton, resetSkeleton, submitSkeleton, lastActiveEvent }
+  async function updateEventFromSkeleton() {
+    try {
+      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: calendarId.value }})
+      const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
+      baseEvents.value[eventIndex] = res
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  return { allEvents, setEvents, currentEvents, getRelativeEventFromDate, getRelativeEventFromEvent, eventSkeleton, resetSkeleton, submitSkeleton, lastActiveEvent, updateEventFromSkeleton }
 })