stash

frontend/src/components/PropertyField.vue

@@ -13,6 +13,27 @@
 </template>
 
 <style scoped>
+.form-control-inline {
+    display: inline;
+    width: auto;
+}
+
+.taglist {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+}
+
+.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>
@@ -23,6 +44,11 @@ import BadgeSelectField from "@/components/BadgeSelectField.vue";
 
 export default {
     name: "PropertyField",
+    data() {
+        return {
+            property: ""
+        }
+    },
     components: {
         BadgeSelectField,
         PropertyBadge,
@@ -52,6 +78,7 @@ export default {
             },
             set(value) {
                 this.$emit("input", value);
+                console.log("set", value);
             }
         },
         splicedValue() {

frontend/src/components/TagField.vue

@@ -25,6 +25,11 @@ import BadgeSelectField from "@/components/BadgeSelectField.vue";
 
 export default {
     name: "TagField",
+    data() {
+        return {
+            tag: ""
+        }
+    },
     components: {
         BadgeSelectField,
         ...BIcons
@@ -50,6 +55,7 @@ export default {
             },
             set(value) {
                 this.$emit("input", value);
+                console.log("set", value);
             }
         }
     },

frontend/src/federation.js

@@ -195,6 +195,58 @@ class ServerSet {
         }
         throw new Error('all servers failed')
     }
+
+    async delete(auth, target) {
+        if (!auth || typeof auth.buildAuthHeader !== 'function') {
+            throw new Error('no auth')
+        }
+        for (const server of this.servers) {
+            try {
+                if (this.unreachable_neighbors.queryUnreachable(server)) {
+                    continue
+                }
+                const url = "http://" + server + target // TODO https
+                return await fetch(url, {
+                    method: 'DELETE',
+                    headers: {
+                        ...auth.buildAuthHeader(url)
+                    },
+                    credentials: 'omit'
+                }).catch(err => this.unreachable_neighbors.unreachable(server)
+                ).then(response => response.json())
+            } catch (e) {
+                console.error('delete from server failed', server, e)
+            }
+        }
+        throw new Error('all servers failed')
+    }
+
+    async put(auth, target, data) {
+        if (!auth || typeof auth.buildAuthHeader !== 'function') {
+            throw new Error('no auth')
+        }
+        for (const server of this.servers) {
+            try {
+                if (this.unreachable_neighbors.queryUnreachable(server)) {
+                    continue
+                }
+                const url = "http://" + server + target // TODO https
+                return await fetch(url, {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        ...auth.buildAuthHeader(url)
+                    },
+                    credentials: 'omit',
+                    body: JSON.stringify(data)
+                }).catch(err => this.unreachable_neighbors.unreachable(server)
+                ).then(response => response.json())
+            } catch (e) {
+                console.error('put to server failed', server, e)
+            }
+        }
+        throw new Error('all servers failed')
+    }
 }
 
 class ServerSetUnion {

frontend/src/views/InventoryNew.vue

@@ -6,6 +6,24 @@
                     <div class="card">
                         <div class="card-header">Create New Item</div>
                         <div class="card-body">
+                            <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"
@@ -45,6 +63,9 @@
                                 </button>
                             </div>
                         </div>
+                        <div class="card">
+                            <button type="submit" class="btn btn-primary" @click="createInventoryItem(item)">Add</button>
+                        </div>
                     </div>
                 </div>
             </div>