feat(services): add 2x new methods hideColumnById or ..byIds (#160)

* feat(services): add 2x new methods hideColumnById or ..byIds - deprecate previous methods (hideColumn, hideColumnByIndex) since the new methods offer more values with extra options to resize and/or hide from pickers
ghiscoding · Nov 17, 2020 · d396653 · d396653
1 parent 1012cfb
commit d396653
Show file tree

Hide file tree

Showing 8 changed files with 258 additions and 18 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
@@ -249,14 +249,14 @@ export class Example7 {
   }
 
   hideDurationColumnDynamically() {
-    const columnIndex = this.sgb.slickGrid.getColumns().findIndex(col => col.id === 'duration');
-    if (columnIndex >= 0) {
-      this.sgb.gridService.hideColumnByIndex(columnIndex);
-    }
+    // -- you can hide by one Id or multiple Ids:
+    // hideColumnById(id, options), hideColumnByIds([ids], options)
+    // you can also provide options, defaults are: { autoResizeColumns: true, triggerEvent: true, hideFromColumnPicker: false, hideFromGridMenu: false }
+
+    this.sgb.gridService.hideColumnById('duration');
 
-    // you can also remove the column from both pickers (ColumnPicker/GridMenu)
-    // this.sgb.columnDefinitions[columnIndex].excludeFromColumnPicker = true;
-    // this.sgb.columnDefinitions[columnIndex].excludeFromGridMenu = true;
+    // or with multiple Ids and extra options
+    // this.sgb.gridService.hideColumnByIds(['duration', 'finish'], { autoResizeColumns: false, hideFromColumnPicker: true, hideFromGridMenu: false });
   }
 
   // Disable/Enable Filtering/Sorting functionalities

diff --git a/packages/common/src/interfaces/gridOption.interface.ts b/packages/common/src/interfaces/gridOption.interface.ts
@@ -230,7 +230,7 @@ export interface GridOption {
 
   /** Defaults to true, which leads to use an Excel like copy buffer that gets copied in clipboard and can be pasted back in Excel or any other app */
   enableExcelCopyBuffer?: boolean;
-  
+
   /**
    * Defaults to true, will display a warning message positioned inside the grid when there's no data returned.
    * When using local (in-memory) dataset, it will show the message when there's no filtered data returned.

diff --git a/packages/common/src/interfaces/hideColumnOption.interface.ts b/packages/common/src/interfaces/hideColumnOption.interface.ts
@@ -0,0 +1,13 @@
+export interface HideColumnOption {
+  /** Defaults to true, do we want to auto-reize the columns in the grid after hidding the column(s)? */
+  autoResizeColumns?: boolean;
+
+  /** Defaults to false, do we want to hide the column name from the column picker after hidding the column from the grid? */
+  hideFromColumnPicker?: boolean;
+
+  /** Defaults to false, do we want to hide the column name from the grid menu after hidding the column from the grid? */
+  hideFromGridMenu?: boolean;
+
+  /** Defaults to true, do we want to trigger an even "onHeaderMenuColumnsChanged" after hidding the column(s)? */
+  triggerEvent?: boolean;
+}
diff --git a/packages/common/src/interfaces/index.ts b/packages/common/src/interfaces/index.ts
@@ -85,6 +85,7 @@ export * from './headerButtonItem.interface';
 export * from './headerButtonOnCommandArgs.interface';
 export * from './headerMenu.interface';
 export * from './headerMenuOption.interface';
+export * from './hideColumnOption.interface';
 export * from './htmlElementPosition.interface';
 export * from './jQueryUiSliderOption.interface';
 export * from './jQueryUiSliderResponse.interface';

diff --git a/packages/common/src/services/__tests__/grid.service.spec.ts b/packages/common/src/services/__tests__/grid.service.spec.ts
@@ -1285,13 +1285,13 @@ describe('Grid Service', () => {
       const mockColumns = [{ id: 'field1', width: 100 }, { id: 'field2', width: 150 }, { id: 'field3', field: 'field3' }] as Column[];
       const mockWithoutColumns = [{ id: 'field1', width: 100 }, { id: 'field3', field: 'field3' }] as Column[];
       jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
-      const getVisibleSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
+      const setVisibleSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
       const setColsSpy = jest.spyOn(gridStub, 'setColumns');
       const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
 
       service.hideColumnByIndex(1);
 
-      expect(getVisibleSpy).toHaveBeenCalledWith(mockWithoutColumns);
+      expect(setVisibleSpy).toHaveBeenCalledWith(mockWithoutColumns);
       expect(setColsSpy).toHaveBeenCalledWith(mockWithoutColumns);
       expect(pubSubSpy).toHaveBeenCalledWith('onHeaderMenuColumnsChanged', { columns: mockWithoutColumns });
     });
@@ -1300,18 +1300,173 @@ describe('Grid Service', () => {
       const mockColumns = [{ id: 'field1', width: 100 }, { id: 'field2', width: 150 }, { id: 'field3', field: 'field3' }] as Column[];
       const mockWithoutColumns = [{ id: 'field1', width: 100 }, { id: 'field3', field: 'field3' }] as Column[];
       jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
-      const getVisibleSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
+      const setVisibleSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
       const setColsSpy = jest.spyOn(gridStub, 'setColumns');
       const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
 
       service.hideColumnByIndex(1, false);
 
-      expect(getVisibleSpy).toHaveBeenCalledWith(mockWithoutColumns);
+      expect(setVisibleSpy).toHaveBeenCalledWith(mockWithoutColumns);
       expect(setColsSpy).toHaveBeenCalledWith(mockWithoutColumns);
       expect(pubSubSpy).not.toHaveBeenCalled();
     });
   });
 
