add item edit page

frontend/src/components/BadgeSelectField.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="input-group">
+        <div class="badge-list form-control form-control-lg" style="position: relative;">
+            <span v-for="(option, index) in value" :key="index">
+                <slot :option="option" :index="index"></slot>
+            </span>
+            <input type="text" class="invisible-input" v-model="textinput" ref="input"
+                   @keydown="keyDown">
+            <ul class="dropdown-menu" style="position: absolute; top: 100%; left: 0; width: 100%; z-index: 100;"
+                v-if="filteredOption.length > 0">
+                <li v-for="(option, index) in filteredOption" :key="index"
+                    @mousedown="chooseOption(option)" @mouseover="selectOption(option)"
+                    :class="{chosen: localValue.includes(option), selected: selectedTag === option, 'dropdown-item': true}">
+                    {{ option }}
+                    <b>
+                        <b-icon-check class="checkmark"></b-icon-check>
+                        <b-icon-x class="cross"></b-icon-x>
+                        <b-icon-plus class="plus"></b-icon-plus>
+                    </b>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.badge-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+    padding: 0 .25rem;
+}
+
+.badge-list > * {
+    flex: 0 1 auto;
+    padding: .25rem 0;
+}
+
+.badge-list > input.invisible-input {
+    flex: 1 1 auto;
+}
+
+input.invisible-input {
+    border: none;
+    outline: none;
+    color: #495057;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right .7rem center;
+    background-size: 16px 12px;
+}
+
+.invisible-input:focus ~ .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    display: none;
+    overflow-x: auto;
+    max-height: 50vh;
+}
+
+.checkmark, .cross, .plus {
+    display: none;
+}
+
+.dropdown-item.selected {
+    background-color: var(--bs-primary);
+    color: var(--bs-light);
+
+    & .plus {
+        display: inline-block;
+    }
+}
+
+.dropdown-item.chosen {
+    & .checkmark {
+        display: inline-block;
+    }
+}
+
+.dropdown-item.chosen.selected {
+    background-color: var(--bs-danger);
+    color: var(--bs-light);
+
+    & .cross {
+        display: inline-block;
+    }
+
+    & .checkmark, & .plus {
+        display: none;
+    }
+}
+</style>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+
+export default {
+    name: "BadgeSelectField",
+    data() {
+        return {
+            textinput: "",
+            selectedTag: ""
+        }
+    },
+    components: {
+        ...BIcons
+    },
+    props: {
+        value: {
+            type: Array,
+            required: true
+        },
+        options: {
+            type: Array,
+            required: true
+        }
+    },
+    model: {
+        prop: "value",
+        event: "addElement"
+    },
+    computed: {
+        availableTags() {
+            return this.options.filter(option => !this.localValue.includes(option));
+        },
+        filteredOption() {
+            return this.options.filter(option => option.includes(this.textinput) || option === this.selectedTag);
+        },
+        localValue: {
+            get() {
+                return this.value;
+            },
+            set(value) {
+            }
+        }
+    },
+    methods: {
+        chooseOption(option) {
+            this.$emit("addElement", option);
+        },
+        resetSelection() {
+            this.textinput = "";
+            this.selectedTag = null;
+        },
+        selectOption(option) {
+            this.selectedTag = option;
+        },
+        keyDown(event) {
+            const key = event.key;
+            if (key === "Enter") {
+                event.preventDefault();
+                this.chooseOption(this.selectedTag);
+                this.$refs.input.blur();
+            } else if (key === "ArrowDown") {
+                event.preventDefault();
+                if (this.selectedTag === "") {
+                    this.selectedTag = this.filteredOption[0];
+                } else {
+                    const index = this.filteredOption.indexOf(this.selectedTag);
+                    if (index < this.filteredOption.length - 1) {
+                        this.selectedTag = this.filteredOption[index + 1];
+                    } else {
+                        this.selectedTag = this.filteredOption[0];
+                    }
+                    setTimeout(() => {
+                        const element = this.$el.querySelector(".selected");
+                        if (element) {
+                            element.scrollIntoView({block: "nearest"});
+                        }
+                    }, 0);
+                }
+            } else if (key === "ArrowUp") {
+                event.preventDefault();
+                if (this.selectedTag === "") {
+                    this.selectedTag = this.filteredOption[this.filteredOption.length - 1];
+                } else {
+                    const index = this.filteredOption.indexOf(this.selectedTag);
+                    if (index > 0) {
+                        this.selectedTag = this.filteredOption[index - 1];
+                    } else {
+                        this.selectedTag = this.filteredOption[this.filteredOption.length - 1];
+                    }
+                    setTimeout(() => {
+                        const element = this.$el.querySelector(".selected");
+                        if (element) {
+                            element.scrollIntoView({block: "nearest"});
+                        }
+                    }, 0);
+                }
+            } else if (key === "ArrowRight") {
+                if (event.target.selectionStart === this.textinput.length) {
+                    event.preventDefault();
+                    this.chooseOption(this.selectedTag);
+                }
+            } else if (key === "Escape") {
+                event.preventDefault();
+                this.$refs.input.blur();
+            }
+        }
+    }
+}
+</script>

