From 41c4bc69cc89e9d5fad551b4a1028e5b4b4f3d08 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 7 Sep 2025 22:08:26 +0300 Subject: [PATCH] chore(react/collections/table): get attribute detail to show --- .../widgets/collections/table/col_editing.ts | 64 +++++++++++++++++++ .../src/widgets/collections/table/index.tsx | 14 ++-- .../table/{editing.ts => row_editing.ts} | 3 +- .../view_widgets/table_view/col_editing.ts | 48 -------------- 4 files changed, 76 insertions(+), 53 deletions(-) create mode 100644 apps/client/src/widgets/collections/table/col_editing.ts rename apps/client/src/widgets/collections/table/{editing.ts => row_editing.ts} (93%) diff --git a/apps/client/src/widgets/collections/table/col_editing.ts b/apps/client/src/widgets/collections/table/col_editing.ts new file mode 100644 index 000000000..6aa415a5a --- /dev/null +++ b/apps/client/src/widgets/collections/table/col_editing.ts @@ -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, attributeDetailWidget: AttributeDetailWidget) { + + const [ existingAttributeToEdit, setExistingAttributeToEdit ] = useState(); + const [ newAttributePosition, setNewAttributePosition ] = useState(); + + 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 {}; +} diff --git a/apps/client/src/widgets/collections/table/index.tsx b/apps/client/src/widgets/collections/table/index.tsx index 532622982..82e99ead9 100644 --- a/apps/client/src/widgets/collections/table/index.tsx +++ b/apps/client/src/widgets/collections/table/index.tsx @@ -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(() => { if (!hasChildren) return {}; return { @@ -74,7 +78,8 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon footerElement={} events={{ ...contextMenuEvents, - ...editingEvents + ...rowEditingEvents, + ...colEditingEvents }} persistence {...persistenceProps} layout="fitDataFill" @@ -87,6 +92,7 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon )} + {attributeDetailWidgetEl} ) } diff --git a/apps/client/src/widgets/collections/table/editing.ts b/apps/client/src/widgets/collections/table/row_editing.ts similarity index 93% rename from apps/client/src/widgets/collections/table/editing.ts rename to apps/client/src/widgets/collections/table/row_editing.ts index b8d66ea7f..2e5ecca14 100644 --- a/apps/client/src/widgets/collections/table/editing.ts +++ b/apps/client/src/widgets/collections/table/row_editing.ts @@ -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, parentNotePath: string): Partial { +export default function useRowTableEditing(api: RefObject, attributeDetailWidget: AttributeDetailWidget, parentNotePath: string): Partial { // Adding new rows useLegacyImperativeHandlers({ addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) { diff --git a/apps/client/src/widgets/view_widgets/table_view/col_editing.ts b/apps/client/src/widgets/view_widgets/table_view/col_editing.ts index b5568ca34..306a9d6fb 100644 --- a/apps/client/src/widgets/view_widgets/table_view/col_editing.ts +++ b/apps/client/src/widgets/view_widgets/table_view/col_editing.ts @@ -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, 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]; }