stash

frontend/src/components/PropertyBadge.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="input-group" :title="prettyDescription">
+        <label class="input-group-text form-control-inline form-control-sm text-light border-dark bg-dark badge">
+            {{ property.name }} =
+        </label>
+        <input type="number" min="0"
+               class="form-control form-control-inline form-control-sm text-light border-dark bg-dark badge"
+               placeholder="Enter value"
+               v-model="localValue" :style="inputStyle"/>
+        <span class="input-group-text form-control-sm text-light border-dark bg-dark badge"
+              v-if="property.unit_symbol" :title="(property.unit_name?property.unit_name:property.unit_symbol)">
+                {{ property.unit_symbol }}
+            </span>
+        <span class="input-group-text form-control-sm text-light border-dark bg-dark badge">
+            <b-icon-x-circle @click="removeProperty()"></b-icon-x-circle>
+        </span>
+    </div>
+</template>
+
+<style scoped>
+.form-control-inline {
+    display: inline;
+    width: auto;
+}
+
+.input-group {
+    width: initial;
+}
+
+.form-control.badge {
+    border: 0;
+}
+
+.input-group-text.badge {
+    padding: .3rem 0rem;
+}
+
+.input-group .badge:first-child {
+    padding-left: 0.5rem;
+}
+
+.input-group .badge:last-child {
+    padding-right: 0.5rem;
+}
+
+input.badge {
+    --width: 0em;
+    min-height: calc(1.2rem);
+    line-height: 1;
+    min-width: calc(var(--width) + 1.35em + 18px);
+    width: 0;
+    text-align: left;
+}
+
+input[type=number].badge {
+}
+
+input.badge:empty {
+    display: initial;
+}
+</style>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+import {mapActions, mapState} from "vuex";
+
+export default {
+    name: "PropertyBadge",
+    components: {
+        ...BIcons
+    },
+    props: {
+        property: {
+            type: Object,
+            required: true
+        }
+    },
+    property: {
+        prop: "value",
+        event: "input"
+    },
+    computed: {
+        localValue: {
+            get() {
+                return this.property.value
+            },
+            set(value) {
+                this.$emit("input", value)
+            }
+        },
+        prettyDescription() {
+            var d = this.property.description ? this.property.description : this.property.name
+            if (this.property.unit_name) {
+                d += " (" + this.property.unit_name + ")"
+            }
+            return d.replace(/<[^>]*>?/gm, '')
+        },
+        inputStyle() {
+            const w = this.property.value ? Math.max(1, this.property.value.toString().length) : 1
+            if (this.property.value === undefined) {
+                console.log("No value for property", this.property)
+            }
+            return {
+                "--width": w + "ex"
+            }
+        }
+    },
+    methods: {
+        removeProperty() {
+            this.$emit("remove")
+        }
+    },
+}
+</script>

frontend/src/components/PropertyField.vue

@@ -1,48 +1,35 @@
 <template>
     <div class="input-group">
         <div class="taglist form-control form-control-lg">
-            <span class="badge bg-dark" v-for="(property, index) in value" :key="index">
+            <PropertyBadge v-for="(property, index) in splicedValue"
-                {{ property.name }} =
+                           :key="index"
-                <input type="number" class="form-control form-control-inline form-control-sm form-control-xsm bg-dark text-light border-dark"
+                           :property="property"
-                       id="propertyValue" name="propertyValue" placeholder="Enter value"
+                           @input="setValue(index, $event)"
-                       v-model="property.value">
+                           @remove="removeProperty(index)"/>
-                <i class="bi bi-x-circle-fill" @click="removeProperty(index)"></i>
-            </span>
         </div>
-        <select class="form-select form-control form-control-lg" id="property" name="property" v-model="property">
+        <select class="form-select form-control form-control-lg" name="property" v-model="property"
-            <option v-for="(property, index) in availableProperties" :key="index" :value="property">{{ property }}</option>
+                v-if="availableProperties.length > 0">
+            <option v-for="(property, index) in availableProperties" :key="index" :value="property">
+                {{ property.name }}
+            </option>
         </select>
-        <button class="btn btn-outline-secondary" type="button" @click="addProperty">Add</button>
+        <button class="btn btn-outline-secondary form-control-lg" type="button" @click="addProperty">Add</button>
     </div>
 </template>
 
 <style scoped>
