Feat: Add simple validation on input

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,
         };
     },
 
@@ -165,6 +180,11 @@ export default {
                 this.selectedColor.color = to;
             }
         },
+        "tag.name"(to, from) {
+            if (to != null) {
+                this.validate();
+            }
+        },
         selectedColor(to, from) {
             if (to != null) {
                 this.tag.color = to.color;
@@ -212,6 +232,20 @@ export default {
             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
@@ -243,6 +277,11 @@ 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) {

src/components/settings/Tags.vue

@@ -23,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>