fix(filter): recreate filter when toggling header row, fixes #493 (#496)

* fix(filter): recreate filter when toggling header row, fixes #493
ghiscoding · Jun 17, 2020 · 56d74ae · 56d74ae
1 parent 1550d9d
commit 56d74ae
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 15 deletions.
diff --git a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts
@@ -1183,15 +1183,13 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         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();
@@ -1205,22 +1203,30 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
     });
 
     describe('setHeaderRowVisibility grid method', () => {
+      beforeEach(() => {
+        jest.clearAllMocks();
+      });
+
       it('should show the header row when "showHeaderRow" is called with argument True', () => {
-        const spy = jest.spyOn(mockGrid, 'setHeaderRowVisibility');
+        const setHeaderRowSpy = jest.spyOn(mockGrid, 'setHeaderRowVisibility');
+        const setColumnSpy = jest.spyOn(mockGrid, 'setColumns');
 
         component.ngAfterViewInit();
         component.showHeaderRow(true);
 
-        expect(spy).toHaveBeenCalledWith(true, false);
+        expect(setHeaderRowSpy).toHaveBeenCalledWith(true, false);
+        expect(setColumnSpy).toHaveBeenCalledTimes(1);
       });
 
       it('should show the header row when "showHeaderRow" is called with argument False', () => {
-        const spy = jest.spyOn(mockGrid, 'setHeaderRowVisibility');
+        const setHeaderRowSpy = jest.spyOn(mockGrid, 'setHeaderRowVisibility');
+        const setColumnSpy = jest.spyOn(mockGrid, 'setColumns');
 
         component.ngAfterViewInit();
         component.showHeaderRow(false);
 
-        expect(spy).toHaveBeenCalledWith(false, false);
+        expect(setHeaderRowSpy).toHaveBeenCalledWith(false, false);
+        expect(setColumnSpy).not.toHaveBeenCalled();
       });
     });
 

diff --git a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts
@@ -451,6 +451,9 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
    */
   showHeaderRow(showing = true) {
     this.grid.setHeaderRowVisibility(showing, false);
+    if (showing === true && this._isGridInitialized) {
+      this.grid.setColumns(this.columnDefinitions);
+    }
     return showing;
   }
 
@@ -471,11 +474,6 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
       this.subscriptions.push(
         this.translate.onLangChange.subscribe(() => {
           if (gridOptions.enableTranslate) {
-            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);
-            }
             this.extensionService.translateCellMenu();
             this.extensionService.translateColumnHeaders();
             this.extensionService.translateColumnPicker();

diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts
@@ -47,7 +47,7 @@ const gridStub = {
   setPreHeaderPanelVisibility: jest.fn(),
 };
 
-const mockAddon = jest.fn().mockImplementation(() => ({
+const mockGridMenuAddon = {
   init: jest.fn(),
   destroy: jest.fn(),
   showGridMenu: jest.fn(),
@@ -57,7 +57,8 @@ const mockAddon = jest.fn().mockImplementation(() => ({
   onAfterMenuShow: new Slick.Event(),
   onBeforeMenuShow: new Slick.Event(),
   onMenuClose: new Slick.Event(),
-}));
+};
+const mockAddon = jest.fn().mockImplementation(() => mockGridMenuAddon);
 
 jest.mock('slickgrid/controls/slick.gridmenu', () => mockAddon);
 Slick.Controls = {
@@ -574,6 +575,12 @@ describe('gridMenuExtension', () => {
     });
 
     describe('executeGridMenuInternalCustomCommands method', () => {
+      afterEach(() => {
+        jest.clearAllMocks();
+        extension.eventHandler.unsubscribeAll();
+        mockGridMenuAddon.onCommand = new Slick.Event();
+      });
+
       it('should call "clearFilters" and dataview refresh when the command triggered is "clear-filter"', () => {
         const filterSpy = jest.spyOn(filterServiceStub, 'clearFilters');
         const refreshSpy = jest.spyOn(SharedService.prototype.dataView, 'refresh');
@@ -650,18 +657,21 @@ describe('gridMenuExtension', () => {
         gridOptionsMock.showHeaderRow = false;
         const gridSpy = jest.spyOn(SharedService.prototype.grid, 'setHeaderRowVisibility');
         const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onCommand');
+        const setColumnSpy = jest.spyOn(SharedService.prototype.grid, 'setColumns');
 
         const instance = extension.register();
         instance.onCommand.notify({ grid: gridStub, command: 'toggle-filter' }, new Slick.EventData(), gridStub);
 
         expect(onCommandSpy).toHaveBeenCalled();
         expect(gridSpy).toHaveBeenCalledWith(true);
+        expect(setColumnSpy).toHaveBeenCalledTimes(1);
 
         gridOptionsMock.showHeaderRow = true;
         instance.onCommand.notify({ grid: gridStub, command: 'toggle-filter' }, new Slick.EventData(), gridStub);
 
         expect(onCommandSpy).toHaveBeenCalled();
         expect(gridSpy).toHaveBeenCalledWith(false);
+        expect(setColumnSpy).toHaveBeenCalledTimes(1); // same as before, so count won't increase
       });
 
       it('should call the grid "setTopPanelVisibility" method when the command triggered is "toggle-toppanel"', () => {

diff --git a/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts b/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts
@@ -383,8 +383,14 @@ export class GridMenuExtension implements Extension {
           });
           break;
         case 'toggle-filter':
-          const showHeaderRow = this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.showHeaderRow || false;
-          this.sharedService.grid.setHeaderRowVisibility(!showHeaderRow);
+          let showHeaderRow = this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.showHeaderRow || false;
+          showHeaderRow = !showHeaderRow; // inverse show header flag
+          this.sharedService.grid.setHeaderRowVisibility(showHeaderRow);
+
+          // when displaying header row, we'll call "setColumns" which in terms will recreate the header row filters
+          if (showHeaderRow === true) {
+            this.sharedService.grid.setColumns(this.sharedService.columnDefinitions);
+          }
           break;
         case 'toggle-toppanel':
           const showTopPanel = this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.showTopPanel || false;