-.form-control-inline {
-    display: inline;
-    width: auto;
-}
-
 .taglist {
     display: flex;
     flex-wrap: wrap;
     gap: 0.3rem;
-}
+    padding: .25rem;
-
-.form-control-xsm {
-    min-height: calc(.6rem);
-    padding: .0rem .5rem;
-    font-size: .6rem;
-    border-radius: .1rem;
-}
-
-input[type=number].form-control-xsm{
-    padding: 0 0 0 .5rem;
 }
 </style>
 
 <script>
 import * as BIcons from "bootstrap-icons-vue";
 import {mapActions, mapState} from "vuex";
+import PropertyBadge from "@/components/PropertyBadge.vue";
 
 export default {
     name: "PropertyField",
@@ -52,6 +39,7 @@ export default {
         }
     },
     components: {
+        PropertyBadge,
         ...BIcons
     },
     props: {
@@ -67,28 +55,46 @@ export default {
     computed: {
         ...mapState(["properties"]),
         availableProperties() {
-            return this.properties.filter(property => !this.localValue.map(p => p.name).includes(property));
+            if (!this.properties) return [];
+            if (!this.value) return this.properties;
+            return this.properties.filter(property => !this.value.map(p => p.name).includes(property.name));
         },
         localValue: {
             get() {
+                if (!this.value) return [];
                 return this.value;
             },
             set(value) {
                 this.$emit("input", value);
                 console.log("set", value);
             }
+        },
+        splicedValue() {
+            if (!this.value || !this.properties) return [];
+            return this.value.map(property => {
+                return {
+                    ...this.properties.find(p => p.name === property.name),
+                    value: property.value
+                }
+            })
         }
     },
     methods: {
         ...mapActions(["fetchProperties"]),
         addProperty() {
             if (this.property !== "") {
-                this.localValue.push({name: this.property, value: 0});
+                this.localValue.push({name: this.property.name, value: 0});
                 this.property = "";
             }
         },
         removeProperty(index) {
             this.localValue.splice(index, 1);
+        },
+        setValue(index, value) {
+            if (value.target)
+                return;
+            this.localValue[index].value = value;
+            return true;
         }
     },
     mounted() {

frontend/src/components/TagField.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="input-group">
-        <div class="taglist form-control">
+        <div class="taglist form-control form-control-lg">
             <span class="badge bg-dark" v-for="(tag, index) in value" :key="index">
                 {{ tag }}
-                <i class="bi bi-x-circle-fill" @click="removeTag(index)"></i>
+                <b-icon-x-circle @click="removeTag(index)"></b-icon-x-circle>
             </span>
         </div>
-        <select class="form-select" id="tag" name="tag" v-model="tag">
+        <select class="form-select form-control  form-control-lg" id="tag" name="tag" v-model="tag">
             <option v-for="tag in availableTags" :key="tag" :value="tag">{{ tag }}</option>
         </select>
-        <button class="btn btn-outline-secondary" type="button" @click="addTag">Add</button>
+        <button class="btn btn-outline-secondary form-control-lg" type="button" @click="addTag">Add</button>
     </div>
 </template>
 
@@ -18,6 +18,11 @@
     display: flex;
     flex-wrap: wrap;
     gap: 0.3rem;
+    padding: .25rem
+}
+
+.badge {
+    padding: .3rem .5rem
 }
 </style>
 

frontend/src/store.js

@@ -169,12 +169,12 @@ export default createStore({
         },
         async createInventoryItem({state, dispatch, getters}, item) {
             const servers = await dispatch('getHomeServers')
-            const data = {availability_policy: 'friends', category: 'other', ...item}
+            const data = {availability_policy: 'friends', ...item}
             return await servers.post(getters.signAuth, '/api/inventory_items/', data)
         },
         async updateInventoryItem({state, dispatch, getters}, item) {
             const servers = await dispatch('getHomeServers')
-            const data = {availability_policy: 'friends', category: 'other', ...item}
+            const data = {availability_policy: 'friends', ...item}
             return await servers.patch(getters.signAuth, '/api/inventory_items/' + item.id + '/', data)
         },
         async deleteInventoryItem({state, dispatch, getters}, item) {

frontend/src/views/InventoryEdit.vue

@@ -17,20 +17,10 @@
                                           placeholder="Enter description" v-model="item.description"></textarea>
                             </div>
                             <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>

frontend/src/views/InventoryNew.vue

@@ -17,20 +17,10 @@
                                           placeholder="Enter description" v-model="item.description"></textarea>
                             </div>
                             <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>