refactored attribute autocompletes into separate service

This commit is contained in:
azivner 2018-11-13 10:25:59 +01:00
parent 21d3b0c9d8
commit 8dc32e581e
2 changed files with 93 additions and 61 deletions

View File

@ -3,6 +3,7 @@ import server from '../services/server.js';
import infoService from "../services/info.js";
import treeUtils from "../services/tree_utils.js";
import attributeService from "../services/attributes.js";
import attributeAutocompleteService from "../services/attribute_autocomplete.js";
const $dialog = $("#attributes-dialog");
const $saveAttributesButton = $("#save-attributes-button");
@ -233,69 +234,21 @@ async function showDialog() {
}
$dialog.on('focus', '.attribute-name', function (e) {
if (!$(this).hasClass("aa-input")) {
$(this).autocomplete({
appendTo: document.querySelector('body'),
hint: false,
autoselect: true,
openOnFocus: true,
minLength: 0
}, [{
displayKey: 'name',
source: async (term, cb) => {
const attribute = attributesModel.getTargetAttribute(this);
const type = (attribute().type === 'relation' || attribute().type === 'relation-definition') ? 'relation' : 'label';
const names = await server.get('attributes/names/?type=' + type + '&query=' + encodeURIComponent(term));
const result = names.map(name => {
return {name};
});
if (result.length === 0) {
result.push({name: "No results"})
}
cb(result);
}
}]);
}
$(this).autocomplete("open");
attributeAutocompleteService.initAttributeNameAutocomplete({
$el: $(this),
attrTypeFunc: () => {
const attribute = attributesModel.getTargetAttribute(this);
return (attribute().type === 'relation' || attribute().type === 'relation-definition') ? 'relation' : 'label';
},
open: true
});
});
$dialog.on('focus', '.label-value', async function (e) {
if (!$(this).hasClass("aa-input")) {
const attributeName = $(this).parent().parent().find('.attribute-name').val();
if (attributeName.trim() === "") {
return;
}
const attributeValues = (await server.get('attributes/values/' + encodeURIComponent(attributeName)))
.map(attribute => { return { value: attribute }; });
if (attributeValues.length === 0) {
return;
}
$(this).autocomplete({
appendTo: document.querySelector('body'),
hint: false,
autoselect: true,
openOnFocus: true,
minLength: 0
}, [{
displayKey: 'value',
source: function (term, cb) {
term = term.toLowerCase();
const filtered = attributeValues.filter(attr => attr.value.toLowerCase().includes(term));
cb(filtered);
}
}]);
}
$(this).autocomplete("open");
$dialog.on('focus', '.label-value', function (e) {
attributeAutocompleteService.initLabelValueAutocomplete({
$el: $(this),
open: true
})
});
export default {

View File

@ -0,0 +1,79 @@
import server from "./server.js";
/**
* @param $el - element on which to init autocomplete
* @param attrTypeFunc - callback providing "relation" or "label" as a type of autocompleted attributes
* @param open - should the autocomplete be opened after init?
*/
function initAttributeNameAutocomplete({ $el, attrTypeFunc, open }) {
if (!$el.hasClass("aa-input")) {
$el.autocomplete({
appendTo: document.querySelector('body'),
hint: false,
autoselect: true,
openOnFocus: true,
minLength: 0
}, [{
displayKey: 'name',
source: async (term, cb) => {
const names = await server.get('attributes/names/?type=' + attrTypeFunc() + '&query=' + encodeURIComponent(term));
const result = names.map(name => {
return {name};
});
if (result.length === 0) {
result.push({name: "No results"})
}
cb(result);
}
}]);
}
if (open) {
$el.autocomplete("open");
}
}
async function initLabelValueAutocomplete({ $el, open }) {
if (!$el.hasClass("aa-input")) {
const attributeName = $el.parent().parent().find('.attribute-name').val();
if (attributeName.trim() === "") {
return;
}
const attributeValues = (await server.get('attributes/values/' + encodeURIComponent(attributeName)))
.map(attribute => { return { value: attribute }; });
if (attributeValues.length === 0) {
return;
}
$el.autocomplete({
appendTo: document.querySelector('body'),
hint: false,
autoselect: true,
openOnFocus: true,
minLength: 0
}, [{
displayKey: 'value',
source: function (term, cb) {
term = term.toLowerCase();
const filtered = attributeValues.filter(attr => attr.value.toLowerCase().includes(term));
cb(filtered);
}
}]);
}
if (open) {
$el.autocomplete("open");
}
}
export default {
initAttributeNameAutocomplete,
initLabelValueAutocomplete
}