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

Feat: Add "Add New Tag" button in settings
This commit is contained in:
Louis Lam 2023-02-25 02:27:32 +08:00 committed by GitHub
commit 98bb854832
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 114 additions and 13 deletions

View File

@ -12,7 +12,17 @@
<div class="modal-body"> <div class="modal-body">
<div class="mb-3"> <div class="mb-3">
<label for="tag-name" class="form-label">{{ $t("Name") }}</label> <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>
<div class="mb-3"> <div class="mb-3">
@ -112,7 +122,11 @@ export default {
updated: { updated: {
type: Function, type: Function,
default: () => {}, default: () => {},
} },
existingTags: {
type: Array,
default: () => [],
},
}, },
data() { data() {
return { return {
@ -132,6 +146,7 @@ export default {
removingMonitor: [], removingMonitor: [],
addingMonitor: [], addingMonitor: [],
selectedAddMonitor: null, selectedAddMonitor: null,
nameInvalid: false,
}; };
}, },
@ -160,11 +175,16 @@ export default {
watch: { watch: {
// Set color option to "Custom" when a unknown color is entered // Set color option to "Custom" when a unknown color is entered
"tag.color"(to, from) { "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.name = this.$t("Custom");
this.selectedColor.color = to; this.selectedColor.color = to;
} }
}, },
"tag.name"(to, from) {
if (to != null) {
this.validate();
}
},
selectedColor(to, from) { selectedColor(to, from) {
if (to != null) { if (to != null) {
this.tag.color = to.color; this.tag.color = to.color;
@ -197,6 +217,35 @@ export default {
this.$refs.confirmDelete.show(); 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 * Load tag information for display in the edit dialog
* @param {Object} tag tag object to edit * @param {Object} tag tag object to edit
@ -228,6 +277,27 @@ export default {
this.processing = true; this.processing = true;
let editResult = 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) { for (let addId of this.addingMonitor) {
await this.addMonitorTagAsync(this.tag.id, addId, "").then((res) => { await this.addMonitorTagAsync(this.tag.id, addId, "").then((res) => {
if (!res.ok) { if (!res.ok) {
@ -263,9 +333,9 @@ export default {
* Delete the editing tag from server * Delete the editing tag from server
* @returns {void} * @returns {void}
*/ */
deleteTag() { async deleteTag() {
this.processing = true; 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.$root.toastRes(res);
this.processing = false; this.processing = false;
@ -309,6 +379,28 @@ export default {
return getMonitorRelativeURL(id); 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 * Add a tag to a monitor asynchronously
* @param {number} tagId ID of tag to add * @param {number} tagId ID of tag to add

View File

@ -1,5 +1,9 @@
<template> <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 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 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"> <div class="col-5 ps-1">
@ -19,7 +23,7 @@
</div> </div>
</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"> <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteTag">
{{ $t("confirmDeleteTagMsg") }} {{ $t("confirmDeleteTagMsg") }}
</Confirm> </Confirm>
@ -100,6 +104,15 @@ export default {
this.$refs.confirmDelete.show(); 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 * Show dialog for editing a tag
* @param {number} index index of the tag to edit in the local tagsList * @param {number} index index of the tag to edit in the local tagsList
@ -149,10 +162,10 @@ export default {
.tags-list .tags-list-row { .tags-list .tags-list-row {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, 0.125); border-top: 1px solid rgba(0, 0, 0, 0.125);
.dark & { .dark & {
border-bottom: 1px solid $dark-border-color; border-top: 1px solid $dark-border-color;
} }
&:hover { &:hover {
@ -164,8 +177,4 @@ export default {
} }
} }
.tags-list .tags-list-row:last-child {
border: none;
}
</style> </style>