Feat: Add "Add New Tag" button in settings

src/components/TagEditDialog.vue

@@ -160,7 +160,7 @@ 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;
             }
@@ -197,6 +197,21 @@ 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 = [];
+        },
+
         /**
          * Load tag information for display in the edit dialog
          * @param {Object} tag tag object to edit
@@ -228,6 +243,22 @@ export default {
             this.processing = true;
             let editResult = true;
 
+            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 +294,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 +340,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">
@@ -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>