refactor: category page + remove PoisList / PoiLayout + use setup and…

… composition API #172

components/Layout/Footer.vue

@@ -36,7 +36,8 @@ export default defineNuxtComponent({
         >
       </a>
     </span>
-    <CookiesConsent />
+    <!-- TODO: Fix client-side error -->
+    <!-- <CookiesConsent /> -->
   </footer>
 </template>
 

components/Layout/Header.vue

@@ -43,6 +43,8 @@ export default defineNuxtComponent({
       :logo-url="theme && theme.logo_url"
     />
 
+    <slot name="search" />
+
     <div class="tw-flex tw-justify-end print:tw-hidden">
       <slot />
       <NavMenu :entries="navMenuEntries" />

components/PoisList/Actions.vue

@@ -1,19 +1,16 @@
 <script lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import type { PropType } from 'vue'
-
-import { defineNuxtComponent, useRequestHeaders } from '#app'
 import IconButton from '~/components/UI/IconButton.vue'
 import IconsBar from '~/components/UI/IconsBar.vue'
 import { getPoiByCategoryIdUrl } from '~/lib/apiPois'
+import { siteStore as useSiteStore } from '~/stores/site'
 
-export default defineNuxtComponent({
+export default {
   components: {
     FontAwesomeIcon,
     IconsBar,
     IconButton,
   },
-
   props: {
     categoryId: {
       type: Number,
@@ -42,7 +39,7 @@ export default defineNuxtComponent({
   methods: {
     url(format: 'geojson' | 'csv'): string {
       return getPoiByCategoryIdUrl(
-        this.$vidoConfig(useRequestHeaders()),
+        useSiteStore().config || this.$vidoConfig(useRequestHeaders()),
         this.categoryId,
         {
           geometry_as: 'point',
@@ -52,7 +49,7 @@ export default defineNuxtComponent({
       )
     },
   },
-})
+}
 </script>
 
 <template>

components/PoisList/PoisTable.vue

@@ -8,6 +8,8 @@ import IconButton from '~/components/UI/IconButton.vue'
 import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
 import Actions from '~/components/PoisList/Actions.vue'
 import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
+import { getPoiByCategoryId } from '~/lib/apiPois'
+import { siteStore as useSiteStore } from '~/stores/site'
 
 interface DataTableHeader {
   filterable: boolean
@@ -18,23 +20,44 @@ interface DataTableHeader {
 
 const props = defineProps<{
   category: ApiMenuCategory
-  fields: FieldsListItem[]
-  pois: ApiPois
 }>()
 
 const { t } = useI18n()
+const siteStore = useSiteStore()
 const { $propertyTranslations } = useNuxtApp()
 const { contribMode, isContribEligible, getContributorFields } = useContrib()
-
 const search = ref('')
 
-function customFilter(value: any, query: string): boolean {
-  return query !== null && value !== null && typeof value === 'string' && value.toLowerCase().includes(query.toLowerCase())
-}
+// Fetch POIs by Cache or API
+const { data: pois, pending, error } = await useAsyncData(`pois-${props.category.id}`, async () => {
+  const { data: cache } = useNuxtData(`pois-${props.category.id}`)
+  if (cache.value)
+    return cache.value as ApiPois
+
+  return await getPoiByCategoryId(
+    siteStore.config!,
+    props.category.id,
+    { geometry_as: 'point', short_description: true },
+  )
+}, {
+  watch: [props.category],
+})
+
+if (error.value || !pois.value)
+  throw createError({ statusCode: 404, statusMessage: 'POIs not found.' })
 
+// Handle default config field if not provided by API
+const fields = computed((): FieldsListItem[] => {
+  return (
+    (pois.value?.features[0].properties.editorial?.list_fields)
+    || [{ field: 'name' }]
+  )
+})
+
+// Transform headers data to be compliant with Vuetify's standards
 const headers = computed((): Array<DataTableHeader> => {
   // Basic Fields
-  const headers: Array<DataTableHeader> = props.fields.map(f => ({
+  const headers: Array<DataTableHeader> = fields.value.map(f => ({
     filterable: true,
     key: f.field,
     title: $propertyTranslations.p(
@@ -62,10 +85,14 @@ const headers = computed((): Array<DataTableHeader> => {
 
   return headers
 })
+
+function customFilter(value: any, query: string): boolean {
+  return query !== null && value !== null && typeof value === 'string' && value.toLowerCase().includes(query.toLowerCase())
+}
 </script>
 
 <template>
-  <VCard>
+  <VCard class="mt-8">
     <VToolbar class="pa-2" flat>
       <TeritorioIconBadge
         :color-fill="category.category.color_fill"
@@ -92,8 +119,9 @@ const headers = computed((): Array<DataTableHeader> => {
       />
     </VToolbar>
     <VDataTable
+      :loading="pending"
       :headers="headers"
-      :items="pois.features"
+      :items="pois?.features"
       :no-data-text="t('poisTable.empty')"
       :search="search"
       :custom-filter="customFilter"
@@ -128,6 +156,9 @@ const headers = computed((): Array<DataTableHeader> => {
           </td>
         </tr>
       </template>
+      <template #loading>
+        <VSkeletonLoader type="table-row@10" />
+      </template>
     </VDataTable>
   </VCard>
 </template>

lib/apiPois.ts

@@ -166,13 +166,13 @@ export function getPoiByCategoryIdUrl(
   )
 }
 
-export function getPoiByCategoryId(
+export async function getPoiByCategoryId(
   vidoConfig: VidoConfig,
   categoryId: number | string,
   options: ApiPoisOptions = {},
 ): Promise<ApiPois> {
   options = Object.assign(defaultOptions, { geometry_as: 'point' }, options)
-  return fetch(getPoiByCategoryIdUrl(vidoConfig, categoryId, options)).then(
+  return await fetch(getPoiByCategoryIdUrl(vidoConfig, categoryId, options)).then(
     (data) => {
       if (data.ok) {
         return data.json() as unknown as ApiPois

lib/apiSettings.ts

@@ -50,8 +50,8 @@ export interface Settings {
   themes: SiteInfosTheme[]
 }
 
-export function getSettings(vidoConfig: VidoConfig): Promise<Settings> {
-  return fetch(
+export async function getSettings(vidoConfig: VidoConfig): Promise<Settings> {
+  return await fetch(
     `${vidoConfig.API_ENDPOINT}/${vidoConfig.API_PROJECT}/${vidoConfig.API_THEME}/settings.json`,
   )
     .then((data) => {