|
|
|
@ -34,18 +34,20 @@
|
|
|
|
label="name"
|
|
|
|
label="name"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<template #option="{ option }">
|
|
|
|
<template #option="{ option }">
|
|
|
|
<div class="mx-2 py-1 px-3 rounded d-inline-flex"
|
|
|
|
<div
|
|
|
|
style="margin-top: -5px; margin-bottom: -5px; height: 24px;"
|
|
|
|
class="mx-2 py-1 px-3 rounded d-inline-flex"
|
|
|
|
:style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
|
|
|
|
style="margin-top: -5px; margin-bottom: -5px; height: 24px;"
|
|
|
|
|
|
|
|
:style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<span>
|
|
|
|
<span>
|
|
|
|
{{ option.name }}</span>
|
|
|
|
{{ option.name }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template #singleLabel="{ option }">
|
|
|
|
<template #singleLabel="{ option }">
|
|
|
|
<div class="py-1 px-3 rounded d-inline-flex"
|
|
|
|
<div
|
|
|
|
style="height: 24px;"
|
|
|
|
class="py-1 px-3 rounded d-inline-flex"
|
|
|
|
:style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
|
|
|
|
style="height: 24px;"
|
|
|
|
|
|
|
|
:style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<span>{{ option.name }}</span>
|
|
|
|
<span>{{ option.name }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -53,10 +55,11 @@
|
|
|
|
</vue-multiselect>
|
|
|
|
</vue-multiselect>
|
|
|
|
<div v-if="newDraftTag.select?.name == null" class="d-flex mb-2">
|
|
|
|
<div v-if="newDraftTag.select?.name == null" class="d-flex mb-2">
|
|
|
|
<div class="w-50 pe-2">
|
|
|
|
<div class="w-50 pe-2">
|
|
|
|
<input v-model="newDraftTag.name" class="form-control"
|
|
|
|
<input
|
|
|
|
:class="{'is-invalid': validateDraftTag.nameInvalid}"
|
|
|
|
v-model="newDraftTag.name" class="form-control"
|
|
|
|
:placeholder="$t('Name')"
|
|
|
|
:class="{'is-invalid': validateDraftTag.nameInvalid}"
|
|
|
|
@keydown.enter.prevent="onEnter"
|
|
|
|
:placeholder="$t('Name')"
|
|
|
|
|
|
|
|
@keydown.enter.prevent="onEnter"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<div class="invalid-feedback">
|
|
|
|
<div class="invalid-feedback">
|
|
|
|
{{ $t("Tag with this name already exist.") }}
|
|
|
|
{{ $t("Tag with this name already exist.") }}
|
|
|
|
@ -75,17 +78,19 @@
|
|
|
|
deselect-label=""
|
|
|
|
deselect-label=""
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<template #option="{ option }">
|
|
|
|
<template #option="{ option }">
|
|
|
|
<div class="mx-2 py-1 px-3 rounded d-inline-flex"
|
|
|
|
<div
|
|
|
|
style="height: 24px; color: white;"
|
|
|
|
class="mx-2 py-1 px-3 rounded d-inline-flex"
|
|
|
|
:style="{ backgroundColor: option.color + ' !important' }"
|
|
|
|
style="height: 24px; color: white;"
|
|
|
|
|
|
|
|
:style="{ backgroundColor: option.color + ' !important' }"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<span>{{ option.name }}</span>
|
|
|
|
<span>{{ option.name }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template #singleLabel="{ option }">
|
|
|
|
<template #singleLabel="{ option }">
|
|
|
|
<div class="py-1 px-3 rounded d-inline-flex"
|
|
|
|
<div
|
|
|
|
style="height: 24px; color: white;"
|
|
|
|
class="py-1 px-3 rounded d-inline-flex"
|
|
|
|
:style="{ backgroundColor: option.color + ' !important' }"
|
|
|
|
style="height: 24px; color: white;"
|
|
|
|
|
|
|
|
:style="{ backgroundColor: option.color + ' !important' }"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<span>{{ option.name }}</span>
|
|
|
|
<span>{{ option.name }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -94,10 +99,11 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
|
|
<div class="mb-2">
|
|
|
|
<input v-model="newDraftTag.value" class="form-control"
|
|
|
|
<input
|
|
|
|
:class="{'is-invalid': validateDraftTag.valueInvalid}"
|
|
|
|
v-model="newDraftTag.value" class="form-control"
|
|
|
|
:placeholder="$t('value (optional)')"
|
|
|
|
:class="{'is-invalid': validateDraftTag.valueInvalid}"
|
|
|
|
@keydown.enter.prevent="onEnter"
|
|
|
|
:placeholder="$t('value (optional)')"
|
|
|
|
|
|
|
|
@keydown.enter.prevent="onEnter"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<div class="invalid-feedback">
|
|
|
|
<div class="invalid-feedback">
|
|
|
|
{{ $t("Tag with this value already exist.") }}
|
|
|
|
{{ $t("Tag with this value already exist.") }}
|
|
|
|
@ -123,8 +129,8 @@
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import { Modal } from "bootstrap";
|
|
|
|
import { Modal } from "bootstrap";
|
|
|
|
import VueMultiselect from "vue-multiselect";
|
|
|
|
import VueMultiselect from "vue-multiselect";
|
|
|
|
import Tag from "../components/Tag.vue";
|
|
|
|
|
|
|
|
import { useToast } from "vue-toastification";
|
|
|
|
import { useToast } from "vue-toastification";
|
|
|
|
|
|
|
|
import Tag from "../components/Tag.vue";
|
|
|
|
const toast = useToast();
|
|
|
|
const toast = useToast();
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
@ -159,14 +165,14 @@ export default {
|
|
|
|
tagOptions() {
|
|
|
|
tagOptions() {
|
|
|
|
const tagOptions = this.existingTags;
|
|
|
|
const tagOptions = this.existingTags;
|
|
|
|
for (const tag of this.newTags) {
|
|
|
|
for (const tag of this.newTags) {
|
|
|
|
if (!tagOptions.find(t => t.name == tag.name && t.color == tag.color)) {
|
|
|
|
if (!tagOptions.find(t => t.name === tag.name && t.color === tag.color)) {
|
|
|
|
tagOptions.push(tag);
|
|
|
|
tagOptions.push(tag);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return tagOptions;
|
|
|
|
return tagOptions;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
selectedTags() {
|
|
|
|
selectedTags() {
|
|
|
|
return this.preSelectedTags.concat(this.newTags).filter(tag => !this.deleteTags.find(monitorTag => monitorTag.id == tag.id));
|
|
|
|
return this.preSelectedTags.concat(this.newTags).filter(tag => !this.deleteTags.find(monitorTag => monitorTag.id === tag.id));
|
|
|
|
},
|
|
|
|
},
|
|
|
|
colorOptions() {
|
|
|
|
colorOptions() {
|
|
|
|
return [
|
|
|
|
return [
|
|
|
|
@ -192,7 +198,7 @@ export default {
|
|
|
|
let nameInvalid = false;
|
|
|
|
let nameInvalid = false;
|
|
|
|
let valueInvalid = false;
|
|
|
|
let valueInvalid = false;
|
|
|
|
let invalid = true;
|
|
|
|
let invalid = true;
|
|
|
|
if (this.deleteTags.find(tag => tag.name == this.newDraftTag.select?.name && tag.value == this.newDraftTag.value)) {
|
|
|
|
if (this.deleteTags.find(tag => tag.name === this.newDraftTag.select?.name && tag.value === this.newDraftTag.value)) {
|
|
|
|
// Undo removing a Tag
|
|
|
|
// Undo removing a Tag
|
|
|
|
nameInvalid = false;
|
|
|
|
nameInvalid = false;
|
|
|
|
valueInvalid = false;
|
|
|
|
valueInvalid = false;
|
|
|
|
@ -202,9 +208,9 @@ export default {
|
|
|
|
nameInvalid = true;
|
|
|
|
nameInvalid = true;
|
|
|
|
invalid = true;
|
|
|
|
invalid = true;
|
|
|
|
} else if (this.newTags.concat(this.preSelectedTags).filter(tag => (
|
|
|
|
} else if (this.newTags.concat(this.preSelectedTags).filter(tag => (
|
|
|
|
tag.name == this.newDraftTag.select?.name && tag.value == this.newDraftTag.value
|
|
|
|
tag.name === this.newDraftTag.select?.name && tag.value === this.newDraftTag.value
|
|
|
|
) || (
|
|
|
|
) || (
|
|
|
|
tag.name == this.newDraftTag.name && tag.value == this.newDraftTag.value
|
|
|
|
tag.name === this.newDraftTag.name && tag.value === this.newDraftTag.value
|
|
|
|
)).length > 0) {
|
|
|
|
)).length > 0) {
|
|
|
|
// Try to add a tag with existing name and value
|
|
|
|
// Try to add a tag with existing name and value
|
|
|
|
valueInvalid = true;
|
|
|
|
valueInvalid = true;
|
|
|
|
@ -250,7 +256,7 @@ 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);
|
|
|
|
@ -266,9 +272,9 @@ export default {
|
|
|
|
addDraftTag() {
|
|
|
|
addDraftTag() {
|
|
|
|
console.log("Adding Draft Tag: ", this.newDraftTag);
|
|
|
|
console.log("Adding Draft Tag: ", this.newDraftTag);
|
|
|
|
if (this.newDraftTag.select != null) {
|
|
|
|
if (this.newDraftTag.select != null) {
|
|
|
|
if (this.deleteTags.find(tag => tag.name == this.newDraftTag.select.name && tag.value == this.newDraftTag.value)) {
|
|
|
|
if (this.deleteTags.find(tag => tag.name === this.newDraftTag.select.name && tag.value === this.newDraftTag.value)) {
|
|
|
|
// Undo removing a tag
|
|
|
|
// Undo removing a tag
|
|
|
|
this.deleteTags = this.deleteTags.filter(tag => !(tag.name == this.newDraftTag.select.name && tag.value == this.newDraftTag.value));
|
|
|
|
this.deleteTags = this.deleteTags.filter(tag => !(tag.name === this.newDraftTag.select.name && tag.value === this.newDraftTag.value));
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
// Add an existing Tag
|
|
|
|
// Add an existing Tag
|
|
|
|
this.newTags.push({
|
|
|
|
this.newTags.push({
|
|
|
|
@ -345,7 +351,7 @@ export default {
|
|
|
|
tagId = newTagResult.id;
|
|
|
|
tagId = newTagResult.id;
|
|
|
|
// Assign the new ID to the tags of the same name & color
|
|
|
|
// Assign the new ID to the tags of the same name & color
|
|
|
|
this.newTags.map(tag => {
|
|
|
|
this.newTags.map(tag => {
|
|
|
|
if (tag.name == newTag.name && tag.color == newTag.color) {
|
|
|
|
if (tag.name === newTag.name && tag.color === newTag.color) {
|
|
|
|
tag.id = newTagResult.id;
|
|
|
|
tag.id = newTagResult.id;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
Louis Lam
3 years ago
committed by
GitHub