Merge pull request #2764 from chakflying/feat/add-new-tag

Feat: Add "Add New Tag" button in settings

src/components/TagEditDialog.vue

@@ -12,7 +12,17 @@
                     <div class="modal-body">
                         <div class="mb-3">
                             <label for="tag-name" class="form-label">{{ $t("Name") }}</label>
-                            <input id="tag-name" v-model="tag.name" type="text" class="form-control" required>
+                            <input
+                                id="tag-name"
+                                v-model="tag.name"
+                                type="text"
+                                class="form-control"
+                                :class="{'is-invalid': nameInvalid}"
+                                required
+                            >
+                            <div class="invalid-feedback">
+                                {{ $t("Tag with this name already exist.") }}
+                            </div>
                         </div>
 
                         <div class="mb-3">
@@ -112,7 +122,11 @@ export default {
         updated: {
             type: Function,
             default: () => {},
-        }
+        },
+        existingTags: {
+            type: Array,
+            default: () => [],
+        },
     },
     data() {
         return {
@@ -132,6 +146,7 @@ export default {
             removingMonitor: [],
             addingMonitor: [],
             selectedAddMonitor: null,
+            nameInvalid: false,
         };
     },
 
@@ -160,11 +175,16 @@ export default {
     watch: {
         // Set color option to "Custom" when a unknown color is entered
         "tag.color"(to, from) {
-            if (colorOptions(this).find(x => x.color === to) == null) {
+            if (to !== "" && colorOptions(this).find(x => x.color === to) == null) {
                 this.selectedColor.name = this.$t("Custom");
                 this.selectedColor.color = to;
             }
         },
+        "tag.name"(to, from) {
+            if (to != null) {
+                this.validate();
+            }
+        },
         selectedColor(to, from) {
             if (to != null) {
                 this.tag.color = to.color;
@@ -197,6 +217,35 @@ export default {
             this.$refs.confirmDelete.show();
         },
 
+        /**
+         * Reset the editTag form
+         */
+        reset() {
+            this.selectedColor = null;
+            this.tag = {
+                id: null,
+                name: "",
+                color: "",
+            };
+            this.monitors = [];
+            this.removingMonitor = [];
+            this.addingMonitor = [];
+        },
+
+        /**
+         * Check for existing tags of the same name, set invalid input
+         * @returns {boolean} True if editing tag is valid
+         */
+        validate() {
+            this.nameInvalid = false;
+            const sameName = this.existingTags.find((existingTag) => existingTag.name === this.tag.name);
+            if (sameName != null && sameName.id !== this.tag.id) {
+                this.nameInvalid = true;
+                return false;
+            }
+            return true;
+        },
+
         /**
          * Load tag information for display in the edit dialog
          * @param {Object} tag tag object to edit
@@ -228,6 +277,27 @@ export default {
             this.processing = true;
             let editResult = true;
 
+            if (!this.validate()) {
+                this.processing = false;
+                return;
+            }
+
+            if (this.tag.id == null) {
+                await this.addTagAsync(this.tag).then((res) => {
+                    if (!res.ok) {
+                        this.$root.toastRes(res.msg);
+                        editResult = false;
+                    } else {
+                        this.tag.id = res.tag.id;
+                        this.updated();
+                    }
+                });
+            }
+
+            if (!editResult) {
+                return;
+            }
+
             for (let addId of this.addingMonitor) {
                 await this.addMonitorTagAsync(this.tag.id, addId, "").then((res) => {
                     if (!res.ok) {
@@ -263,9 +333,9 @@ export default {
          * Delete the editing tag from server
          * @returns {void}
          */
-        deleteTag() {
+        async deleteTag() {
             this.processing = true;
-            this.$root.getSocket().emit("deleteTag", this.tag.id, (res) => {
+            await this.deleteTagAsync(this.tag.id).then((res) => {
                 this.$root.toastRes(res);
                 this.processing = false;
 
@@ -309,6 +379,28 @@ export default {
             return getMonitorRelativeURL(id);
         },
 
+        /**
+         * Add a tag asynchronously
+         * @param {Object} newTag Object representing new tag to add
+         * @returns {Promise<void>}
+         */
+        addTagAsync(newTag) {
+            return new Promise((resolve) => {
+                this.$root.getSocket().emit("addTag", newTag, resolve);
+            });
+        },
+
+        /**
+         * Delete a tag asynchronously
+         * @param {number} tagId ID of tag to delete
+         * @returns {Promise<void>}
+         */
+        deleteTagAsync(tagId) {
+            return new Promise((resolve) => {
+                this.$root.getSocket().emit("deleteTag", tagId, resolve);
+            });
+        },
+
         /**
          * Add a tag to a monitor asynchronously
          * @param {number} tagId ID of tag to add

src/components/settings/Tags.vue

@@ -1,5 +1,9 @@
 <template>
-    <div>
+    <div class="my-4">
+        <div class="mx-4 pt-1 my-3">
+            <button class="btn btn-primary" @click.stop="addTag"><font-awesome-icon icon="plus" /> {{ $t("Add New Tag") }}</button>
+        </div>
+
         <div class="tags-list my-3">
             <div v-for="(tag, index) in tagsList" :key="tag.id" class="d-flex align-items-center mx-4 py-1 tags-list-row" :disabled="processing" @click="editTag(index)">
                 <div class="col-5 ps-1">
@@ -19,7 +23,7 @@
             </div>
         </div>
 
-        <TagEditDialog ref="tagEditDialog" :updated="tagsUpdated" />
+        <TagEditDialog ref="tagEditDialog" :updated="tagsUpdated" :existing-tags="tagsList" />
         <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteTag">
             {{ $t("confirmDeleteTagMsg") }}
         </Confirm>
@@ -100,6 +104,15 @@ export default {
             this.$refs.confirmDelete.show();
         },
 
+        /**
+         * Show dialog for adding a new tag
+         * @returns {void}
+         */
+        addTag() {
+            this.$refs.tagEditDialog.reset();
+            this.$refs.tagEditDialog.show();
+        },
+
         /**
          * Show dialog for editing a tag
          * @param {number} index index of the tag to edit in the local tagsList
@@ -149,10 +162,10 @@ export default {
 
 .tags-list .tags-list-row {
     cursor: pointer;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+    border-top: 1px solid rgba(0, 0, 0, 0.125);
 
     .dark & {
-        border-bottom: 1px solid $dark-border-color;
+        border-top: 1px solid $dark-border-color;
     }
 
     &:hover {
@@ -164,8 +177,4 @@ export default {
     }
 }
 
-.tags-list .tags-list-row:last-child {
-    border: none;
-}
-
 </style>