chore(react/collections/table): bring back adding new rows

apps/client/src/widgets/collections/NoteList.tsx

@@ -19,7 +19,7 @@ interface NoteListProps<T extends object> {
 
 export default function NoteList<T extends object>({ note: providedNote, highlightedTokens, displayOnlyCollections }: NoteListProps<T>) {
     const widgetRef = useRef<HTMLDivElement>(null);
-    const { note: contextNote, noteContext } = useNoteContext();
+    const { note: contextNote, noteContext, notePath } = useNoteContext();
     const note = providedNote ?? contextNote;
     const viewType = useNoteViewType(note);
     const noteIds = useNoteIds(note, viewType);
@@ -56,9 +56,9 @@ export default function NoteList<T extends object>({ note: providedNote, highlig
     // Preload the configuration.
     let props: ViewModeProps<any> | undefined | null = null;
     const viewModeConfig = useViewModeConfig(note, viewType);
-    if (note && viewModeConfig) {
+    if (note && notePath && viewModeConfig) {
         props = {
-            note, noteIds,
+            note, noteIds, notePath,
             highlightedTokens,
             viewConfig: viewModeConfig[0],
             saveConfig: viewModeConfig[1]
@@ -66,7 +66,7 @@ export default function NoteList<T extends object>({ note: providedNote, highlig
     }
 
     return (
-        <div ref={widgetRef} className={`note-list-widget ${isFullHeight ? "full-height" : ""}`}>
+        <div ref={widgetRef} className={`note-list-widget component ${isFullHeight ? "full-height" : ""}`}>
             {props && isEnabled && (
                 <div className="note-list-widget-content">
                     {getComponentByViewType(viewType, props)}

apps/client/src/widgets/collections/interface.ts

@@ -7,6 +7,7 @@ export type ViewTypeOptions = typeof allViewTypes[number];
 
 export interface ViewModeProps<T extends object> {
     note: FNote;
+    notePath: string;
     /**
      * We're using noteIds so that it's not necessary to load all notes at once when paging.
      */

apps/client/src/widgets/collections/table/editing.ts

@@ -0,0 +1,57 @@
+import { RowComponent, Tabulator } from "tabulator-tables";
+import { CommandListenerData } from "../../../components/app_context";
+import note_create, { CreateNoteOpts } from "../../../services/note_create";
+import { useLegacyImperativeHandlers } from "../../react/hooks";
+import { RefObject } from "preact";
+
+export default function useTableEditing(api: RefObject<Tabulator>, parentNotePath: string) {
+    useLegacyImperativeHandlers({
+        addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {
+            const notePath = customNotePath ?? parentNotePath;
+            if (notePath) {
+                const opts: CreateNoteOpts = {
+                    activate: false,
+                    ...customOpts
+                }
+                note_create.createNote(notePath, opts).then(({ branch }) => {
+                    if (branch) {
+                        setTimeout(() => {
+                            if (!api.current) return;
+                            focusOnBranch(api.current, branch?.branchId);
+                        }, 100);
+                    }
+                })
+            }
+        }
+    });
+
+}
+
+function focusOnBranch(api: Tabulator, branchId: string) {
+    const row = findRowDataById(api.getRows(), branchId);
+    if (!row) return;
+
+    // Expand the parent tree if any.
+    if (api.options.dataTree) {
+        const parent = row.getTreeParent();
+        if (parent) {
+            parent.treeExpand();
+        }
+    }
+
+    row.getCell("title").edit();
+}
+
+function findRowDataById(rows: RowComponent[], branchId: string): RowComponent | null {
+    for (let row of rows) {
+        const item = row.getIndex() as string;
+
+        if (item === branchId) {
+            return row;
+        }
+
+        let found = findRowDataById(row.getTreeChildren(), branchId);
+        if (found) return found;
+    }
+    return null;
+}

apps/client/src/widgets/collections/table/index.tsx

@@ -12,6 +12,7 @@ import FNote from "../../../entities/fnote";
 import { t } from "../../../services/i18n";
 import Button from "../../react/Button";
 import "./index.css";
+import useTableEditing from "./editing";
 
 interface TableConfig {
     tableData?: {
@@ -19,7 +20,7 @@ interface TableConfig {
     };
 }
 
-export default function TableView({ note, viewConfig, saveConfig }: ViewModeProps<TableConfig>) {
+export default function TableView({ note, noteIds, notePath, viewConfig, saveConfig }: ViewModeProps<TableConfig>) {
     const [ maxDepth ] = useNoteLabelInt(note, "maxNestingDepth") ?? -1;
     const [ columnDefs, setColumnDefs ] = useState<ColumnDefinition[]>();
     const [ rowData, setRowData ] = useState<TableData[]>();
@@ -43,10 +44,11 @@ export default function TableView({ note, viewConfig, saveConfig }: ViewModeProp
             setMovableRows(movableRows);
             setHasChildren(hasChildren);
         });
-    }, [ note ]);
+    }, [ note, noteIds ]);
 
     const contextMenuEvents = useContextMenu(note, parentComponent, tabulatorRef);
     const persistenceProps = usePersistence(viewConfig, saveConfig);
+    useTableEditing(tabulatorRef, notePath);
     const dataTreeProps = useMemo<Options>(() => {
         if (!hasChildren) return {};
         return {
@@ -59,7 +61,6 @@ export default function TableView({ note, viewConfig, saveConfig }: ViewModeProp
             dataTreeCollapseElement: `<button class="tree-collapse"><span class="bx bx-chevron-down"></span></button>`
         }
     }, [ hasChildren ]);
-    console.log("Render with viewconfig", viewConfig);
 
     return (
         <div className="table-view">

apps/client/src/widgets/view_widgets/table_view/row_editing.ts

@@ -42,56 +42,6 @@ export default class TableRowEditing extends Component {
         });
     }
 
-    addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {
-        const parentNotePath = customNotePath ?? this.parentNotePath;
-        if (parentNotePath) {
-            const opts: CreateNoteOpts = {
-                activate: false,
-                ...customOpts
-            }
-            note_create.createNote(parentNotePath, opts).then(({ branch }) => {
-                if (branch) {
-                    setTimeout(() => {
-                        this.focusOnBranch(branch?.branchId);
-                    });
-                }
-            })
-        }
 }
 
-    focusOnBranch(branchId: string) {
-        if (!this.api) {
-            return;
-        }
 
-        const row = findRowDataById(this.api.getRows(), branchId);
-        if (!row) {
-            return;
-        }
-
-        // Expand the parent tree if any.
-        if (this.api.options.dataTree) {
-            const parent = row.getTreeParent();
-            if (parent) {
-                parent.treeExpand();
-            }
-        }
-
-        row.getCell("title").edit();
-    }
-
-}
-
-function findRowDataById(rows: RowComponent[], branchId: string): RowComponent | null {
-    for (let row of rows) {
-        const item = row.getIndex() as string;
-
-        if (item === branchId) {
-            return row;
-        }
-
-        let found = findRowDataById(row.getTreeChildren(), branchId);
-        if (found) return found;
-    }
-    return null;
-}