frontend/src/components/PropertyBadge.vue

@@ -0,0 +1,115 @@
+<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" @input.prevent="inputChange"
+               :value="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 pl-1">
+            <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
+    },
+    data() {
+        return {
+            localValue: this.property.value
+        }
+    },
+    props: {
+        property: {
+            type: Object,
+            required: true
+        }
+    },
+    property: {
+        prop: "property",
+        event: "modelChange"
+    },
+    computed: {
+        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: {
+        inputChange(event) {
+            this.localValue = event.target.value
+            this.$emit("modelChange", {...this.property, value: this.localValue})
+        },
+        removeProperty() {
+            this.$emit("remove")
+        }
+    },
+}
+</script>

frontend/src/components/PropertyField.vue

@@ -0,0 +1,89 @@
+<template>
+    <div>
+        <badge-select-field :value="this.splicedValue" :options="this.properties.map(p => p.name)" @addElement="addProperty"
+                            ref="badgeSelect">
+            <template v-slot:default="{option, index}">
+                <PropertyBadge :key="index"
+                               :property="option"
+                               @modelChange="setValue(index, $event)"
+                               @remove="removeProperty(index)"/>
+            </template>
+        </badge-select-field>
+    </div>
+</template>
+
+<style scoped>
+</style>
+
+<script>
+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",
+    components: {
+        BadgeSelectField,
+        PropertyBadge,
+        ...BIcons
+    },
+    props: {
+        value: {
+            type: Array,
+            required: true
+        }
+    },
+    model: {
+        prop: "value",
+        event: "input"
+    },
+    computed: {
+        ...mapState(["properties"]),
+        availableProperties() {
+            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);
+            }
+        },
+        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(property) {
+            if (property !== "") {
+                this.localValue.push({name: property, value: 0});
+                this.property = "";
+            }
+        },
+        removeProperty(index) {
+            this.localValue.splice(index, 1);
+        },
+        setValue(index, value) {
+            if (value.target)
+                return;
+            this.localValue[index] = value;
+            return true;
+        }
+    },
+    mounted() {
+        this.fetchProperties();
+    }
+}
+</script>

frontend/src/components/TagField.vue

@@ -0,0 +1,77 @@
+<template>
+    <badge-select-field :value="this.value" :options="this.tags" @addElement="addTag" ref="badgeSelect">
+        <template v-slot:default="{option, index}">
+            <span class="badge bg-dark" @click="removeTag(index)">
+                {{ option }}
+            </span>
+        </template>
+    </badge-select-field>
+</template>
+
+<style scoped>
+.badge {
+    padding: .3rem .5rem;
+}
+
+.badge:hover {
+    background-color: var(--bs-danger) !important;
+}
+</style>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+import {mapActions, mapState} from "vuex";
+import BadgeSelectField from "@/components/BadgeSelectField.vue";
+
+export default {
+    name: "TagField",
+    components: {
+        BadgeSelectField,
+        ...BIcons
+    },
+    props: {
+        value: {
+            type: Array,
+            required: true
+        }
+    },
+    model: {
+        prop: "value",
+        event: "input"
+    },
+    computed: {
+        ...mapState(["tags"]),
+        availableTags() {
+            return this.tags.filter(tag => !this.localValue.includes(tag));
+        },
+        localValue: {
+            get() {
+                return this.value;
+            },
+            set(value) {
+                this.$emit("input", value);
+            }
+        }
+    },
+    methods: {
+        ...mapActions(["fetchTags"]),
+        addTag(tag) {
+            if (this.localValue.includes(tag)) {
+                this.localValue.splice(this.localValue.indexOf(tag), 1);
+                this.$refs.badgeSelect.resetSelection();
+            } else if (this.availableTags.includes(tag)) {
+                this.localValue.push(tag);
+                this.$refs.badgeSelect.resetSelection();
+            }else{
+                // input does not match any tag
+            }
+        },
+        removeTag(index) {
+            this.localValue.splice(index, 1);
+        }
+    },
+    mounted() {
+        this.fetchTags();
+    }
+}
+</script>

