gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-29 02:28:57 +01:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

chore(react/collections/table): get attribute detail to show

Browse Source
This commit is contained in:
Elian Doran 2025-09-07 22:08:26 +03:00
parent 6eea921820
commit 41c4bc69cc
No known key found for this signature in database
4 changed files with 76 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
apps/client/src/widgets/collections/table/col_editing.ts Normal file
View File

@ -0,0 +1,64 @@
import { useLegacyImperativeHandlers } from "../../react/hooks";
import { Attribute } from "../../../services/attribute_parser";
import { RefObject } from "preact";
import { Tabulator } from "tabulator-tables";
import { useEffect, useState } from "preact/hooks";
import { EventData } from "../../../components/app_context";
import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
export default function useColTableEditing(api: RefObject<Tabulator>, attributeDetailWidget: AttributeDetailWidget) {
const [ existingAttributeToEdit, setExistingAttributeToEdit ] = useState<Attribute>();
const [ newAttributePosition, setNewAttributePosition ] = useState<number>();
useEffect(() => {
}, []);
useLegacyImperativeHandlers({
addNewTableColumnCommand({ referenceColumn, columnToEdit, direction, type }: EventData<"addNewTableColumn">) {
console.log("Ding");
let attr: Attribute | undefined;
setExistingAttributeToEdit(undefined);
if (columnToEdit) {
attr = this.getAttributeFromField(columnToEdit.getField());
if (attr) {
setExistingAttributeToEdit({ ...attr });
}
}
if (!attr) {
attr = {
type: "label",
name: `${type ?? "label"}:myLabel`,
value: "promoted,single,text",
isInheritable: true
};
}
if (referenceColumn && api.current) {
let newPosition = api.current.getColumns().indexOf(referenceColumn);
if (direction === "after") {
newPosition++;
}
setNewAttributePosition(newPosition);
} else {
setNewAttributePosition(undefined);
}
attributeDetailWidget.showAttributeDetail({
attribute: attr,
allAttributes: [ attr ],
isOwned: true,
x: 0,
y: 150,
focus: "name",
hideMultiplicity: true
});
}
});
return {};
}

14
apps/client/src/widgets/collections/table/index.tsx
View File

@ -2,7 +2,7 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "p
import { ViewModeProps } from "../interface";
import { buildColumnDefinitions } from "./columns";
import getAttributeDefinitionInformation, { buildRowDefinitions, TableData } from "./rows";
import { useNoteLabelInt, useSpacedUpdate } from "../../react/hooks";
import { useLegacyWidget, useNoteLabelInt, useSpacedUpdate } from "../../react/hooks";
import Tabulator from "./tabulator";
import { Tabulator as VanillaTabulator, SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, ColumnDefinition, DataTreeModule, Options} from 'tabulator-tables';
import { useContextMenu } from "./context_menu";
@ -11,7 +11,9 @@ import FNote from "../../../entities/fnote";
import { t } from "../../../services/i18n";
import Button from "../../react/Button";
import "./index.css";
import useTableEditing, { canReorderRows } from "./editing";
import useRowTableEditing, { canReorderRows } from "./row_editing";
import useColTableEditing from "./col_editing";
import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
interface TableConfig {
tableData?: {
@ -45,9 +47,11 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
});
}, [ note, noteIds ]);
const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget().contentSized());
const contextMenuEvents = useContextMenu(note, parentComponent, tabulatorRef);
const persistenceProps = usePersistence(viewConfig, saveConfig);
const editingEvents = useTableEditing(tabulatorRef, notePath);
const rowEditingEvents = useRowTableEditing(tabulatorRef, attributeDetailWidget, notePath);
const colEditingEvents = useColTableEditing(tabulatorRef, attributeDetailWidget);
const dataTreeProps = useMemo<Options>(() => {
if (!hasChildren) return {};
return {
@ -74,7 +78,8 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
footerElement={<TableFooter note={note} />}
events={{
...contextMenuEvents,
...editingEvents
...rowEditingEvents,
...colEditingEvents
}}
persistence {...persistenceProps}
layout="fitDataFill"
@ -87,6 +92,7 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
<TableFooter note={note} />
</>
)}
{attributeDetailWidgetEl}
</div>
)
}

3
apps/client/src/widgets/collections/table/editing.ts → apps/client/src/widgets/collections/table/row_editing.ts
View File

@ -8,8 +8,9 @@ import froca from "../../../services/froca";
import server from "../../../services/server";
import FNote from "../../../entities/fnote";
import branches from "../../../services/branches";
import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
export default function useTableEditing(api: RefObject<Tabulator>, parentNotePath: string): Partial<EventCallBackMethods> {
export default function useRowTableEditing(api: RefObject<Tabulator>, attributeDetailWidget: AttributeDetailWidget, parentNotePath: string): Partial<EventCallBackMethods> {
// Adding new rows
useLegacyImperativeHandlers({
addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {

48
apps/client/src/widgets/view_widgets/table_view/col_editing.ts
View File

@ -1,6 +1,5 @@
import { Tabulator } from "tabulator-tables";
import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
import { Attribute } from "../../../services/attribute_parser";
import Component from "../../../components/component";
import { CommandListenerData, EventData } from "../../../components/app_context";
import attributes from "../../../services/attributes";
@ -16,61 +15,14 @@ export default class TableColumnEditing extends Component {
private parentNote: FNote;
private newAttribute?: Attribute;
private newAttributePosition?: number;
private existingAttributeToEdit?: Attribute;
constructor($parent: JQuery<HTMLElement>, parentNote: FNote, api: Tabulator) {
super();
const parentComponent = glob.getComponentByEl($parent[0]);
this.attributeDetailWidget = new AttributeDetailWidget()
.contentSized()
.setParent(parentComponent);
$parent.append(this.attributeDetailWidget.render());
this.api = api;
this.parentNote = parentNote;
}
addNewTableColumnCommand({ referenceColumn, columnToEdit, direction, type }: EventData<"addNewTableColumn">) {
let attr: Attribute | undefined;
this.existingAttributeToEdit = undefined;
if (columnToEdit) {
attr = this.getAttributeFromField(columnToEdit.getField());
if (attr) {
this.existingAttributeToEdit = { ...attr };
}
}
if (!attr) {
attr = {
type: "label",
name: `${type ?? "label"}:myLabel`,
value: "promoted,single,text",
isInheritable: true
};
}
if (referenceColumn && this.api) {
this.newAttributePosition = this.api.getColumns().indexOf(referenceColumn);
if (direction === "after") {
this.newAttributePosition++;
}
} else {
this.newAttributePosition = undefined;
}
this.attributeDetailWidget!.showAttributeDetail({
attribute: attr,
allAttributes: [ attr ],
isOwned: true,
x: 0,
y: 150,
focus: "name",
hideMultiplicity: true
});
}
async updateAttributeListCommand({ attributes }: CommandListenerData<"updateAttributeList">) {
this.newAttribute = attributes[0];
}