From e761cd7c277bf9a6d768fc524243992a597d4183 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 7 Sep 2025 19:03:16 +0300 Subject: [PATCH] chore(react/collections/table): set up writing to attachment --- .../src/widgets/collections/table/index.tsx | 30 ++++++++++++++++--- .../widgets/collections/table/tabulator.tsx | 9 +++--- .../widgets/view_widgets/table_view/index.ts | 12 -------- 3 files changed, 31 insertions(+), 20 deletions(-) diff --git a/apps/client/src/widgets/collections/table/index.tsx b/apps/client/src/widgets/collections/table/index.tsx index b162cbfa4..b9f6a8d7a 100644 --- a/apps/client/src/widgets/collections/table/index.tsx +++ b/apps/client/src/widgets/collections/table/index.tsx @@ -1,8 +1,8 @@ -import { useContext, useEffect, useRef, useState } from "preact/hooks"; +import { useCallback, useContext, useEffect, useRef, useState } from "preact/hooks"; import { ViewModeProps } from "../interface"; import { buildColumnDefinitions } from "./columns"; import getAttributeDefinitionInformation, { buildRowDefinitions, TableData } from "./rows"; -import { useNoteLabelInt } from "../../react/hooks"; +import { useNoteLabelInt, useSpacedUpdate } from "../../react/hooks"; import { canReorderRows } from "../../view_widgets/table_view/dragging"; import Tabulator from "./tabulator"; import { Tabulator as VanillaTabulator, SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, ColumnDefinition, DataTreeModule} from 'tabulator-tables'; @@ -19,7 +19,7 @@ interface TableConfig { }; } -export default function TableView({ note, viewConfig }: ViewModeProps) { +export default function TableView({ note, viewConfig, saveConfig }: ViewModeProps) { const [ maxDepth ] = useNoteLabelInt(note, "maxNestingDepth") ?? -1; const [ columnDefs, setColumnDefs ] = useState(); const [ rowData, setRowData ] = useState(); @@ -42,10 +42,12 @@ export default function TableView({ note, viewConfig }: ViewModeProps - {columnDefs && ( + {viewConfig && columnDefs && ( <> } {...contextMenuEvents} + persistence {...persistenceProps} /> @@ -74,3 +77,22 @@ function TableFooter({ note }: { note: FNote }) { ) } + +function usePersistence(initialConfig: TableConfig | null | undefined, saveConfig: (newConfig: TableConfig) => void) { + const config = useRef(initialConfig); + const spacedUpdate = useSpacedUpdate(() => { + if (config.current) { + saveConfig(config.current); + } + }, 5_000); + const persistenceWriterFunc = useCallback((_id, type: string, data: object) => { + if (!config.current) config.current = {}; + if (!config.current.tableData) config.current.tableData = {}; + (config.current.tableData as Record)[type] = data; + spacedUpdate.scheduleUpdate(); + }, []); + const persistenceReaderFunc = useCallback((_id, type: string) => { + return config.current?.tableData?.[type]; + }, []); + return { persistenceReaderFunc, persistenceWriterFunc }; +} diff --git a/apps/client/src/widgets/collections/table/tabulator.tsx b/apps/client/src/widgets/collections/table/tabulator.tsx index 22b453110..90dee5efb 100644 --- a/apps/client/src/widgets/collections/table/tabulator.tsx +++ b/apps/client/src/widgets/collections/table/tabulator.tsx @@ -1,11 +1,11 @@ import { useContext, useEffect, useLayoutEffect, useRef } from "preact/hooks"; -import { ColumnDefinition, EventCallBackMethods, Module, Tabulator as VanillaTabulator } from "tabulator-tables"; +import { ColumnDefinition, EventCallBackMethods, Module, Options, Tabulator as VanillaTabulator } from "tabulator-tables"; import "tabulator-tables/dist/css/tabulator.css"; import "../../../../src/stylesheets/table.css"; import { ComponentChildren, RefObject } from "preact"; import { ParentComponent, renderReactWidget } from "../../react/react_utils"; -interface TableProps extends Partial { +interface TableProps extends Partial, Pick { tabulatorRef: RefObject; className?: string; columns: ColumnDefinition[]; @@ -14,7 +14,7 @@ interface TableProps extends Partial { footerElement?: ComponentChildren; } -export default function Tabulator({ className, columns, data, modules, tabulatorRef: externalTabulatorRef, footerElement, ...events }: TableProps) { +export default function Tabulator({ className, columns, data, modules, tabulatorRef: externalTabulatorRef, footerElement, persistence, persistenceReaderFunc, persistenceWriterFunc, ...events }: TableProps) { const parentComponent = useContext(ParentComponent); const containerRef = useRef(null); const tabulatorRef = useRef(null); @@ -32,7 +32,8 @@ export default function Tabulator({ className, columns, data, modules, tabula const tabulator = new VanillaTabulator(containerRef.current, { columns, data, - footerElement: (parentComponent && footerElement ? renderReactWidget(parentComponent, footerElement)[0] : undefined) + footerElement: (parentComponent && footerElement ? renderReactWidget(parentComponent, footerElement)[0] : undefined), + persistence, persistenceReaderFunc, persistenceWriterFunc }); tabulatorRef.current = tabulator; diff --git a/apps/client/src/widgets/view_widgets/table_view/index.ts b/apps/client/src/widgets/view_widgets/table_view/index.ts index 2d030f4cd..4383eada3 100644 --- a/apps/client/src/widgets/view_widgets/table_view/index.ts +++ b/apps/client/src/widgets/view_widgets/table_view/index.ts @@ -64,15 +64,9 @@ export default class TableView extends ViewMode { let opts: Options = { layout: "fitDataFill", index: "branchId", - persistence: true, movableColumns: true, movableRows, footerElement: buildFooter(this.parentNote), - persistenceWriterFunc: (_id, type: string, data: object) => { - (this.persistentData as Record)[type] = data; - this.spacedUpdate.scheduleUpdate(); - }, - persistenceReaderFunc: (_id, type: string) => this.persistentData?.[type], }; if (hasChildren) { @@ -99,12 +93,6 @@ export default class TableView extends ViewMode { setupContextMenu(this.api, this.parentNote); } - private onSave() { - this.viewStorage.store({ - tableData: this.persistentData, - }); - } - async onEntitiesReloaded({ loadResults }: EventData<"entitiesReloaded">) { if (!this.api) { return;