From 32ce6e7a081a9ee579a4c625b7ce34ef8d35b488 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Tue, 9 Sep 2025 19:41:38 +0300 Subject: [PATCH] chore(react/collections/table): integrate cleanup --- .../widgets/collections/table/col_editing.ts | 24 +++-- .../src/widgets/collections/table/index.tsx | 7 +- .../view_widgets/table_view/col_editing.ts | 37 ------- .../widgets/view_widgets/table_view/index.ts | 101 ------------------ 4 files changed, 19 insertions(+), 150 deletions(-) delete mode 100644 apps/client/src/widgets/view_widgets/table_view/col_editing.ts delete mode 100644 apps/client/src/widgets/view_widgets/table_view/index.ts diff --git a/apps/client/src/widgets/collections/table/col_editing.ts b/apps/client/src/widgets/collections/table/col_editing.ts index 8e15677d9..53f63a152 100644 --- a/apps/client/src/widgets/collections/table/col_editing.ts +++ b/apps/client/src/widgets/collections/table/col_editing.ts @@ -2,7 +2,7 @@ import { useLegacyImperativeHandlers } from "../../react/hooks"; import { Attribute } from "../../../services/attribute_parser"; import { RefObject } from "preact"; import { Tabulator } from "tabulator-tables"; -import { useRef, useState } from "preact/hooks"; +import { useRef } from "preact/hooks"; import { CommandListenerData, EventData } from "../../../components/app_context"; import AttributeDetailWidget from "../../attribute_widgets/attribute_detail"; import attributes from "../../../services/attributes"; @@ -14,7 +14,7 @@ import { executeBulkActions } from "../../../services/bulk_action"; export default function useColTableEditing(api: RefObject, attributeDetailWidget: AttributeDetailWidget, parentNote: FNote) { - const [ existingAttributeToEdit, setExistingAttributeToEdit ] = useState(); + const existingAttributeToEdit = useRef(); const newAttribute = useRef(); const newAttributePosition = useRef(); @@ -22,11 +22,11 @@ export default function useColTableEditing(api: RefObject, attributeD addNewTableColumnCommand({ referenceColumn, columnToEdit, direction, type }: EventData<"addNewTableColumn">) { let attr: Attribute | undefined; - setExistingAttributeToEdit(undefined); + existingAttributeToEdit.current = undefined; if (columnToEdit) { attr = getAttributeFromField(parentNote, columnToEdit.getField()); if (attr) { - setExistingAttributeToEdit({ ...attr }); + existingAttributeToEdit.current = { ...attr }; } } @@ -71,16 +71,16 @@ export default function useColTableEditing(api: RefObject, attributeD const { name, value, isInheritable } = newAttribute.current; api.current.blockRedraw(); - const isRename = (existingAttributeToEdit && existingAttributeToEdit.name !== name); + const isRename = (existingAttributeToEdit.current && existingAttributeToEdit.current.name !== name); try { if (isRename) { - const oldName = existingAttributeToEdit!.name.split(":")[1]; + const oldName = existingAttributeToEdit.current!.name.split(":")[1]; const [ type, newName ] = name.split(":"); await renameColumn(parentNote.noteId, type as "label" | "relation", oldName, newName); } - if (existingAttributeToEdit && (isRename || existingAttributeToEdit.isInheritable !== isInheritable)) { - attributes.removeOwnedLabelByName(parentNote, existingAttributeToEdit.name); + if (existingAttributeToEdit.current && (isRename || existingAttributeToEdit.current.isInheritable !== isInheritable)) { + attributes.removeOwnedLabelByName(parentNote, existingAttributeToEdit.current.name); } attributes.setLabel(parentNote.noteId, name, value, isInheritable); } finally { @@ -108,7 +108,13 @@ export default function useColTableEditing(api: RefObject, attributeD } }); - return { newAttributePosition }; + function resetNewAttributePosition() { + newAttribute.current = undefined; + newAttributePosition.current = undefined; + existingAttributeToEdit.current = undefined; + } + + return { newAttributePosition, resetNewAttributePosition }; } async function deleteColumn(parentNoteId: string, type: "label" | "relation", columnName: string) { diff --git a/apps/client/src/widgets/collections/table/index.tsx b/apps/client/src/widgets/collections/table/index.tsx index 5ab96ee6e..fc2e71a7b 100644 --- a/apps/client/src/widgets/collections/table/index.tsx +++ b/apps/client/src/widgets/collections/table/index.tsx @@ -31,8 +31,8 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon const contextMenuEvents = useContextMenu(note, parentComponent, tabulatorRef); const persistenceProps = usePersistence(viewConfig, saveConfig); const rowEditingEvents = useRowTableEditing(tabulatorRef, attributeDetailWidget, notePath); - const { newAttributePosition } = useColTableEditing(tabulatorRef, attributeDetailWidget, note); - const { columnDefs, rowData, movableRows, hasChildren } = useData(note, noteIds, viewConfig, newAttributePosition); + const { newAttributePosition, resetNewAttributePosition } = useColTableEditing(tabulatorRef, attributeDetailWidget, note); + const { columnDefs, rowData, movableRows, hasChildren } = useData(note, noteIds, viewConfig, newAttributePosition, resetNewAttributePosition); const dataTreeProps = useMemo(() => { if (!hasChildren) return {}; return { @@ -108,7 +108,7 @@ function usePersistence(initialConfig: TableConfig | null | undefined, saveConfi return { persistenceReaderFunc, persistenceWriterFunc }; } -function useData(note: FNote, noteIds: string[], viewConfig: TableConfig | undefined, newAttributePosition: RefObject) { +function useData(note: FNote, noteIds: string[], viewConfig: TableConfig | undefined, newAttributePosition: RefObject, resetNewAttributePosition: () => void) { const [ maxDepth ] = useNoteLabelInt(note, "maxNestingDepth") ?? -1; const [ columnDefs, setColumnDefs ] = useState(); @@ -130,6 +130,7 @@ function useData(note: FNote, noteIds: string[], viewConfig: TableConfig | undef setColumnDefs(columnDefs); setRowData(rowData); setHasChildren(hasChildren); + resetNewAttributePosition(); }); } 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 deleted file mode 100644 index 1a6939b3c..000000000 --- a/apps/client/src/widgets/view_widgets/table_view/col_editing.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { Tabulator } from "tabulator-tables"; -import AttributeDetailWidget from "../../attribute_widgets/attribute_detail"; -import Component from "../../../components/component"; -import { CommandListenerData, EventData } from "../../../components/app_context"; -import attributes from "../../../services/attributes"; -import FNote from "../../../entities/fnote"; -import { deleteColumn, renameColumn } from "./bulk_actions"; -import dialog from "../../../services/dialog"; -import { t } from "../../../services/i18n"; - -export default class TableColumnEditing extends Component { - - private api: Tabulator; - private parentNote: FNote; - - private newAttribute?: Attribute; - - constructor($parent: JQuery, parentNote: FNote, api: Tabulator) { - super(); - const parentComponent = glob.getComponentByEl($parent[0]); - this.api = api; - this.parentNote = parentNote; - } - - getNewAttributePosition() { - return this.newAttributePosition; - } - - resetNewAttributePosition() { - this.newAttribute = undefined; - this.newAttributePosition = undefined; - this.existingAttributeToEdit = undefined; - } - - - -} diff --git a/apps/client/src/widgets/view_widgets/table_view/index.ts b/apps/client/src/widgets/view_widgets/table_view/index.ts deleted file mode 100644 index d0684b317..000000000 --- a/apps/client/src/widgets/view_widgets/table_view/index.ts +++ /dev/null @@ -1,101 +0,0 @@ -import ViewMode, { type ViewModeArgs } from "../view_mode.js"; -import attributes from "../../../services/attributes.js"; -import SpacedUpdate from "../../../services/spaced_update.js"; -import type { EventData } from "../../../components/app_context.js"; - -import buildFooter from "./footer.js"; -import getAttributeDefinitionInformation, { buildRowDefinitions } from "./rows.js"; -import { AttributeDefinitionInformation, buildColumnDefinitions } from "./columns.js"; -import { setupContextMenu } from "./context_menu.js"; -import TableColumnEditing from "./col_editing.js"; -import TableRowEditing from "./row_editing.js"; - -const TPL = /*html*/` - -`; - -export interface StateInfo { - -} - -export default class TableView extends ViewMode { - - private $root: JQuery; - private $container: JQuery; - private spacedUpdate: SpacedUpdate; - private api?: Tabulator; - private persistentData: StateInfo["tableData"]; - private colEditing?: TableColumnEditing; - private rowEditing?: TableRowEditing; - private maxDepth: number = -1; - private rowNumberHint: number = 1; - - constructor(args: ViewModeArgs) { - super(args, "table"); - - this.$root = $(TPL); - this.$container = this.$root.find(".table-view-container"); - this.spacedUpdate = new SpacedUpdate(() => this.onSave(), 5_000); - this.persistentData = {}; - args.$parent.append(this.$root); - } - - async renderList() { - this.$container.empty(); - this.renderTable(this.$container[0]); - return this.$root; - } - - private async initialize(el: HTMLElement, info: AttributeDefinitionInformation[]) { - const viewStorage = await this.viewStorage.restore(); - this.persistentData = viewStorage?.tableData || {}; - - this.api = new Tabulator(el, opts); - - this.colEditing = new TableColumnEditing(this.args.$parent, this.args.parentNote, this.api); - this.rowEditing = new TableRowEditing(this.api, this.args.parentNotePath!); - - setupContextMenu(this.api, this.parentNote); - } - - #manageColumnUpdate() { - if (!this.api) { - return; - } - - const info = getAttributeDefinitionInformation(this.parentNote); - const columnDefs = buildColumnDefinitions({ - info, - movableRows: !!this.api.options.movableRows, - existingColumnData: this.persistentData?.columns, - rowNumberHint: this.rowNumberHint, - position: this.colEditing?.getNewAttributePosition() - }); - this.api.setColumns(columnDefs); - this.colEditing?.resetNewAttributePosition(); - } - - deleteTableColumnCommand(e) { this.colEditing?.deleteTableColumnCommand(e); } - - async #manageRowsUpdate() { - if (!this.api) { - return; - } - - const info = getAttributeDefinitionInformation(this.parentNote); - const { definitions, hasSubtree, rowNumber } = await buildRowDefinitions(this.parentNote, info, this.maxDepth); - this.rowNumberHint = rowNumber; - - // Force a refresh if the data tree needs enabling/disabling. - if (this.api.options.dataTree !== hasSubtree) { - return true; - } - - await this.api.replaceData(definitions); - return false; - } - -} -