From c7069164b01d70ddbd338669568b534bfdebf1b9 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 24 Nov 2024 19:56:00 +0100
Subject: [PATCH] Added check on client side (api)

---
 components/calendar/form/UpdateEvent.vue   | 22 +++++++++++++++++-----
 components/ui/toast/ToastViewport.vue      |  2 +-
 i18n.config.ts                             | 10 ++++++++++
 models/CalendarEvent.ts                    |  4 ++--
 models/Errors.ts                           | 14 ++++++++++++++
 nuxt.config.ts                             |  2 +-
 server/api/calendars/events/[id].patch.ts  | 16 +++++++++++++---
 server/api/calendars/events/create.post.ts |  2 ++
 stores/CalendarStore.ts                    |  4 ++--
 stores/EventStore.ts                       | 16 ++++++----------
 10 files changed, 68 insertions(+), 24 deletions(-)
 create mode 100644 models/Errors.ts

diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index a814efd..70a5652 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -1,9 +1,14 @@
 <script lang="ts" setup>
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from "@phosphor-icons/vue"
+import { useToast } from "~/components/ui/toast";
+import type { APIError } from "~/models/Errors";
 
 const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
 const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
 
+const { toast } = useToast()
+const { t } = useI18n()
+
 const isLoading = ref(false)
 
 const formErrors = reactive<{ message: string | null }>({
@@ -24,15 +29,22 @@ async function handleAction() {
 
   try {
     await updateEventFromSkeleton()
-
-    isEditEventModalOpen.value = false
   } catch (err) {
-    if (err instanceof Error) {
-      formErrors.message = err.message
-    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const apiError = (err as any).data as APIError
+
+    apiError.data.errors.forEach((error) => {
+      toast({
+        title: t("entity.calendar.event.editErrors.toastTitle"),
+        variant: "destructive",
+        description: t(`entity.calendar.event.editErrors.${error.path[1]}_${error.code}`),
+        duration: 2000,
+      })
+    })
   } finally {
     resetSkeleton()
     isLoading.value = false
+    isEditEventModalOpen.value = false
   }
 }
 
diff --git a/components/ui/toast/ToastViewport.vue b/components/ui/toast/ToastViewport.vue
index 7354994..86ee992 100644
--- a/components/ui/toast/ToastViewport.vue
+++ b/components/ui/toast/ToastViewport.vue
@@ -13,5 +13,5 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex gap-y-2 max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
 </template>
diff --git a/i18n.config.ts b/i18n.config.ts
index d59fc6e..7653fcd 100644
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -140,6 +140,11 @@ export default defineI18nConfig(() => ({
               title: "Edit event",
               subtitle: "Update event data",
             },
+            editErrors: {
+              toastTitle: "Event wasn't updated.",
+              title_too_big: "Title should be less than 240 characters long.",
+              description_too_big: "Description should be less than 1200 characters long.",
+            },
             deleteDialog: {
               title: "Delete this event",
               subtitle: "Data associated with this event will be lost and you won't be able to retrieve it !",
@@ -348,6 +353,11 @@ export default defineI18nConfig(() => ({
               title: "Modifier l'évènement",
               subtitle: "Mettre à jour les données de l'évènement",
             },
+            editErrors: {
+              toastTitle: "L'évènement n'a pas été modifié",
+              title_too_big: "Le titre doit être inférieur à 240 caractères.",
+              description_too_big: "La description doit être inférieure à 1200 caractères.",
+            },
             deleteDialog: {
               title: "Supprimer l'évènement",
               subtitle: "Les données associés à cet évènement seront supprimées et vous ne pourrez plus les récupérer !",
diff --git a/models/CalendarEvent.ts b/models/CalendarEvent.ts
index 042b43d..43cfc9e 100644
--- a/models/CalendarEvent.ts
+++ b/models/CalendarEvent.ts
@@ -20,8 +20,8 @@ export interface CalendarEvent {
  */
 export const postEventBodySchema = z.object({
   event: z.object({
-    title: z.string(),
-    description: z.string().optional().nullable(),
+    title: z.string().max(240),
+    description: z.string().max(1200).optional().nullable(),
     location: z.string().optional().nullable(),
     startDate: dateSchema.required(),
     endDate: dateSchema.optional().nullable(),
diff --git a/models/Errors.ts b/models/Errors.ts
new file mode 100644
index 0000000..16b6e8d
--- /dev/null
+++ b/models/Errors.ts
@@ -0,0 +1,14 @@
+export interface ValidationError {
+  path: (string | number)[]
+  message: string
+  code: string
+}
+
+export interface APIError {
+  statusCode: number
+  statusMessage: string
+  message: string
+  data: {
+    errors: ValidationError[]
+  }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0dadd11..f4eea9f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true },
+  devtools: { enabled: false },
 
   modules: [
     "@nuxtjs/supabase",
diff --git a/server/api/calendars/events/[id].patch.ts b/server/api/calendars/events/[id].patch.ts
index f0ab3d9..46ed8c2 100644
--- a/server/api/calendars/events/[id].patch.ts
+++ b/server/api/calendars/events/[id].patch.ts
@@ -22,12 +22,22 @@ export default defineEventHandler(async (event) => {
   }
 
   if (bodyError) {
-    throw createError({
+    const error = createError({
       cause: "Utilisateur",
       fatal: false,
-      message: "Le schéma de la requête n'est pas complet ou mal renseigné.",
-      status: 401,
+      statusCode: 401,
+      statusMessage: "Validation Error",
+      message: "Erreur de validation du schéma, cela est probablement dû à une erreur utilisateur.",
+      data: {
+        errors: bodyError.issues.map(issue => ({
+          path: issue.path,
+          message: issue.message,
+          code: issue.code
+        }))
+      }
     })
+
+    throw error
   }
 
   try {
diff --git a/server/api/calendars/events/create.post.ts b/server/api/calendars/events/create.post.ts
index 780aa46..46efe29 100644
--- a/server/api/calendars/events/create.post.ts
+++ b/server/api/calendars/events/create.post.ts
@@ -11,6 +11,8 @@ export default defineEventHandler(async (event) => {
       cause: "Utilisateur",
       fatal: false,
       message: "Le schéma de la requête n'est pas complet ou mal renseigné.",
+      data: schemaError.issues,
+      statusMessage: "test",
       status: 401,
     })
   }
diff --git a/stores/CalendarStore.ts b/stores/CalendarStore.ts
index 35acc89..cdbe5f2 100644
--- a/stores/CalendarStore.ts
+++ b/stores/CalendarStore.ts
@@ -869,8 +869,8 @@ export const useCalendar = defineStore("calendar", () => {
 
       const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
       baseEvents.value[eventIndex] = res
-    } catch (err) {
-      console.log(err)
+
+      return res
     } finally {
       abortController = null
       isUpdatingEvent.value = false
diff --git a/stores/EventStore.ts b/stores/EventStore.ts
index 3eecbac..935c59c 100644
--- a/stores/EventStore.ts
+++ b/stores/EventStore.ts
@@ -247,17 +247,13 @@ export const useCalendarEvents = defineStore("calendar-events", () => {
     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?.id }, 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
-    } catch (err) {
-      console.log(err)
-    } finally {
-      abortController = null
-      isUpdatingEvent.value = false
-    }
+    const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
+    baseEvents.value[eventIndex] = res
+
+    abortController = null
+    isUpdatingEvent.value = false
   }
 
   async function deleteEventFromSkeleton() {