refactored attribute autocompletes into separate service

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")) {
+    attributeAutocompleteService.initAttributeNameAutocomplete({
-        $(this).autocomplete({
+        $el: $(this),
-            appendTo: document.querySelector('body'),
+        attrTypeFunc: () => {
-            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';
+            return (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 => {
+        open: true
-                    return {name};
+    });
 });
 
-                if (result.length === 0) {
+$dialog.on('focus', '.label-value', function (e) {
-                    result.push({name: "No results"})
+    attributeAutocompleteService.initLabelValueAutocomplete({
-                }
+        $el: $(this),
-
+        open: true
-                cb(result);
+    })
-            }
-            }]);
-    }
-
-    $(this).autocomplete("open");
-});
-
-$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");
 });
 
 export default {

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
+}