sascha
/
Notes
mirror of https://github.com/TriliumNext/Notes
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

attributes dialog converted to algolia autocomplete, closes #203

pull/255/head
azivner 2018-11-07 20:32:11 +07:00
parent 90dbe637ed
commit 13f9007bd6
5 changed files with 90 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/public/javascripts/dialogs/attributes.js
Unescape Escape View File

@ -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);
}
else {
response([{
label: "No results",
value: "No results"
}]);
if (result.length === 0) {
result.push({name: "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 {

4
src/public/javascripts/services/note_autocomplete.js
Unescape Escape View File

@ -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;
});
}
};

52
src/public/javascripts/services/note_detail.js
Unescape Escape View File

@ -326,19 +326,24 @@ async function showAttributes() {
return;
}
attributeValues = attributeValues.map(attribute => { return { value: attribute }; });
$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
}
}),
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));
$input.focus(() => $input.autocomplete("search", ""));
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 = $("<button>").addClass("btn btn-sm").text("Open").click(() => {
const notePath = linkService.getNotePathFromLabel($input.val());
const notePath = $input.prop("data-selected-path");
treeService.activateNote(notePath);
});
@ -473,9 +484,14 @@ async function showAttributes() {
$attributeListInner.append(utils.formatLabel(attribute) + " ");
}
else if (attribute.type === 'relation') {
$attributeListInner.append('@' + attribute.name + "=");
$attributeListInner.append(await linkService.createNoteLink(attribute.value));
$attributeListInner.append(" ");
if (attribute.value) {
$attributeListInner.append('@' + attribute.name + "=");
$attributeListInner.append(await linkService.createNoteLink(attribute.value));
$attributeListInner.append(" ");
}
else {
messagingService.logError(`Relation ${attribute.attributeId} has empty target`);
}
}
else if (attribute.type === 'label-definition' || attribute.type === 'relation-definition') {
$attributeListInner.append(attribute.name + " definition ");
@ -501,8 +517,10 @@ async function promotedAttributeChanged(event) {
value = $attr.is(':checked') ? "true" : "false";
}
else if ($attr.prop("attribute-type") === "relation") {
if ($attr.val()) {
value = treeUtils.getNoteIdFromNotePath(linkService.getNotePathFromLabel($attr.val()));
const selectedPath = $attr.prop("data-selected-path");
if (selectedPath) {
value = treeUtils.getNoteIdFromNotePath(selectedPath);
}
}
else {

2
src/public/stylesheets/style.css
Unescape Escape View File

@ -523,7 +523,7 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
/* if modal height overflows, then only modal body scrolls */
.modal-body {
max-height: calc(100vh - 120px);
max-height: calc(100vh - 200px);
overflow-y: auto;
}

27
src/views/dialogs/attributes.ejs
Unescape Escape View File

@ -7,13 +7,12 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form data-bind="submit: save">
<form data-bind="submit: save">
<div class="modal-body">
<div style="height: 97%; overflow: auto">
<table id="owned-attributes-table" class="table">
<thead>
<tr>
<th></th>
<th>Type</th>
<th>Name</th>
<th>Value</th>
@ -22,10 +21,6 @@
</thead>
<tbody data-bind="foreach: ownedAttributes">
<tr data-bind="if: !isDeleted">
<td class="handle">
<span class="glyphicon glyphicon-resize-vertical"></span>
<input type="hidden" name="position" data-bind="value: position"/>
</td>
<td>
<select class="form-control attribute-type-select" style="width: auto;"
data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
@ -122,16 +117,16 @@
</table>
</div>
</div>
</form>
</div>
<div class="modal-footer" style="display: flex; justify-content: space-between;">
<button class="btn btn-primary btn-large" style="width: 200px;" id="save-attributes-button" type="submit">
Save changes <kbd>enter</kbd></button>
</div>
<div class="modal-footer" style="display: flex; justify-content: space-between;">
<button class="btn btn-primary btn-large" style="width: 200px;" id="save-attributes-button" type="submit">
Save changes <kbd>enter</kbd></button>
<button class="btn btn-sm" type="button" data-help-page="Attributes">
<i class="glyphicon glyphicon-info-sign"></i> Help
</button>
</div>
<button class="btn btn-sm" type="button" data-help-page="Attributes">
<i class="glyphicon glyphicon-info-sign"></i> Help
</button>
</div>
</form>
</div>
</div>
</div>