;
async refresh() {
// switching note/tab should close the widget
this.hide();
}
doRender() {
this.relatedNotesSpacedUpdate = new SpacedUpdate(async () => this.updateRelatedNotes(), 1000);
this.$widget = $(TPL);
shortcutService.bindElShortcut(this.$widget, 'ctrl+return', () => this.saveAndClose());
shortcutService.bindElShortcut(this.$widget, 'esc', () => this.cancelAndClose());
this.$title = this.$widget.find('.attr-detail-title');
this.$inputName = this.$widget.find('.attr-input-name');
this.$inputName.on('input', ev => {
if (!(ev.originalEvent as KeyboardEvent)?.isComposing) { // https://github.com/zadam/trilium/pull/3812
this.userEditedAttribute();
}
});
this.$inputName.on('change', () => this.userEditedAttribute());
this.$inputName.on('autocomplete:closed', () => 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('input', ev => {
if (!(ev.originalEvent as KeyboardEvent)?.isComposing) { // https://github.com/zadam/trilium/pull/3812
this.userEditedAttribute();
}
});
this.$inputValue.on('change', () => this.userEditedAttribute());
this.$inputValue.on('autocomplete:closed', () => this.userEditedAttribute());
this.$inputValue.on('focus', () => {
attributeAutocompleteService.initLabelValueAutocomplete({
$el: this.$inputValue,
open: true,
nameCallback: () => String(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.$rowPromotedAlias = this.$widget.find('.attr-row-promoted-alias');
this.$inputPromotedAlias = this.$widget.find('.attr-input-promoted-alias');
this.$inputPromotedAlias.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('input', ev => {
if (!(ev.originalEvent as KeyboardEvent)?.isComposing) { // https://github.com/zadam/trilium/pull/3812
this.userEditedAttribute();
}
});
this.$rowTargetNote = this.$widget.find('.attr-row-target-note');
this.$inputTargetNote = this.$widget.find('.attr-input-target-note');
noteAutocompleteService.initNoteAutocomplete(this.$inputTargetNote, { allowCreatingNotes: true })
.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('mousedown', 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 }: AttributeDetailOpts) {
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)
: {};
if (this.attrType) {
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(` ${t("attribute_detail.is_owned_by_note")} `)
.append(await linkService.createLink(attribute.noteId))
}
const disabledFn = (() => !isOwned ? "true" : undefined);
this.$inputName
.val(attrName)
.attr('readonly', disabledFn);
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', disabledFn);
this.$rowPromotedAlias.toggle(!!definition.isPromoted);
this.$inputPromotedAlias
.val(definition.promotedAlias || "")
.attr('disabled', disabledFn);
this.$rowMultiplicity.toggle(['label-definition', 'relation-definition'].includes(this.attrType || ""));
this.$inputMultiplicity
.val(definition.multiplicity || "")
.attr('disabled', disabledFn);
this.$rowLabelType.toggle(this.attrType === 'label-definition');
this.$inputLabelType
.val(definition.labelType || "")
.attr('disabled', disabledFn);
this.$rowNumberPrecision.toggle(this.attrType === 'label-definition' && definition.labelType === 'number');
this.$inputNumberPrecision
.val(definition.numberPrecision || "")
.attr('disabled', disabledFn);
this.$rowInverseRelation.toggle(this.attrType === 'relation-definition');
this.$inputInverseRelation
.val(definition.inverseRelation || "")
.attr('disabled', disabledFn);
if (attribute.type === 'label') {
this.$inputValue
.val(attribute.value)
.attr('readonly', disabledFn);
}
else if (attribute.type === 'relation') {
this.$inputTargetNote
.attr('readonly', disabledFn)
.val("")
.setSelectedNotePath("");
if (attribute.value) {
const targetNote = await froca.getNote(attribute.value);
if (targetNote) {
this.$inputTargetNote
.val(targetNote ? targetNote.title : "")
.setSelectedNotePath(attribute.value);
}
}
}
this.$inputInheritable
.prop("checked", !!attribute.isInheritable)
.attr('disabled', disabledFn);
this.updateHelp();
this.toggleInt(true);
const offset = this.parent?.$widget.offset() || { top: 0, left: 0 };
const detPosition = this.getDetailPosition(x, offset);
const outerHeight = this.$widget.outerHeight();
const height = $(window).height();
if (detPosition && outerHeight && height) {
this.$widget
.css("left", detPosition.left)
.css("right", detPosition.right)
.css("top", y - offset.top + 70)
.css("max-height",
outerHeight + y > height - 50
? height - y - 50
: 10000);
}
if (focus === 'name') {
this.$inputName
.trigger('focus')
.trigger('select');
}
}
getDetailPosition(x: number, offset: { left: number }) {
const outerWidth = this.$widget.outerWidth();
if (!outerWidth) {
return null;
}
let left: number | string = x - offset.left - outerWidth / 2;
let right: number | string = "";
if (left < 0) {
left = 10;
} else {
const rightEdge = left + outerWidth;
if (rightEdge > 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 = String(this.$inputName.val());
if (this.attrType && this.attrType in ATTR_HELP &&
attrName && attrName in ATTR_HELP[this.attrType]) {
this.$attrHelp
.empty()
.append($("| ")
.append($("").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(t("attribute_detail.other_notes_with_name", { attributeType: this.attribute.type, attributeName: this.attribute.name }));
this.$relatedNotesList.empty();
const displayedResults = results.length <= DISPLAYED_NOTES ? results : results.slice(0, DISPLAYED_NOTES);
const displayedNotes = await froca.getNotes(displayedResults.map(res => res.noteId));
const hoistedNoteId = appContext.tabManager.getActiveContext()?.hoistedNoteId;
for (const note of displayedNotes) {
const notePath = note.getBestNotePathString(hoistedNoteId);
const $noteLink = await linkService.createLink(notePath, { showNotePath: true });
this.$relatedNotesList.append(
$("").append($noteLink)
);
}
if (results.length > DISPLAYED_NOTES) {
this.$relatedNotesMoreNotes.show().text(t("attribute_detail.and_more", { count: count - DISPLAYED_NOTES }));
} else {
this.$relatedNotesMoreNotes.hide();
}
}
}
getAttrType(attribute: FAttribute) {
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 = String(this.$inputName.val());
if (!utils.isValidAttributeName(attrName)) {
// invalid characters are simply ignored (from user perspective they are not even entered)
attrName = utils.filterAttributeName(attrName);
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 = String(this.$inputValue.val());
}
this.triggerCommand('updateAttributeList', { attributes: this.allAttributes });
}
buildDefinitionValue() {
const props = [];
if (this.$inputPromoted.is(":checked")) {
props.push("promoted");
if (this.$inputPromotedAlias.val() !== '') {
props.push(`alias=${this.$inputPromotedAlias.val()}`);
}
}
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' && String(this.$inputInverseRelation.val())?.trim().length > 0) {
const inverseRelationName = this.$inputInverseRelation.val();
props.push(`inverse=${utils.filterAttributeName(String(inverseRelationName))}`);
}
this.$rowNumberPrecision.toggle(
this.attrType === 'label-definition'
&& this.$inputLabelType.val() === 'number');
this.$rowPromotedAlias.toggle(this.$inputPromoted.is(":checked"));
return props.join(",");
}
hide() {
this.toggleInt(false);
}
createLink(noteId: string) {
return $("", {
href: `#root/${noteId}`,
class: 'reference-link'
});
}
async noteSwitched() {
this.hide();
}
}
|