add item detail page

frontend/src/router.js

@@ -5,11 +5,13 @@ import Register from '@/views/Register.vue';
 import store from '@/store';
 import Friends from "@/views/Friends.vue";
 import Inventory from '@/views/Inventory.vue';
+import InventoryDetail from "@/views/InventoryDetail.vue";
 
 
 const routes = [
     {path: '/', component: Dashboard, meta: {requiresAuth: true}},
     {path: '/inventory', component: Inventory, meta: {requiresAuth: true}},
+    {path: '/inventory/:id', component: InventoryDetail, meta: {requiresAuth: true}, props: true},
     {path: '/friends', component: Friends, meta: {requiresAuth: true}},
     {path: '/login', component: Login, meta: {requiresAuth: false}},
     {path: '/register', component: Register, meta: {requiresAuth: false}},

frontend/src/views/Inventory.vue

@@ -20,7 +20,7 @@
                                 <tbody>
                                 <tr v-for="item in inventory_items" :key="item.id">
                                     <td>
-                                        {{ item.name }}
+                                        <router-link :to="`/inventory/${item.id}`">{{ item.name }}</router-link>
                                     </td>
                                     <td class="d-none d-md-table-cell">{{ item.availability_policy }}</td>
                                     <td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>

frontend/src/views/InventoryDetail.vue

@@ -0,0 +1,75 @@
+<template>
+    <BaseLayout>
+        <main class="content">
+            <div class="row">
+                <div class="col">
+                    <div class="card">
+                        <div class="card-header">{{ item.name }}</div>
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <label for="description" class="form-label">Description</label>
+                                {{ item.description }}
+                            </div>
+                            <div class="mb-3">
+                                <label for="tags" class="form-label">Tags</label>
+                                <span class="badge bg-dark" v-for="(tag, index) in item.tags" :key="index">
+                                    {{ tag }}
+                                </span>
+                            </div>
+                            <div class="mb-3">
+                                <label for="property" class="form-label">Properties</label>
+                                <span class="badge bg-dark" v-for="(property, index) in item.properties" :key="index">
+                                    {{ property.name }}={{ property.value }}
+                                </span>
+                            </div>
+                            <div class="mb-3">
+                                <label for="quantity" class="form-label">Quantity</label>
+                                {{ item.owned_quantity }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </BaseLayout>
+</template>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+import BaseLayout from "@/components/BaseLayout.vue";
+import {mapActions, mapGetters} from "vuex";
+
+export default {
+    name: "InventoryDetail",
+    components: {
+        BaseLayout,
+        ...BIcons
+    },
+    props: {
+        id: {
+            type: String,
+            required: true
+        }
+    },
+    computed: {
+        ...mapGetters(["loaded_items"]),
+        item() {
+            return this.loaded_items.find(item => item.id === parseInt(this.id)) || {}
+        }
+    },
+    methods: {
+        ...mapActions(["fetchInventoryItems", "deleteInventoryItem", "fetchFilesByItem"]),
+    },
+    async mounted() {
+        await this.fetchInventoryItems()
+    }
+}
+</script>
+
+<style scoped>
+img {
+    width: 190px;
+    height: 107px;
+    object-fit: contain;
+}
+</style>