mirror of
https://github.com/zadam/trilium.git
synced 2025-11-26 02:24:23 +01:00
chore(react/promoted_attributes): port multiplicity buttons (without implementation)
This commit is contained in:
parent
33c3fb7de0
commit
9bed6b7e22
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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(" ").append($addButton).append(" ").append($removeButton);
|
||||
}
|
||||
|
||||
return $wrapper;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user