From 8dc32e581ea0b8b686716263007e1c66cac3004e Mon Sep 17 00:00:00 2001 From: azivner Date: Tue, 13 Nov 2018 10:25:59 +0100 Subject: [PATCH] refactored attribute autocompletes into separate service --- src/public/javascripts/dialogs/attributes.js | 75 ++++-------------- .../services/attribute_autocomplete.js | 79 +++++++++++++++++++ 2 files changed, 93 insertions(+), 61 deletions(-) create mode 100644 src/public/javascripts/services/attribute_autocomplete.js diff --git a/src/public/javascripts/dialogs/attributes.js b/src/public/javascripts/dialogs/attributes.js index c01b2ea81..0fafa1333 100644 --- a/src/public/javascripts/dialogs/attributes.js +++ b/src/public/javascripts/dialogs/attributes.js @@ -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 { diff --git a/src/public/javascripts/services/attribute_autocomplete.js b/src/public/javascripts/services/attribute_autocomplete.js new file mode 100644 index 000000000..9bea5dd2e --- /dev/null +++ b/src/public/javascripts/services/attribute_autocomplete.js @@ -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 +} \ No newline at end of file