frontend/src/router.js

@@ -6,12 +6,14 @@ import store from '@/store';
 import Friends from "@/views/Friends.vue";
 import Inventory from '@/views/Inventory.vue';
 import InventoryDetail from "@/views/InventoryDetail.vue";
+import InventoryEdit from "./views/InventoryEdit.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: '/inventory/:id/edit', component: InventoryEdit, 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/scss/_card.scss

@@ -9,6 +9,7 @@
 .card-header {
   background-color: map-get($theme-colors, background-1);
   border-bottom: 0 solid transparent;
+  padding: 1rem 1.25rem;
 }
 
 .card-title {

frontend/src/scss/_tags.scss

@@ -0,0 +1,3 @@
+.badge {
+  color: #fff;
+}

frontend/src/scss/toolshed.scss

@@ -90,6 +90,7 @@ $body-color: $gray-700;
 
 @import "card";
 @import "forms";
+@import "tags";
 
 #root, body, html {
   height: 100%;

frontend/src/store.js

@@ -19,6 +19,10 @@ export default createStore({
         all_friends_servers: null,
         resolver: new FallBackResolver(),
         unreachable_neighbors: new NeighborsCache(),
+        tags: [],
+        properties: [],
+        files: [],
+        categories: [],
         availability_policies: [],
     },
     mutations: {
@@ -58,9 +62,21 @@ export default createStore({
         setAllFriendsServers(state, servers) {
             state.all_friends_servers = servers;
         },
+        setTags(state, tags) {
+            state.tags = tags;
+        },
+        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;
+        },
         logout(state) {
             state.user = null;
             state.token = null;
@@ -144,6 +160,18 @@ export default createStore({
             commit('setInventoryItems', {url: '/', items})
             return items
         },
+        async updateInventoryItem({state, dispatch, getters}, item) {
+            const servers = await dispatch('getHomeServers')
+            const data = {availability_policy: 'friends', ...item}
+            data.files = data.files.map(file => file.id)
+            return await servers.patch(getters.signAuth, '/api/inventory_items/' + item.id + '/', data)
+        },
+        async deleteInventoryItem({state, dispatch, getters}, item) {
+            const servers = await dispatch('getHomeServers')
+            const ret = await servers.delete(getters.signAuth, '/api/inventory_items/' + item.id + '/')
+            dispatch('fetchInventoryItems')
+            return ret
+        },
         async fetchFriends({commit, dispatch, getters, state}) {
             const servers = await dispatch('getHomeServers')
             const data = await servers.get(getters.signAuth, '/api/friends/')
@@ -197,6 +225,71 @@ export default createStore({
             const servers = await dispatch('getHomeServers')
             return await servers.delete(getters.signAuth, '/api/friends/' + id + '/')
         },
+        async fetchTags({state, commit, dispatch, getters}) {
+            if (state.last_load.tags > Date.now() - 1000 * 60 * 60 * 24) {
+                return state.tags
+            }
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.get(getters.signAuth, '/api/tags/')
+            commit('setTags', data)
+            state.last_load.tags = Date.now()
+            return data
+        },
+        async fetchProperties({state, commit, dispatch, getters}) {
+            if (state.last_load.properties > Date.now() - 1000 * 60 * 60 * 24) {
+                return state.properties
+            }
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.get(getters.signAuth, '/api/properties/')
+            commit('setProperties', data)
+            state.last_load.properties = Date.now()
+            return data
+        },
+        async fetchCategories({state, commit, dispatch, getters}) {
+            if (state.last_load.categories > Date.now() - 1000 * 60 * 60 * 24) {
+                return state.categories
+            }
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.get(getters.signAuth, '/api/categories/')
+            commit('setCategories', data)
+            state.last_load.categories = Date.now()
+            return data
+        },
+        async fetchAvailabilityPolicies({state, commit, dispatch, getters}) {
+            if (state.last_load.availability_policies > Date.now() - 1000 * 60 * 60 * 24) {
+                return state.availability_policies
+            }
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.get(getters.signAuth, '/api/availability_policies/')
+            commit('setAvailabilityPolicies', data.map(policy => ({slug: policy[0], text: policy[1]})))
+            state.last_load.availability_policies = Date.now()
+            return data
+        },
+        async fetchInfo({state, commit, dispatch, getters}) {
+            const last_load_info = Math.min(
+                state.last_load.tags,
+                state.last_load.properties,
+                state.last_load.categories,
+                state.last_load.availability_policies)
+            if (last_load_info > Date.now() - 1000 * 60 * 60 * 24) {
+                return state.info
+            }
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.get(getters.signAuth, '/api/info/')
+            commit('setTags', data.tags)
+            commit('setProperties', data.properties)
+            commit('setCategories', data.categories)
+            commit('setAvailabilityPolicies', data.availability_policies.map(policy => ({
+                slug: policy[0],
+                text: policy[1]
+            })))
+            commit('setDomains', data.domains)
+            state.last_load.tags = Date.now()
+            state.last_load.properties = Date.now()
+            state.last_load.categories = Date.now()
+            state.last_load.availability_policies = Date.now()
+            return data
+        }
     },
     getters: {
         isLoggedIn(state) {

frontend/src/views/Inventory.vue

@@ -25,6 +25,12 @@
                                     <td class="d-none d-md-table-cell">{{ item.availability_policy }}</td>
                                     <td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>
                                     <td class="table-action">
+                                        <router-link :to="`/inventory/${item.id}/edit`">
+                                            <b-icon-pencil-square></b-icon-pencil-square>
+                                        </router-link>
+                                        <a :href="`/inventory/${item.id}/delete`" @click.prevent="deleteInventoryItem(item)">
+                                            <b-icon-trash></b-icon-trash>
+                                        </a>
                                     </td>
                                 </tr>
                                 </tbody>

frontend/src/views/InventoryDetail.vue

@@ -28,6 +28,18 @@
                             </div>
                         </div>
                     </div>
+                    <div class="card">
+                        <button class="btn btn-primary" @click="$router.push('/inventory/' + id + '/edit')">
+                            <b-icon-pencil-square></b-icon-pencil-square>
+                            Edit
+                        </button>
+                        <button type="submit" class="btn btn-danger"
+                                @click="deleteInventoryItem(item).then(() => $router.push('/inventory'))">
+                            <b-icon-trash></b-icon-trash>
+                            Delete
+                        </button>
+                    </div>
+
                 </div>
             </div>
         </main>

frontend/src/views/InventoryEdit.vue

@@ -0,0 +1,104 @@
+<template>
+    <BaseLayout>
+        <main class="content">
+            <div class="row">
+                <div class="col">
+                    <div class="card">
+                        <div class="card-header">Edit Item</div>
+                        <div class="card-body">
+                            <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="tags" class="form-label">Tags</label>
+                                <tag-field :value="item.tags"></tag-field>
+                            </div>
+                            <div class="mb-3">
+                                <label for="property" class="form-label">Property</label>
+                                <property-field :value="item.properties"></property-field>
+                            </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.owned_quantity">
+                            </div>
+                            <div class="mb-3">
+                                <label for="availablity_policy" class="form-label">Availablity Policy</label>
+                                <select class="form-select" id="availablity_policy" name="availablity_policy"
+                                        v-model="item.availability_policy">
+                                    <option v-for="policy in availability_policies" :value="policy.slug"
+                                            :selected="policy.slug === item.availability_policy">
+                                        {{ policy.text }}
+                                    </option>
+                                </select>
+                            </div>
+                            <div class="mb-3">
+                                <button type="submit" class="btn btn-primary" style="width: 100%"
+                                        @click="updateInventoryItem(item)">Update
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </BaseLayout>
+</template>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+import {mapActions, mapGetters, mapState} from "vuex";
+import BaseLayout from "@/components/BaseLayout.vue";
+import TagField from "@/components/TagField.vue";
+import PropertyField from "@/components/PropertyField.vue";
+
+export default {
+    name: "InventoryEdit",
+    components: {
+        BaseLayout,
+        TagField,
+        PropertyField,
+        ...BIcons
+    },
+    props: {
+        id: {
+            type: String,
+            required: true
+        }
+    },
+    computed: {
+        ...mapGetters(["inventory_items"]),
+        ...mapState(["availability_policies"]),
+        item() {
+            return {
+                tags: [],
+                properties: [],
+                name: "",
+                description: "",
+                owned_quantity: 0,
+                image: "",
+                files: [],
+                ...this.inventory_items.find(item => item.id === parseInt(this.id))
+            }
+        }
+    },
+    methods: {
+        ...mapActions(["fetchInventoryItems", "updateInventoryItem", "fetchInfo"]),
+    },
+    async mounted() {
+        await this.fetchInfo();
+        await this.fetchInventoryItems();
+    }
+}
+</script>
+
+<style scoped>
+
+</style>