Pass locationFlatTree to ItemCard in order to display full location

sysadminsmedia · Nov 23, 2024 · 43e9794 · 43e9794
1 parent 05fbb20
commit 43e9794
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/frontend/components/Item/Card.vue b/frontend/components/Item/Card.vue
@@ -14,7 +14,7 @@
           :to="`/location/${item.location.id}`"
           loading="lazy"
         >
-          {{ item.location.name }}
+          {{ locationString }}
         </NuxtLink>
       </div>
     </div>
@@ -67,6 +67,14 @@
       type: Object as () => ItemOut | ItemSummary,
       required: true,
     },
+    locationFlatTree: {
+      type: Array as () => FlatTreeItem[],
+      required: true,
+    },
+  });
+
+  const locationString = computed(() => {
+    return props.locationFlatTree.find(l => l.id === props.item.location.id)?.treeString;
   });
 </script>
 

diff --git a/frontend/pages/items.vue b/frontend/pages/items.vue
@@ -474,7 +474,7 @@
         <p>{{ $t("items.no_results") }}</p>
       </div>
       <div v-else ref="cardgrid" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
-        <ItemCard v-for="item in items" :key="item.id" :item="item" />
+        <ItemCard v-for="item in items" :key="item.id" :item="item" :location-flat-tree="locationFlatTree" />
       </div>
       <div v-if="items.length > 0 && (hasNext || hasPrev)" class="mt-10 flex flex-col items-center gap-2">
         <div class="flex">