diff --git a/src/public/javascripts/dialogs/attributes.js b/src/public/javascripts/dialogs/attributes.js
index 805f81b0f..74f239f6b 100644
--- a/src/public/javascripts/dialogs/attributes.js
+++ b/src/public/javascripts/dialogs/attributes.js
@@ -61,7 +61,8 @@ function AttributesModel() {
for (const attr of ownedAttributes) {
attr.labelValue = attr.type === 'label' ? attr.value : '';
- attr.relationValue = attr.type === 'relation' ? (await treeUtils.getNoteTitle(attr.value) + " (" + attr.value + ")") : '';
+ attr.relationValue = attr.type === 'relation' ? (await treeUtils.getNoteTitle(attr.value)) : '';
+ attr.selectedPath = attr.type === 'relation' ? attr.value : '';
attr.labelDefinition = (attr.type === 'label-definition' && attr.value) ? attr.value : {
labelType: "text",
multiplicityType: "singlevalue",
@@ -94,12 +95,6 @@ function AttributesModel() {
// attribute might not be rendered immediatelly so could not focus
setTimeout(() => $(".attribute-type-select:last").focus(), 100);
-
- $ownedAttributesBody.sortable({
- handle: '.handle',
- containment: $ownedAttributesBody,
- update: this.updateAttributePositions
- });
};
this.deleteAttribute = function(data, event) {
@@ -149,7 +144,7 @@ function AttributesModel() {
attr.value = attr.labelValue;
}
else if (attr.type === 'relation') {
- attr.value = treeUtils.getNoteIdFromNotePath(linkService.getNotePathFromLabel(attr.relationValue)) || "";
+ attr.value = treeUtils.getNoteIdFromNotePath(attr.selectedPath);
}
else if (attr.type === 'label-definition') {
attr.value = attr.labelDefinition;
@@ -236,64 +231,69 @@ async function showDialog() {
}
$dialog.on('focus', '.attribute-name', function (e) {
- if (!$(this).hasClass("ui-autocomplete-input")) {
+ if (!$(this).hasClass("aa-input")) {
$(this).autocomplete({
- source: async (request, response) => {
+ 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(request.term));
+ const names = await server.get('attributes/names/?type=' + type + '&query=' + encodeURIComponent(term));
const result = names.map(name => {
- return {
- label: name,
- value: name
- }
+ return {name};
});
- if (result.length > 0) {
- response(result);
+ if (result.length === 0) {
+ result.push({name: "No results"})
}
- else {
- response([{
- label: "No results",
- value: "No results"
- }]);
- }
- },
- minLength: 0
- });
+
+ cb(result);
+ }
+ }]);
}
- $(this).autocomplete("search", $(this).val());
+ $(this).autocomplete("open");
});
$dialog.on('focus', '.label-value', async function (e) {
- if (!$(this).hasClass("ui-autocomplete-input")) {
+ 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));
+ const attributeValues = (await server.get('attributes/values/' + encodeURIComponent(attributeName)))
+ .map(attribute => { return { value: attribute }; });
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
- }
- }),
+ 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("search", $(this).val());
+ $(this).autocomplete("open");
});
export default {
diff --git a/src/public/javascripts/services/note_autocomplete.js b/src/public/javascripts/services/note_autocomplete.js
index d42a85c4c..bc2c3efdd 100644
--- a/src/public/javascripts/services/note_autocomplete.js
+++ b/src/public/javascripts/services/note_autocomplete.js
@@ -63,6 +63,10 @@ function initNoteAutocomplete($el) {
ko.bindingHandlers.noteAutocomplete = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
initNoteAutocomplete($(element));
+
+ $(element).on('autocomplete:selected', function(event, suggestion, dataset) {
+ bindingContext.$data.selectedPath = suggestion.path;
+ });
}
};
diff --git a/src/public/javascripts/services/note_detail.js b/src/public/javascripts/services/note_detail.js
index 9e2c8c774..3c8f0a09e 100644
--- a/src/public/javascripts/services/note_detail.js
+++ b/src/public/javascripts/services/note_detail.js
@@ -326,19 +326,24 @@ async function showAttributes() {
return;
}
- $input.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
- });
+ attributeValues = attributeValues.map(attribute => { return { value: attribute }; });
- $input.focus(() => $input.autocomplete("search", ""));
+ $input.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);
+ }
+ }]);
});
}
else if (definition.labelType === 'number') {
@@ -376,16 +381,22 @@ async function showAttributes() {
}
else if (valueAttr.type === 'relation') {
if (valueAttr.value) {
- $input.val((await treeUtils.getNoteTitle(valueAttr.value) + " (" + valueAttr.value + ")"));
+ $input.val(await treeUtils.getNoteTitle(valueAttr.value));
}
// no need to wait for this
noteAutocompleteService.initNoteAutocomplete($input);
+ $input.on('autocomplete:selected', function(event, suggestion, dataset) {
+ promotedAttributeChanged(event);
+ });
+
+ $input.prop("data-selected-path", valueAttr.value);
+
// ideally we'd use link instead of button which would allow tooltip preview, but
// we can't guarantee updating the link in the a element
const $openButton = $("
-
-
+
+
+
+