Category selector need unfiltered menu items

teritorio · Feb 26, 2024 · c27da58 · c27da58
1 parent 3f3f51f
commit c27da58
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 23 deletions.
diff --git a/components/Home/Embedded.vue b/components/Home/Embedded.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { FitBoundsOptions } from 'maplibre-gl'
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
 import { defineNuxtComponent, useRequestHeaders } from '#app'
 import HomeMixin from '~/components/Home/HomeMixin'
@@ -26,6 +26,7 @@ export default defineNuxtComponent({
   mixins: [HomeMixin],
 
   computed: {
+    ...mapState(menuStore, ['menuItems']),
     fitBoundsPaddingOptions(): FitBoundsOptions['padding'] {
       return {
         top: 100,
@@ -146,7 +147,7 @@ export default defineNuxtComponent({
           :boundary-area="boundaryArea || settings.polygon.data"
         />
         <CategorySelector
-          :menu-items="Object.values(apiMenuCategory || {})"
+          :menu-items="menuItems || []"
           label="categorySelector.placeholderAdd"
           class="tw-p-4 tw-absolute tw-z-1 tw-w-full"
           @category-change="onMenuChange"

diff --git a/components/PoisList/CategorySelector.vue b/components/PoisList/CategorySelector.vue
@@ -29,7 +29,7 @@ export default defineNuxtComponent({
 
   props: {
     menuItems: {
-      type: Array as PropType<ApiMenuCategory[]>,
+      type: Array as PropType<Record<number, MenuItem>>,
       required: true,
     },
     categoryId: {
@@ -44,42 +44,35 @@ export default defineNuxtComponent({
 
   computed: {
     menuEntries(): Array<{ value: number, title: string, category: ApiMenuCategory['category'] } | undefined> {
-      const menuIndex: { [key: number]: MenuItem } = {}
-      this.menuItems
-        .filter(menuItem => !menuItem.hidden)
-        .forEach((menuItem) => {
-          menuIndex[menuItem.id] = menuItem
-        })
-
       const locales = this.$i18n.locales
       const localeCompareOptions = locales.map(
         (locale: string | LocaleObject) =>
           typeof locale === 'string' ? locale : locale.code,
       )
 
-      return this.menuItems.filter(
+      return Object.values(this.menuItems).filter(
         menuItem => menuItem.category && !menuItem.hidden,
       )
         .map((menuItem) => {
           const parents: string[] = []
           let parentId = menuItem.parent_id
           while (parentId) {
-            if (!menuIndex[parentId])
+            if (!this.menuItems[parentId])
               return undefined
 
-            const name = menuIndex[parentId].menu_group?.name.fr
-            if (name && menuIndex[parentId].parent_id)
-              parents.push(name)
+            const name = this.menuItems[parentId].menu_group?.name.fr
+            if (name && this.menuItems[parentId].parent_id)
+              parents.unshift(name)
 
-            parentId = menuIndex[parentId].parent_id
+            parentId = this.menuItems[parentId].parent_id
           }
 
           return {
             value: menuItem.id,
-            title: [...parents.reverse(), menuItem.category.name.fr].join(
+            title: [...parents, (menuItem as ApiMenuCategory).category.name.fr].join(
               ' / ',
             ),
-            category: menuItem.category,
+            category: (menuItem as ApiMenuCategory).category,
           }
         })
         .filter(t => t !== undefined)

diff --git a/components/PoisList/PoisList.vue b/components/PoisList/PoisList.vue
@@ -54,12 +54,10 @@ export default defineNuxtComponent({
   },
 
   computed: {
-    ...mapState(menuStore, ['apiMenuCategory']),
+    ...mapState(menuStore, ['menuItems']),
 
     category(): ApiMenuCategory | undefined {
-      return Object.values(this.apiMenuCategory || {}).find(
-        menuItem => menuItem.id === this.categoryId,
-      )
+      return (this.menuItems || {})[this.categoryId] as ApiMenuCategory
     },
 
     fields(): FieldsListItem[] {
@@ -121,7 +119,7 @@ export default defineNuxtComponent({
     </template>
     <template #body>
       <CategorySelector
-        :menu-items="apiMenuCategory || []"
+        :menu-items="menuItems || []"
         :category-id="categoryId"
         @category-change="onMenuChange"
       />