|
|
@ -9,7 +9,20 @@ |
|
|
|
:remove="deleteTag" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="p-1"> |
|
|
|
<button |
|
|
|
type="button" |
|
|
|
class="btn btn-outline-secondary btn-add" |
|
|
|
:disabled="processing" |
|
|
|
@click.stop="showAddDialog" |
|
|
|
> |
|
|
|
<font-awesome-icon class="me-1" icon="plus" /> {{ $t("Add") }} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div ref="modal" class="modal fade" tabindex="-1"> |
|
|
|
<div class="modal-dialog modal-dialog-centered"> |
|
|
|
<div class="modal-content"> |
|
|
|
<div class="modal-body"> |
|
|
|
<vue-multiselect |
|
|
|
v-model="newDraftTag.select" |
|
|
|
class="mb-2" |
|
|
@ -40,7 +53,7 @@ |
|
|
|
</vue-multiselect> |
|
|
|
<div v-if="newDraftTag.select?.id == null" class="d-flex mb-2"> |
|
|
|
<div class="w-50 pe-2"> |
|
|
|
<input v-model="newDraftTag.name" class="form-control" :class="{'is-invalid': validateDraftTag.nameInvalid}" placeholder="name" /> |
|
|
|
<input v-model="newDraftTag.name" class="form-control" :class="{'is-invalid': validateDraftTag.nameInvalid}" :placeholder="$t('name')" /> |
|
|
|
<div class="invalid-feedback"> |
|
|
|
{{ $t("Tag with this name already exist.") }} |
|
|
|
</div> |
|
|
@ -94,9 +107,13 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { Modal } from "bootstrap"; |
|
|
|
import VueMultiselect from "vue-multiselect"; |
|
|
|
import Tag from "../components/Tag.vue"; |
|
|
|
import { useToast } from "vue-toastification" |
|
|
@ -115,6 +132,7 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
modal: null, |
|
|
|
existingTags: [], |
|
|
|
processing: false, |
|
|
|
newTags: [], |
|
|
@ -205,9 +223,13 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.modal = new Modal(this.$refs.modal); |
|
|
|
this.getExistingTags(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
showAddDialog() { |
|
|
|
this.modal.show(); |
|
|
|
}, |
|
|
|
getExistingTags() { |
|
|
|
this.$root.getSocket().emit("getTags", (res) => { |
|
|
|
if (res.ok) { |
|
|
@ -269,6 +291,7 @@ export default { |
|
|
|
invalid: true, |
|
|
|
nameInvalid: false, |
|
|
|
}; |
|
|
|
this.modal.hide(); |
|
|
|
}, |
|
|
|
addTagAsync(newTag) { |
|
|
|
return new Promise((resolve) => { |
|
|
@ -357,3 +380,13 @@ export default { |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.btn-add { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.modal-body { |
|
|
|
padding: 1.5rem; |
|
|
|
} |
|
|
|
</style> |
|
|
|