fix(header): re-create header grouping title after changing picker co…

…ls (#502)

* fix(header): re-create header grouping title after changing picker cols
- after hiding/showing columns from ColumnPicker/GridMenu we need to re-create the header grouping titles

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

@@ -3,9 +3,10 @@ import { TestBed } from '@angular/core/testing';
 import { Subject } from 'rxjs';
 
 import { GroupingAndColspanService } from '../groupingAndColspan.service';
-import { GridOption, SlickEventHandler, Column } from '../../models';
+import { Column, ExtensionName, GridOption, SlickEventHandler } from '../../models';
 import { ResizerService, GridDimension } from '../resizer.service';
 import { ExtensionUtility } from '../../extensions/extensionUtility';
+import { ExtensionService } from '../extension.service';
 import { SharedService } from '../shared.service';
 
 declare const Slick: any;
@@ -25,6 +26,10 @@ const dataViewStub = {
   reSort: jest.fn(),
 };
 
+const extensionServiceStub = {
+  getExtensionByName: jest.fn()
+} as unknown as ExtensionService;
+
 const mockExtensionUtility = {
   loadExtensionDynamically: jest.fn(),
   translateItems: jest.fn(),
@@ -90,6 +95,7 @@ describe('GroupingAndColspanService', () => {
         GroupingAndColspanService,
         SharedService,
         { provide: ExtensionUtility, useValue: mockExtensionUtility },
+        { provide: ExtensionService, useValue: extensionServiceStub },
         { provide: ResizerService, useValue: resizerServiceStub },
       ],
       imports: [TranslateModule.forRoot()]
@@ -225,7 +231,61 @@ describe('GroupingAndColspanService', () => {
 
       expect(spy).toHaveBeenCalledTimes(2);
       expect(setTimeout).toHaveBeenCalledTimes(1);
-      // expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 75);
+      // expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 50);
+    });
+
+    it('should call the "renderPreHeaderRowGroupingTitles" after changing column visibility from column picker', () => {
+      const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
+      const slickEvent1 = new Slick.Event();
+      const slickEvent2 = new Slick.Event();
+      const instanceMock = { onColumnsChanged: slickEvent1, onMenuClose: slickEvent2 };
+      const columnsMock = [{ id: 'field1', field: 'field1', width: 100, cssClass: 'red' }] as Column[];
+      const extensionMock = { name: ExtensionName.columnPicker, addon: instanceMock, instance: instanceMock, class: null };
+      jest.spyOn(extensionServiceStub, 'getExtensionByName').mockReturnValue(extensionMock);
+      service.init(gridStub, dataViewStub);
+
+      slickEvent1.notify({ columns: columnsMock }, new Slick.EventData(), gridStub);
+      jest.runAllTimers(); // fast-forward timer
+
+      expect(spy).toHaveBeenCalledTimes(3);
+      expect(setTimeout).toHaveBeenCalledTimes(1);
+      expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 50);
+    });
+
+    it('should call the "renderPreHeaderRowGroupingTitles" after changing column visibility from grid menu', () => {
+      const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
+      const slickEvent1 = new Slick.Event();
+      const slickEvent2 = new Slick.Event();
+      const instanceMock = { onColumnsChanged: slickEvent1, onMenuClose: slickEvent2 };
+      const columnsMock = [{ id: 'field1', field: 'field1', width: 100, cssClass: 'red' }] as Column[];
+      const extensionMock = { name: ExtensionName.columnPicker, addon: instanceMock, instance: instanceMock, class: null };
+      jest.spyOn(extensionServiceStub, 'getExtensionByName').mockReturnValue(extensionMock);
+      service.init(gridStub, dataViewStub);
+
+      slickEvent1.notify({ columns: columnsMock }, new Slick.EventData(), gridStub);
+      jest.runAllTimers(); // fast-forward timer
+
+      expect(spy).toHaveBeenCalledTimes(3);
+      expect(setTimeout).toHaveBeenCalledTimes(1);
+      expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 50);
+    });
+
+    it('should call the "renderPreHeaderRowGroupingTitles" after changing column visibility & closing the grid menu', () => {
+      const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
+      const slickEvent1 = new Slick.Event();
+      const slickEvent2 = new Slick.Event();
+      const instanceMock = { onColumnsChanged: slickEvent1, onMenuClose: slickEvent2 };
+      const columnsMock = [{ id: 'field1', field: 'field1', width: 100, cssClass: 'red' }] as Column[];
+      const extensionMock = { name: ExtensionName.columnPicker, addon: instanceMock, instance: instanceMock, class: null };
+      jest.spyOn(extensionServiceStub, 'getExtensionByName').mockReturnValue(extensionMock);
+      service.init(gridStub, dataViewStub);
+
+      slickEvent2.notify({ allColumns: columnsMock }, new Slick.EventData(), gridStub);
+      jest.runAllTimers(); // fast-forward timer
+
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(setTimeout).toHaveBeenCalledTimes(1);
+      expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 50);
     });
 
     it('should call the "renderPreHeaderRowGroupingTitles" after calling the "translateGroupingAndColSpan" method', () => {

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

@@ -1,8 +1,8 @@
 import { Injectable, Optional } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
 
-import { Column, GridOption, SlickEventHandler } from './../models/index';
+import { Column, GridOption, SlickEventHandler, ExtensionName } from './../models/index';
 import { ExtensionUtility } from '../extensions/extensionUtility';
+import { ExtensionService } from './extension.service';
 import { ResizerService } from './resizer.service';
 
 // using external non-typed js libraries
@@ -16,7 +16,7 @@ export class GroupingAndColspanService {
   private _eventHandler: SlickEventHandler;
   private _grid: any;
 
-  constructor(private extensionUtility: ExtensionUtility, private resizerService: ResizerService, @Optional() private translate: TranslateService) {
+  constructor(private extensionUtility: ExtensionUtility, private extensionService: ExtensionService, private resizerService: ResizerService) {
     this._eventHandler = new Slick.EventHandler();
   }
 
@@ -49,6 +49,18 @@ export class GroupingAndColspanService {
         this._eventHandler.subscribe(dataView.onRowCountChanged, () => this.renderPreHeaderRowGroupingTitles());
         this.resizerService.onGridAfterResize.subscribe(() => this.renderPreHeaderRowGroupingTitles());
 
+        // for both picker (columnPicker/gridMenu) we also need to re-create after hiding/showing columns
+        const columnPickerExtension = this.extensionService.getExtensionByName(ExtensionName.columnPicker);
+        if (columnPickerExtension && columnPickerExtension.instance && columnPickerExtension.instance.onColumnsChanged) {
+          this._eventHandler.subscribe(columnPickerExtension.instance.onColumnsChanged, () => this.renderPreHeaderRowGroupingTitles());
+        }
+
+        const gridMenuExtension = this.extensionService.getExtensionByName(ExtensionName.gridMenu);
+        if (gridMenuExtension && gridMenuExtension.instance && gridMenuExtension.instance.onColumnsChanged && gridMenuExtension.instance.onMenuClose) {
+          this._eventHandler.subscribe(gridMenuExtension.instance.onColumnsChanged, () => this.renderPreHeaderRowGroupingTitles());
+          this._eventHandler.subscribe(gridMenuExtension.instance.onMenuClose, () => this.renderPreHeaderRowGroupingTitles());
+        }
+
         // also not sure why at this point, but it seems that I need to call the 1st create in a delayed execution
         // probably some kind of timing issues and delaying it until the grid is fully ready does help
         setTimeout(() => this.renderPreHeaderRowGroupingTitles(), 50);