chore(react/collections/table): get attribute detail to show

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<Tabulator>, attributeDetailWidget: AttributeDetailWidget) {
+
+    const [ existingAttributeToEdit, setExistingAttributeToEdit ] = useState<Attribute>();
+    const [ newAttributePosition, setNewAttributePosition ] = useState<number>();
+
+    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 {};
+}

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<Options>(() => {
         if (!hasChildren) return {};
         return {
@@ -74,7 +78,8 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
                         footerElement={<TableFooter note={note} />}
                         events={{
                             ...contextMenuEvents,
-                            ...editingEvents
+                            ...rowEditingEvents,
+                            ...colEditingEvents
                         }}
                         persistence {...persistenceProps}
                         layout="fitDataFill"
@@ -87,6 +92,7 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
                     <TableFooter note={note} />
                 </>
             )}
+            {attributeDetailWidgetEl}
         </div>
     )
 }

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<Tabulator>, parentNotePath: string): Partial<EventCallBackMethods> {
+export default function useRowTableEditing(api: RefObject<Tabulator>, attributeDetailWidget: AttributeDetailWidget, parentNotePath: string): Partial<EventCallBackMethods> {
     // Adding new rows
     useLegacyImperativeHandlers({
         addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {

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<HTMLElement>, 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];
     }