Merge pull request #637 from ghiscoding/bugfix/header-colums-group-hide-column

fix(core): header columns grouping misbehave after hiding column

Author: ghiscoding

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

@@ -1247,7 +1247,6 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
     describe('pagination events', () => {
       beforeEach(() => {
         jest.clearAllMocks();
-        component.destroy();
       });
 
       it('should merge paginationOptions when some already exist', () => {

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

@@ -344,6 +344,9 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     this.datasetHierarchical = null;
     this._columnDefinitions = [];
     this._angularGridInstances = null;
+    this.grid = null;
+    this.gridOptions = null;
+    this.dataView = null;
   }
 
   emptyGridContainerElm() {

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

@@ -224,7 +224,7 @@ export class HeaderMenuExtension implements Extension {
       const visibleColumns = arrayRemoveItemByIndex(currentColumns, columnIndex);
       this.sharedService.visibleColumns = visibleColumns;
       this.sharedService.grid.setColumns(visibleColumns);
-      this.sharedService.onColumnsChanged.next(visibleColumns);
+      this.sharedService.onHeaderMenuHideColumns.next(visibleColumns);
     }
   }
 

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

@@ -921,7 +921,7 @@ describe('GridStateService', () => {
       const getCurGridStateSpy = jest.spyOn(service, 'getCurrentGridState').mockReturnValue(gridStateMock);
       const getAssocCurColSpy = jest.spyOn(service, 'getAssociatedCurrentColumns').mockReturnValue(currentColumnsMock);
 
-      sharedService.onColumnsChanged.next(columnsMock);
+      sharedService.onHeaderMenuHideColumns.next(columnsMock);
 
       expect(getCurGridStateSpy).toHaveBeenCalled();
       expect(getAssocCurColSpy).toHaveBeenCalled();

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

@@ -84,13 +84,13 @@ describe('GroupingAndColspanService', () => {
   let service: GroupingAndColspanService;
   let translate: TranslateService;
   let slickgridEventHandler: SlickEventHandler;
+  const sharedService = new SharedService();
 
   beforeEach(() => {
     const div = document.createElement('div');
     div.innerHTML = template;
     document.body.appendChild(div);
 
-    // service = new GroupingAndColspanService(resizerServiceStub);
 
     TestBed.configureTestingModule({
       providers: [
@@ -99,6 +99,7 @@ describe('GroupingAndColspanService', () => {
         { provide: ExtensionUtility, useValue: mockExtensionUtility },
         { provide: ExtensionService, useValue: extensionServiceStub },
         { provide: ResizerService, useValue: resizerServiceStub },
+        { provide: SharedService, useValue: sharedService },
       ],
       imports: [TranslateModule.forRoot()]
     });
@@ -356,5 +357,19 @@ describe('GroupingAndColspanService', () => {
       expect(divHeaderColumns.length).toBeGreaterThan(2);
       expect(divHeaderColumns[0].outerHTML).toEqual(`<div style="width: 2815px; left: -1000px;" class="slick-header-columns">All your colums div here</div>`);
     });
+
+    it('should  call the "renderPreHeaderRowGroupingTitles" when "onHeaderMenuHideColumns" is triggered', () => {
+      const columnsMock = [{ id: 'field1', field: 'field1', width: 100, cssClass: 'red' }] as Column[];
+      const divHeaderColumns = document.getElementsByClassName('slick-header-columns');
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+      const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
+
+      service.init(gridStub, dataViewStub);
+      sharedService.onHeaderMenuHideColumns.next(columnsMock);
+      jest.runAllTimers(); // fast-forward timer
+
+      expect(spy).toHaveBeenCalledTimes(2); // 1x for init, 1x for event
+      expect(divHeaderColumns.length).toBeGreaterThan(2);
+    });
   });
 });

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

@@ -359,7 +359,7 @@ export class GridStateService {
 
     // subscribe to HeaderMenu (hide column)
     this._subscriptions.push(
-      this.sharedService.onColumnsChanged.subscribe((visibleColumns: Column[]) => {
+      this.sharedService.onHeaderMenuHideColumns.subscribe((visibleColumns: Column[]) => {
         const currentColumns: CurrentColumn[] = this.getAssociatedCurrentColumns(visibleColumns);
         this.onGridStateChanged.next({ change: { newValues: currentColumns, type: GridStateType.columns }, gridState: this.getCurrentGridState() });
       })

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

@@ -6,6 +6,7 @@ import { ExtensionUtility } from '../extensions/extensionUtility';
 import { ExtensionService } from './extension.service';
 import { ResizerService } from './resizer.service';
 import { unsubscribeAllObservables } from './utilities';
+import { SharedService } from './shared.service';
 
 // using external non-typed js libraries
 declare let $: any;
@@ -19,7 +20,7 @@ export class GroupingAndColspanService {
   private _grid: any;
   private subscriptions: Subscription[] = [];
 
-  constructor(private extensionUtility: ExtensionUtility, private extensionService: ExtensionService, private resizerService: ResizerService) {
+  constructor(private extensionUtility: ExtensionUtility, private extensionService: ExtensionService, private resizerService: ResizerService, private sharedService: SharedService) {
     this._eventHandler = new Slick.EventHandler();
   }
 
@@ -51,13 +52,14 @@ export class GroupingAndColspanService {
         this._eventHandler.subscribe(grid.onColumnsReordered, () => this.renderPreHeaderRowGroupingTitles());
         this._eventHandler.subscribe(dataView.onRowCountChanged, () => this.renderPreHeaderRowGroupingTitles());
         this.subscriptions.push(
-          this.resizerService.onGridAfterResize.subscribe(() => this.renderPreHeaderRowGroupingTitles())
+          this.resizerService.onGridAfterResize.subscribe(() => this.renderPreHeaderRowGroupingTitles()),
+          this.sharedService.onHeaderMenuHideColumns.subscribe(() => this.delayRenderPreHeaderRowGroupingTitles(0))
         );
 
         this._eventHandler.subscribe(grid.onSetOptions, (_e, args) => {
           // when user changes frozen columns dynamically (e.g. from header menu), we need to re-render the pre-header of the grouping titles
           if (args && args.optionsBefore && args.optionsAfter && args.optionsBefore.frozenColumn !== args.optionsAfter.frozenColumn) {
-            setTimeout(() => this.renderPreHeaderRowGroupingTitles(), 0);
+            this.delayRenderPreHeaderRowGroupingTitles(0);
           }
         });
 
@@ -75,7 +77,7 @@ export class GroupingAndColspanService {
 
         // 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 fixes this problem
-        setTimeout(() => this.renderPreHeaderRowGroupingTitles(), 50);
+        this.delayRenderPreHeaderRowGroupingTitles(50);
       }
     }
   }
@@ -88,6 +90,11 @@ export class GroupingAndColspanService {
     this.subscriptions = unsubscribeAllObservables(this.subscriptions);
   }
 
+  /** call "renderPreHeaderRowGroupingTitles()" with a setTimeout delay */
+  delayRenderPreHeaderRowGroupingTitles(delay = 0) {
+    setTimeout(() => this.renderPreHeaderRowGroupingTitles(), delay);
+  }
+
   /** Create or Render the Pre-Header Row Grouping Titles */
   renderPreHeaderRowGroupingTitles() {
     if (this._gridOptions && this._gridOptions.frozenColumn !== undefined && this._gridOptions.frozenColumn >= 0) {

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

@@ -12,7 +12,7 @@ export class SharedService {
   private _hideHeaderRowAfterPageLoad = false;
   private _visibleColumns: Column[];
   private _hierarchicalDataset: any[] | null;
-  onColumnsChanged = new Subject<Column[]>();
+  onHeaderMenuHideColumns = new Subject<Column[]>();
 
   // --
   // public

test/cypress/integration/example12.spec.js

@@ -36,18 +36,6 @@ describe('Example 12: Localization (i18n)', () => {
         .each(($child, index) => expect($child.text()).to.eq(fullEnglishTitles[index]));
     });
 
-    it('should have some metrics shown in the grid footer', () => {
-      cy.get('#slickGridContainer-grid12')
-        .find('.slick-custom-footer')
-        .find('.right-footer')
-        .should($span => {
-          const text = removeExtraSpaces($span.text()); // remove all white spaces
-          const now = new Date();
-          const dateFormatted = moment(now).format('YYYY-MM-DD, hh:mm a');
-          expect(text).to.eq(`Last Update ${dateFormatted} | 1500 of 1500 items`);
-        });
-    });
-
     it('should filter certain tasks with the word "ask 1" and expect filter to use contain/include text', () => {
       const tasks = ['Task 1', 'Task 10', 'Task 11', 'Task 12'];
 
@@ -280,6 +268,19 @@ describe('Example 12: Localization (i18n)', () => {
         .contains('Task 4');
     });
 
+    it('should have some metrics shown in the grid footer', () => {
+      const now = new Date();
+      const dateFormatted = moment(now).format('YYYY-MM-DD, hh:mm a');
+
+      cy.get('#slickGridContainer-grid12')
+        .find('.slick-custom-footer')
+        .find('.right-footer')
+        .should($span => {
+          const text = removeExtraSpaces($span.text()); // remove all white spaces
+          expect(text).to.eq(`Last Update ${dateFormatted} | 447 of 1500 items`);
+        });
+    });
+
     it('should scroll back to the top and expect to see "Task 1497" still selected', () => {
       cy.get('#slickGridContainer-grid12').as('grid12');
 
@@ -290,7 +291,7 @@ describe('Example 12: Localization (i18n)', () => {
       cy.get('@grid12')
         .find('.slick-viewport-top.slick-viewport-left')
         .scrollTo('top')
-        .wait(10);
+        .wait(25);
 
       cy.get('@grid12')
         .find('.slick-row')