Merge pull request #724 from ghiscoding/feat/grid-state-pinning

feat(state): add Pinning (frozen) to Grid State & Presets

Author: ghiscoding

src/app/examples/grid-state.component.ts

@@ -157,7 +157,11 @@ export class GridStateComponent implements OnInit, OnDestroy {
         hideForceFitButton: true
       },
       gridMenu: {
-        hideForceFitButton: true
+        hideForceFitButton: true,
+        hideClearFrozenColumnsCommand: false,
+      },
+      headerMenu: {
+        hideFreezeColumnsCommand: false,
       },
       enablePagination: true,
       pagination: {

src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts

@@ -21,7 +21,7 @@ import {
   SortService,
   TreeDataService,
 } from '../../services';
-import { Column, CurrentFilter, CurrentSorter, GraphqlPaginatedResult, GraphqlServiceApi, GraphqlServiceOption, GridOption, GridState, GridStateChange, GridStateType, Pagination, ServicePagination } from '../../models';
+import { Column, CurrentFilter, CurrentPinning, CurrentSorter, GraphqlPaginatedResult, GraphqlServiceApi, GraphqlServiceOption, GridOption, GridState, GridStateChange, GridStateType, Pagination, ServicePagination } from '../../models';
 import { Filters } from '../../filters';
 import { Editors } from '../../editors';
 import * as utilities from '../../services/backend-utilities';
@@ -847,6 +847,15 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         expect(backendSpy).toHaveBeenCalledWith(mockColumnFilter, false);
       });
 
+      it('should override frozen grid options when "pinning" is defined in the "presets" property', () => {
+        const pinningMock = { frozenBottom: false, frozenColumn: -1, frozenRow: -1 } as CurrentPinning;
+
+        component.gridOptions.presets = { pinning: pinningMock };
+        component.ngAfterViewInit();
+
+        expect(component.gridOptions).toEqual({ ...component.gridOptions, ...pinningMock });
+      });
+
       it('should call the "updateFilters" method when filters are defined in the "presets" property', () => {
         const spy = jest.spyOn(mockGraphqlService, 'updateFilters');
         const mockFilters = [{ columnId: 'company', searchTerms: ['xyz'], operator: 'IN' }] as CurrentFilter[];

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -849,6 +849,11 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     this.sharedService.visibleColumns = this._columnDefinitions;
     this.extensionService.createExtensionsBeforeGridCreation(this._columnDefinitions, this.gridOptions);
 
+    // if user entered some Pinning/Frozen "presets", we need to apply them in the grid options
+    if (this.gridOptions.presets?.pinning) {
+      this.gridOptions = { ...this.gridOptions, ...this.gridOptions.presets.pinning };
+    }
+
     // build SlickGrid Grid, also user might optionally pass a custom dataview (e.g. remote model)
     this.grid = new Slick.Grid(`#${this.gridId}`, this.customDataView || this.dataView, this._columnDefinitions, this.gridOptions);
 

src/app/modules/angular-slickgrid/constants.ts

@@ -8,7 +8,7 @@ export class Constants {
     TEXT_CLEAR_ALL_FILTERS: 'Clear all Filters',
     TEXT_CLEAR_ALL_GROUPING: 'Clear all Grouping',
     TEXT_CLEAR_ALL_SORTING: 'Clear all Sorting',
-    TEXT_CLEAR_FROZEN_COLUMNS: 'Clear Frozen Columns',
+    TEXT_CLEAR_PINNING: 'Unfreeze Columns/Rows',
     TEXT_COLLAPSE_ALL_GROUPS: 'Collapse all Groups',
     TEXT_CONTAINS: 'Contains',
     TEXT_COLUMNS: 'Columns',

src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts

@@ -216,17 +216,17 @@ export class GridMenuExtension implements Extension {
     const gridOptions = this.sharedService.gridOptions;
     const translationPrefix = getTranslationPrefix(gridOptions);
 
-    // show grid menu: Clear Frozen Columns
+    // show grid menu: Unfreeze Columns/Rows
     if (this.sharedService.gridOptions && this._gridMenuOptions && !this._gridMenuOptions.hideClearFrozenColumnsCommand) {
-      const commandName = 'clear-frozen-columns';
+      const commandName = 'clear-pinning';
       if (!originalCustomItems.find(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
         gridMenuCustomItems.push(
           {
             iconCssClass: this._gridMenuOptions.iconClearFrozenColumnsCommand || 'fa fa-times',
-            title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}CLEAR_FROZEN_COLUMNS`) : this._locales && this._locales.TEXT_CLEAR_FROZEN_COLUMNS,
+            title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}CLEAR_PINNING`) : this._locales && this._locales.TEXT_CLEAR_PINNING,
             disabled: false,
             command: commandName,
-            positionOrder: 49
+            positionOrder: 52
           }
         );
       }
@@ -259,7 +259,7 @@ export class GridMenuExtension implements Extension {
               title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}TOGGLE_FILTER_ROW`) : this._locales && this._locales.TEXT_TOGGLE_FILTER_ROW,
               disabled: false,
               command: commandName,
-              positionOrder: 52
+              positionOrder: 53
             }
           );
         }
@@ -275,7 +275,7 @@ export class GridMenuExtension implements Extension {
               title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}REFRESH_DATASET`) : this._locales && this._locales.TEXT_REFRESH_DATASET,
               disabled: false,
               command: commandName,
-              positionOrder: 56
+              positionOrder: 57
             }
           );
         }
