From 01286aede8b66c14715d7e7dbea54cfd9db9759c Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Sat, 28 Oct 2023 04:35:45 +0200
Subject: [PATCH] nicer tags selection

---
 frontend/src/components/BadgeSelectField.vue | 206 +++++++++++++++++++
 frontend/src/components/TagField.vue         |  48 ++---
 frontend/src/federation.js                   |  10 +-
 frontend/src/store.js                        |   2 +-
 4 files changed, 233 insertions(+), 33 deletions(-)
 create mode 100644 frontend/src/components/BadgeSelectField.vue

diff --git a/frontend/src/components/BadgeSelectField.vue b/frontend/src/components/BadgeSelectField.vue
new file mode 100644
index 0000000..a86dc43
--- /dev/null
+++ b/frontend/src/components/BadgeSelectField.vue
@@ -0,0 +1,206 @@
+<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>
+        <!--button class="btn btn-outline-secondary form-control-lg" type="button" @click="chooseOption">Add</button-->
+    </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: "input"
+    },
+    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) {
+                console.log("set", value);
+            }
+        }
+    },
+    methods: {
+        chooseOption(option) {
+            this.$emit("input", 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>
\ No newline at end of file
diff --git a/frontend/src/components/TagField.vue b/frontend/src/components/TagField.vue
index 8969bab..7ee0987 100644
--- a/frontend/src/components/TagField.vue
+++ b/frontend/src/components/TagField.vue
@@ -1,43 +1,32 @@
 <template>
-    <div class="input-group">
-        <div class="taglist form-control form-control-lg">
-            <span class="badge bg-dark" v-for="(tag, index) in value" :key="index">
-                {{ tag }}
-                <b-icon-x-circle @click="removeTag(index)"></b-icon-x-circle>
+    <badge-select-field :value="this.value" :options="this.tags" @input="addTag" ref="badgeSelect">
+        <template v-slot:default="{option, index}">
+            <span class="badge bg-dark" @click="removeTag(index)">
+                {{ option }}
             </span>
-        </div>
-        <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 form-control-lg" type="button" @click="addTag">Add</button>
-    </div>
+        </template>
+    </badge-select-field>
 </template>
 
 <style scoped>
-.taglist {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.3rem;
-    padding: .25rem
+.badge {
+    padding: .3rem .5rem;
 }
 
-.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",
-    data() {
-        return {
-            tag: ""
-        }
-    },
     components: {
+        BadgeSelectField,
         ...BIcons
     },
     props: {
@@ -67,10 +56,15 @@ export default {
     },
     methods: {
         ...mapActions(["fetchTags"]),
-        addTag() {
-            if (this.tag !== "") {
-                this.localValue.push(this.tag);
-                this.tag = "";
+        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) {
diff --git a/frontend/src/federation.js b/frontend/src/federation.js
index f4553bd..ddf35e4 100644
--- a/frontend/src/federation.js
+++ b/frontend/src/federation.js
@@ -31,7 +31,7 @@ class ServerSet {
                 if (this.unreachable_neighbors.queryUnreachable(server)) {
                     continue
                 }
-                const url = "http://" + server + target // TODO https
+                const url = "https://" + server + target // TODO https
                 return await fetch(url, {
                     method: 'GET',
                     headers: {
@@ -59,7 +59,7 @@ class ServerSet {
                 if (this.unreachable_neighbors.queryUnreachable(server)) {
                     continue
                 }
-                const url = "http://" + server + target // TODO https
+                const url = "https://" + server + target // TODO https
                 return await fetch(url, {
                     method: 'POST',
                     headers: {
@@ -89,7 +89,7 @@ class ServerSet {
                 if (this.unreachable_neighbors.queryUnreachable(server)) {
                     continue
                 }
-                const url = "http://" + server + target // TODO https
+                const url = "https://" + server + target // TODO https
                 return await fetch(url, {
                     method: 'PATCH',
                     headers: {
@@ -119,7 +119,7 @@ class ServerSet {
                 if (this.unreachable_neighbors.queryUnreachable(server)) {
                     continue
                 }
-                const url = "http://" + server + target // TODO https
+                const url = "https://" + server + target // TODO https
                 return await fetch(url, {
                     method: 'PUT',
                     headers: {
@@ -149,7 +149,7 @@ class ServerSet {
                 if (this.unreachable_neighbors.queryUnreachable(server)) {
                     continue
                 }
-                const url = "http://" + server + target // TODO https
+                const url = "https://" + server + target // TODO https
                 return await fetch(url, {
                     method: 'DELETE',
                     headers: {
diff --git a/frontend/src/store.js b/frontend/src/store.js
index 9eb157f..6791827 100644
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@@ -252,7 +252,7 @@ export default createStore({
         },
         async pushFile({state, dispatch, getters}, {item_id, file}) {
             const servers = await dispatch('getHomeServers')
-            const data = await servers.post(getters.signAuth, '/api/item_files/'+item_id+'/', file)
+            const data = await servers.post(getters.signAuth, '/api/item_files/' + item_id + '/', file)
             if (data.hash) {
                 state.files.push(data)
                 return data