diff --git a/components/PoisList/PoisList.vue b/components/PoisList/PoisList.vue index 90a78f060..f8e733de2 100644 --- a/components/PoisList/PoisList.vue +++ b/components/PoisList/PoisList.vue @@ -76,6 +76,9 @@ export default defineNuxtComponent({ categoryId() { this.pois = undefined + // Send new categoryId to parent in order to update meta title + this.$emit('categoryUpdate', this.categoryId) + // Change history directly to avoid resetup the page with this.$router.push history.pushState({}, '', `/category/${this.categoryId}`) diff --git a/pages/category/[id].vue b/pages/category/[id].vue index 6e5ec49f5..c5135f35e 100644 --- a/pages/category/[id].vue +++ b/pages/category/[id].vue @@ -7,7 +7,7 @@ import { definePageMeta } from '#imports' import PoisList from '~/components/PoisList/PoisList.vue' import type { ContentEntry } from '~/lib/apiContent' import { getContents } from '~/lib/apiContent' -import type { MenuItem } from '~/lib/apiMenu' +import type { ApiMenuCategory, MenuItem } from '~/lib/apiMenu' import { getMenu } from '~/lib/apiMenu' import type { ApiPois } from '~/lib/apiPois' import { getPoiByCategoryId } from '~/lib/apiPois' @@ -90,8 +90,6 @@ export default defineNuxtComponent({ fetchPoiByCategoryId, ]) - useHead(headerFromSettings(settings.value)) - return { config, settings, @@ -133,6 +131,26 @@ export default defineNuxtComponent({ mounted() { this.locale = this.$i18n.locale + this.handleCategoryUpdate(useRoute().params.id as string) + }, + methods: { + getCategory(categoryId: string): ApiMenuCategory { + // Fetching category by ID + // TODO: Has to be done in setup() but menuItems is touched in created() hook + const category = menuStore().getCurrentCategory(categoryId) + if (!category) { + throw createError({ + statusCode: 404, + statusMessage: 'Category Not Found', + }) + } + return category + }, + handleCategoryUpdate(categoryId: number | string) { + const category = this.getCategory(categoryId.toString()) + this.settings.themes[0].title = category.category.name + useHead(headerFromSettings(this.settings)) + }, }, }) @@ -144,6 +162,7 @@ export default defineNuxtComponent({ :initial-category-id="parseInt(id)" :initial-pois="pois" class="page-index" + @category-update="handleCategoryUpdate" /> diff --git a/stores/menu.ts b/stores/menu.ts index 67af816f6..bf8ab9e4b 100644 --- a/stores/menu.ts +++ b/stores/menu.ts @@ -63,6 +63,16 @@ export const menuStore = defineStore('menu', { ) as ApiMenuCategory[]) }, + getCurrentCategory: (state: State): (categoryId: string) => ApiMenuCategory | undefined => { + return (categoryId) => { + return state.menuItems === undefined + ? undefined + : Object.values(state.menuItems).find( + menuItem => menuItem.id.toString() === categoryId, + ) as ApiMenuCategory + } + }, + selectedCategories: (state: State): ApiMenuCategory[] | undefined => { return state.menuItems === undefined ? undefined