fix(gridMenu): command "Toggle Filter Row" header row (#466)

previous PR #448 caused a new and small issue, were the header row is being shown when changing locale even when there are no Filters.

Co-authored-by: Ghislain Beaulac <ghislain.beaulac@se.com>

Author: ghiscoding

README.md

@@ -19,7 +19,7 @@ One of the best javascript datagrid [SlickGrid](https://github.com/mleibman/Slic
 [MIT License](LICENSE)
 
 ### Like it? :star: it
-You like and use this great library `Angular-Slickgrid`? Be sure to upvote :star: and feel free to contribute. :smile:
+You like and use this great library `Angular-Slickgrid`? Be sure to upvote :star: and feel free to contribute. :construction_worker:
 
 ### Like my work?
 If you like my work, you can also support me with caffeine :coffee:

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

@@ -76,6 +76,7 @@ export class ExtensionUtilityStub {
 const groupingAndColspanServiceStub = {
   init: jest.fn(),
   dispose: jest.fn(),
+  translateGroupingAndColSpan: jest.fn(),
 } as unknown as GroupingAndColspanService;
 
 const mockGraphqlService = {
@@ -1152,13 +1153,46 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         const transContextMenuSpy = jest.spyOn(extensionServiceStub, 'translateContextMenu');
         const transGridMenuSpy = jest.spyOn(extensionServiceStub, 'translateGridMenu');
         const transHeaderMenuSpy = jest.spyOn(extensionServiceStub, 'translateHeaderMenu');
+        const transGroupingColSpanSpy = jest.spyOn(groupingAndColspanServiceStub, 'translateGroupingAndColSpan');
+        const setHeaderRowSpy = jest.spyOn(mockGrid, 'setHeaderRowVisibility');
 
-        component.gridOptions = { enableTranslate: true } as GridOption;
+        component.gridOptions = { enableTranslate: true, createPreHeaderPanel: false, enableDraggableGrouping: false } as GridOption;
+        component.ngAfterViewInit();
+
+        translate.use('fr');
+
+        setTimeout(() => {
+          expect(setHeaderRowSpy).not.toHaveBeenCalled();
+          expect(transGroupingColSpanSpy).not.toHaveBeenCalled();
+          expect(transCellMenuSpy).toHaveBeenCalled();
+          expect(transColHeaderSpy).toHaveBeenCalled();
+          expect(transColPickerSpy).toHaveBeenCalled();
+          expect(transContextMenuSpy).toHaveBeenCalled();
+          expect(transGridMenuSpy).toHaveBeenCalled();
+          expect(transHeaderMenuSpy).toHaveBeenCalled();
+          done();
+        });
+      });
+
+      it('should call "setHeaderRowVisibility", "translateGroupingAndColSpan" and other methods when locale changes', (done) => {
+        component.columnDefinitions = [{ id: 'firstName', field: 'firstName', filterable: true }];
+        const transCellMenuSpy = jest.spyOn(extensionServiceStub, 'translateCellMenu');
+        const transColHeaderSpy = jest.spyOn(extensionServiceStub, 'translateColumnHeaders');
+        const transColPickerSpy = jest.spyOn(extensionServiceStub, 'translateColumnPicker');
+        const transContextMenuSpy = jest.spyOn(extensionServiceStub, 'translateContextMenu');
+        const transGridMenuSpy = jest.spyOn(extensionServiceStub, 'translateGridMenu');
+        const transHeaderMenuSpy = jest.spyOn(extensionServiceStub, 'translateHeaderMenu');
+        const transGroupingColSpanSpy = jest.spyOn(groupingAndColspanServiceStub, 'translateGroupingAndColSpan');
+        const setHeaderRowSpy = jest.spyOn(mockGrid, 'setHeaderRowVisibility');
+
+        component.gridOptions = { enableTranslate: true, createPreHeaderPanel: true, enableDraggableGrouping: false } as GridOption;
         component.ngAfterViewInit();
 
         translate.use('fr');
 
         setTimeout(() => {
+          expect(setHeaderRowSpy).toHaveBeenCalledWith(true);
+          expect(transGroupingColSpanSpy).toHaveBeenCalled();
           expect(transCellMenuSpy).toHaveBeenCalled();
           expect(transColHeaderSpy).toHaveBeenCalled();
           expect(transColPickerSpy).toHaveBeenCalled();

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

@@ -125,6 +125,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   private _fixedWidth: number | null;
   private _hideHeaderRowAfterPageLoad = false;
   private _isGridInitialized = false;
+  private _isGridHavingFilters = false;
   private _isDatasetInitialized = false;
   private _isPaginationInitialized = false;
   private _isLocalGrid = true;
@@ -239,6 +240,9 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
 
   ngAfterViewInit() {
     this.initialization();
+    if (this.columnDefinitions.findIndex((col) => col.filterable) > -1) {
+      this._isGridHavingFilters = true;
+    }
     this._isGridInitialized = true;
 
     // user must provide a "gridHeight" or use "autoResize: true" in the grid options
@@ -466,7 +470,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
       this.subscriptions.push(
         this.translate.onLangChange.subscribe(() => {
           if (gridOptions.enableTranslate) {
-            if (!this._hideHeaderRowAfterPageLoad) {
+            if (!this._hideHeaderRowAfterPageLoad && this._isGridHavingFilters) {
               // before translating, make sure the filter row is visible to avoid having other problems,
               // because if it's not shown prior to translating then the filters won't be recreated after translating
               this.grid.setHeaderRowVisibility(true);
@@ -480,6 +484,9 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
             this.translateCustomFooterTexts();
             this.translateColumnHeaderTitleKeys();
             this.translateColumnGroupKeys();
+            if (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping) {
+              this.groupingAndColspanService.translateGroupingAndColSpan();
+            }
           }
         })
       );

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

@@ -5,6 +5,7 @@ import { Subject } from 'rxjs';
 import { GroupingAndColspanService } from '../groupingAndColspan.service';
 import { GridOption, SlickEventHandler, Column } from '../../models';
 import { ResizerService, GridDimension } from '../resizer.service';
+import { ExtensionUtility } from '../../extensions/extensionUtility';
 import { SharedService } from '../shared.service';
 
 declare var Slick: any;
@@ -24,6 +25,11 @@ const dataViewStub = {
   reSort: jest.fn(),
 };
 
+const mockExtensionUtility = {
+  loadExtensionDynamically: jest.fn(),
+  translateItems: jest.fn(),
+} as unknown as ExtensionUtility;
+
 const gridStub = {
   autosizeColumns: jest.fn(),
   getColumnIndex: jest.fn(),
@@ -83,6 +89,7 @@ describe('GroupingAndColspanService', () => {
       providers: [
         GroupingAndColspanService,
         SharedService,
+        { provide: ExtensionUtility, useValue: mockExtensionUtility },
         { provide: ResizerService, useValue: resizerServiceStub },
       ],
       imports: [TranslateModule.forRoot()]
@@ -221,29 +228,22 @@ describe('GroupingAndColspanService', () => {
       // expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 75);
     });
 
-    it('should call the "renderPreHeaderRowGroupingTitles" after triggering a translate language change', () => {
+    it('should call the "renderPreHeaderRowGroupingTitles" after calling the "translateGroupingAndColSpan" method', () => {
       gridOptionMock.enableTranslate = true;
       const renderSpy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
-      const translateSpy = jest.spyOn(service, 'translateItems');
+      const translateSpy = jest.spyOn(mockExtensionUtility, 'translateItems');
       const getColSpy = jest.spyOn(gridStub, 'getColumns');
       const setColSpy = jest.spyOn(gridStub, 'setColumns');
 
       service.init(gridStub, dataViewStub);
-      translate.use('fr');
+      service.translateGroupingAndColSpan();
 
       expect(getColSpy).toHaveBeenCalled();
       expect(setColSpy).toHaveBeenCalled();
       expect(translateSpy).toHaveBeenCalled();
       expect(renderSpy).toHaveBeenCalled();
     });
 
-    it('should translate the items when "translateItems" is called', () => {
-      translate.use('fr');
-      service.translateItems(mockColumns, 'nameKey', 'name');
-
-      expect(mockColumns[3]).toEqual({ id: 'start', name: 'Début', nameKey: 'START', field: 'start' });
-    });
-
     it('should render the pre-header row grouping title DOM element', () => {
       const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
       const divHeaderColumns = document.getElementsByClassName('slick-header-columns');

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

@@ -2,6 +2,7 @@ import { Injectable, Optional } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 import { Column, GridOption, SlickEventHandler } from './../models/index';
+import { ExtensionUtility } from '../extensions/extensionUtility';
 import { ResizerService } from './resizer.service';
 
 // using external non-typed js libraries
@@ -15,7 +16,7 @@ export class GroupingAndColspanService {
   private _eventHandler: SlickEventHandler;
   private _grid: any;
 
-  constructor(private resizerService: ResizerService, @Optional() private translate: TranslateService) {
+  constructor(private extensionUtility: ExtensionUtility, private resizerService: ResizerService, @Optional() private translate: TranslateService) {
     this._eventHandler = new Slick.EventHandler();
   }
 
@@ -48,16 +49,6 @@ export class GroupingAndColspanService {
         this._eventHandler.subscribe(dataView.onRowCountChanged, () => this.renderPreHeaderRowGroupingTitles());
         this.resizerService.onGridAfterResize.subscribe(() => this.renderPreHeaderRowGroupingTitles());
 
-        // if we use Translation, we need to re-translate the keys after a language change
-        if (this._gridOptions.enableTranslate) {
-          this.translate.onLangChange.subscribe(() => {
-            const currentColumnDefinitions = this._grid.getColumns();
-            this.translateItems(currentColumnDefinitions, 'columnGroupKey', 'columnGroup');
-            this._grid.setColumns(currentColumnDefinitions);
-            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);
@@ -121,14 +112,11 @@ export class GroupingAndColspanService {
     }
   }
 
-  /** Translate the an array of items from an input key and assign to the output key */
-  translateItems(items: any[], inputKey: string, outputKey: string) {
-    if (Array.isArray(items)) {
-      for (const item of items) {
-        if (item[inputKey]) {
-          item[outputKey] = this.translate && this.translate && this.translate.instant && this.translate.instant(item[inputKey]);
-        }
-      }
-    }
+  /** Translate Column Group texts and re-render them afterward. */
+  translateGroupingAndColSpan() {
+    const currentColumnDefinitions = this._grid.getColumns();
+    this.extensionUtility.translateItems(currentColumnDefinitions, 'columnGroupKey', 'columnGroup');
+    this._grid.setColumns(currentColumnDefinitions);
+    this.renderPreHeaderRowGroupingTitles();
   }
 }