Infra-Mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-17 19:54:39 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Improve various tags validation logic

Browse Source
This commit is contained in:
Nelson Chan 2021-09-10 11:34:39 +08:00
parent e6669fbb9e
commit 73f4b8e177
1 changed files with 40 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/TagsManager.vue
View File

@ -76,7 +76,12 @@
</vue-multiselect> </vue-multiselect>
</div> </div>
</div> </div>
<input v-model="newDraftTag.value" class="form-control mb-2" :placeholder="$t('value (optional)')" /> <div class="mb-2">
<input v-model="newDraftTag.value" class="form-control" :class="{'is-invalid': newDraftTag.valueInvalid}" :placeholder="$t('value (optional)')" />
<div class="invalid-feedback">
{{ $t("Tag with this value already exist.") }}
</div>
</div>
<div class="mb-2"> <div class="mb-2">
<button <button
type="button" type="button"
@ -158,13 +163,17 @@ export default {
this.validateDraftTag(); this.validateDraftTag();
}, },
"newDraftTag.name": function (newName) { "newDraftTag.name": function (newName) {
this.newDraftTag.name = newName.trim(); this.newDraftTag.name = newName;
this.validateDraftTag(); this.validateDraftTag();
}, },
"newDraftTag.color": function (newColor) { "newDraftTag.color": function (newColor) {
this.newDraftTag.color = newColor; this.newDraftTag.color = newColor;
this.validateDraftTag(); this.validateDraftTag();
}, },
"newDraftTag.value": function (newValue) {
this.newDraftTag.value = newValue;
this.validateDraftTag();
},
}, },
mounted() { mounted() {
this.getExistingTags(); this.getExistingTags();
@ -182,16 +191,25 @@ export default {
deleteTag(item) { deleteTag(item) {
if (item.new) { if (item.new) {
// Undo Adding a new Tag // Undo Adding a new Tag
this.newTags = this.newTags.filter(tag => tag.name != item.name && tag.value != item.value); this.newTags = this.newTags.filter(tag => !(tag.name == item.name && tag.value == item.value));
} else { } else {
// Remove an Existing Tag // Remove an Existing Tag
this.deleteTags.push(item); this.deleteTags.push(item);
} }
}, },
validateDraftTag() { validateDraftTag() {
if (this.newDraftTag.select != null) { if (this.newTags.concat(this.preSelectedTags).filter(tag => (
tag.name == this.newDraftTag.select?.name && tag.value == this.newDraftTag.value
) || (
tag.name == this.newDraftTag.name && tag.value == this.newDraftTag.value
)).length > 0) {
// Try to add a tag with existing name and value
this.newDraftTag.valueInvalid = true;
this.newDraftTag.invalid = true;
} else if (this.newDraftTag.select != null) {
// Select an existing tag, no need to validate // Select an existing tag, no need to validate
this.newDraftTag.invalid = false; this.newDraftTag.invalid = false;
this.newDraftTag.valueInvalid = false;
} else if (this.existingTags.filter(tag => tag.name === this.newDraftTag.name).length > 0) { } else if (this.existingTags.filter(tag => tag.name === this.newDraftTag.name).length > 0) {
// Try to create new tag with existing name // Try to create new tag with existing name
this.newDraftTag.nameInvalid = true; this.newDraftTag.nameInvalid = true;
@ -204,6 +222,7 @@ export default {
// Looks valid // Looks valid
this.newDraftTag.invalid = false; this.newDraftTag.invalid = false;
this.newDraftTag.nameInvalid = false; this.newDraftTag.nameInvalid = false;
this.newDraftTag.valueInvalid = false;
} }
}, },
textColor(option) { textColor(option) {
@ -228,11 +247,22 @@ export default {
// Add new Tag // Add new Tag
this.newTags.push({ this.newTags.push({
color: this.newDraftTag.color.color, color: this.newDraftTag.color.color,
name: this.newDraftTag.name, name: this.newDraftTag.name.trim(),
value: this.newDraftTag.value, value: this.newDraftTag.value,
new: true, new: true,
}) })
} }
this.clearDraftTag();
},
clearDraftTag() {
this.newDraftTag = {
name: null,
select: null,
color: null,
value: "",
invalid: true,
nameInvalid: false,
};
}, },
addTagAsync(newTag) { addTagAsync(newTag) {
return new Promise((resolve) => { return new Promise((resolve) => {
@ -244,9 +274,9 @@ export default {
this.$root.getSocket().emit("addMonitorTag", tagId, monitorId, value, resolve); this.$root.getSocket().emit("addMonitorTag", tagId, monitorId, value, resolve);
}); });
}, },
deleteMonitorTagAsync(tagId, monitorId) { deleteMonitorTagAsync(tagId, monitorId, value) {
return new Promise((resolve) => { return new Promise((resolve) => {
this.$root.getSocket().emit("deleteMonitorTag", tagId, monitorId, resolve); this.$root.getSocket().emit("deleteMonitorTag", tagId, monitorId, value, resolve);
}); });
}, },
async submit(monitorId) { async submit(monitorId) {
@ -291,7 +321,7 @@ export default {
for (const deleteTag of this.deleteTags) { for (const deleteTag of this.deleteTags) {
let deleteMonitorTagResult; let deleteMonitorTagResult;
await this.deleteMonitorTagAsync(deleteTag.tag_id, deleteTag.monitor_id).then((res) => { await this.deleteMonitorTagAsync(deleteTag.tag_id, deleteTag.monitor_id, deleteTag.value).then((res) => {
if (!res.ok) { if (!res.ok) {
toast.error(res.msg); toast.error(res.msg);
deleteMonitorTagResult = false; deleteMonitorTagResult = false;
@ -306,6 +336,8 @@ export default {
} }
this.getExistingTags(); this.getExistingTags();
this.newTags = [];
this.deleteTags = [];
this.processing = false; this.processing = false;
} }
}, },