ROU-4186: New block for the click event on the grid (#328)

* Add GridOnCellClickEvent * Create ClickEvent feature * Add dispose method in ClickEvent * Remove JSON stringify from OnCellClickEvent trigger * Fix eslint errors
OutSystems · Apr 5, 2023 · fba3b01 · fba3b01
1 parent 20a0b09
commit fba3b01
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 1 deletion.
diff --git a/src/OSFramework/DataGrid/Event/Grid/GridEventType.enum.ts b/src/OSFramework/DataGrid/Event/Grid/GridEventType.enum.ts
@@ -8,6 +8,7 @@ namespace OSFramework.DataGrid.Event.Grid {
      */
     export enum GridEventType {
         Initialized = 'Initialized',
+        OnCellClick = 'OnCellClick',
         OnColumnPickerChange = 'OnColumnPickerChange',
         OnFiltersChange = 'OnFiltersChange',
         OnSortChange = 'OnSortChange',

diff --git a/src/OSFramework/DataGrid/Event/Grid/GridEventsManager.ts b/src/OSFramework/DataGrid/Event/Grid/GridEventsManager.ts
@@ -39,6 +39,9 @@ namespace OSFramework.DataGrid.Event.Grid {
                 case GridEventType.OnDataChange:
                     event = new GridOnDataChangeEvent();
                     break;
+                case GridEventType.OnCellClick:
+                    event = new GridOnCellClickEvent();
+                    break;
                 case GridEventType.OnColumnPickerChange:
                     event = new OnColumnPickerChangeEvent();
                     break;

diff --git a/src/OSFramework/DataGrid/Event/Grid/GridOnCellClickEvent.ts b/src/OSFramework/DataGrid/Event/Grid/GridOnCellClickEvent.ts
@@ -0,0 +1,43 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+namespace OSFramework.DataGrid.Event.Grid {
+    /**
+     *Class that represents the Cell Click Change event.
+     *
+     * @export
+     * @class GridOnCellClickEvent
+     * @extends {AbstractGridEvent}
+     */
+    export class GridOnCellClickEvent extends AbstractGridEvent {
+        /**
+         * Method that will trigger the event with the correct parameters.
+         *
+         * @param gridObj grid that is raising the event
+         * @param gridID id of the grid that is raising the event
+         * @param columnWidgetId id of the column that is raising the event
+         * @param rowNumber id of the row number that is raising the event
+         * @param line  data of the row that is raising the event
+         */
+        public trigger(
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            gridObj: OSFramework.DataGrid.Grid.IGrid,
+            gridID: string,
+            columnWidgetId: string,
+            rowNumber: number,
+            binding: string,
+            line: string
+        ): void {
+            this.handlers
+                .slice(0)
+                .forEach((h) =>
+                    Helper.AsyncInvocation(
+                        h,
+                        gridID,
+                        columnWidgetId,
+                        rowNumber,
+                        binding,
+                        line
+                    )
+                );
+        }
+    }
+}
diff --git a/src/OSFramework/DataGrid/Feature/ExposedFeatures.ts b/src/OSFramework/DataGrid/Feature/ExposedFeatures.ts
@@ -6,6 +6,7 @@ namespace OSFramework.DataGrid.Feature {
         public calculatedField: ICalculatedField;
         public cellData: ICellData;
         public cellStyle: ICellStyle;
+        public clickEvent: IClickEvent;
         public column: IColumn;
         public columnAggregate: IColumnAggregate;
         public columnFreeze: IColumnFreeze;

diff --git a/src/OSFramework/DataGrid/Feature/IClickEvent.ts b/src/OSFramework/DataGrid/Feature/IClickEvent.ts
@@ -0,0 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+namespace OSFramework.DataGrid.Feature {
+    export interface IClickEvent {
+        /**
+         * Responsible for add the cell event listener handler
+         * @param {function} callback
+         */
+        setCellClickEvent(
+            callback: (this: HTMLElement, ev: MouseEvent) => void
+        ): void;
+    }
+}
diff --git a/src/Providers/DataGrid/Wijmo/Features/ClickEvent.ts b/src/Providers/DataGrid/Wijmo/Features/ClickEvent.ts
@@ -0,0 +1,69 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+namespace Providers.DataGrid.Wijmo.Feature {
+    export class ClickEvent
+        implements
+            OSFramework.DataGrid.Feature.IClickEvent,
+            OSFramework.DataGrid.Interface.IBuilder,
+            OSFramework.DataGrid.Interface.IDisposable
+    {
+        protected _grid: Providers.DataGrid.Wijmo.Grid.IGridWijmo;
+
+        constructor(
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            grid: Providers.DataGrid.Wijmo.Grid.IGridWijmo
+        ) {
+            this._grid = grid;
+        }
+
+        private _raiseCellClickEvent(e: MouseEvent) {
+            const ht = this._grid.provider.hitTest(e);
+            if (ht.cellType === wijmo.grid.CellType.Cell) {
+                const column = this._grid.getColumns()[ht.col];
+                const columnWidgetId = column.widgetId;
+                const rowNumber = ht.row;
+                const binding = column.config.binding;
+                const line = _.cloneDeep(
+                    this._grid.provider.rows[rowNumber].dataItem
+                );
+                this._grid.rowMetadata.clear(line);
+
+                this._grid.gridEvents.trigger(
+                    OSFramework.DataGrid.Event.Grid.GridEventType.OnCellClick,
+                    this._grid,
+                    columnWidgetId,
+                    rowNumber,
+                    binding,
+                    JSON.stringify(
+                        this._grid.isSingleEntity
+                            ? OSFramework.DataGrid.Helper.Flatten(line)
+                            : line
+                    )
+                );
+            }
+        }
+
+        public build(): void {
+            this.setCellClickEvent(this._raiseCellClickEvent.bind(this));
+        }
+
+        public dispose(): void {
+            this.removeCellClickEvent(this._raiseCellClickEvent.bind(this));
+        }
+
+        public removeCellClickEvent(callback: (ev: MouseEvent) => void): void {
+            this._grid.provider.removeEventListener(
+                this._grid.provider.hostElement,
+                'click',
+                callback
+            );
+        }
+
+        public setCellClickEvent(callback: (ev: MouseEvent) => void): void {
+            this._grid.provider.addEventListener(
+                this._grid.provider.hostElement,
+                'click',
+                callback
+            );
+        }
+    }
+}
diff --git a/src/Providers/DataGrid/Wijmo/Features/FeatureBuilder.ts b/src/Providers/DataGrid/Wijmo/Features/FeatureBuilder.ts
@@ -75,6 +75,11 @@ namespace Providers.DataGrid.Wijmo.Feature {
             return this;
         }
 
+        private _makeClickEvent(): FeatureBuilder {
+            this._features.clickEvent = this._makeItem(ClickEvent);
+            return this;
+        }
+
         private _makeColumn(): FeatureBuilder {
             this._features.column = this._makeItem(Column);
             return this;
@@ -248,7 +253,8 @@ namespace Providers.DataGrid.Wijmo.Feature {
                 ._makeColumnAggregate(config.showAggregateValues)
                 ._makeColumnMergeCells()
                 ._makeColumn()
-                ._makeSearchData();
+                ._makeSearchData()
+                ._makeClickEvent();
 
             super.build();
         }