feat: add category page as embedded #146

pages/category/[id]/embedded.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { getMenu } from '~/lib/apiMenu'
+import { type Settings, getSettings, headerFromSettings } from '~/lib/apiSettings'
+import { type PropertyTranslations, getPropertyTranslations } from '~/lib/apiPropertyTranslations'
+import { menuStore as useMenuStore } from '~/stores/menu'
+import { siteStore as useSiteStore } from '~/stores/site'
+import { vidoConfig } from '~/plugins/vido-config'
+import CategorySelector from '~/components/PoisList/CategorySelector.vue'
+import PoisTable from '~/components/PoisList/PoisTable.vue'
+
+// Query param validation
+definePageMeta({
+  validate({ params }) {
+    return (
+      typeof params.id === 'string' && /^[,-_:a-zA-Z0-9]+$/.test(params.id)
+    )
+  },
+})
+
+const router = useRouter()
+const param = useRoute().params
+const id = Number.parseInt(param.id as string)
+
+// TODO: Get this globally as share it across components / pages
+const { $vidoConfigSet, $settings, $propertyTranslations } = useNuxtApp()
+const siteStore = useSiteStore()
+let config = siteStore.config
+
+if (process.server && !config) {
+  config = vidoConfig(useRequestHeaders())
+  $vidoConfigSet(config)
+  siteStore.$patch({ config })
+}
+
+if (!config)
+  throw createError({ statusCode: 500, statusMessage: 'Wrong config', fatal: true })
+
+// Fetch common data
+// TODO: Move common data on upper-level (ex: layout)
+const categoryListData = ref<{
+  settings: Settings
+  translations: PropertyTranslations
+}>()
+const { data: cachedCategoryListData } = useNuxtData('categoryList')
+
+if (cachedCategoryListData.value) {
+  categoryListData.value = cachedCategoryListData.value
+}
+else {
+  const { data, error } = await useAsyncData('categoryList', async () => {
+    const [settings, translations] = await Promise.all([
+      getSettings(config!),
+      getPropertyTranslations(config!),
+    ])
+
+    return { settings, translations }
+  })
+
+  if (error.value || !data.value)
+    throw createError({ statusCode: 500, statusMessage: 'Global config not found.', fatal: true })
+
+  categoryListData.value = data.value
+}
+
+// MenuItems
+const menuStore = useMenuStore()
+const { data: cachedMenuItems } = useNuxtData('menu-items')
+if (cachedMenuItems.value) {
+  menuStore.fetchConfig(cachedMenuItems.value)
+}
+else {
+  const { data, error } = await useAsyncData('menu-items', async () => await getMenu(config!))
+
+  if (error.value || !data.value)
+    throw createError({ statusCode: 404, statusMessage: 'Menu not found', fatal: true })
+
+  menuStore.fetchConfig(data.value)
+}
+
+const { settings, translations } = categoryListData.value!
+const category = menuStore.getCurrentCategory(id)
+
+if (!category) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Category Not Found',
+  })
+}
+
+settings.themes[0].title = category.category.name
+useHead(headerFromSettings(settings))
+
+// Not sure about future usage as we could have data from useNuxtData
+$settings.set(settings)
+$propertyTranslations.set(translations)
+
+function onCategoryUpdate(categoryId: number) {
+  if (!categoryId)
+    return
+
+  router.push(`/category/${categoryId}/embedded`)
+}
+</script>
+
+<template>
+  <div>
+    <CategorySelector
+      class="w-50 mx-auto"
+      :menu-items="menuStore.menuItems || {}"
+      :category-id="id"
+      @category-change="onCategoryUpdate"
+    />
+    <PoisTable :category="category" />
+  </div>
+</template>