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
GitHub
commit
98bb854832
|
|
@ -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,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -160,11 +175,16 @@ 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;
|
||||
}
|
||||
},
|
||||
"tag.name"(to, from) {
|
||||
if (to != null) {
|
||||
this.validate();
|
||||
}
|
||||
},
|
||||
selectedColor(to, from) {
|
||||
if (to != null) {
|
||||
this.tag.color = to.color;
|
||||
|
|
@ -197,6 +217,35 @@ 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 = [];
|
||||
},
|
||||
|
||||
/**
|
||||
* 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
|
||||
|
|
@ -228,6 +277,27 @@ 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) {
|
||||
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 +333,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 +379,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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
@ -19,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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue