gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-26 10:34:25 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

chore(react/promoted_attributes): port multiplicity buttons (without implementation)

Browse Source
This commit is contained in:
Elian Doran 2025-11-23 10:22:58 +02:00
parent 33c3fb7de0
commit 9bed6b7e22
No known key found for this signature in database
2 changed files with 44 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
apps/client/src/widgets/PromotedAttributes.tsx
View File

@ -3,9 +3,13 @@ import "./PromotedAttributes.css";
import { useNoteContext } from "./react/hooks"; import { useNoteContext } from "./react/hooks";
import { Attribute } from "../services/attribute_parser"; import { Attribute } from "../services/attribute_parser";
import FAttribute from "../entities/fattribute"; import FAttribute from "../entities/fattribute";
import clsx from "clsx";
import { t } from "../services/i18n";
import { DefinitionObject } from "../services/promoted_attribute_definition_parser";
interface Cell { interface Cell {
definitionAttr: FAttribute; definitionAttr: FAttribute;
definition: DefinitionObject;
valueAttr: Attribute; valueAttr: Attribute;
valueName: string; valueName: string;
} }
@ -44,7 +48,8 @@ export default function PromotedAttributes() {
} }
for (const valueAttr of valueAttrs) { for (const valueAttr of valueAttrs) {
cells.push({ definitionAttr, valueAttr, valueName }); const definition = definitionAttr.getDefinition();
cells.push({ definitionAttr, definition, valueAttr, valueName });
} }
} }
setCells(cells); setCells(cells);
@ -60,17 +65,49 @@ export default function PromotedAttributes() {
} }
function PromotedAttributeCell({ cell }: { cell: Cell }) { function PromotedAttributeCell({ cell }: { cell: Cell }) {
const { valueName, valueAttr, definitionAttr } = cell; const { valueName, valueAttr, definition, definitionAttr } = cell;
const inputId = `value-${valueAttr.attributeId}`; const inputId = `value-${valueAttr.attributeId}`;
const definition = definitionAttr.getDefinition();
return ( return (
<div className="promoted-attribute-cell"> <div className="promoted-attribute-cell">
<label for={inputId}>{definition.promotedAlias ?? valueName}</label> <label for={inputId}>{definition.promotedAlias ?? valueName}</label>
<input <div className="input-group">
tabIndex={200 + definitionAttr.position} <input
id={inputId} tabIndex={200 + definitionAttr.position}
/> id={inputId}
/>
</div>
<ActionCell cell={cell} />
<MultiplicityCell cell={cell} />
</div> </div>
) )
} }
function ActionCell({ cell }: { cell: Cell }) {
return (
<div>
</div>
)
}
function MultiplicityCell({ cell }: { cell: Cell }) {
return (cell.definition.multiplicity === "multi" &&
<td className="multiplicity">
<PromotedActionButton icon="bx bx-plus" title={t("promoted_attributes.add_new_attribute")} />{' '}
<PromotedActionButton icon="bx bx-trash" title={t("promoted_attributes.remove_this_attribute")} />
</td>
)
}
function PromotedActionButton({ icon, title }: {
icon: string,
title: string })
{
return (
<span
className={clsx("tn-tool-button pointer", icon)}
title={title}
/>
)
}

18
apps/client/src/widgets/promoted_attributes.ts
View File

@ -62,18 +62,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
.addClass("promoted-attribute-input") .addClass("promoted-attribute-input")
.on("change", (event) => this.promotedAttributeChanged(event)); .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(
$("<label>")
.text(definition.promotedAlias ?? valueName)
)
.append($("<div>").addClass("input-group").append($input))
.append($actionCell)
.append($multiplicityCell);
if (valueAttr.type === "label") { if (valueAttr.type === "label") {
$wrapper.addClass(`promoted-attribute-label-${definition.labelType}`); $wrapper.addClass(`promoted-attribute-label-${definition.labelType}`);
if (definition.labelType === "text") { if (definition.labelType === "text") {
@ -207,8 +195,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
if (definition.multiplicity === "multi") { if (definition.multiplicity === "multi") {
const $addButton = $("<span>") const $addButton = $("<span>")
.addClass("bx bx-plus pointer tn-tool-button")
.prop("title", t("promoted_attributes.add_new_attribute"))
.on("click", async () => { .on("click", async () => {
const $new = await this.createPromotedAttributeCell( const $new = await this.createPromotedAttributeCell(
definitionAttr, definitionAttr,
@ -229,8 +215,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
}); });
const $removeButton = $("<span>") const $removeButton = $("<span>")
.addClass("bx bx-trash pointer tn-tool-button")
.prop("title", t("promoted_attributes.remove_this_attribute"))
.on("click", async () => { .on("click", async () => {
const attributeId = $input.attr("data-attribute-id"); const attributeId = $input.attr("data-attribute-id");
@ -260,8 +244,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
$wrapper.remove(); $wrapper.remove();
}); });
$multiplicityCell.append(" &nbsp;").append($addButton).append(" &nbsp;").append($removeButton);
} }
return $wrapper; return $wrapper;