Added "Column" and "Row" commands to "Table" widget.

Problem: When Table widget has content in its cells, it becomes impossible to invoke row or column editors to bulk-edit cells.
paperbits · Oct 12, 2024 · 5d7764c · 5d7764c
1 parent 241a0ba
commit 5d7764c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/src/table-cell/tableCell.design.module.ts b/src/table-cell/tableCell.design.module.ts
@@ -30,7 +30,8 @@ export class TableCellDesignModule implements IInjectorModule {
             componentBinder: KnockoutComponentBinder,
             componentDefinition: TableCellEditor,
             handlerComponent: TableCellHandlers,
-            selectable: false
+            selectable: false,
+            draggable: false
         });
     }
 }
diff --git a/src/table-cell/tableCellHandlers.ts b/src/table-cell/tableCellHandlers.ts
@@ -46,6 +46,62 @@ export class TableCellHandlers implements IWidgetHandler<TableCellModel> {
                 {
                     controlType: "toolbox-splitter"
                 },
+                {
+                    controlType: "toolbox-button",
+                    tooltip: "Row settings",
+                    displayName: "Row",
+                    position: "top right",
+                    color: "#9C27B0",
+                    callback: () => {
+                        const view: View = {
+                            heading: "Table row",
+                            component: {
+                                name: "table-row-editor",
+                                params: {
+                                    model: context.parentModel,
+                                    cellModel: context.model,
+                                    rowIndex: Math.floor(context.parentModel.widgets.indexOf(context.model) / context.parentModel["numOfCols"]),
+                                    onChange: (model: TableModel) => {
+                                        context.parentBinding.applyChanges();
+                                        this.eventManager.dispatchEvent(Events.ContentUpdate);
+                                        // this.viewManager.clearContextualCommands();
+                                    }
+                                }
+                            }
+                        };
+                        this.viewManager.openViewAsPopup(view);
+                    }
+                },
+                {
+                    controlType: "toolbox-splitter"
+                },
+                {
+                    controlType: "toolbox-button",
+                    tooltip: "Column settings",
+                    displayName: "Column",
+                    position: "top right",
+                    color: "#9C27B0",
+                    callback: () => {
+                        const view: View = {
+                            heading: "Table column",
+                            component: {
+                                name: "table-column-editor",
+                                params: {
+                                    model: context.parentModel,
+                                    columnIndex: context.parentModel.widgets.indexOf(context.model),
+                                    onChange: (model: TableModel) => {
+                                        context.parentBinding.applyChanges();
+                                        this.eventManager.dispatchEvent(Events.ContentUpdate);
+                                    }
+                                }
+                            }
+                        };
+                        this.viewManager.openViewAsPopup(view);
+                    }
+                },
+                {
+                    controlType: "toolbox-splitter"
+                },
                 {
                     controlType: "toolbox-button",
                     tooltip: "Cell settings",