+  describe('hideColumnById method', () => {
+    it('should return -1 when the column id is not found in the list of loaded column definitions', () => {
+      const mockColumns = [{ id: 'field1', width: 100 }, { id: 'field2', width: 150 }, { id: 'field3', field: 'field3' }] as Column[];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+
+      const output = service.hideColumnById('xyz');
+
+      expect(output).toBe(-1);
+    });
+
+    it('should set new columns minus the column to hide and it should keep new set as the new "visibleColumns"', () => {
+      const mockColumns = [{ id: 'field1', width: 100 }, { id: 'field2', width: 150 }, { id: 'field3', field: 'field3' }] as Column[];
+      const mockWithoutColumns = [{ id: 'field1', width: 100 }, { id: 'field3', field: 'field3' }] as Column[];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+      const setVisibleSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
+      const autoSizeSpy = jest.spyOn(gridStub, 'autosizeColumns');
+      const setColsSpy = jest.spyOn(gridStub, 'setColumns');
+      const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
+
+      const output = service.hideColumnById('field2');
+
+      expect(output).toBe(1);
+      expect(autoSizeSpy).toHaveBeenCalled();
+      expect(setVisibleSpy).toHaveBeenCalledWith(mockWithoutColumns);
+      expect(setColsSpy).toHaveBeenCalledWith(mockWithoutColumns);
+      expect(pubSubSpy).toHaveBeenCalledWith('onHeaderMenuColumnsChanged', { columns: mockWithoutColumns });
+    });
+
+    it('should set new columns minus the column to hide but without triggering an event when set to False', () => {
+      const mockColumns = [{ id: 'field1', width: 100 }, { id: 'field2', width: 150 }, { id: 'field3', field: 'field3' }] as Column[];
+      const mockWithoutColumns = [{ id: 'field1', width: 100 }, { id: 'field3', field: 'field3' }] as Column[];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+      const setVisibleSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
+      const autoSizeSpy = jest.spyOn(gridStub, 'autosizeColumns');
+      const setColsSpy = jest.spyOn(gridStub, 'setColumns');
+      const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
+
+      service.hideColumnById('field2', { triggerEvent: false });
+
+      expect(autoSizeSpy).toHaveBeenCalled();
+      expect(setVisibleSpy).toHaveBeenCalledWith(mockWithoutColumns);
+      expect(setColsSpy).toHaveBeenCalledWith(mockWithoutColumns);
+      expect(pubSubSpy).not.toHaveBeenCalled();
+    });
+
+    it('should set new columns minus the column to hide but without resize the columns when "autoResizeColumns" is set to False', () => {
+      const mockColumns = [{ id: 'field1', width: 100 }, { id: 'field2', width: 150 }, { id: 'field3', field: 'field3' }] as Column[];
+      const mockWithoutColumns = [{ id: 'field1', width: 100 }, { id: 'field3', field: 'field3' }] as Column[];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+      const setVisibleSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
+      const autoSizeSpy = jest.spyOn(gridStub, 'autosizeColumns');
+      const setColsSpy = jest.spyOn(gridStub, 'setColumns');
+      const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
+
+      service.hideColumnById('field2', { autoResizeColumns: false });
+
+      expect(autoSizeSpy).not.toHaveBeenCalled();
+      expect(setVisibleSpy).toHaveBeenCalledWith(mockWithoutColumns);
+      expect(setColsSpy).toHaveBeenCalledWith(mockWithoutColumns);
+      expect(pubSubSpy).toHaveBeenCalled();
+    });
+
+    it('should set new columns minus the column to hide AND also hide the column from the column picker when "hideFromColumnPicker" is set to False', () => {
+      const mockColumns = [{ id: 'field1', width: 100 }, { id: 'field2', width: 150 }, { id: 'field3', field: 'field3' }] as Column[];
+      const mockWithoutColumns = [{ id: 'field1', width: 100 }, { id: 'field3', field: 'field3' }] as Column[];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+      const setVisibleSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
+      jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(mockColumns);
+      const autoSizeSpy = jest.spyOn(gridStub, 'autosizeColumns');
+      const setColsSpy = jest.spyOn(gridStub, 'setColumns');
+
+      service.hideColumnById('field2', { hideFromColumnPicker: true });
+
+      expect(autoSizeSpy).toHaveBeenCalled();
+      expect(setVisibleSpy).toHaveBeenCalledWith(mockWithoutColumns);
+      expect(mockColumns).toEqual([{ id: 'field1', width: 100 }, { id: 'field2', width: 150, excludeFromColumnPicker: true }, { id: 'field3', field: 'field3' }]);
+      expect(setColsSpy).toHaveBeenCalledWith(mockWithoutColumns);
+    });
+
+    it('should set new columns minus the column to hide AND also hide the column from the column picker when "hideFromColumnPicker" is set to False', () => {
+      const mockColumns = [{ id: 'field1', width: 100 }, { id: 'field2', width: 150 }, { id: 'field3', field: 'field3' }] as Column[];
+      const mockWithoutColumns = [{ id: 'field1', width: 100 }, { id: 'field3', field: 'field3' }] as Column[];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+      const setVisibleSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
+      jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(mockColumns);
+      const autoSizeSpy = jest.spyOn(gridStub, 'autosizeColumns');
+      const setColsSpy = jest.spyOn(gridStub, 'setColumns');
+
+      service.hideColumnById('field2', { autoResizeColumns: false, hideFromGridMenu: true });
+
+      expect(autoSizeSpy).not.toHaveBeenCalled();
+      expect(setVisibleSpy).toHaveBeenCalledWith(mockWithoutColumns);
+      expect(mockColumns).toEqual([{ id: 'field1', width: 100 }, { id: 'field2', width: 150, excludeFromGridMenu: true }, { id: 'field3', field: 'field3' }]);
+      expect(setColsSpy).toHaveBeenCalledWith(mockWithoutColumns);
+    });
+  });
+
+  describe('hideColumnByIds method', () => {
+    it('should loop through the Ids provided and call hideColumnById on each of them with same options', () => {
+      const mockColumns = [{ id: 'field1', width: 100 }, { id: 'field2', width: 150 }, { id: 'field3', field: 'field3' }] as Column[];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+      const autoSizeSpy = jest.spyOn(gridStub, 'autosizeColumns');
+      const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
+      const hideByIdSpy = jest.spyOn(service, 'hideColumnById');
+
+      service.hideColumnByIds(['field2', 'field3']);
+
+      expect(hideByIdSpy).toHaveBeenCalledTimes(2);
+      expect(hideByIdSpy).toHaveBeenNthCalledWith(1, 'field2', { autoResizeColumns: false, hideFromColumnPicker: false, hideFromGridMenu: false, triggerEvent: false });
+      expect(hideByIdSpy).toHaveBeenNthCalledWith(2, 'field3', { autoResizeColumns: false, hideFromColumnPicker: false, hideFromGridMenu: false, triggerEvent: false });
+      expect(autoSizeSpy).toHaveBeenCalled();
+      expect(pubSubSpy).toHaveBeenCalledWith('onHeaderMenuColumnsChanged', { columns: expect.toBeArray() });
+    });
+
+    it('should loop through the Ids provided and call hideColumnById on each of them with same options BUT not auto size columns neither trigger when both are disabled', () => {
+      const mockColumns = [{ id: 'field1', width: 100 }, { id: 'field2', width: 150 }, { id: 'field3', field: 'field3' }] as Column[];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+      const autoSizeSpy = jest.spyOn(gridStub, 'autosizeColumns');
+      const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
+      const hideByIdSpy = jest.spyOn(service, 'hideColumnById');
+
+      service.hideColumnByIds(['field2', 'field3'], { autoResizeColumns: false, triggerEvent: false });
+
+      expect(hideByIdSpy).toHaveBeenCalledTimes(2);
+      expect(hideByIdSpy).toHaveBeenNthCalledWith(1, 'field2', { autoResizeColumns: false, hideFromColumnPicker: false, hideFromGridMenu: false, triggerEvent: false });
+      expect(hideByIdSpy).toHaveBeenNthCalledWith(2, 'field3', { autoResizeColumns: false, hideFromColumnPicker: false, hideFromGridMenu: false, triggerEvent: false });
+      expect(autoSizeSpy).not.toHaveBeenCalled();
+      expect(pubSubSpy).not.toHaveBeenCalled();
+    });
+
+    it('should loop through the Ids provided and call hideColumnById on each of them with same options and hide from column picker when "hideFromColumnPicker" is enabled', () => {
+      const mockColumns = [{ id: 'field1', width: 100 }, { id: 'field2', width: 150 }, { id: 'field3', field: 'field3' }] as Column[];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+      const hideByIdSpy = jest.spyOn(service, 'hideColumnById');
+
+      service.hideColumnByIds(['field2', 'field3'], { hideFromColumnPicker: true });
+
+      expect(hideByIdSpy).toHaveBeenCalledTimes(2);
+      expect(hideByIdSpy).toHaveBeenNthCalledWith(1, 'field2', { autoResizeColumns: false, hideFromColumnPicker: true, hideFromGridMenu: false, triggerEvent: false });
+      expect(hideByIdSpy).toHaveBeenNthCalledWith(2, 'field3', { autoResizeColumns: false, hideFromColumnPicker: true, hideFromGridMenu: false, triggerEvent: false });
+    });
+
+    it('should loop through the Ids provided and call hideColumnById on each of them with same options and hide from column picker when "hideFromColumnPicker" is enabled', () => {
+      const mockColumns = [{ id: 'field1', width: 100 }, { id: 'field2', width: 150 }, { id: 'field3', field: 'field3' }] as Column[];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+      const hideByIdSpy = jest.spyOn(service, 'hideColumnById');
+
+      service.hideColumnByIds(['field2', 'field3'], { hideFromGridMenu: true });
+
+      expect(hideByIdSpy).toHaveBeenCalledTimes(2);
+      expect(hideByIdSpy).toHaveBeenNthCalledWith(1, 'field2', { autoResizeColumns: false, hideFromColumnPicker: false, hideFromGridMenu: true, triggerEvent: false });
+      expect(hideByIdSpy).toHaveBeenNthCalledWith(2, 'field3', { autoResizeColumns: false, hideFromColumnPicker: false, hideFromGridMenu: true, triggerEvent: false });
+    });
+  });
+
   describe('setSelectedRow method', () => {
     it('should select the row with index provided', () => {
       const spy = jest.spyOn(gridStub, 'setSelectedRows');