fix(grid): Exec onOpening once per column #8138

Author: astaev

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts

@@ -5,7 +5,7 @@ import { IgxGridBaseDirective } from '../grid-base.directive';
 import icons from './svgIcons';
 import { IFilteringExpression, FilteringLogic } from '../../data-operations/filtering-expression.interface';
 import { Subject } from 'rxjs';
-import { takeUntil, filter } from 'rxjs/operators';
+import { takeUntil, first } from 'rxjs/operators';
 import { IForOfState } from '../../directives/for-of/for_of.directive';
 import { IgxColumnComponent } from '../columns/column.component';
 import { IFilteringOperation } from '../../data-operations/filtering-condition';
@@ -70,6 +70,7 @@ export class IgxFilteringService implements OnDestroy {
 
     public toggleFilterDropdown(element, column, classRef) {
         if (!this._componentOverlayId || (this.column  && this.column.field !== column.field)) {
+            this.initFilteringSettings();
             this.column = column;
             const filterIcon = this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
             const filterIconTarget = element.querySelector('.' + filterIcon);
@@ -95,7 +96,7 @@ export class IgxFilteringService implements OnDestroy {
             scrollStrategy: new AbsoluteScrollStrategy()
         };
         this._overlayService.onOpening.pipe(
-            filter((overlay) => overlay.id === this._componentOverlayId),
+            first((overlay) => overlay.id === this._componentOverlayId),
             takeUntil(this.destroy$)).subscribe((eventArgs) => {
                 const instance = eventArgs.componentRef.instance as any;
                 if (instance) {
@@ -105,7 +106,7 @@ export class IgxFilteringService implements OnDestroy {
             });
 
         this._overlayService.onClosed.pipe(
-            filter(overlay => overlay.id === this._componentOverlayId),
+            first(overlay => overlay.id === this._componentOverlayId),
             takeUntil(this.destroy$)).subscribe(() => {
                 this._componentOverlayId = null;
                 this.grid.navigation.activeNode = this.lastActiveNode;

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -4444,6 +4444,30 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix);
             expect(loadingIndicator).toBeNull('esf loading indicator is visible');
         }));
+
+        it('Done callback should be executed only once per column', fakeAsync(() => {
+            const compInstance = fix.componentInstance as IgxGridFilteringESFLoadOnDemandComponent;
+            // Open excel style custom filtering dialog and wait a bit.
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            tick(1000);
+            fix.detectChanges();
+
+            // Verify items in search have loaded and that the loading indicator is not visible.
+            expect(compInstance.doneCallbackCounter).toBe(1, 'Incorrect done callback execution count');
+            let listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(6, 'incorrect rendered list items count');
+            let loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix);
+            expect(loadingIndicator).toBeNull('esf loading indicator is visible');
+
+            GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick(1000);
+            fix.detectChanges();
+            expect(compInstance.doneCallbackCounter).toBe(2, 'Incorrect done callback execution count');
+            listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(9, 'incorrect rendered list items count');
+            loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix);
+            expect(loadingIndicator).toBeNull('esf loading indicator is visible');
+        }));
     });
 
     describe(null, () => {

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -8,7 +8,6 @@ import {
     HostListener,
     Input,
     NgZone,
-    OnInit,
     OnDestroy
 } from '@angular/core';
 import { DataType } from '../../data-operations/data-util';
@@ -31,7 +30,7 @@ import { IgxGridExcelStyleFilteringComponent } from '../filtering/excel-style/gr
     selector: 'igx-grid-header',
     templateUrl: './grid-header.component.html'
 })
-export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
+export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
 
     private _destroy$ = new Subject<boolean>();
 
@@ -143,10 +142,6 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
         public zone: NgZone
     ) { }
 
-    public ngOnInit() {
-        this.grid.filteringService.initFilteringSettings();
-    }
-
     public ngDoCheck() {
         this.getSortDirection();
         this.cdr.markForCheck();

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1106,6 +1106,7 @@ export class CustomFilteringStrategyComponent extends BasicGridComponent {
 export class IgxGridFilteringESFLoadOnDemandComponent extends BasicGridComponent {
     private _filteringStrategy = new FilteringStrategy();
     public data = SampleTestData.excelFilteringData();
+    public doneCallbackCounter = 0;
 
     public columnValuesStrategy = (column: IgxColumnComponent,
                                    columnExprTree: IFilteringExpressionsTree,
@@ -1114,6 +1115,7 @@ export class IgxGridFilteringESFLoadOnDemandComponent extends BasicGridComponent
             const filteredData = this._filteringStrategy.filter(this.data, columnExprTree);
             const columnValues = filteredData.map(record => record[column.field]);
             done(columnValues);
+            this.doneCallbackCounter++;
         }, 1000);
     }
 }