From 02e41214d298b9ebc9eb6c53b8825f486b153d90 Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Sun, 28 May 2023 15:32:03 +0200
Subject: [PATCH] stash

---
 frontend/src/views/InventoryDetail.vue | 86 +++++++++++++++--------
 frontend/src/views/InventoryEdit.vue   | 95 ++++++++++++++++++--------
 2 files changed, 123 insertions(+), 58 deletions(-)

diff --git a/frontend/src/views/InventoryDetail.vue b/frontend/src/views/InventoryDetail.vue
index 8f2a931..9010d79 100644
--- a/frontend/src/views/InventoryDetail.vue
+++ b/frontend/src/views/InventoryDetail.vue
@@ -4,38 +4,48 @@
             <div class="row">
                 <div class="col">
                     <div class="card">
-                        <div class="card-header">Inventory</div>
+                        <div class="card-header">Edit Item</div>
                         <div class="card-body">
-                            <table class="table table-striped">
-                                <thead>
-                                <tr>
-                                    <th>Item</th>
-                                    <th>Quantity</th>
-                                    <th>Owner</th>
-                                    <th>Actions</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr v-for="item in inventory_items" :key="item.id">
-                                    <td>{{ item.name }}</td>
-                                    <td>{{ item.quantity }}</td>
-                                    <td>{{ item.owner }}</td>
-                                    <td>
-                                        <a href="#">
-                                            <b-icon-pencil-square></b-icon-pencil-square>
-                                        </a>
-                                        <a href="#">
-                                            <b-icon-trash></b-icon-trash>
-                                        </a>
-                                    </td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        <div class="card">
-                            <button class="btn" @click="getInventoryItems">Refresh</button>
-                            <router-link to="/inventory/new" class="btn btn-primary">Add</router-link>
+                            <div class="mb-3">
+                                <span class="badge bg-dark" v-for="(tag, index) in item.tags" :key="index">
+                                    {{ tag }}
+                                </span>
+                            </div>
+                            <div class="mb-3">
+                                <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="name" class="form-label">Name</label>
+                                <input type="text" class="form-control" id="name" name="name"
+                                       placeholder="Enter item name" v-model="item.name">
+                            </div>
+                            <div class="mb-3">
+                                <label for="description" class="form-label">Description</label>
+                                <textarea class="form-control" id="description" name="description"
+                                          placeholder="Enter description" v-model="item.description"></textarea>
+                            </div>
+                            <div class="mb-3">
+                                <label for="quantity" class="form-label">Quantity</label>
+                                <input type="number" class="form-control" id="quantity" name="quantity"
+                                       placeholder="Enter quantity" v-model="item.quantity">
+                            </div>
+                            <div class="mb-3">
+                                <label for="price" class="form-label">Price</label>
+                                <input type="number" class="form-control" id="price" name="price"
+                                       placeholder="Enter price" v-model="item.price">
+                            </div>
+                            <div class="mb-3">
+                                <label for="image" class="form-label">Image</label>
+                                <input type="text" class="form-control" id="image" name="image"
+                                       placeholder="Enter image" v-model="item.image">
+                            </div>
                         </div>
+                        <!--div class="card">
+                            <button type="submit" class="btn btn-primary" @click="updateInventoryItem(item)">Update
+                            </button>
+                        </div-->
                     </div>
                 </div>
             </div>
