From ebc715a3a60f92ebfc83f4a402d511f8903aa17f Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 26 Aug 2024 22:07:05 +0200
Subject: [PATCH] Updated title functions on pages

---
 components/global/user/CTA.vue | 21 +++++++++------------
 models/CalendarConfig.ts       |  2 +-
 pages/my/calendars/[id].vue    | 12 ++++++++++--
 pages/my/worlds/[id].vue       | 17 ++++++++++++++---
 4 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/components/global/user/CTA.vue b/components/global/user/CTA.vue
index ef8e109..781967f 100644
--- a/components/global/user/CTA.vue
+++ b/components/global/user/CTA.vue
@@ -45,20 +45,17 @@ async function handleLogout() {
   }
 }
 
-function gotoProfilePage() {
-  router.push({ path: "/my/preferences" })
+type AvailableRoutes = "/my" | "/my/settings"
 
-  closeMenu()
-}
-
-function gotoSettingsPage() {
-  router.push({ path: "/my/settings" })
+function pushRoute(to: AvailableRoutes) {
+  router.push({ path: to })
 
   closeMenu()
 }
 </script>
 
 <template>
+  {{ preference }}
   <ClientOnly>
     <UiDropdownMenu v-model:open="menuOpened">
       <UiDropdownMenuTrigger>
@@ -79,7 +76,7 @@ function gotoSettingsPage() {
         <template v-if="user">
           <p class="p-2 text-xs opacity-75">Connecté en tant que {{ user?.email }}</p>
 
-          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="gotoProfilePage">
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my')">
             <PhGlobeHemisphereWest size="20" weight="fill" />
             <span>Mondes</span>
           </UiDropdownMenuItem>
@@ -95,15 +92,15 @@ function gotoSettingsPage() {
             </UiDropdownMenuSubTrigger>
             <UiDropdownMenuPortal>
               <UiDropdownMenuSubContent>
-                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'dark'">
                   <PhMoon size="20" />
                   <span>Sombre</span>
                 </UiDropdownMenuItem>
-                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'light'">
                   <PhSun size="20" />
                   <span>Clair</span>
                 </UiDropdownMenuItem>
-                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'system'">
                   <PhLaptop size="20" />
                   <span>Système</span>
                 </UiDropdownMenuItem>
@@ -134,7 +131,7 @@ function gotoSettingsPage() {
 
           <UiDropdownMenuSeparator />
 
-          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="gotoSettingsPage">
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my/settings')">
             <PhGear size="20" weight="fill" />
             <span>Compte</span>
           </UiDropdownMenuItem>
diff --git a/models/CalendarConfig.ts b/models/CalendarConfig.ts
index 6bd4c83..5958224 100644
--- a/models/CalendarConfig.ts
+++ b/models/CalendarConfig.ts
@@ -12,7 +12,7 @@ export interface Calendar extends CalendarConfig {
   id?: number
   name: string
   events: CalendarEvent[]
-  color?: string,
+  color?: string
 }
 
 export const postCalendarSchema = z.object({
diff --git a/pages/my/calendars/[id].vue b/pages/my/calendars/[id].vue
index b8a9f11..70a766e 100644
--- a/pages/my/calendars/[id].vue
+++ b/pages/my/calendars/[id].vue
@@ -24,8 +24,16 @@ const { data: catData, pending: catPending } = await useLazyFetch("/api/calendar
 const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
 const categories = computed<Category[]>(() => catData?.value?.data as Category[])
 
-useHead({
-  title: cal.value.name
+if (cal.value) {
+  useHead({
+    title: cal.value.name
+  })
+}
+
+watch(cal, (n) => {
+  useHead({
+    title: n.name
+  })
 })
 </script>
 
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index 8121317..9860e36 100644
--- a/pages/my/worlds/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -12,9 +12,20 @@ const { data: res, pending } = await useFetch("/api/worlds/query", { query: { id
 
 const world = ref<World>(res.value?.data as World)
 
-useHead({
-  title: world.value.name
-})
+if (world.value) {
+  useHead({
+    title: world.value.name
+  })
+}
+
+watch(world, (n) => {
+  if (n) {
+    useHead({
+      title: n.name
+    })
+  }
+}, { deep: true })
+
 definePageMeta({
   middleware: ["auth-guard"]
 })