Feat: Add simple validation on input

This commit is contained in:
Nelson Chan 2023-02-14 07:16:18 +08:00
parent 51dbb23230
commit 33bb9f1ade
2 changed files with 42 additions and 3 deletions

View File

@ -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) {

View File

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