chore(react/collections/table): bring back footer

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

@@ -1,6 +1,5 @@
 import { useContext, useEffect, useRef, useState } from "preact/hooks";
 import { ViewModeProps } from "../interface";
-import "./index.css";
 import { buildColumnDefinitions } from "./columns";
 import getAttributeDefinitionInformation, { buildRowDefinitions, TableData } from "./rows";
 import { useNoteLabelInt } from "../../react/hooks";
@@ -9,6 +8,11 @@ import Tabulator from "./tabulator";
 import { Tabulator as VanillaTabulator, SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, ColumnDefinition, DataTreeModule} from 'tabulator-tables';
 import { useContextMenu } from "./context_menu";
 import { ParentComponent } from "../../react/react_utils";
+import FNote from "../../../entities/fnote";
+import { t } from "../../../services/i18n";
+import Button from "../../react/Button";
+import "./index.css";
+
 interface TableConfig {
     tableData?: {
         columns?: ColumnDefinition[];
@@ -42,15 +46,31 @@ export default function TableView({ note, viewConfig }: ViewModeProps<TableConfi
     return (
         <div className="table-view">
             {columnDefs && (
-                <Tabulator
-                    tabulatorRef={tabulatorRef}
-                    className="table-view-container"
-                    columns={columnDefs}
-                    data={rowData}
-                    modules={[ SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, DataTreeModule ]}
-                    {...contextMenuEvents}
-                />
+                <>
+                    <Tabulator
+                        tabulatorRef={tabulatorRef}
+                        className="table-view-container"
+                        columns={columnDefs}
+                        data={rowData}
+                        modules={[ SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, DataTreeModule ]}
+                        footerElement={<TableFooter note={note} />}
+                        {...contextMenuEvents}
+                    />
+                    <TableFooter note={note} />
+                </>
             )}
         </div>
     )
 }
+
+function TableFooter({ note }: { note: FNote }) {
+    return (note.type !== "search" &&
+        <div className="tabulator-footer">
+            <div className="tabulator-footer-contents">
+                <Button triggerCommand="addNewRow" icon="bx bx-plus" text={t("table_view.new-row")} />
+                {" "}
+                <Button triggerCommand="addNewTableColumn" icon="bx bx-carousel" text={t("table_view.new-column")} />
+            </div>
+        </div>
+    )
+}

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

@@ -1,8 +1,9 @@
-import { useEffect, useLayoutEffect, useRef } from "preact/hooks";
+import { useContext, useEffect, useLayoutEffect, useRef } from "preact/hooks";
 import { ColumnDefinition, EventCallBackMethods, Module, Tabulator as VanillaTabulator } from "tabulator-tables";
 import "tabulator-tables/dist/css/tabulator.css";
 import "../../../../src/stylesheets/table.css";
-import { RefObject } from "preact";
+import { ComponentChildren, RefObject } from "preact";
+import { ParentComponent, renderReactWidget } from "../../react/react_utils";
 
 interface TableProps<T> extends Partial<EventCallBackMethods> {
     tabulatorRef: RefObject<VanillaTabulator>;
@@ -10,9 +11,11 @@ interface TableProps<T> extends Partial<EventCallBackMethods> {
     columns: ColumnDefinition[];
     data?: T[];
     modules?: (new (table: VanillaTabulator) => Module)[];
+    footerElement?: ComponentChildren;
 }
 
-export default function Tabulator<T>({ className, columns, data, modules, tabulatorRef: externalTabulatorRef, ...events }: TableProps<T>) {
+export default function Tabulator<T>({ className, columns, data, modules, tabulatorRef: externalTabulatorRef, footerElement, ...events }: TableProps<T>) {
+    const parentComponent = useContext(ParentComponent);
     const containerRef = useRef<HTMLDivElement>(null);
     const tabulatorRef = useRef<VanillaTabulator>(null);
 
@@ -28,7 +31,8 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
 
         const tabulator = new VanillaTabulator(containerRef.current, {
             columns,
-            data
+            data,
+            footerElement: (parentComponent && footerElement ? renderReactWidget(parentComponent, footerElement)[0] : undefined)
         });
 
         tabulatorRef.current = tabulator;

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

@@ -1,22 +0,0 @@
-import FNote from "../../../entities/fnote.js";
-import { t } from "../../../services/i18n.js";
-
-function shouldDisplayFooter(parentNote: FNote) {
-    return (parentNote.type !== "search");
-}
-
-export default function buildFooter(parentNote: FNote) {
-    if (!shouldDisplayFooter(parentNote)) {
-        return undefined;
-    }
-
-    return /*html*/`\
-        <button class="btn btn-sm" data-trigger-command="addNewRow">
-            <span class="bx bx-plus"></span> ${t("table_view.new-row")}
-        </button>
-
-        <button class="btn btn-sm" data-trigger-command="addNewTableColumn">
-            <span class="bx bx-carousel"></span> ${t("table_view.new-column")}
-        </button>
-    `.trimStart();
-}