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

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

View File

@ -3,9 +3,13 @@ import "./PromotedAttributes.css";
import { useNoteContext } from "./react/hooks";
import { Attribute } from "../services/attribute_parser";
import FAttribute from "../entities/fattribute";
import clsx from "clsx";
import { t } from "../services/i18n";
import { DefinitionObject } from "../services/promoted_attribute_definition_parser";
interface Cell {
definitionAttr: FAttribute;
definition: DefinitionObject;
valueAttr: Attribute;
valueName: string;
}
@ -44,7 +48,8 @@ export default function PromotedAttributes() {
}
for (const valueAttr of valueAttrs) {
cells.push({ definitionAttr, valueAttr, valueName });
const definition = definitionAttr.getDefinition();
cells.push({ definitionAttr, definition, valueAttr, valueName });
}
}
setCells(cells);
@ -60,17 +65,49 @@ export default function PromotedAttributes() {
}
function PromotedAttributeCell({ cell }: { cell: Cell }) {
const { valueName, valueAttr, definitionAttr } = cell;
const { valueName, valueAttr, definition, definitionAttr } = cell;
const inputId = `value-${valueAttr.attributeId}`;
const definition = definitionAttr.getDefinition();
return (
<div className="promoted-attribute-cell">
<label for={inputId}>{definition.promotedAlias ?? valueName}</label>
<div className="input-group">
<input
tabIndex={200 + definitionAttr.position}
id={inputId}
/>
</div>
<ActionCell cell={cell} />
<MultiplicityCell cell={cell} />
</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}
/>
)
}

View File

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