@@ -293,7 +293,7 @@ export class GridMenuExtension implements Extension {
               title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}TOGGLE_PRE_HEADER_ROW`) : this._locales && this._locales.TEXT_TOGGLE_PRE_HEADER_ROW,
               disabled: false,
               command: commandName,
-              positionOrder: 52
+              positionOrder: 53
             }
           );
         }
@@ -328,7 +328,7 @@ export class GridMenuExtension implements Extension {
             title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}EXPORT_TO_CSV`) : this._locales && this._locales.TEXT_EXPORT_TO_CSV,
             disabled: false,
             command: commandName,
-            positionOrder: 53
+            positionOrder: 54
           }
         );
       }
@@ -344,7 +344,7 @@ export class GridMenuExtension implements Extension {
             title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}EXPORT_TO_EXCEL`) : this._locales && this._locales.TEXT_EXPORT_TO_EXCEL,
             disabled: false,
             command: commandName,
-            positionOrder: 54
+            positionOrder: 55
           }
         );
       }
@@ -360,7 +360,7 @@ export class GridMenuExtension implements Extension {
             title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}EXPORT_TO_TAB_DELIMITED`) : this._locales && this._locales.TEXT_EXPORT_TO_TAB_DELIMITED,
             disabled: false,
             command: commandName,
-            positionOrder: 55
+            positionOrder: 56
           }
         );
       }
