Feat: Add "Add New Tag" button in settings

This commit is contained in:
Nelson Chan 2023-02-13 05:05:30 +08:00
parent 8092640e20
commit 51dbb23230
2 changed files with 72 additions and 10 deletions
src/components

View File

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

View File

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