From 2e57da6c788b293c59ae2189f13753c18a0edd66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 1 Oct 2024 17:22:36 +0200
Subject: [PATCH] feat: add category name in page detail title #350

---
 components/PoisDetails/PoiDetails.story.vue |  1 +
 components/PoisDetails/PoiDetails.vue       |  6 +++++-
 pages/poi/[id]/details.vue                  | 17 +++++++++++++----
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/components/PoisDetails/PoiDetails.story.vue b/components/PoisDetails/PoiDetails.story.vue
index f5931623d..0b8a9c981 100644
--- a/components/PoisDetails/PoiDetails.story.vue
+++ b/components/PoisDetails/PoiDetails.story.vue
@@ -17,6 +17,7 @@ const defaultProps = {
 const props = {
   Default: {
     ...defaultProps,
+    pageTitle: `${defaultProps.poi.properties.classe} - ${defaultProps.poi.properties.name}`,
   },
 }
 </script>
diff --git a/components/PoisDetails/PoiDetails.vue b/components/PoisDetails/PoiDetails.vue
index 00ecece78..673213c6f 100644
--- a/components/PoisDetails/PoiDetails.vue
+++ b/components/PoisDetails/PoiDetails.vue
@@ -59,6 +59,10 @@ export default defineNuxtComponent({
       type: Object as PropType<ApiPoiDeps>,
       default: null,
     },
+    pageTitle: {
+      type: String,
+      required: true,
+    },
   },
 
   data(): {
@@ -195,7 +199,7 @@ export default defineNuxtComponent({
   <PoiLayout
     :settings="settings"
     :nav-menu-entries="navMenuEntries"
-    :name="poi.properties.name"
+    :name="pageTitle"
     :icon="poi.properties.display && poi.properties.display.icon"
     :color-line="colorLine"
     :color-fill="colorFill"
diff --git a/pages/poi/[id]/details.vue b/pages/poi/[id]/details.vue
index acbc2cc31..f73870a9f 100644
--- a/pages/poi/[id]/details.vue
+++ b/pages/poi/[id]/details.vue
@@ -69,6 +69,16 @@ if (!poi.value) {
   })
 }
 
+//
+// Computed
+//
+const pageTitle = computed(() => {
+  if (!poi.value)
+    return ''
+
+  return `${poi.value.properties.classe} - ${poi.value.properties.name}`
+})
+
 //
 // Hooks
 //
@@ -78,11 +88,9 @@ onBeforeMount(() => {
 
 useHead(
   headerFromSettings(settings.value!, {
-    // @ts-expect-error: Fix typings
-    title: poiPoiDeps.value?.poi.properties.name,
+    title: pageTitle.value,
     description: {
-      // @ts-expect-error: Fix typings
-      fr: poiPoiDeps.value?.poi.properties.description,
+      fr: poi.value?.properties.description,
     },
   }),
 )
@@ -95,6 +103,7 @@ useHead(
     :nav-menu-entries="contents!"
     :poi="poi!"
     :poi-deps="poiDeps"
+    :page-title="pageTitle"
     class="page-details tw-overflow-clip"
   />
 </template>