feat(core): methods to change column positions/visibilities dynamically

Author: ghiscoding

CHANGELOG.md

@@ -5,9 +5,9 @@ All notable changes to this project will be documented in this file. See [standa
 ### [2.24.1](https://github.com/ghiscoding/angular-slickgrid/compare/v2.24.0...v2.24.1) (2020-12-10)
 
 
-### Features
+### Bug Fixes
 
-* **filters:** use offset left to calculate auto position (left/right) ([9d79e2d](https://github.com/ghiscoding/angular-slickgrid/commit/9d79e2d149b21fb8766e0ad40cbbd4cf4f6572e6))
+* **filters:** use offset left to calculate multi-select auto position (left/right) ([9d79e2d](https://github.com/ghiscoding/angular-slickgrid/commit/9d79e2d149b21fb8766e0ad40cbbd4cf4f6572e6))
 
 ## [2.24.0](https://github.com/ghiscoding/angular-slickgrid/compare/v2.23.3...v2.24.0) (2020-12-10)
 

src/app/modules/angular-slickgrid/services/__tests__/gridState.service.spec.ts

@@ -47,6 +47,7 @@ const gridStub = {
   getColumns: jest.fn(),
   getSelectionModel: jest.fn(),
   getSelectedRows: jest.fn(),
+  setColumns: jest.fn(),
   setSelectedRows: jest.fn(),
   onColumnsReordered: new Slick.Event(),
   onColumnsResized: new Slick.Event(),
@@ -133,6 +134,64 @@ describe('GridStateService', () => {
       });
     });
 
+    describe('changeColumnsArrangement method', () => {
+      const rowCheckboxColumnMock: Column = { id: '_checkbox_selector', field: '_checkbox_selector', minWidth: 50 };
+      let presetColumnsMock: CurrentColumn[];
+      let columnsWithoutCheckboxMock: Column[];
+      let allColumnsMock: Column[];
+
+      beforeEach(() => {
+        allColumnsMock = [
+          rowCheckboxColumnMock,
+          { id: 'field1', field: 'field1', width: 100, cssClass: 'red' },
+          { id: 'field2', field: 'field2', width: 150, headerCssClass: 'blue' },
+          { id: 'field3', field: 'field3' },
+        ] as Column[];
+        columnsWithoutCheckboxMock = [
+          { id: 'field2', field: 'field2', width: 150, headerCssClass: 'blue' },
+          { id: 'field1', field: 'field1', width: 100, cssClass: 'red' },
+          { id: 'field3', field: 'field3' },
+        ] as Column[];
+        presetColumnsMock = [
+          { columnId: 'field2', width: 150, headerCssClass: 'blue' },
+          { columnId: 'field1', width: 100, cssClass: 'red' },
+          { columnId: 'field3' },
+        ] as CurrentColumn[];
+        jest.spyOn(service, 'getAssociatedGridColumns').mockReturnValue([...columnsWithoutCheckboxMock]);
+      });
+
+      afterEach(() => {
+        jest.clearAllMocks();
+      });
+
+      it('should call the method and expect slickgrid "setColumns" and "autosizeColumns" to be called with newest columns', () => {
+        gridOptionMock.enableCheckboxSelector = true;
+        jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(allColumnsMock);
+        const setColsSpy = jest.spyOn(gridStub, 'setColumns');
+        const autoSizeSpy = jest.spyOn(gridStub, 'autosizeColumns');
+
+        service.changeColumnsArrangement(presetColumnsMock);
+
+        expect(setColsSpy).toHaveBeenCalledWith([rowCheckboxColumnMock, ...columnsWithoutCheckboxMock]);
+        expect(autoSizeSpy).toHaveBeenCalled();
+      });
+
+      it('should call the method and expect only 1 method of slickgrid "setColumns" to be called when we define 2nd argument (triggerAutoSizeColumns) as False', () => {
+        const setColsSpy = jest.spyOn(gridStub, 'setColumns');
+        const autoSizeSpy = jest.spyOn(gridStub, 'autosizeColumns');
+        const presetColumnsMock = [
+          { columnId: 'field2', width: 150, headerCssClass: 'blue' },
+          { columnId: 'field1', width: 100, cssClass: 'red' },
+          { columnId: 'field3' },
+        ] as CurrentColumn[];
+
+        service.changeColumnsArrangement(presetColumnsMock, false);
+
+        expect(setColsSpy).toHaveBeenCalledWith([rowCheckboxColumnMock, ...columnsWithoutCheckboxMock]);
+        expect(autoSizeSpy).not.toHaveBeenCalled();
+      });
+    });
+
     describe('bindExtensionAddonEventToGridStateChange tests', () => {
       it('should subscribe to some Extension Addon SlickGrid events and expect the event to be triggered when a notify is triggered after service was initialized', () => {
         const instanceMock = { onColumnsChanged: slickgridEvent };
@@ -832,6 +891,32 @@ describe('GridStateService', () => {
     });
   });
 
+  describe('resetToOriginalColumns method', () => {
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should call the method and expect 2x slickgrid methods to be called by default "setColumns" & "autosizeColumns"', () => {
+      const setColsSpy = jest.spyOn(gridStub, 'setColumns');
+      const autoSizeSpy = jest.spyOn(gridStub, 'autosizeColumns');
+
+      service.resetToOriginalColumns();
+
+      expect(setColsSpy).toHaveBeenCalled();
+      expect(autoSizeSpy).toHaveBeenCalled();
+    });
+
+    it('should call the method and expect only 1 slickgrid methods to be called "setColumns"', () => {
+      const setColsSpy = jest.spyOn(gridStub, 'setColumns');
+      const autoSizeSpy = jest.spyOn(gridStub, 'autosizeColumns');
+
+      service.resetToOriginalColumns(false);
+
+      expect(setColsSpy).toHaveBeenCalled();
+      expect(autoSizeSpy).not.toHaveBeenCalled();
+    });
+  });
+
   describe('resetRowSelection method', () => {
     it('should call the method and do nothing when row selection is not in use', () => {
       const setSelectSpy = jest.spyOn(gridStub, 'setSelectedRows');

src/app/modules/angular-slickgrid/services/gridState.service.ts

@@ -148,14 +148,45 @@ export class GridStateService {
     return currentColumns;
   }
 
+  /**
+   * Dynamically change the arrangement/distribution of the columns Positions/Visibilities and optionally Widths.
+   * For a column to have its visibly as hidden, it has to be part of the original list but excluded from the list provided as argument to be considered a hidden field.
+   * If you are passing columns Width, then you probably don't want to trigger the autosizeColumns (2nd argument to False).
+   * @param {Array<Column>} definedColumns - defined columns
+   * @param {Boolean} triggerAutoSizeColumns - True by default, do we also want to call the "autosizeColumns()" method to make the columns fit in the grid?
+   */
+  changeColumnsArrangement(definedColumns: CurrentColumn[], triggerAutoSizeColumns = true) {
+    if (Array.isArray(definedColumns) && definedColumns.length > 0) {
+      const gridColumns: Column[] = this.getAssociatedGridColumns(this._grid, definedColumns);
+
+      if (gridColumns && Array.isArray(gridColumns) && gridColumns.length > 0) {
+        // make sure that the checkbox selector is still visible in the list when it is enabled
+        if (this._gridOptions.enableCheckboxSelector) {
+          const checkboxColumn = (Array.isArray(this.sharedService.allColumns) && this.sharedService.allColumns.length > 0) ? this.sharedService.allColumns[0] : null;
+          if (checkboxColumn && checkboxColumn.id === '_checkbox_selector' && gridColumns[0].id !== '_checkbox_selector') {
+            gridColumns.unshift(checkboxColumn);
+          }
+        }
+
+        // finally set the new presets columns (including checkbox selector if need be)
+        this._grid.setColumns(gridColumns);
+
+        // resize the columns to fit the grid canvas
+        if (triggerAutoSizeColumns) {
+          this._grid.autosizeColumns();
+        }
+      }
+    }
+  }
+
   /**
    * From an array of Current Columns, get the associated Grid Column Definitions
    * @param grid
    * @param currentColumns
    */
   getAssociatedGridColumns(grid: any, currentColumns: CurrentColumn[]): Column[] {
     const columns: Column[] = [];
-    const gridColumns: Column[] = grid.getColumns();
+    const gridColumns: Column[] = this.sharedService.allColumns || grid.getColumns();
 
     if (currentColumns && Array.isArray(currentColumns)) {
       currentColumns.forEach((currentColumn: CurrentColumn, index: number) => {
@@ -289,6 +320,19 @@ export class GridStateService {
     this.onGridStateChanged.next({ change: { newValues: currentColumns, type: GridStateType.columns }, gridState: this.getCurrentGridState() });
   }
 
+  /**
+   * Reset the grid to its original (all) columns, that is to display the entire set of columns with their original positions & visibilities
+   * @param {Boolean} triggerAutoSizeColumns - True by default, do we also want to call the "autosizeColumns()" method to make the columns fit in the grid?
+   */
+  resetToOriginalColumns(triggerAutoSizeColumns = true) {
+    this._grid.setColumns(this.sharedService.allColumns);
+
+    // resize the columns to fit the grid canvas
+    if (triggerAutoSizeColumns) {
+      this._grid.autosizeColumns();
+    }
+  }
+
   /** if we use Row Selection or the Checkbox Selector, we need to reset any selection */
   resetRowSelectionWhenRequired() {
     if (!this.needToPreserveRowSelection() && (this._gridOptions.enableRowSelection || this._gridOptions.enableCheckboxSelector)) {

test/cypress/package.json

@@ -10,7 +10,7 @@
   "author": "Ghislain B.",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^6.0.1",
+    "cypress": "^6.1.0",
     "mocha": "^8.2.0",
     "mochawesome": "^6.1.1"
   }