Fix PopupPoiContent (#180)

components/Home/Embedded.vue

@@ -147,7 +147,7 @@ export default defineNuxtComponent({
           :boundary-area="boundaryArea || settings.polygon.data"
         />
         <CategorySelector
-          :menu-items="menuItems || []"
+          :menu-items="menuItems || {}"
           label="categorySelector.placeholderAdd"
           class="tw-p-4 tw-absolute tw-z-1 tw-w-full"
           @category-change="onMenuChange"

components/PoisCard/PoiCardContent.vue

@@ -217,10 +217,6 @@ export default defineNuxtComponent({
       {{ description }}
     </p>
 
-    <ClientOnly v-if="contribMode && isContribEligible(poi.properties)">
-      <ContribFieldGroup v-bind="getContributorFields(poi)" />
-    </ClientOnly>
-
     <div v-else class="tw-h-auto tw-flex-grow tw-shrink-0">
       <Fields
         :fields="
@@ -233,6 +229,7 @@ export default defineNuxtComponent({
         class="tw-mt-6 tw-text-sm"
         @click-detail="trackingPopupEvent('details')"
       />
+      <ContribFieldGroup v-if="contribMode && isContribEligible(poi.properties)" v-bind="getContributorFields(poi)" />
     </div>
 
     <div

components/PoisDetails/PoiDetails.vue

@@ -213,12 +213,6 @@ export default defineNuxtComponent({
     <template #body>
       <div class="detail-wrapper">
         <div class="detail-left">
-          <ClientOnly v-if="contribMode && isContribEligible(poi.properties)">
-            <FieldsHeader :recursion-stack="[]">
-              {{ $t('fields.contrib.heading') }}
-            </FieldsHeader>
-            <ContribFieldGroup v-bind="getContributorFields(poi)" />
-          </ClientOnly>
           <FieldsGroup
             v-if="detailsFields"
             :group="{
@@ -231,6 +225,12 @@ export default defineNuxtComponent({
             :color-fill="colorFill"
             :geom="poi.geometry"
           />
+          <div v-if="contribMode && isContribEligible(poi.properties)">
+            <FieldsHeader :recursion-stack="[]">
+              {{ $t('fields.contrib.heading') }}
+            </FieldsHeader>
+            <ContribFieldGroup v-bind="getContributorFields(poi)" />
+          </div>
         </div>
 
         <div class="detail-right">

components/PoisList/CategorySelector.vue

@@ -29,7 +29,7 @@ export default defineNuxtComponent({
 
   props: {
     menuItems: {
-      type: Array as PropType<Record<number, MenuItem>>,
+      type: Object as PropType<Record<number, MenuItem>>,
       required: true,
     },
     categoryId: {

components/PoisList/PoisList.vue

@@ -9,7 +9,6 @@ import Actions from '~/components/PoisList/Actions.vue'
 import CategorySelector from '~/components/PoisList/CategorySelector.vue'
 import PoisTable from '~/components/PoisList/PoisTable.vue'
 import type { ContentEntry } from '~/lib/apiContent'
-import type { ApiMenuCategory } from '~/lib/apiMenu'
 import type { ApiPois, FieldsListItem } from '~/lib/apiPois'
 import { getPoiByCategoryId } from '~/lib/apiPois'
 import type { Settings } from '~/lib/apiSettings'
@@ -54,10 +53,10 @@ export default defineNuxtComponent({
   },
 
   computed: {
-    ...mapState(menuStore, ['menuItems']),
+    ...mapState(menuStore, ['menuItems', 'getCurrentCategory']),
 
-    category(): ApiMenuCategory | undefined {
-      return (this.menuItems || {})[this.categoryId] as ApiMenuCategory
+    category() {
+      return this.getCurrentCategory(this.categoryId)
     },
 
     fields(): FieldsListItem[] {
@@ -117,7 +116,7 @@ export default defineNuxtComponent({
     </template>
     <template #body>
       <CategorySelector
-        :menu-items="menuItems || []"
+        :menu-items="menuItems || {}"
         :category-id="categoryId"
         @category-change="onMenuChange"
       />

components/PoisList/PoisTable.vue

@@ -32,8 +32,10 @@ export default defineNuxtComponent({
         ),
       }))
       h.push({ value: '', text: '' })
+
       if (this.contribMode)
-        h.push({ value: 'contrib', text: this.$t('fields.contrib.heading') })
+        h.push({ value: '', text: this.$t('fields.contrib.heading') })
+
       return h
     },
 
@@ -70,11 +72,9 @@ export default defineNuxtComponent({
             {{ $t('poisTable.details') }}
           </NuxtLink>
         </td>
-        <ClientOnly v-if="contribMode && isContribEligible(feature.properties)">
-          <td class="tw-align-top">
-            <ContribFieldGroup v-bind="getContributorFields(feature)" />
-          </td>
-        </ClientOnly>
+        <td v-if="contribMode && isContribEligible(feature.properties)" class="tw-align-top">
+          <ContribFieldGroup v-bind="getContributorFields(feature)" />
+        </td>
       </tr>
     </tbody>
     <tbody v-else>

middleware/contrib-mode.global.ts

@@ -13,21 +13,15 @@ export interface ContribFields {
 }
 
 export default defineNuxtRouteMiddleware((to) => {
-  if (process.server)
-    return
-
-  if (process.client) {
-    const { setEnabled } = useContribStore()
-    const contribLocalStorage = localStorage.getItem(STORE_NAME)
-
-    if (to.query.contrib !== undefined) {
-      setEnabled(to.query.contrib === 'true')
-      return
-    }
+  const { setEnabled } = useContribStore()
+  const cookie = useCookie(STORE_NAME)
 
-    if (contribLocalStorage)
-      setEnabled(contribLocalStorage === 'true')
+  if (to.query.contrib !== undefined) {
+    setEnabled(to.query.contrib === 'true')
+    return
   }
+
+  setEnabled(Boolean(cookie.value))
 })
 
 export function getContributorFields(feature: ApiPoi): ContribFields {

pages/category/[id].vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { mapWritableState } from 'pinia'
+import { mapState, mapWritableState } from 'pinia'
 import type { Ref } from 'vue'
 
 import { defineNuxtComponent, useHead, useRequestHeaders, useRoute } from '#app'
@@ -102,6 +102,7 @@ export default defineNuxtComponent({
   },
 
   computed: {
+    ...mapState(menuStore, ['getCurrentCategory']),
     ...mapWritableState(siteStore, {
       locale: 'locale',
       globalConfig: 'config',
@@ -130,14 +131,15 @@ export default defineNuxtComponent({
   },
 
   mounted() {
+    const { params } = useRoute()
     this.locale = this.$i18n.locale
-    this.handleCategoryUpdate(useRoute().params.id as string)
+    this.handleCategoryUpdate(Number.parseInt(Array.isArray(params.id) ? params.id[0] : params.id))
   },
   methods: {
-    getCategory(categoryId: string): ApiMenuCategory {
+    getCategory(categoryId: number): ApiMenuCategory {
       // Fetching category by ID
       // TODO: Has to be done in setup() but menuItems is touched in created() hook
-      const category = menuStore().getCurrentCategory(categoryId)
+      const category = this.getCurrentCategory(categoryId)
       if (!category) {
         throw createError({
           statusCode: 404,
@@ -146,8 +148,8 @@ export default defineNuxtComponent({
       }
       return category
     },
-    handleCategoryUpdate(categoryId: number | string) {
-      const category = this.getCategory(categoryId.toString())
+    handleCategoryUpdate(categoryId: number) {
+      const category = this.getCategory(categoryId)
       this.settings.themes[0].title = category.category.name
       useHead(headerFromSettings(this.settings))
     },

stores/contrib.ts

@@ -12,8 +12,10 @@ export const useContribStore = defineStore(STORE_NAME, {
   }),
   actions: {
     setEnabled(state: boolean) {
+      const cookie = useCookie(STORE_NAME)
+
       this.enabled = state
-      localStorage.setItem(STORE_NAME, JSON.stringify(state))
+      cookie.value = JSON.stringify(state)
     },
   },
 })

stores/menu.ts

@@ -63,12 +63,12 @@ export const menuStore = defineStore('menu', {
           ) as ApiMenuCategory[])
     },
 
-    getCurrentCategory: (state: State): (categoryId: string) => ApiMenuCategory | undefined => {
+    getCurrentCategory: (state: State): (categoryId: number) => ApiMenuCategory | undefined => {
       return (categoryId) => {
         return state.menuItems === undefined
           ? undefined
           : Object.values(state.menuItems).find(
-            menuItem => menuItem.id.toString() === categoryId,
+            menuItem => menuItem.id === categoryId,
           ) as ApiMenuCategory
       }
     },