click on inherited attr will also bring up the attribute detail widget

This commit is contained in:
zadam 2020-07-05 23:53:55 +02:00
parent 9f2545395d
commit 50b976990c
4 changed files with 87 additions and 35 deletions

6
package-lock.json generated
View File

@ -8487,9 +8487,9 @@
}
},
"ws": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.3.0.tgz",
"integrity": "sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w=="
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz",
"integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA=="
},
"x-xss-protection": {
"version": "1.3.0",

View File

@ -70,7 +70,7 @@
"turndown": "6.0.0",
"turndown-plugin-gfm": "1.0.2",
"unescape": "1.0.1",
"ws": "7.3.0",
"ws": "7.3.1",
"yauzl": "^2.10.0",
"yazl": "^2.5.1"
},

View File

@ -50,6 +50,8 @@ const TPL = `
<span class="bx bx-x close-attr-detail-button"></span>
</div>
<div class="attr-is-owned-by"></div>
<table class="attr-edit">
<tr>
<th>Name:</th>
@ -64,7 +66,7 @@ const TPL = `
<td><input type="checkbox" class="attr-edit-inheritable form-control form-control-sm" /></td>
</tr>
<tr>
<td colspan="2">
<td colspan="2" class="attr-edit-button-row">
<div style="display: flex; justify-content: space-between">
<div>
<button type="submit" class="btn btn-sm btn-primary">Save</button>
@ -100,7 +102,9 @@ export default class AttributeDetailWidget extends BasicWidget {
this.$attrEditName = this.$widget.find('.attr-edit-name');
this.$attrEditValue = this.$widget.find('.attr-edit-value');
this.$attrEditInheritable = this.$widget.find('.attr-edit-inheritable');
this.$attrEditButtonRow = this.$widget.find('.attr-edit-button-row');
this.$closeAttrDetailButton = this.$widget.find('.close-attr-detail-button');
this.$attrIsOwnedBy = this.$widget.find('.attr-is-owned-by');
this.$closeAttrDetailButton.on('click', () => this.hide());
@ -111,8 +115,8 @@ export default class AttributeDetailWidget extends BasicWidget {
});
}
async showAttributeDetail(attr, x, y) {
if (!attr) {
async showAttributeDetail({attribute, isOwned, x, y}) {
if (!attribute) {
this.hide();
return;
@ -120,7 +124,7 @@ export default class AttributeDetailWidget extends BasicWidget {
this.toggleInt(true);
let {results, count} = await server.post('search-related', attr);
let {results, count} = await server.post('search-related', attribute);
for (const res of results) {
res.noteId = res.notePathArray[res.notePathArray.length - 1];
@ -132,7 +136,7 @@ export default class AttributeDetailWidget extends BasicWidget {
this.$relatedNotesTitle.hide();
}
else {
this.$relatedNotesTitle.text(`Other notes with ${attr.type} name "${attr.name}"`);
this.$relatedNotesTitle.text(`Other notes with ${attribute.type} name "${attribute.name}"`);
}
this.$relatedNotesList.empty();
@ -156,8 +160,26 @@ export default class AttributeDetailWidget extends BasicWidget {
this.$relatedNotesMoreNotes.hide();
}
this.$attrEditName.val(attr.name);
this.$attrEditValue.val(attr.value);
if (isOwned) {
this.$attrIsOwnedBy.hide();
}
else {
this.$attrIsOwnedBy
.show()
.append(attribute.type === 'label' ? 'Label' : 'Relation')
.append(' is owned by note ')
.append(await linkService.createNoteLink(attribute.noteId))
}
this.$attrEditName
.val(attribute.name)
.attr('readonly', () => !isOwned);
this.$attrEditValue
.val(attribute.value)
.attr('readonly', () => !isOwned);
this.$attrEditButtonRow.toggle(!!isOwned);
this.$widget.css("left", x - this.$widget.width() / 2);
this.$widget.css("top", y + 30);

View File

@ -329,7 +329,12 @@ export default class NoteAttributesWidget extends TabAwareWidget {
}
}
this.attributeDetailWidget.showAttributeDetail(matchedAttr, e.pageX, e.pageY);
this.attributeDetailWidget.showAttributeDetail({
attribute: matchedAttr,
isOwned: true,
x: e.pageX,
y: e.pageY
});
}
});
@ -419,7 +424,7 @@ export default class NoteAttributesWidget extends TabAwareWidget {
const ownedAttributes = note.getOwnedAttributes();
const $attributesContainer = $("<div>");
await this.renderAttributes(ownedAttributes, $attributesContainer);
await this.renderAttributesIntoCKEditor(ownedAttributes, $attributesContainer);
await this.spacedUpdate.allowUpdateWithoutChange(() => {
this.textEditor.setData($attributesContainer.html());
@ -440,7 +445,7 @@ export default class NoteAttributesWidget extends TabAwareWidget {
this.$inheritedAttributes.empty();
await this.renderAttributes(inheritedAttributes, this.$inheritedAttributes);
await this.renderAttributesIntoDiv(inheritedAttributes, this.$inheritedAttributes);
this.parseAttributes();
}
@ -457,32 +462,57 @@ export default class NoteAttributesWidget extends TabAwareWidget {
});
}
async renderAttributes(attributes, $container) {
async renderAttributesIntoCKEditor(attributes, $container) {
for (const attribute of attributes) {
if (attribute.type === 'label') {
$container.append(document.createTextNode('#' + attribute.name));
this.renderAttribute(attribute, $container);
}
}
if (attribute.value) {
$container.append('=');
$container.append(document.createTextNode(this.formatValue(attribute.value)));
}
renderAttributesIntoDiv(attributes, $container) {
for (const attribute of attributes) {
const $span = $("<span>")
.on('click', e => this.attributeDetailWidget.showAttributeDetail({
attribute: {
noteId: attribute.noteId,
type: attribute.type,
name: attribute.name,
value: attribute.value
},
isOwned: false,
x: e.pageX,
y: e.pageY
}));
$container.append(' ');
} else if (attribute.type === 'relation') {
if (attribute.isAutoLink) {
continue;
}
$container.append($span);
if (attribute.value) {
$container.append(document.createTextNode('~' + attribute.name + "="));
$container.append(this.createNoteLink(attribute.value));
$container.append(" ");
} else {
ws.logError(`Relation ${attribute.attributeId} has empty target`);
}
} else {
ws.logError("Unknown attr type: " + attribute.type);
this.renderAttribute(attribute, $span);
}
}
renderAttribute(attribute, $container) {
if (attribute.type === 'label') {
$container.append(document.createTextNode('#' + attribute.name));
if (attribute.value) {
$container.append('=');
$container.append(document.createTextNode(this.formatValue(attribute.value)));
}
$container.append(' ');
} else if (attribute.type === 'relation') {
if (attribute.isAutoLink) {
return;
}
if (attribute.value) {
$container.append(document.createTextNode('~' + attribute.name + "="));
$container.append(this.createNoteLink(attribute.value));
$container.append(" ");
} else {
ws.logError(`Relation ${attribute.attributeId} has empty target`);
}
} else {
ws.logError("Unknown attr type: " + attribute.type);
}
}