mirror of
https://github.com/zadam/trilium.git
synced 2025-11-12 08:15:52 +01:00
improvements in search UI
This commit is contained in:
zadam
642
src/public/app/widgets/attribute_widgets/attribute_detail.js
Normal file
642
src/public/app/widgets/attribute_widgets/attribute_detail.js
Normal file
@@ -0,0 +1,642 @@
|
||||
import server from "../../services/server.js";
|
||||
import treeCache from "../../services/tree_cache.js";
|
||||
import treeService from "../../services/tree.js";
|
||||
import linkService from "../../services/link.js";
|
||||
import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
|
||||
import noteAutocompleteService from "../../services/note_autocomplete.js";
|
||||
import promotedAttributeDefinitionParser from '../../services/promoted_attribute_definition_parser.js';
|
||||
import TabAwareWidget from "../tab_aware_widget.js";
|
||||
import SpacedUpdate from "../../services/spaced_update.js";
|
||||
import utils from "../../services/utils.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="attr-detail">
|
||||
<style>
|
||||
.attr-detail {
|
||||
display: block;
|
||||
background-color: var(--accented-background-color);
|
||||
border: 1px solid var(--main-border-color);
|
||||
border-radius: 4px;
|
||||
z-index: 1000;
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
box-shadow: 10px 10px 93px -25px black;
|
||||
}
|
||||
|
||||
.attr-help td {
|
||||
color: var(--muted-text-color);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.related-notes-list {
|
||||
padding-left: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.attr-edit-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.attr-edit-table th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.attr-edit-table td input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.close-attr-detail-button {
|
||||
font-size: x-large;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.attr-save-delete-button-container {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.attr-detail input[readonly] {
|
||||
background-color: var(--accented-background-color) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
|
||||
<h5 class="attr-detail-title"></h5>
|
||||
|
||||
<span class="bx bx-x close-attr-detail-button" title="Cancel changes and close"></span>
|
||||
</div>
|
||||
|
||||
<div class="attr-is-owned-by"></div>
|
||||
|
||||
<table class="attr-edit-table">
|
||||
<tr title="Attribute name can be composed of alphanumeric characters, colon and underscore only">
|
||||
<th>Name:</th>
|
||||
<td><input type="text" class="attr-input-name form-control" /></td>
|
||||
</tr>
|
||||
<tr class="attr-help"></tr>
|
||||
<tr class="attr-row-value">
|
||||
<th>Value:</th>
|
||||
<td><input type="text" class="attr-input-value form-control" /></td>
|
||||
</tr>
|
||||
<tr class="attr-row-target-note">
|
||||
<th title="Relation is a named connection between source note and target note.">Target note:</th>
|
||||
<td>
|
||||
<div class="input-group">
|
||||
<input type="text" class="attr-input-target-note form-control" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="attr-row-promoted"
|
||||
title="Promoted attribute is displayed prominently on the note.">
|
||||
<th>Promoted:</th>
|
||||
<td><input type="checkbox" class="attr-input-promoted form-control form-control-sm" /></td>
|
||||
</tr>
|
||||
<tr class="attr-row-multiplicity">
|
||||
<th title="Multiplicity defines how many attributes of the same name can be created - at max 1 or more than 1.">Multiplicity:</th>
|
||||
<td>
|
||||
<select class="attr-input-multiplicity form-control">
|
||||
<option value="single">Single value</option>
|
||||
<option value="multi">Multi value</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="attr-row-label-type">
|
||||
<th title="Type of the label will help Trilium to choose suitable interface to enter the label value.">Type:</th>
|
||||
<td>
|
||||
<select class="attr-input-label-type form-control">
|
||||
<option value="text">Text</option>
|
||||
<option value="number">Number</option>
|
||||
<option value="boolean">Boolean</option>
|
||||
<option value="date">Date</option>
|
||||
<option value="url">URL</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="attr-row-number-precision">
|
||||
<th title="What number of digits after floating point should be available in the value setting interface.">Precision:</th>
|
||||
<td>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control attr-input-number-precision" style="text-align: right">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">digits</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="attr-row-inverse-relation">
|
||||
<th title="Optional setting to define to which relation is this one opposite. Example: Father - Son are inverse relations to each other.">Inverse relation:</th>
|
||||
<td>
|
||||
<div class="input-group">
|
||||
<input type="text" class="attr-input-inverse-relation form-control" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr title="Inheritable attribute will be inherited to all descendants under this tree.">
|
||||
<th>Inheritable:</th>
|
||||
<td><input type="checkbox" class="attr-input-inheritable form-control form-control-sm" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="attr-save-delete-button-container">
|
||||
<button class="btn btn-primary btn-sm attr-save-changes-and-close-button"
|
||||
style="flex-grow: 1; margin-right: 20px">
|
||||
Save & close <kbd>Ctrl+Enter</kbd></button>
|
||||
|
||||
<button class="btn btn-secondary btn-sm attr-delete-button">
|
||||
Delete</button>
|
||||
</div>
|
||||
|
||||
<div class="related-notes-container">
|
||||
<br/>
|
||||
|
||||
<h5 class="related-notes-tile">Other notes with this label</h5>
|
||||
|
||||
<ul class="related-notes-list"></ul>
|
||||
|
||||
<div class="related-notes-more-notes"></div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
const DISPLAYED_NOTES = 10;
|
||||
|
||||
const ATTR_TITLES = {
|
||||
"label": "Label detail",
|
||||
"label-definition": "Label definition detail",
|
||||
"relation": "Relation detail",
|
||||
"relation-definition": "Relation definition detail"
|
||||
};
|
||||
|
||||
const ATTR_NAME_MATCHER = new RegExp("^[\\p{L}\\p{N}_:]+$", "u");
|
||||
|
||||
const ATTR_HELP = {
|
||||
"label": {
|
||||
"disableVersioning": "disables auto-versioning. Useful for e.g. large, but unimportant notes - e.g. large JS libraries used for scripting",
|
||||
"calendarRoot": "marks note which should be used as root for day notes. Only one should be marked as such.",
|
||||
"archived": "notes with this label won't be visible by default in search results (also in Jump To, Add Link dialogs etc).",
|
||||
"excludeFromExport": "notes (with their sub-tree) won't be included in any note export",
|
||||
"run": `defines on which events script should run. Possible values are:
|
||||
<ul>
|
||||
<li>frontendStartup - when Trilium frontend starts up (or is refreshed).</li>
|
||||
<li>backendStartup - when Trilium backend starts up</li>
|
||||
<li>hourly - run once an hour</li>
|
||||
<li>daily - run once a day</li>
|
||||
</ul>`,
|
||||
"disableInclusion": "scripts with this label won't be included into parent script execution.",
|
||||
"sorted": "keeps child notes sorted by title alphabetically",
|
||||
"hidePromotedAttributes": "Hide promoted attributes on this note",
|
||||
"readOnly": "editor is in read only mode. Works only for text and code notes.",
|
||||
"autoReadOnlyDisabled": "text/code notes can be set automatically into read mode when they are too large. You can disable this behavior on per-note basis by adding this label to the note",
|
||||
"appCss": "marks CSS notes which are loaded into the Trilium application and can thus be used to modify Trilium's looks.",
|
||||
"appTheme": "marks CSS notes which are full Trilium themes and are thus available in Trilium options.",
|
||||
"cssClass": "value of this label is then added as CSS class to the node representing given note in the tree. This can be useful for advanced theming. Can be used in template notes.",
|
||||
"iconClass": "value of this label is added as a CSS class to the icon on the tree which can help visually distinguish the notes in the tree. Example might be bx bx-home - icons are taken from boxicons. Can be used in template notes.",
|
||||
"bookZoomLevel": 'applies only to book note and sets the "zoom level" (how many notes fit on 1 row)',
|
||||
"customRequestHandler": 'see <a href="javascript:" data-help-page="Custom request handler">Custom request handler</a>',
|
||||
"customResourceProvider": 'see <a href="javascript:" data-help-page="Custom request handler">Custom request handler</a>'
|
||||
},
|
||||
"relation": {
|
||||
"runOnNoteCreation": "executes when note is created on backend",
|
||||
"runOnNoteTitleChange": "executes when note title is changed (includes note creation as well)",
|
||||
"runOnNoteChange": "executes when note is changed (includes note creation as well)",
|
||||
"runOnChildNoteCreation": "executes when new note is created under this note",
|
||||
"runOnAttributeCreation": "executes when new attribute is created under this note",
|
||||
"runOnAttributeChange": "executes when attribute is changed under this note",
|
||||
"template": "attached note's attributes will be inherited even without parent-child relationship. See template for details.",
|
||||
"renderNote": 'notes of type "render HTML note" will be rendered using a code note (HTML or script) and it is necessary to point using this relation to which note should be rendered',
|
||||
"widget": "target of this relation will be executed and rendered as a widget in the sidebar"
|
||||
}
|
||||
};
|
||||
|
||||
export default class AttributeDetailWidget extends TabAwareWidget {
|
||||
async refresh() {
|
||||
// switching note/tab should close the widget
|
||||
|
||||
this.hide();
|
||||
}
|
||||
|
||||
doRender() {
|
||||
this.relatedNotesSpacedUpdate = new SpacedUpdate(async () => this.updateRelatedNotes(), 1000);
|
||||
|
||||
this.$widget = $(TPL);
|
||||
|
||||
utils.bindElShortcut(this.$widget, 'ctrl+return', () => this.saveAndClose());
|
||||
utils.bindElShortcut(this.$widget, 'esc', () => this.cancelAndClose());
|
||||
|
||||
this.contentSized();
|
||||
|
||||
this.$title = this.$widget.find('.attr-detail-title');
|
||||
|
||||
this.$inputName = this.$widget.find('.attr-input-name');
|
||||
this.$inputName.on('keyup', () => this.userEditedAttribute());
|
||||
|
||||
this.$inputName.on('focus', () => {
|
||||
attributeAutocompleteService.initAttributeNameAutocomplete({
|
||||
$el: this.$inputName,
|
||||
attributeType: () => ['relation', 'relation-definition'].includes(this.attrType) ? 'relation' : 'label',
|
||||
open: true
|
||||
});
|
||||
});
|
||||
|
||||
this.$rowValue = this.$widget.find('.attr-row-value');
|
||||
this.$inputValue = this.$widget.find('.attr-input-value');
|
||||
this.$inputValue.on('keyup', () => this.userEditedAttribute());
|
||||
this.$inputValue.on('focus', () => {
|
||||
attributeAutocompleteService.initLabelValueAutocomplete({
|
||||
$el: this.$inputValue,
|
||||
open: true,
|
||||
nameCallback: () => this.$inputName.val()
|
||||
});
|
||||
});
|
||||
|
||||
this.$rowPromoted = this.$widget.find('.attr-row-promoted');
|
||||
this.$inputPromoted = this.$widget.find('.attr-input-promoted');
|
||||
this.$inputPromoted.on('change', () => this.userEditedAttribute());
|
||||
|
||||
this.$rowMultiplicity = this.$widget.find('.attr-row-multiplicity');
|
||||
this.$inputMultiplicity = this.$widget.find('.attr-input-multiplicity');
|
||||
this.$inputMultiplicity.on('change', () => this.userEditedAttribute());
|
||||
|
||||
this.$rowLabelType = this.$widget.find('.attr-row-label-type');
|
||||
this.$inputLabelType = this.$widget.find('.attr-input-label-type');
|
||||
this.$inputLabelType.on('change', () => this.userEditedAttribute());
|
||||
|
||||
this.$rowNumberPrecision = this.$widget.find('.attr-row-number-precision');
|
||||
this.$inputNumberPrecision = this.$widget.find('.attr-input-number-precision');
|
||||
this.$inputNumberPrecision.on('change', () => this.userEditedAttribute());
|
||||
|
||||
this.$rowInverseRelation = this.$widget.find('.attr-row-inverse-relation');
|
||||
this.$inputInverseRelation = this.$widget.find('.attr-input-inverse-relation');
|
||||
this.$inputInverseRelation.on('keyup', () => this.userEditedAttribute());
|
||||
|
||||
this.$rowTargetNote = this.$widget.find('.attr-row-target-note');
|
||||
this.$inputTargetNote = this.$widget.find('.attr-input-target-note');
|
||||
|
||||
noteAutocompleteService.initNoteAutocomplete(this.$inputTargetNote)
|
||||
.on('autocomplete:noteselected', (event, suggestion, dataset) => {
|
||||
if (!suggestion.notePath) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const pathChunks = suggestion.notePath.split('/');
|
||||
|
||||
this.attribute.value = pathChunks[pathChunks.length - 1]; // noteId
|
||||
|
||||
this.triggerCommand('updateAttributeList', { attributes: this.allAttributes });
|
||||
this.updateRelatedNotes();
|
||||
});
|
||||
|
||||
this.$inputInheritable = this.$widget.find('.attr-input-inheritable');
|
||||
this.$inputInheritable.on('change', () => this.userEditedAttribute());
|
||||
|
||||
this.$closeAttrDetailButton = this.$widget.find('.close-attr-detail-button');
|
||||
this.$closeAttrDetailButton.on('click', () => this.cancelAndClose());
|
||||
|
||||
this.$attrIsOwnedBy = this.$widget.find('.attr-is-owned-by');
|
||||
|
||||
this.$attrSaveDeleteButtonContainer = this.$widget.find('.attr-save-delete-button-container');
|
||||
|
||||
this.$saveAndCloseButton = this.$widget.find('.attr-save-changes-and-close-button');
|
||||
this.$saveAndCloseButton.on('click', () => this.saveAndClose());
|
||||
|
||||
this.$deleteButton = this.$widget.find('.attr-delete-button');
|
||||
this.$deleteButton.on('click', async () => {
|
||||
await this.triggerCommand('updateAttributeList', {
|
||||
attributes: this.allAttributes.filter(attr => attr !== this.attribute)
|
||||
});
|
||||
|
||||
await this.triggerCommand('saveAttributes');
|
||||
|
||||
this.hide();
|
||||
});
|
||||
|
||||
this.$attrHelp = this.$widget.find('.attr-help');
|
||||
|
||||
this.$relatedNotesContainer = this.$widget.find('.related-notes-container');
|
||||
this.$relatedNotesTitle = this.$relatedNotesContainer.find('.related-notes-tile');
|
||||
this.$relatedNotesList = this.$relatedNotesContainer.find('.related-notes-list');
|
||||
this.$relatedNotesMoreNotes = this.$relatedNotesContainer.find('.related-notes-more-notes');
|
||||
|
||||
$(window).on('mouseup', e => {
|
||||
if (!$(e.target).closest(this.$widget[0]).length
|
||||
&& !$(e.target).closest(".algolia-autocomplete").length
|
||||
&& !$(e.target).closest("#context-menu-container").length) {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async showAttributeDetail({allAttributes, attribute, isOwned, x, y, focus}) {
|
||||
if (!attribute) {
|
||||
this.hide();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
utils.saveFocusedElement();
|
||||
|
||||
this.attrType = this.getAttrType(attribute);
|
||||
|
||||
const attrName =
|
||||
this.attrType === 'label-definition' ? attribute.name.substr(6)
|
||||
: (this.attrType === 'relation-definition' ? attribute.name.substr(9) : attribute.name);
|
||||
|
||||
const definition = this.attrType.endsWith('-definition')
|
||||
? promotedAttributeDefinitionParser.parse(attribute.value)
|
||||
: {};
|
||||
|
||||
this.$title.text(ATTR_TITLES[this.attrType]);
|
||||
|
||||
this.allAttributes = allAttributes;
|
||||
this.attribute = attribute;
|
||||
|
||||
// can be slightly slower so just make it async
|
||||
this.updateRelatedNotes();
|
||||
|
||||
this.$attrSaveDeleteButtonContainer.toggle(!!isOwned);
|
||||
|
||||
if (isOwned) {
|
||||
this.$attrIsOwnedBy.hide();
|
||||
}
|
||||
else {
|
||||
this.$attrIsOwnedBy
|
||||
.show()
|
||||
.empty()
|
||||
.append(attribute.type === 'label' ? 'Label' : 'Relation')
|
||||
.append(' is owned by note ')
|
||||
.append(await linkService.createNoteLink(attribute.noteId))
|
||||
}
|
||||
|
||||
this.$inputName
|
||||
.val(attrName)
|
||||
.attr('readonly', () => !isOwned);
|
||||
|
||||
this.$rowValue.toggle(this.attrType === 'label');
|
||||
this.$rowTargetNote.toggle(this.attrType === 'relation');
|
||||
|
||||
this.$rowPromoted.toggle(['label-definition', 'relation-definition'].includes(this.attrType));
|
||||
this.$inputPromoted
|
||||
.prop("checked", !!definition.isPromoted)
|
||||
.attr('disabled', () => !isOwned);
|
||||
|
||||
this.$rowMultiplicity.toggle(['label-definition', 'relation-definition'].includes(this.attrType));
|
||||
this.$inputMultiplicity
|
||||
.val(definition.multiplicity)
|
||||
.attr('disabled', () => !isOwned);
|
||||
|
||||
this.$rowLabelType.toggle(this.attrType === 'label-definition');
|
||||
this.$inputLabelType
|
||||
.val(definition.labelType)
|
||||
.attr('disabled', () => !isOwned);
|
||||
|
||||
this.$rowNumberPrecision.toggle(this.attrType === 'label-definition' && definition.labelType === 'number');
|
||||
this.$inputNumberPrecision
|
||||
.val(definition.numberPrecision)
|
||||
.attr('disabled', () => !isOwned);
|
||||
|
||||
this.$rowInverseRelation.toggle(this.attrType === 'relation-definition');
|
||||
this.$inputInverseRelation
|
||||
.val(definition.inverseRelation)
|
||||
.attr('disabled', () => !isOwned);
|
||||
|
||||
if (attribute.type === 'label') {
|
||||
this.$inputValue
|
||||
.val(attribute.value)
|
||||
.attr('readonly', () => !isOwned);
|
||||
}
|
||||
else if (attribute.type === 'relation') {
|
||||
this.$inputTargetNote
|
||||
.attr('readonly', () => !isOwned)
|
||||
.val("")
|
||||
.setSelectedNotePath("");
|
||||
|
||||
if (attribute.value) {
|
||||
const targetNote = await treeCache.getNote(attribute.value);
|
||||
|
||||
if (targetNote) {
|
||||
this.$inputTargetNote
|
||||
.val(targetNote ? targetNote.title : "")
|
||||
.setSelectedNotePath(attribute.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.$inputInheritable
|
||||
.prop("checked", !!attribute.isInheritable)
|
||||
.attr('disabled', () => !isOwned);
|
||||
|
||||
this.updateHelp();
|
||||
|
||||
this.toggleInt(true);
|
||||
|
||||
const offset = this.parent.$widget.offset();
|
||||
const detPosition = this.getDetailPosition(x, offset);
|
||||
|
||||
this.$widget
|
||||
.css("left", detPosition.left)
|
||||
.css("right", detPosition.right)
|
||||
.css("top", y - offset.top + 70)
|
||||
.css("max-height",
|
||||
this.$widget.outerHeight() + y > $(window).height() - 50
|
||||
? $(window).height() - y - 50
|
||||
: 10000);
|
||||
|
||||
if (focus === 'name') {
|
||||
this.$inputName
|
||||
.trigger('focus')
|
||||
.trigger('select');
|
||||
}
|
||||
}
|
||||
|
||||
getDetailPosition(x, offset) {
|
||||
let left = x - offset.left - this.$widget.outerWidth() / 2;
|
||||
let right = "";
|
||||
|
||||
if (left < 0) {
|
||||
left = 10;
|
||||
} else {
|
||||
const rightEdge = left + this.$widget.outerWidth();
|
||||
|
||||
if (rightEdge > this.parent.$widget.outerWidth() - 10) {
|
||||
left = "";
|
||||
right = 10;
|
||||
}
|
||||
}
|
||||
|
||||
return {left, right};
|
||||
}
|
||||
|
||||
async saveAndClose() {
|
||||
await this.triggerCommand('saveAttributes');
|
||||
|
||||
this.hide();
|
||||
|
||||
utils.focusSavedElement();
|
||||
}
|
||||
|
||||
async cancelAndClose() {
|
||||
await this.triggerCommand('reloadAttributes');
|
||||
|
||||
this.hide();
|
||||
|
||||
utils.focusSavedElement();
|
||||
}
|
||||
|
||||
userEditedAttribute() {
|
||||
this.updateAttributeInEditor();
|
||||
this.updateHelp();
|
||||
this.relatedNotesSpacedUpdate.scheduleUpdate();
|
||||
}
|
||||
|
||||
updateHelp() {
|
||||
const attrName = this.$inputName.val();
|
||||
|
||||
if (this.attrType in ATTR_HELP && attrName in ATTR_HELP[this.attrType]) {
|
||||
this.$attrHelp
|
||||
.empty()
|
||||
.append($("<td colspan=2>")
|
||||
.append($("<strong>").text(attrName))
|
||||
.append(" - ")
|
||||
.append(ATTR_HELP[this.attrType][attrName])
|
||||
)
|
||||
.show();
|
||||
}
|
||||
else {
|
||||
this.$attrHelp.empty().hide();
|
||||
}
|
||||
}
|
||||
|
||||
async updateRelatedNotes() {
|
||||
let {results, count} = await server.post('search-related', this.attribute);
|
||||
|
||||
for (const res of results) {
|
||||
res.noteId = res.notePathArray[res.notePathArray.length - 1];
|
||||
}
|
||||
|
||||
results = results.filter(({noteId}) => noteId !== this.noteId);
|
||||
|
||||
if (results.length === 0) {
|
||||
this.$relatedNotesContainer.hide();
|
||||
} else {
|
||||
this.$relatedNotesContainer.show();
|
||||
this.$relatedNotesTitle.text(`Other notes with ${this.attribute.type} name "${this.attribute.name}"`);
|
||||
|
||||
this.$relatedNotesList.empty();
|
||||
|
||||
const displayedResults = results.length <= DISPLAYED_NOTES ? results : results.slice(0, DISPLAYED_NOTES);
|
||||
const displayedNotes = await treeCache.getNotes(displayedResults.map(res => res.noteId));
|
||||
|
||||
for (const note of displayedNotes) {
|
||||
const notePath = treeService.getSomeNotePath(note);
|
||||
const $noteLink = await linkService.createNoteLink(notePath, {showNotePath: true});
|
||||
|
||||
this.$relatedNotesList.append(
|
||||
$("<li>").append($noteLink)
|
||||
);
|
||||
}
|
||||
|
||||
if (results.length > DISPLAYED_NOTES) {
|
||||
this.$relatedNotesMoreNotes.show().text(`... and ${count - DISPLAYED_NOTES} more.`);
|
||||
} else {
|
||||
this.$relatedNotesMoreNotes.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getAttrType(attribute) {
|
||||
if (attribute.type === 'label') {
|
||||
if (attribute.name.startsWith('label:')) {
|
||||
return "label-definition";
|
||||
} else if (attribute.name.startsWith('relation:')) {
|
||||
return "relation-definition";
|
||||
} else {
|
||||
return "label";
|
||||
}
|
||||
}
|
||||
else if (attribute.type === 'relation') {
|
||||
return "relation";
|
||||
}
|
||||
else {
|
||||
this.$title.text('');
|
||||
}
|
||||
}
|
||||
|
||||
updateAttributeInEditor() {
|
||||
let attrName = this.$inputName.val();
|
||||
|
||||
if (!ATTR_NAME_MATCHER.test(attrName)) {
|
||||
// invalid characters are simply ignored (from user perspective they are not even entered)
|
||||
attrName = attrName.replace(/[^\p{L}\p{N}_:]/ug, "");
|
||||
|
||||
this.$inputName.val(attrName);
|
||||
}
|
||||
|
||||
if (this.attrType === 'label-definition') {
|
||||
attrName = 'label:' + attrName;
|
||||
} else if (this.attrType === 'relation-definition') {
|
||||
attrName = 'relation:' + attrName;
|
||||
}
|
||||
|
||||
this.attribute.name = attrName;
|
||||
this.attribute.isInheritable = this.$inputInheritable.is(":checked");
|
||||
|
||||
if (this.attrType.endsWith('-definition')) {
|
||||
this.attribute.value = this.buildDefinitionValue();
|
||||
}
|
||||
else if (this.attrType === 'relation') {
|
||||
this.attribute.value = this.$inputTargetNote.getSelectedNoteId();
|
||||
}
|
||||
else {
|
||||
this.attribute.value = this.$inputValue.val();
|
||||
}
|
||||
|
||||
this.triggerCommand('updateAttributeList', { attributes: this.allAttributes });
|
||||
}
|
||||
|
||||
buildDefinitionValue() {
|
||||
const props = [];
|
||||
|
||||
if (this.$inputPromoted.is(":checked")) {
|
||||
props.push("promoted");
|
||||
}
|
||||
|
||||
props.push(this.$inputMultiplicity.val());
|
||||
|
||||
if (this.attrType === 'label-definition') {
|
||||
props.push(this.$inputLabelType.val());
|
||||
|
||||
if (this.$inputLabelType.val() === 'number' && this.$inputNumberPrecision.val() !== '') {
|
||||
props.push('precision=' + this.$inputNumberPrecision.val());
|
||||
}
|
||||
} else if (this.attrType === 'relation-definition' && this.$inputInverseRelation.val().trim().length > 0) {
|
||||
props.push("inverse=" + this.$inputInverseRelation.val());
|
||||
}
|
||||
|
||||
this.$rowNumberPrecision.toggle(
|
||||
this.attrType === 'label-definition'
|
||||
&& this.$inputLabelType.val() === 'number');
|
||||
|
||||
return props.join(",");
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.toggleInt(false);
|
||||
}
|
||||
|
||||
createNoteLink(noteId) {
|
||||
return $("<a>", {
|
||||
href: '#' + noteId,
|
||||
class: 'reference-link',
|
||||
'data-note-path': noteId
|
||||
});
|
||||
}
|
||||
|
||||
async noteSwitched() {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
514
src/public/app/widgets/attribute_widgets/attribute_editor.js
Normal file
514
src/public/app/widgets/attribute_widgets/attribute_editor.js
Normal file
@@ -0,0 +1,514 @@
|
||||
import TabAwareWidget from "../tab_aware_widget.js";
|
||||
import noteAutocompleteService from "../../services/note_autocomplete.js";
|
||||
import server from "../../services/server.js";
|
||||
import contextMenuService from "../../services/context_menu.js";
|
||||
import attributesParser from "../../services/attribute_parser.js";
|
||||
import libraryLoader from "../../services/library_loader.js";
|
||||
import treeCache from "../../services/tree_cache.js";
|
||||
import attributeRenderer from "../../services/attribute_renderer.js";
|
||||
import noteCreateService from "../../services/note_create.js";
|
||||
import treeService from "../../services/tree.js";
|
||||
|
||||
const HELP_TEXT = `
|
||||
<p>To add label, just type e.g. <code>#rock</code> or if you want to add also value then e.g. <code>#year = 2020</code></p>
|
||||
|
||||
<p>For relation, type <code>~author = @</code> which should bring up an autocomplete where you can look up the desired note.</p>
|
||||
|
||||
<p>Alternatively you can add label and relation using the <code>+</code> button on the right side.</p>`;
|
||||
|
||||
const TPL = `
|
||||
<div style="position: relative; padding-top: 10px; padding-bottom: 10px">
|
||||
<style>
|
||||
.attribute-list-editor {
|
||||
border: 0 !important;
|
||||
outline: 0 !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 0 0 5px !important;
|
||||
margin: 0 !important;
|
||||
color: var(--muted-text-color);
|
||||
max-height: 100px;
|
||||
overflow: auto;
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
|
||||
.save-attributes-button {
|
||||
color: var(--muted-text-color);
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
right: 25px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
.add-new-attribute-button {
|
||||
color: var(--muted-text-color);
|
||||
position: absolute;
|
||||
bottom: 13px;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
.add-new-attribute-button:hover, .save-attributes-button:hover {
|
||||
border: 1px solid var(--main-border-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.attribute-errors {
|
||||
color: red;
|
||||
padding: 5px 50px 0px 5px; /* large right padding to avoid buttons */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="attribute-list-editor" tabindex="200"></div>
|
||||
|
||||
<div class="bx bx-save save-attributes-button" title="Save attributes <enter>"></div>
|
||||
<div class="bx bx-plus add-new-attribute-button" title="Add a new attribute"></div>
|
||||
|
||||
<div class="attribute-errors" style="display: none;"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const mentionSetup = {
|
||||
feeds: [
|
||||
{
|
||||
marker: '@',
|
||||
feed: queryText => noteAutocompleteService.autocompleteSourceForCKEditor(queryText),
|
||||
itemRenderer: item => {
|
||||
const itemElement = document.createElement('button');
|
||||
|
||||
itemElement.innerHTML = `${item.highlightedNotePathTitle} `;
|
||||
|
||||
return itemElement;
|
||||
},
|
||||
minimumCharacters: 0
|
||||
},
|
||||
{
|
||||
marker: '#',
|
||||
feed: async queryText => {
|
||||
const names = await server.get(`attributes/names/?type=label&query=${encodeURIComponent(queryText)}`);
|
||||
|
||||
return names.map(name => {
|
||||
return {
|
||||
id: '#' + name,
|
||||
name: name
|
||||
}
|
||||
});
|
||||
},
|
||||
minimumCharacters: 0,
|
||||
attributeMention: true
|
||||
},
|
||||
{
|
||||
marker: '~',
|
||||
feed: async queryText => {
|
||||
const names = await server.get(`attributes/names/?type=relation&query=${encodeURIComponent(queryText)}`);
|
||||
|
||||
return names.map(name => {
|
||||
return {
|
||||
id: '~' + name,
|
||||
name: name
|
||||
}
|
||||
});
|
||||
},
|
||||
minimumCharacters: 0,
|
||||
attributeMention: true
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const editorConfig = {
|
||||
removePlugins: [
|
||||
'Enter',
|
||||
'ShiftEnter',
|
||||
'Heading',
|
||||
'Link',
|
||||
'Autoformat',
|
||||
'Bold',
|
||||
'Italic',
|
||||
'Underline',
|
||||
'Strikethrough',
|
||||
'Code',
|
||||
'Superscript',
|
||||
'Subscript',
|
||||
'BlockQuote',
|
||||
'Image',
|
||||
'ImageCaption',
|
||||
'ImageStyle',
|
||||
'ImageToolbar',
|
||||
'ImageUpload',
|
||||
'ImageResize',
|
||||
'List',
|
||||
'TodoList',
|
||||
'PasteFromOffice',
|
||||
'Table',
|
||||
'TableToolbar',
|
||||
'TableProperties',
|
||||
'TableCellProperties',
|
||||
'Indent',
|
||||
'IndentBlock',
|
||||
'BlockToolbar',
|
||||
'ParagraphButtonUI',
|
||||
'HeadingButtonsUI',
|
||||
'UploadimagePlugin',
|
||||
'InternalLinkPlugin',
|
||||
'MarkdownImportPlugin',
|
||||
'CuttonotePlugin',
|
||||
'TextTransformation',
|
||||
'Font',
|
||||
'FontColor',
|
||||
'FontBackgroundColor',
|
||||
'CodeBlock',
|
||||
'SelectAll',
|
||||
'IncludeNote',
|
||||
'CutToNote',
|
||||
'Mathematics',
|
||||
'indentBlockShortcutPlugin',
|
||||
'removeFormatLinksPlugin'
|
||||
],
|
||||
toolbar: {
|
||||
items: []
|
||||
},
|
||||
placeholder: "Type the labels and relations here",
|
||||
mention: mentionSetup
|
||||
};
|
||||
|
||||
export default class AttributeEditorWidget extends TabAwareWidget {
|
||||
constructor(attributeDetailWidget) {
|
||||
super();
|
||||
|
||||
this.attributeDetailWidget = attributeDetailWidget;
|
||||
}
|
||||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.contentSized();
|
||||
this.$editor = this.$widget.find('.attribute-list-editor');
|
||||
|
||||
this.initialized = this.initEditor();
|
||||
|
||||
this.$editor.on('keydown', async e => {
|
||||
if (e.which === 13) {
|
||||
await this.save();
|
||||
}
|
||||
|
||||
this.attributeDetailWidget.hide();
|
||||
});
|
||||
|
||||
this.$editor.on('blur', () => this.save());
|
||||
|
||||
this.$addNewAttributeButton = this.$widget.find('.add-new-attribute-button');
|
||||
this.$addNewAttributeButton.on('click', e => this.addNewAttribute(e));
|
||||
|
||||
this.$saveAttributesButton = this.$widget.find('.save-attributes-button');
|
||||
this.$saveAttributesButton.on('click', () => this.save());
|
||||
|
||||
this.$errors = this.$widget.find('.attribute-errors');
|
||||
}
|
||||
|
||||
addNewAttribute(e) {
|
||||
contextMenuService.show({
|
||||
x: e.pageX,
|
||||
y: e.pageY,
|
||||
orientation: 'left',
|
||||
items: [
|
||||
{title: `Add new label <kbd data-command="addNewLabel"></kbd>`, command: "addNewLabel", uiIcon: "hash"},
|
||||
{title: `Add new relation <kbd data-command="addNewRelation"></kbd>`, command: "addNewRelation", uiIcon: "transfer"},
|
||||
{title: "----"},
|
||||
{title: "Add new label definition", command: "addNewLabelDefinition", uiIcon: "empty"},
|
||||
{title: "Add new relation definition", command: "addNewRelationDefinition", uiIcon: "empty"},
|
||||
],
|
||||
selectMenuItemHandler: ({command}) => this.handleAddNewAttributeCommand(command)
|
||||
});
|
||||
}
|
||||
|
||||
// triggered from keyboard shortcut
|
||||
addNewLabelEvent({tabId}) {
|
||||
if (this.isTab(tabId)) {
|
||||
this.handleAddNewAttributeCommand('addNewLabel');
|
||||
}
|
||||
}
|
||||
|
||||
// triggered from keyboard shortcut
|
||||
addNewRelationEvent({tabId}) {
|
||||
if (this.isTab(tabId)) {
|
||||
this.handleAddNewAttributeCommand('addNewRelation');
|
||||
}
|
||||
}
|
||||
|
||||
async handleAddNewAttributeCommand(command) {
|
||||
const attrs = this.parseAttributes();
|
||||
|
||||
if (!attrs) {
|
||||
return;
|
||||
}
|
||||
|
||||
let type, name, value;
|
||||
|
||||
if (command === 'addNewLabel') {
|
||||
type = 'label';
|
||||
name = 'myLabel';
|
||||
value = '';
|
||||
} else if (command === 'addNewRelation') {
|
||||
type = 'relation';
|
||||
name = 'myRelation';
|
||||
value = '';
|
||||
} else if (command === 'addNewLabelDefinition') {
|
||||
type = 'label';
|
||||
name = 'label:myLabel';
|
||||
value = 'promoted,single,text';
|
||||
} else if (command === 'addNewRelationDefinition') {
|
||||
type = 'label';
|
||||
name = 'relation:myRelation';
|
||||
value = 'promoted,single';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
attrs.push({
|
||||
type,
|
||||
name,
|
||||
value,
|
||||
isInheritable: false
|
||||
});
|
||||
|
||||
await this.renderOwnedAttributes(attrs, false);
|
||||
|
||||
this.$editor.scrollTop(this.$editor[0].scrollHeight);
|
||||
|
||||
const rect = this.$editor[0].getBoundingClientRect();
|
||||
|
||||
setTimeout(() => {
|
||||
// showing a little bit later because there's a conflict with outside click closing the attr detail
|
||||
this.attributeDetailWidget.showAttributeDetail({
|
||||
allAttributes: attrs,
|
||||
attribute: attrs[attrs.length - 1],
|
||||
isOwned: true,
|
||||
x: (rect.left + rect.right) / 2,
|
||||
y: rect.bottom,
|
||||
focus: 'name'
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
async save() {
|
||||
const attributes = this.parseAttributes();
|
||||
|
||||
if (attributes) {
|
||||
await server.put(`notes/${this.noteId}/attributes`, attributes, this.componentId);
|
||||
|
||||
this.$saveAttributesButton.fadeOut();
|
||||
|
||||
// blink the attribute text to give visual hint that save has been executed
|
||||
this.$editor.css('opacity', 0);
|
||||
|
||||
// revert back
|
||||
setTimeout(() => this.$editor.css('opacity', 1), 100);
|
||||
}
|
||||
}
|
||||
|
||||
parseAttributes() {
|
||||
try {
|
||||
const attrs = attributesParser.lexAndParse(this.getPreprocessedData());
|
||||
|
||||
return attrs;
|
||||
}
|
||||
catch (e) {
|
||||
this.$errors.text(e.message).slideDown();
|
||||
}
|
||||
}
|
||||
|
||||
getPreprocessedData() {
|
||||
const str = this.textEditor.getData()
|
||||
.replace(/<a[^>]+href="(#[A-Za-z0-9/]*)"[^>]*>[^<]*<\/a>/g, "$1")
|
||||
.replace(/ /g, " "); // otherwise .text() below outputs non-breaking space in unicode
|
||||
|
||||
return $("<div>").html(str).text();
|
||||
}
|
||||
|
||||
async initEditor() {
|
||||
await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
|
||||
|
||||
this.$widget.show();
|
||||
|
||||
this.$editor.on("click", e => this.handleEditorClick(e));
|
||||
|
||||
this.textEditor = await BalloonEditor.create(this.$editor[0], editorConfig);
|
||||
this.textEditor.model.document.on('change:data', () => this.dataChanged());
|
||||
|
||||
// disable spellcheck for attribute editor
|
||||
this.textEditor.editing.view.change(writer => writer.setAttribute('spellcheck', 'false', this.textEditor.editing.view.document.getRoot()));
|
||||
|
||||
//await import(/* webpackIgnore: true */'../../libraries/ckeditor/inspector.js');
|
||||
//CKEditorInspector.attach(this.textEditor);
|
||||
}
|
||||
|
||||
dataChanged() {
|
||||
if (this.lastSavedContent === this.textEditor.getData()) {
|
||||
this.$saveAttributesButton.fadeOut();
|
||||
}
|
||||
else {
|
||||
this.$saveAttributesButton.fadeIn();
|
||||
}
|
||||
|
||||
if (this.$errors.is(":visible")) {
|
||||
// using .hide() instead of .slideUp() since this will also hide the error after confirming
|
||||
// mention for relation name which suits up. When using.slideUp() error will appear and the slideUp which is weird
|
||||
this.$errors.hide();
|
||||
}
|
||||
}
|
||||
|
||||
async handleEditorClick(e) {
|
||||
const pos = this.textEditor.model.document.selection.getFirstPosition();
|
||||
|
||||
if (pos && pos.textNode && pos.textNode.data) {
|
||||
const clickIndex = this.getClickIndex(pos);
|
||||
|
||||
let parsedAttrs;
|
||||
|
||||
try {
|
||||
parsedAttrs = attributesParser.lexAndParse(this.getPreprocessedData(), true);
|
||||
}
|
||||
catch (e) {
|
||||
// the input is incorrect because user messed up with it and now needs to fix it manually
|
||||
return null;
|
||||
}
|
||||
|
||||
let matchedAttr = null;
|
||||
|
||||
for (const attr of parsedAttrs) {
|
||||
if (clickIndex > attr.startIndex && clickIndex <= attr.endIndex) {
|
||||
matchedAttr = attr;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if (matchedAttr) {
|
||||
this.$editor.tooltip('hide');
|
||||
|
||||
this.attributeDetailWidget.showAttributeDetail({
|
||||
allAttributes: parsedAttrs,
|
||||
attribute: matchedAttr,
|
||||
isOwned: true,
|
||||
x: e.pageX,
|
||||
y: e.pageY
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.showHelpTooltip();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
else {
|
||||
this.showHelpTooltip();
|
||||
}
|
||||
}
|
||||
|
||||
showHelpTooltip() {
|
||||
this.attributeDetailWidget.hide();
|
||||
|
||||
this.$editor.tooltip({
|
||||
trigger: 'focus',
|
||||
html: true,
|
||||
title: HELP_TEXT,
|
||||
placement: 'bottom',
|
||||
offset: "0,30"
|
||||
});
|
||||
|
||||
this.$editor.tooltip('show');
|
||||
}
|
||||
|
||||
getClickIndex(pos) {
|
||||
let clickIndex = pos.offset - pos.textNode.startOffset;
|
||||
|
||||
let curNode = pos.textNode;
|
||||
|
||||
while (curNode.previousSibling) {
|
||||
curNode = curNode.previousSibling;
|
||||
|
||||
if (curNode.name === 'reference') {
|
||||
clickIndex += curNode._attrs.get('notePath').length + 1;
|
||||
} else {
|
||||
clickIndex += curNode.data.length;
|
||||
}
|
||||
}
|
||||
|
||||
return clickIndex;
|
||||
}
|
||||
|
||||
async loadReferenceLinkTitle(noteId, $el) {
|
||||
const note = await treeCache.getNote(noteId, true);
|
||||
|
||||
let title;
|
||||
|
||||
if (!note) {
|
||||
title = '[missing]';
|
||||
}
|
||||
else if (!note.isDeleted) {
|
||||
title = note.title;
|
||||
}
|
||||
else {
|
||||
title = note.isErased ? '[erased]' : `${note.title} (deleted)`;
|
||||
}
|
||||
|
||||
$el.text(title);
|
||||
}
|
||||
|
||||
async refreshWithNote(note) {
|
||||
await this.renderOwnedAttributes(note.getOwnedAttributes(), true);
|
||||
}
|
||||
|
||||
async renderOwnedAttributes(ownedAttributes, saved) {
|
||||
ownedAttributes = ownedAttributes.filter(oa => !oa.isDeleted);
|
||||
|
||||
let htmlAttrs = (await attributeRenderer.renderAttributes(ownedAttributes, true)).html();
|
||||
|
||||
if (htmlAttrs.length > 0) {
|
||||
htmlAttrs += " ";
|
||||
}
|
||||
|
||||
this.textEditor.setData(htmlAttrs);
|
||||
|
||||
if (saved) {
|
||||
this.lastSavedContent = this.textEditor.getData();
|
||||
|
||||
this.$saveAttributesButton.fadeOut(0);
|
||||
}
|
||||
}
|
||||
|
||||
async focusOnAttributesEvent({tabId}) {
|
||||
if (this.tabContext.tabId === tabId) {
|
||||
if (this.$editor.is(":visible")) {
|
||||
this.$editor.trigger('focus');
|
||||
|
||||
this.textEditor.model.change(writer => { // put focus to the end of the content
|
||||
writer.setSelection(writer.createPositionAt(this.textEditor.model.document.getRoot(), 'end'));
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.triggerCommand('focusOnDetail', {tabId: this.tabContext.tabId});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async createNoteForReferenceLink(title) {
|
||||
const {note} = await noteCreateService.createNote(this.noteId, {
|
||||
activate: false,
|
||||
title: title
|
||||
});
|
||||
|
||||
return treeService.getSomeNotePath(note);
|
||||
}
|
||||
|
||||
async updateAttributeList(attributes) {
|
||||
await this.renderOwnedAttributes(attributes, false);
|
||||
}
|
||||
|
||||
entitiesReloadedEvent({loadResults}) {
|
||||
if (loadResults.getAttributes(this.componentId).find(attr => attr.isAffecting(this.note))) {
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import TabAwareWidget from "../tab_aware_widget.js";
|
||||
import AttributeDetailWidget from "./attribute_detail.js";
|
||||
import AttributeEditorWidget from "./attribute_editor.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="attribute-list">
|
||||
<style>
|
||||
.attribute-list {
|
||||
margin-left: 7px;
|
||||
margin-right: 7px;
|
||||
margin-top: 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.attribute-list-editor p {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="attr-editor-placeholder"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export default class OwnedAttributeListWidget extends TabAwareWidget {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.attributeDetailWidget = new AttributeDetailWidget().setParent(this);
|
||||
this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget).setParent(this);
|
||||
|
||||
this.child(this.attributeEditorWidget, this.attributeDetailWidget);
|
||||
}
|
||||
|
||||
renderTitle(note) {
|
||||
const ownedAttrs = note.getAttributes().filter(attr => attr.noteId === this.noteId && !attr.isAutoLink)
|
||||
|
||||
this.$title.text(`Owned attrs (${ownedAttrs.length})`);
|
||||
|
||||
return {
|
||||
show: true,
|
||||
$title: this.$title
|
||||
};
|
||||
}
|
||||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.overflowing();
|
||||
|
||||
this.$widget.find('.attr-editor-placeholder').replaceWith(this.attributeEditorWidget.render());
|
||||
this.$widget.append(this.attributeDetailWidget.render());
|
||||
|
||||
this.$title = $('<div>');
|
||||
}
|
||||
|
||||
async saveAttributesCommand() {
|
||||
await this.attributeEditorWidget.save();
|
||||
}
|
||||
|
||||
async reloadAttributesCommand() {
|
||||
await this.attributeEditorWidget.refresh();
|
||||
}
|
||||
|
||||
async updateAttributeListCommand({attributes}) {
|
||||
await this.attributeEditorWidget.updateAttributeList(attributes);
|
||||
}
|
||||
|
||||
entitiesReloadedEvent({loadResults}) {
|
||||
if (loadResults.getAttributes(this.componentId).find(attr => attr.isAffecting(this.note))) {
|
||||
this.refreshWithNote(this.note, true);
|
||||
|
||||
this.renderTitle(this.note);
|
||||
}
|
||||
}
|
||||
}
|
||||
312
src/public/app/widgets/attribute_widgets/promoted_attributes.js
Normal file
312
src/public/app/widgets/attribute_widgets/promoted_attributes.js
Normal file
@@ -0,0 +1,312 @@
|
||||
import server from "../../services/server.js";
|
||||
import ws from "../../services/ws.js";
|
||||
import treeService from "../../services/tree.js";
|
||||
import noteAutocompleteService from "../../services/note_autocomplete.js";
|
||||
import TabAwareWidget from "../tab_aware_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div>
|
||||
<style>
|
||||
.promoted-attributes-container {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
justify-content: space-evenly;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.promoted-attribute-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.promoted-attribute-cell div.input-group {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="promoted-attributes-container"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export default class PromotedAttributesWidget extends TabAwareWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.overflowing();
|
||||
this.$container = this.$widget.find(".promoted-attributes-container");
|
||||
|
||||
this.$title = $('<div>');
|
||||
}
|
||||
|
||||
renderTitle(note) {
|
||||
const promotedDefAttrs = this.getPromotedDefinitionAttributes();
|
||||
|
||||
if (promotedDefAttrs.length === 0) {
|
||||
return { show: false };
|
||||
}
|
||||
|
||||
this.$title.text(`Promoted attrs (${promotedDefAttrs.length})`);
|
||||
|
||||
return {
|
||||
show: true,
|
||||
activate: true,
|
||||
$title: this.$title
|
||||
};
|
||||
}
|
||||
|
||||
async refreshWithNote(note) {
|
||||
this.$container.empty();
|
||||
|
||||
const promotedDefAttrs = this.getPromotedDefinitionAttributes();
|
||||
const ownedAttributes = note.getOwnedAttributes();
|
||||
|
||||
if (promotedDefAttrs.length === 0) {
|
||||
this.toggleInt(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const $cells = [];
|
||||
|
||||
for (const definitionAttr of promotedDefAttrs) {
|
||||
const valueType = definitionAttr.name.startsWith('label:') ? 'label' : 'relation';
|
||||
const valueName = definitionAttr.name.substr(valueType.length + 1);
|
||||
|
||||
let valueAttrs = ownedAttributes.filter(el => el.name === valueName && el.type === valueType);
|
||||
|
||||
if (valueAttrs.length === 0) {
|
||||
valueAttrs.push({
|
||||
attributeId: "",
|
||||
type: valueType,
|
||||
name: valueName,
|
||||
value: ""
|
||||
});
|
||||
}
|
||||
|
||||
if (definitionAttr.getDefinition().multiplicity === 'single') {
|
||||
valueAttrs = valueAttrs.slice(0, 1);
|
||||
}
|
||||
|
||||
for (const valueAttr of valueAttrs) {
|
||||
const $cell = await this.createPromotedAttributeCell(definitionAttr, valueAttr, valueName);
|
||||
|
||||
$cells.push($cell);
|
||||
}
|
||||
}
|
||||
|
||||
// we replace the whole content in one step so there can't be any race conditions
|
||||
// (previously we saw promoted attributes doubling)
|
||||
this.$container.empty().append(...$cells);
|
||||
this.toggleInt(true);
|
||||
}
|
||||
|
||||
getPromotedDefinitionAttributes() {
|
||||
if (this.note.hasLabel('hidePromotedAttributes')) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return this.note.getAttributes()
|
||||
.filter(attr => attr.isDefinition())
|
||||
.filter(attr => {
|
||||
const def = attr.getDefinition();
|
||||
|
||||
return def && def.isPromoted;
|
||||
});
|
||||
}
|
||||
|
||||
async createPromotedAttributeCell(definitionAttr, valueAttr, valueName) {
|
||||
const definition = definitionAttr.getDefinition();
|
||||
|
||||
const $input = $("<input>")
|
||||
.prop("tabindex", 200 + definitionAttr.position)
|
||||
.prop("attribute-id", valueAttr.noteId === this.noteId ? valueAttr.attributeId : '') // if not owned, we'll force creation of a new attribute instead of updating the inherited one
|
||||
.prop("attribute-type", valueAttr.type)
|
||||
.prop("attribute-name", valueAttr.name)
|
||||
.prop("value", valueAttr.value)
|
||||
.addClass("form-control")
|
||||
.addClass("promoted-attribute-input")
|
||||
.on('change', event => this.promotedAttributeChanged(event));
|
||||
|
||||
const $actionCell = $("<div>");
|
||||
const $multiplicityCell = $("<td>")
|
||||
.addClass("multiplicity")
|
||||
.attr("nowrap", true);
|
||||
|
||||
const $wrapper = $('<div class="promoted-attribute-cell">')
|
||||
.append($("<strong>").text(valueName))
|
||||
.append($("<div>").addClass("input-group").append($input))
|
||||
.append($actionCell)
|
||||
.append($multiplicityCell);
|
||||
|
||||
if (valueAttr.type === 'label') {
|
||||
if (definition.labelType === 'text') {
|
||||
$input.prop("type", "text");
|
||||
|
||||
// no need to await for this, can be done asynchronously
|
||||
server.get('attributes/values/' + encodeURIComponent(valueAttr.name)).then(attributeValues => {
|
||||
if (attributeValues.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
attributeValues = attributeValues.map(attribute => ({ value: attribute }));
|
||||
|
||||
$input.autocomplete({
|
||||
appendTo: document.querySelector('body'),
|
||||
hint: false,
|
||||
autoselect: false,
|
||||
openOnFocus: true,
|
||||
minLength: 0,
|
||||
tabAutocomplete: false
|
||||
}, [{
|
||||
displayKey: 'value',
|
||||
source: function (term, cb) {
|
||||
term = term.toLowerCase();
|
||||
|
||||
const filtered = attributeValues.filter(attr => attr.value.toLowerCase().includes(term));
|
||||
|
||||
cb(filtered);
|
||||
}
|
||||
}]);
|
||||
|
||||
$input.on('autocomplete:selected', e => this.promotedAttributeChanged(e))
|
||||
});
|
||||
}
|
||||
else if (definition.labelType === 'number') {
|
||||
$input.prop("type", "number");
|
||||
|
||||
let step = 1;
|
||||
|
||||
for (let i = 0; i < (definition.numberPrecision || 0) && i < 10; i++) {
|
||||
step /= 10;
|
||||
}
|
||||
|
||||
$input.prop("step", step);
|
||||
$input
|
||||
.css("text-align", "right")
|
||||
.css("width", "120");
|
||||
}
|
||||
else if (definition.labelType === 'boolean') {
|
||||
$input.prop("type", "checkbox");
|
||||
// hack, without this the checkbox is invisible
|
||||
// we should be using a different bootstrap structure for checkboxes
|
||||
$input.css('width', '80px');
|
||||
|
||||
if (valueAttr.value === "true") {
|
||||
$input.prop("checked", "checked");
|
||||
}
|
||||
}
|
||||
else if (definition.labelType === 'date') {
|
||||
$input.prop("type", "date");
|
||||
}
|
||||
else if (definition.labelType === 'url') {
|
||||
$input.prop("placeholder", "http://website...");
|
||||
|
||||
const $openButton = $("<span>")
|
||||
.addClass("input-group-text open-external-link-button bx bx-window-open")
|
||||
.prop("title", "Open external link")
|
||||
.on('click', () => window.open($input.val(), '_blank'));
|
||||
|
||||
$input.after($("<div>")
|
||||
.addClass("input-group-append")
|
||||
.append($openButton));
|
||||
}
|
||||
else {
|
||||
ws.logError("Unknown labelType=" + definitionAttr.labelType);
|
||||
}
|
||||
}
|
||||
else if (valueAttr.type === 'relation') {
|
||||
if (valueAttr.value) {
|
||||
$input.val(await treeService.getNoteTitle(valueAttr.value));
|
||||
}
|
||||
|
||||
// no need to wait for this
|
||||
noteAutocompleteService.initNoteAutocomplete($input);
|
||||
|
||||
$input.on('autocomplete:noteselected', (event, suggestion, dataset) => {
|
||||
this.promotedAttributeChanged(event);
|
||||
});
|
||||
|
||||
$input.setSelectedNotePath(valueAttr.value);
|
||||
}
|
||||
else {
|
||||
ws.logError("Unknown attribute type=" + valueAttr.type);
|
||||
return;
|
||||
}
|
||||
|
||||
if (definition.multiplicity === "multi") {
|
||||
const addButton = $("<span>")
|
||||
.addClass("bx bx-plus pointer")
|
||||
.prop("title", "Add new attribute")
|
||||
.on('click', async () => {
|
||||
const $new = await this.createPromotedAttributeCell(definitionAttr, {
|
||||
attributeId: "",
|
||||
type: valueAttr.type,
|
||||
name: valueName,
|
||||
value: ""
|
||||
}, valueName);
|
||||
|
||||
$wrapper.after($new);
|
||||
|
||||
$new.find('input').trigger('focus');
|
||||
});
|
||||
|
||||
const removeButton = $("<span>")
|
||||
.addClass("bx bx-trash pointer")
|
||||
.prop("title", "Remove this attribute")
|
||||
.on('click', async () => {
|
||||
if (valueAttr.attributeId) {
|
||||
await server.remove("notes/" + this.noteId + "/attributes/" + valueAttr.attributeId, this.componentId);
|
||||
}
|
||||
|
||||
$wrapper.remove();
|
||||
});
|
||||
|
||||
$multiplicityCell
|
||||
.append(" ")
|
||||
.append(addButton)
|
||||
.append(" ")
|
||||
.append(removeButton);
|
||||
}
|
||||
|
||||
return $wrapper;
|
||||
}
|
||||
|
||||
async promotedAttributeChanged(event) {
|
||||
const $attr = $(event.target);
|
||||
|
||||
let value;
|
||||
|
||||
if ($attr.prop("type") === "checkbox") {
|
||||
value = $attr.is(':checked') ? "true" : "false";
|
||||
}
|
||||
else if ($attr.prop("attribute-type") === "relation") {
|
||||
const selectedPath = $attr.getSelectedNotePath();
|
||||
|
||||
value = selectedPath ? treeService.getNoteIdFromNotePath(selectedPath) : "";
|
||||
}
|
||||
else {
|
||||
value = $attr.val();
|
||||
}
|
||||
|
||||
const result = await server.put(`notes/${this.noteId}/attribute`, {
|
||||
attributeId: $attr.prop("attribute-id"),
|
||||
type: $attr.prop("attribute-type"),
|
||||
name: $attr.prop("attribute-name"),
|
||||
value: value
|
||||
}, this.componentId);
|
||||
|
||||
$attr.prop("attribute-id", result.attributeId);
|
||||
}
|
||||
|
||||
entitiesReloadedEvent({loadResults}) {
|
||||
if (loadResults.getAttributes(this.componentId).find(attr => attr.isAffecting(this.note))) {
|
||||
this.refresh();
|
||||
|
||||
this.renderTitle(this.note);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user