@@ -46,10 +56,26 @@
 <script>
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
+import TagField from "@/components/TagField.vue";
+import PropertyField from "@/components/PropertyField.vue";
 
 export default {
     name: "InventoryDetail",
+    data() {
+        return {
+            item: {
+                name: "",
+                description: "",
+                quantity: 0,
+                price: 0,
+                image: "",
+                tags: [],
+                properties: []
+            }
+        }
+    },
     components: {
+        PropertyField, TagField,
         BaseLayout,
         ...BIcons
     },
diff --git a/frontend/src/views/InventoryEdit.vue b/frontend/src/views/InventoryEdit.vue
index fe93f6e..976bd0e 100644
--- a/frontend/src/views/InventoryEdit.vue
+++ b/frontend/src/views/InventoryEdit.vue
@@ -4,37 +4,55 @@
             <div class="row">
                 <div class="col">
                     <div class="card">
-                        <div class="card-header">Inventory</div>
+                        <div class="card-header">Edit Item</div>
                         <div class="card-body">
-                            <table class="table table-striped">
-                                <thead>
-                                <tr>
-                                    <th>Item</th>
-                                    <th>Quantity</th>
-                                    <th>Owner</th>
-                                    <th>Actions</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr v-for="item in inventory_items" :key="item.id">
-                                    <td>{{ item.name }}</td>
-                                    <td>{{ item.quantity }}</td>
-                                    <td>{{ item.owner }}</td>
-                                    <td>
-                                        <a href="#">
-                                            <b-icon-pencil-square></b-icon-pencil-square>
-                                        </a>
-                                        <a href="#">
-                                            <b-icon-trash></b-icon-trash>
-                                        </a>
-                                    </td>
-                                </tr>
-                                </tbody>
-                            </table>
+                            <div class="mb-3">
+                                <ul>
+                                    <li v-for="tag in item.tags" :key="tag">
+                                        {{ tag }}
+                                    </li>
+                                </ul>
+                                <label for="tags" class="form-label">Tags</label>
+                                <tag-field :value="item.tags"></tag-field>
+                            </div>
+                            <div class="mb-3">
+                                <ul>
+                                    <li v-for="property in item.properties" :key="property">
+                                        {{ property.name }}: {{ property.value }}
+                                    </li>
+                                </ul>
+                                <label for="property" class="form-label">Property</label>
+                                <property-field :value="item.properties"></property-field>
+                            </div>
+                            <div class="mb-3">
+                                <label for="name" class="form-label">Name</label>
+                                <input type="text" class="form-control" id="name" name="name"
+                                       placeholder="Enter item name" v-model="item.name">
+                            </div>
+                            <div class="mb-3">
+                                <label for="description" class="form-label">Description</label>
+                                <textarea class="form-control" id="description" name="description"
+                                          placeholder="Enter description" v-model="item.description"></textarea>
+                            </div>
+                            <div class="mb-3">
+                                <label for="quantity" class="form-label">Quantity</label>
+                                <input type="number" class="form-control" id="quantity" name="quantity"
+                                       placeholder="Enter quantity" v-model="item.quantity">
+                            </div>
+                            <div class="mb-3">
+                                <label for="price" class="form-label">Price</label>
+                                <input type="number" class="form-control" id="price" name="price"
+                                       placeholder="Enter price" v-model="item.price">
+                            </div>
+                            <div class="mb-3">
+                                <label for="image" class="form-label">Image</label>
+                                <input type="text" class="form-control" id="image" name="image"
+                                       placeholder="Enter image" v-model="item.image">
+                            </div>
                         </div>
                         <div class="card">
-                            <button class="btn" @click="getInventoryItems">Refresh</button>
-                            <router-link to="/inventory/new" class="btn btn-primary">Add</router-link>
+                            <button type="submit" class="btn btn-primary" @click="updateInventoryItem(item)">Update
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -45,14 +63,35 @@
 
 <script>
 import * as BIcons from "bootstrap-icons-vue";
+import {mapActions} from "vuex";
 import BaseLayout from "@/components/BaseLayout.vue";
+import TagField from "@/components/TagField.vue";
+import PropertyField from "@/components/PropertyField.vue";
 
 export default {
     name: "InventoryEdit",
+    data() {
+        return {
+            item: {
+                name: "",
+                description: "",
+                quantity: 0,
+                price: 0,
+                image: "",
+                tags: [],
+                properties: []
+            }
+        }
+    },
     components: {
         BaseLayout,
+        TagField,
+        PropertyField,
         ...BIcons
     },
+    methods: {
+        ...mapActions(["updateInventoryItem"]),
+    },
 }
 </script>