@@ -383,15 +383,25 @@ export class GridMenuExtension implements Extension {
   private executeGridMenuInternalCustomCommands(e: Event, args: GridMenuItem) {
     if (args && args.command) {
       switch (args.command) {
-        case 'clear-frozen-columns':
+        case 'clear-pinning':
           const visibleColumns = [...this.sharedService.visibleColumns];
-          this.sharedService.grid.setOptions({ frozenColumn: -1, enableMouseWheelScrollHandler: false });
+          const newGridOptions = { frozenColumn: -1, frozenRow: -1, frozenBottom: false, enableMouseWheelScrollHandler: false };
+          this.sharedService.grid.setOptions(newGridOptions);
+          this.sharedService.gridOptions.frozenColumn = newGridOptions.frozenColumn;
+          this.sharedService.gridOptions.frozenRow = newGridOptions.frozenRow;
+          this.sharedService.gridOptions.frozenBottom = newGridOptions.frozenBottom;
+          this.sharedService.gridOptions.enableMouseWheelScrollHandler = newGridOptions.enableMouseWheelScrollHandler;
 
           // SlickGrid seems to be somehow resetting the columns to their original positions,
           // so let's re-fix them to the position we kept as reference
           if (Array.isArray(visibleColumns)) {
             this.sharedService.grid.setColumns(visibleColumns);
           }
+
+          // we also need to autosize columns if the option is enabled
+          if (this.sharedService.gridOptions.enableAutoSizeColumns) {
+            this.sharedService.grid.autosizeColumns();
+          }
           break;
         case 'clear-filter':
           this.filterService.clearFilters();

src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts

@@ -344,14 +344,22 @@ export class HeaderMenuExtension implements Extension {
         case 'freeze-columns':
           const visibleColumns = [...this.sharedService.visibleColumns];
           const columnPosition = visibleColumns.findIndex((col) => col.id === args.column.id);
-          this.sharedService.grid.setOptions({ frozenColumn: columnPosition, enableMouseWheelScrollHandler: true } as GridOption);
+          const newGridOptions = { frozenColumn: columnPosition, enableMouseWheelScrollHandler: true };
+          this.sharedService.grid.setOptions(newGridOptions);
+          this.sharedService.gridOptions.frozenColumn = newGridOptions.frozenColumn;
+          this.sharedService.gridOptions.enableMouseWheelScrollHandler = newGridOptions.enableMouseWheelScrollHandler;
           this.sharedService.frozenVisibleColumnId = args.column.id;
 
           // to freeze columns, we need to take only the visible columns and we also need to use setColumns() when some of them are hidden
           // to make sure that we only use the visible columns, not doing this will have the undesired effect of showing back some of the hidden columns
           if (this.sharedService.hasColumnsReordered || (Array.isArray(this.sharedService.allColumns) && visibleColumns.length !== this.sharedService.allColumns.length)) {
             this.sharedService.grid.setColumns(visibleColumns);
           }
+
+          // we also need to autosize columns if the option is enabled
+          if (this.sharedService.gridOptions.enableAutoSizeColumns) {
+            this.sharedService.grid.autosizeColumns();
+          }
           break;
         case 'sort-asc':
         case 'sort-desc':

src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts

@@ -0,0 +1,10 @@
+export interface CurrentPinning {
+  /** Defaults to false, do we want to freeze (pin) the bottom portion instead of the top */
+  frozenBottom?: boolean;
+
+  /** Number of column index(es) to freeze (pin) in the grid */
+  frozenColumn?: number;
+
+  /** Number of row index(es) to freeze (pin) in the grid */
+  frozenRow?: number;
+}

src/app/modules/angular-slickgrid/models/currentPinning.interface.ts

@@ -37,7 +37,7 @@ export interface GridMenu {
   /** Defaults to false, which will hide the "Clear all Sorting" command in the Grid Menu (Grid Option "enableSorting: true" has to be enabled) */
   hideClearAllSortingCommand?: boolean;
 
-  /** Defaults to true, which will hide the "Clear Frozen Columns" command in the Grid Menu */
+  /** Defaults to true, which will hide the "Unfreeze Columns/Rows" command in the Grid Menu */
   hideClearFrozenColumnsCommand?: boolean;
 
   /** Defaults to false, which will hide the "Export to CSV" command in the Grid Menu (Grid Option "enableExport: true" has to be enabled) */
@@ -73,7 +73,7 @@ export interface GridMenu {
   /** icon for the "Clear all Sorting" command */
   iconClearAllSortingCommand?: string;
 
-  /** icon for the "Clear Frozen Columns" command */
+  /** icon for the "Unfreeze Columns/Rows" command */
   iconClearFrozenColumnsCommand?: string;
 
   /** icon for the "Export to CSV" command */

src/app/modules/angular-slickgrid/models/gridMenu.interface.ts

@@ -333,10 +333,10 @@ export interface GridOption {
   /** Defaults to false, do we want to freeze (pin) the bottom portion instead of the top */
   frozenBottom?: boolean;
 
-  /** Number of column(s) to freeze (pin) in the grid */
+  /** Number of column index(es) to freeze (pin) in the grid */
   frozenColumn?: number;
 
-  /** Number of row(s) to freeze (pin) in the grid */
+  /** Number of row index(es) to freeze (pin) in the grid */
   frozenRow?: number;
 
   /** Defaults to false, which leads to have row with full width */