feat: add category name in page detail title #350

teritorio · Oct 1, 2024 · 1ecd1e8 · 1ecd1e8
1 parent e49ea58
commit 1ecd1e8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>