2017-08-10 19:11:25 +00:00
|
|
|
const draggable = require('vuedraggable');
|
2017-08-13 12:25:30 +00:00
|
|
|
const autosuggest = require('./components/autosuggest');
|
2017-08-10 19:11:25 +00:00
|
|
|
|
|
|
|
let data = {
|
2018-03-30 13:09:51 +00:00
|
|
|
entityId: false,
|
|
|
|
entityType: null,
|
2017-08-10 19:11:25 +00:00
|
|
|
tags: [],
|
|
|
|
};
|
|
|
|
|
2017-08-13 12:25:30 +00:00
|
|
|
const components = {draggable, autosuggest};
|
|
|
|
const directives = {};
|
2017-08-10 19:11:25 +00:00
|
|
|
|
|
|
|
let methods = {
|
|
|
|
|
|
|
|
addEmptyTag() {
|
|
|
|
this.tags.push({name: '', value: '', key: Math.random().toString(36).substring(7)});
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* When an tag changes check if another empty editable field needs to be added onto the end.
|
|
|
|
* @param tag
|
|
|
|
*/
|
|
|
|
tagChange(tag) {
|
|
|
|
let tagPos = this.tags.indexOf(tag);
|
2017-08-13 10:50:40 +00:00
|
|
|
if (tagPos === this.tags.length-1 && (tag.name !== '' || tag.value !== '')) this.addEmptyTag();
|
2017-08-10 19:11:25 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* When an tag field loses focus check the tag to see if its
|
|
|
|
* empty and therefore could be removed from the list.
|
|
|
|
* @param tag
|
|
|
|
*/
|
|
|
|
tagBlur(tag) {
|
|
|
|
let isLast = (this.tags.indexOf(tag) === this.tags.length-1);
|
|
|
|
if (tag.name !== '' || tag.value !== '' || isLast) return;
|
|
|
|
let cPos = this.tags.indexOf(tag);
|
|
|
|
this.tags.splice(cPos, 1);
|
|
|
|
},
|
|
|
|
|
|
|
|
removeTag(tag) {
|
|
|
|
let tagPos = this.tags.indexOf(tag);
|
|
|
|
if (tagPos === -1) return;
|
|
|
|
this.tags.splice(tagPos, 1);
|
2017-08-13 10:50:40 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
getTagFieldName(index, key) {
|
|
|
|
return `tags[${index}][${key}]`;
|
|
|
|
},
|
2017-08-10 19:11:25 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
function mounted() {
|
2018-03-30 13:09:51 +00:00
|
|
|
this.entityId = Number(this.$el.getAttribute('entity-id'));
|
|
|
|
this.entityType = this.$el.getAttribute('entity-type');
|
2017-08-10 19:11:25 +00:00
|
|
|
|
2018-03-30 13:09:51 +00:00
|
|
|
let url = window.baseUrl(`/ajax/tags/get/${this.entityType}/${this.entityId}`);
|
2017-08-10 19:11:25 +00:00
|
|
|
this.$http.get(url).then(response => {
|
|
|
|
let tags = response.data;
|
|
|
|
for (let i = 0, len = tags.length; i < len; i++) {
|
|
|
|
tags[i].key = Math.random().toString(36).substring(7);
|
|
|
|
}
|
|
|
|
this.tags = tags;
|
|
|
|
this.addEmptyTag();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = {
|
2017-11-11 17:10:15 +00:00
|
|
|
data, methods, mounted, components, directives
|
2017-08-10 19:11:25 +00:00
|
|
|
};
|