stash

frontend/src/assets/css/toolshed.css

@@ -13394,7 +13394,8 @@ a.list-group-item {
     min-width: 0;
     min-height: 100vh;
     transition: margin-left .35s ease-in-out, left .35s ease-in-out, margin-right .35s ease-in-out, right .35s ease-in-out;
-    background: #f7f7fc;
+    /*background: #f7f7fc;*/
+    background-color: #ddd;
     flex-direction: column;
     overflow: hidden;
     border-top-left-radius: 0;

frontend/src/components/PropertyBadge.vue

@@ -76,7 +76,7 @@ export default {
         }
     },
     property: {
-        prop: "value",
+        prop: "property",
         event: "input"
     },
     computed: {
@@ -85,7 +85,7 @@ export default {
                 return this.property.value
             },
             set(value) {
-                this.$emit("input", value)
+                this.$emit("input", {...this.property,value})
             }
         },
         prettyDescription() {

frontend/src/components/PropertyField.vue

@@ -1,19 +1,23 @@
 <template>
-    <div class="input-group">
+    <div>
-        <div class="taglist form-control form-control-lg">
+        <div class="input-group">
-            <PropertyBadge v-for="(property, index) in splicedValue"
+            <div class="taglist form-control form-control-lg">
-                           :key="index"
+                <PropertyBadge v-for="(property, index) in splicedValue"
-                           :property="property"
+                               :key="index"
-                           @input="setValue(index, $event)"
+                               :property="property"
-                           @remove="removeProperty(index)"/>
+                               @input="setValue(index, $event)"
+                               @remove="removeProperty(index)"/>
+            </div>
         </div>
-        <select class="form-select form-control form-control-lg" name="property" v-model="property"
+        <badge-select-field :value="this.splicedValue" :options="this.properties.map(p => p.name)" @input="addProperty"
-                v-if="availableProperties.length > 0">
+                            ref="badgeSelect">
-            <option v-for="(property, index) in availableProperties" :key="index" :value="property">
+            <template v-slot:default="{option, index}">
-                {{ property.name }}
+                <PropertyBadge :key="index"
-            </option>
+                               :property="option"
-        </select>
+                               @input="setValue(index, $event)"
-        <button class="btn btn-outline-secondary form-control-lg" type="button" @click="addProperty">Add</button>
+                               @remove="removeProperty(index)"/>
+            </template>
+        </badge-select-field>
     </div>
 </template>
 
@@ -30,15 +34,12 @@
 import * as BIcons from "bootstrap-icons-vue";
 import {mapActions, mapState} from "vuex";
 import PropertyBadge from "@/components/PropertyBadge.vue";
+import BadgeSelectField from "@/components/BadgeSelectField.vue";
 
 export default {
     name: "PropertyField",
-    data() {
-        return {
-            property: ""
-        }
-    },
     components: {
+        BadgeSelectField,
         PropertyBadge,
         ...BIcons
     },
@@ -81,9 +82,9 @@ export default {
     },
     methods: {
         ...mapActions(["fetchProperties"]),
-        addProperty() {
+        addProperty(property) {
-            if (this.property !== "") {
+            if (property !== "") {
-                this.localValue.push({name: this.property.name, value: 0});
+                this.localValue.push({name: property, value: 0});
                 this.property = "";
             }
         },

frontend/src/components/Sidebar.vue

@@ -21,6 +21,12 @@
                         <span class="align-middle">Friends</span>
                     </router-link>
                 </li>
+                <li class="sidebar-item">
+                    <router-link to="/admin" class="sidebar-link">
+                        <b-icon-gear class="bi-valign-middle"></b-icon-gear>
+                        <span class="align-middle">Admin</span>
+                    </router-link>
+                </li>
             </ul>
         </div>
     </nav>

frontend/src/router.js

@@ -11,6 +11,7 @@ import Search from "@/views/Search.vue";
 import InventoryNew from "@/views/InventoryNew.vue";
 import InventoryEdit from "@/views/InventoryEdit.vue";
 import InventoryDetail from "@/views/InventoryDetail.vue";
+import Admin from "@/views/Admin.vue";
 
 
 const routes = [
@@ -22,6 +23,7 @@ const routes = [
     {path: '/inventory/:id/edit', component: InventoryEdit, meta: {requiresAuth: true}, props: true},
     {path: '/inventory/new', component: InventoryNew, meta: {requiresAuth: true}},
     {path: '/friends', component: Friends, meta: {requiresAuth: true}},
+    {path: '/admin', component: Admin, meta: {requiresAuth: true}},
     {path: '/search/:query', component: Search, meta: {requiresAuth: true}, props: true},
     {path: '/login', component: Login, meta: {requiresAuth: false}},
     {path: '/register', component: Register, meta: {requiresAuth: false}},

frontend/src/store.js

@@ -24,6 +24,9 @@ export default createStore({
         tags: [],
         properties: [],
         files: [],
+        categories: [],
+        availability_policies: [],
+        domains: [],
     },
     mutations: {
         setUser(state, user) {
@@ -68,6 +71,15 @@ export default createStore({
         setProperties(state, properties) {
             state.properties = properties;
         },
+        setCategories(state, categories) {
+            state.categories = categories;
+        },
+        setAvailabilityPolicies(state, availability_policies) {
+            state.availability_policies = availability_policies;
+        },
+        setDomains(state, domains) {
+            state.domains = domains;
+        },
         setFiles(state, files) {
             state.files = files;
         },
@@ -312,7 +324,8 @@ export default createStore({
             commit('setTags', data.tags)
             commit('setProperties', data.properties)
             commit('setCategories', data.categories)
-            commit('setAvailabilityPolicies', data.availability_policies)
+            commit('setAvailabilityPolicies', data.policies)
+            commit('setDomains', data.domains)
             state.last_load.tags = Date.now()
             state.last_load.properties = Date.now()
             state.last_load.categories = Date.now()

frontend/src/views/Admin.vue

@@ -0,0 +1,102 @@
+<template>
+    <BaseLayout>
+        <main class="content">
+            <div class="container-fluid p-0">
+                <h1 class="h3 mb-3">Admin</h1>
+                <div class="row">
+                    <div class="col-12 col-xl-6">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="card-title">Tags</h5>
+                            </div>
+                            <div class="card-body">
+                                <ul>
+                                    <li v-for="tag in tags" :key="tag.id">
+                                        {{ tag }}
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 col-xl-6">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="card-title">Properties</h5>
+                            </div>
+                            <div class="card-body">
+                                <ul>
+                                    <li v-for="property in properties" :key="property.id">
+                                        {{ property.name }} ({{ property.unit_name }}, {{ property.unit_symbol }})
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="card-title">Categories</h5>
+                            </div>
+                            <div class="card-body">
+                                <ul>
+                                    <li v-for="category in categories" :key="category.id">
+                                        {{ category }}
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="card-title">Domains</h5>
+                            </div>
+                            <div class="card-body">
+                                <ul>
+                                    <li v-for="domain in domains" :key="domain.id">
+                                        {{ domain }}
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="card-title">Availability Policies</h5>
+                            </div>
+                            <div class="card-body">
+                                <ul>
+                                    <li v-for="policy in availability_policies" :key="policy.id">
+                                        {{ policy }}
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </BaseLayout>
+</template>
+
+<script>
+import {mapActions, mapState} from "vuex";
+import * as BIcons from "bootstrap-icons-vue";
+import BaseLayout from "@/components/BaseLayout.vue";
+
+export default {
+    name: "Inventory",
+    components: {
+        BaseLayout,
+        ...BIcons
+    },
+    computed: {
+        ...mapState(["tags", "properties", "categories", "availability_policies", "domains"]),
+    },
+    methods: {
+        ...mapActions(["fetchInfo"]),
+    },
+    async mounted() {
+        await this.fetchInfo();
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/vite.config.js

@@ -32,22 +32,19 @@ export default defineConfig({
         },*/
         proxy: {
             '^/api/': {
-                target: "http://127.0.0.1:8000/",
+                target: "https://toolshed.j3d1.de:8000/",
             },
             '^/auth/': {
-                target: "http://127.0.0.1:8000/",
+                target: "https://toolshed.j3d1.de:8000/",
-            },
-            '^/admin/': {
-                target: "http://127.0.0.1:8000/",
             },
             '^/docs/': {
-                target: "http://127.0.0.1:8000/",
+                target: "https://toolshed.j3d1.de:8000/",
             },
             '^/static/': {
-                target: "http://127.0.0.1:8000/",
+                target: "https://toolshed.j3d1.de:8000/",
             },
             '^/media/': {
-                target: "http://127.0.0.1:8000/",
+                target: "https://toolshed.j3d1.de:8000/",
             },
             '^/wiki/': {
                 target: "http://127.0.0.1:8080/",