WIP: add color column, show tags

db/patch9.sql

@@ -2,6 +2,7 @@
 CREATE TABLE tag (
 	id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
 	name VARCHAR(255) NOT NULL,
+    color VARCHAR(255) NOT NULL,
 	created_date DATETIME DEFAULT (DATETIME('now')) NOT NULL
 );
 

server/model/tag.js

@@ -5,6 +5,7 @@ class Tag extends BeanModel {
         return {
             id: this._id,
             name: this._name,
+            color: this._color,
         };
     }
 }

src/components/Tag.vue

@@ -1,18 +1,38 @@
 <template>
-    <span class="p-2">{{ name }}:{{ value }}</span>
+    <div class="m-2 py-1 px-3 rounded d-inline-flex" :style="{ backgroundColor: item.color }">{{ displayText }}<span class="ps-1 btn-remove" @click="remove(item.id)"><font-awesome-icon icon="times" /></span></div>
 </template>
 
 <script>
 export default {
     props: {
-        name: {
-            type: String,
+        item: {
+            type: Object,
             required: true,
         },
-        value: {
-            type: String,
-            default: "",
+        remove: {
+            type: Function,
+            required: true,
+        }
     },
+    computed: {
+        displayText() {
+            if (this.value == "") {
+                return this.name;
+            } else {
+                return `${this.item.name}: ${this.item.value}`;
+            }
+        }
     }
 }
 </script>
+
+<style scoped>
+.btn-remove {
+    font-size: 0.9em;
+    opacity: 0.3;
+}
+
+.btn-remove:hover {
+    opacity: 1;
+}
+</style>

src/components/TagsManager.vue

@@ -1,15 +1,56 @@
 <template>
     <div>
-        <tag v-for="(item) in selectedTags" :key="item.name+item.value" :name="item.name" :value="item.value" />
+        <h4 class="mb-3">{{ $t("Tags") }}</h4>
+        <div class="mb-3 form-control disabled p-1 rounded-1">
+            <tag
+                v-for="item in selectedTags"
+                :key="item.id"
+                :item="item"
+                :remove="removeTag"
+            />
+        </div>
+        <div>
+            <select
+                id="snewDraftTagName"
+                v-model="newDraftTag.select"
+                class="form-select mb-2"
+                required
+            >
+                <option value="0" disabled selected>{{ $t("Add...") }}</option>
+                <option v-for="tag in tags" :key="tag.id" :value="tag.id">
+                    {{ tag.name }}
+                </option>
+                <option value="-1">{{ $t("New...") }}</option>
+            </select>
+            <div v-show="newDraftTag.select == -1" class="d-flex mb-2">
+                <div class="w-50 pe-2">
+                    <input class="form-control" placeholder="name" />
+                </div>
+                <div class="w-50 ps-2">
+                    <input class="form-control" placeholder="color" />
+                </div>
+            </div>
+            <input class="form-control mb-2" placeholder="value (optional)" />
+            <div class="mb-2">
+                <button
+                    class="btn btn-secondary float-end"
+                    :disabled="processing"
+                >
+                    {{ $t("Add") }}
+                </button>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
+import VueMultiselect from "vue-multiselect";
 import Tag from "../components/Tag.vue";
 
 export default {
     components: {
         Tag,
+        VueMultiselect,
     },
     props: {
         tags: {
@@ -23,20 +64,25 @@ export default {
     },
     data() {
         return {
+            processing: false,
             newTags: [],
+            newDraftTag: { select: 0 },
             selectedTags: this.preSelectedTags,
-        }
+        };
     },
     watch: {
         preSelectedTags(gotTags) {
             if (gotTags.length > 0 && this.selectedTags.length === 0) {
                 this.selectedTags = gotTags;
             }
-        }
-    }
-}
+        },
+    },
+    methods: {
+        removeTag(id) {
+            console.log(id + " not implemented yet");
+        },
+    },
+};
 </script>
 
-<style>
-
-</style>
+<style scoped></style>

src/icon.js

@@ -1,10 +1,10 @@
 import { library } from "@fortawesome/fontawesome-svg-core"
-import { faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp } from "@fortawesome/free-solid-svg-icons"
+import { faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTimes, faTrash, faList, faArrowAltCircleUp } from "@fortawesome/free-solid-svg-icons"
 //import { fa } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
 
 // Add Free Font Awesome Icons here
 // https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
-library.add(faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp);
+library.add(faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTimes, faTrash, faList, faArrowAltCircleUp);
 
 export { FontAwesomeIcon }