added "type" to attribute dialog, name autocomplete servers according to the choice

src/public/javascripts/dialogs/attributes.js

@@ -0,0 +1,239 @@
+import noteDetailService from '../services/note_detail.js';
+import server from '../services/server.js';
+import infoService from "../services/info.js";
+
+const $dialog = $("#attributes-dialog");
+const $saveAttributesButton = $("#save-attributes-button");
+const $attributesBody = $('#attributes-table tbody');
+
+const attributesModel = new AttributesModel();
+
+function AttributesModel() {
+    const self = this;
+
+    this.attributes = ko.observableArray();
+
+    this.availableTypes = [
+        { text: "Label", value: "label" },
+        { text: "Label definition", value: "definition" },
+        { text: "Relation", value: "relation" }
+    ];
+
+    this.updateAttributePositions = function() {
+        let position = 0;
+
+        // we need to update positions by searching in the DOM, because order of the
+        // attributes in the viewmodel (self.attributes()) stays the same
+        $attributesBody.find('input[name="position"]').each(function() {
+            const attribute = self.getTargetAttribute(this);
+
+            attribute().position = position++;
+        });
+    };
+
+    this.loadAttributes = async function() {
+        const noteId = noteDetailService.getCurrentNoteId();
+
+        const attributes = await server.get('notes/' + noteId + '/attributes');
+
+        self.attributes(attributes.map(ko.observable));
+
+        addLastEmptyRow();
+
+        // attribute might not be rendered immediatelly so could not focus
+        setTimeout(() => $(".attribute-name:last").focus(), 100);
+
+        $attributesBody.sortable({
+            handle: '.handle',
+            containment: $attributesBody,
+            update: this.updateAttributePositions
+        });
+    };
+
+    this.deleteAttribute = function(data, event) {
+        const attribute = self.getTargetAttribute(event.target);
+        const attributeData = attribute();
+
+        if (attributeData) {
+            attributeData.isDeleted = 1;
+
+            attribute(attributeData);
+
+            addLastEmptyRow();
+        }
+    };
+
+    function isValid() {
+        for (let attributes = self.attributes(), i = 0; i < attributes.length; i++) {
+            if (self.isEmptyName(i)) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    this.save = async function() {
+        // we need to defocus from input (in case of enter-triggered save) because value is updated
+        // on blur event (because of conflict with jQuery UI Autocomplete). Without this, input would
+        // stay in focus, blur wouldn't be triggered and change wouldn't be updated in the viewmodel.
+        $saveAttributesButton.focus();
+
+        if (!isValid()) {
+            alert("Please fix all validation errors and try saving again.");
+            return;
+        }
+
+        self.updateAttributePositions();
+
+        const noteId = noteDetailService.getCurrentNoteId();
+
+        const attributesToSave = self.attributes()
+            .map(attribute => attribute())
+            .filter(attribute => attribute.attributeId !== "" || attribute.name !== "");
+
+        const attributes = await server.put('notes/' + noteId + '/attributes', attributesToSave);
+
+        self.attributes(attributes.map(ko.observable));
+
+        addLastEmptyRow();
+
+        infoService.showMessage("Attributes have been saved.");
+
+        noteDetailService.loadAttributeList();
+    };
+
+    function addLastEmptyRow() {
+        const attributes = self.attributes().filter(attr => attr().isDeleted === 0);
+        const last = attributes.length === 0 ? null : attributes[attributes.length - 1]();
+
+        if (!last || last.name.trim() !== "" || last.value !== "") {
+            self.attributes.push(ko.observable({
+                attributeId: '',
+                type: 'label',
+                name: '',
+                value: '',
+                isDeleted: 0,
+                position: 0
+            }));
+        }
+    }
+
+    this.attributeChanged = function (data, event) {
+        addLastEmptyRow();
+
+        const attribute = self.getTargetAttribute(event.target);
+
+        attribute.valueHasMutated();
+    };
+
+    this.isNotUnique = function(index) {
+        const cur = self.attributes()[index]();
+
+        if (cur.name.trim() === "") {
+            return false;
+        }
+
+        for (let attributes = self.attributes(), i = 0; i < attributes.length; i++) {
+            const attribute = attributes[i]();
+
+            if (index !== i && cur.name === attribute.name) {
+                return true;
+            }
+        }
+
+        return false;
+    };
+
+    this.isEmptyName = function(index) {
+        const cur = self.attributes()[index]();
+
+        return cur.name.trim() === "" && (cur.attributeId !== "" || cur.value !== "");
+    };
+
+    this.getTargetAttribute = function(target) {
+        const context = ko.contextFor(target);
+        const index = context.$index();
+
+        return self.attributes()[index];
+    }
+}
+
+async function showDialog() {
+    glob.activeDialog = $dialog;
+
+    await attributesModel.loadAttributes();
+
+    $dialog.dialog({
+        modal: true,
+        width: 950,
+        height: 500
+    });
+}
+
+ko.applyBindings(attributesModel, $dialog[0]);
+
+$dialog.on('focus', '.attribute-name', function (e) {
+    if (!$(this).hasClass("ui-autocomplete-input")) {
+        $(this).autocomplete({
+            source: async (request, response) => {
+                const attribute = attributesModel.getTargetAttribute(this);
+                const type = attribute().type === 'relation' ? 'relation' : 'label';
+                const names = await server.get('attributes/names/?type=' + type + '&query=' + encodeURIComponent(request.term));
+                const result = names.map(name => {
+                    return {
+                        label: name,
+                        value: name
+                    }
+                });
+
+                if (result.length > 0) {
+                    response(result);
+                }
+                else {
+                    response([{
+                        label: "No results",
+                        value: "No results"
+                    }]);
+                }
+            },
+            minLength: 0
+        });
+    }
+
+    $(this).autocomplete("search", $(this).val());
+});
+
+$dialog.on('focus', '.attribute-value', async function (e) {
+    if (!$(this).hasClass("ui-autocomplete-input")) {
+        const attributeName = $(this).parent().parent().find('.attribute-name').val();
+
+        if (attributeName.trim() === "") {
+            return;
+        }
+
+        const attributeValues = await server.get('attributes/values/' + encodeURIComponent(attributeName));
+
+        if (attributeValues.length === 0) {
+            return;
+        }
+
+        $(this).autocomplete({
+            // shouldn't be required and autocomplete should just accept array of strings, but that fails
+            // because we have overriden filter() function in autocomplete.js
+            source: attributeValues.map(attribute => {
+                return {
+                    attribute: attribute,
+                    value: attribute
+                }
+            }),
+            minLength: 0
+        });
+    }
+
+    $(this).autocomplete("search", $(this).val());
+});
+
+export default {
+    showDialog
+};