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

Author: astaev

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts

@@ -53,10 +53,14 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
     constructor(public esf: IgxGridExcelStyleFilteringComponent) {
         this.esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
             if (this.esf.grid) {
-                this._subMenuOverlaySettings.outlet = (this.esf.grid as any).outlet;
+                this._subMenuOverlaySettings.outlet = this.esf.grid.outlet;
             }
         });
-     }
+
+        if (this.esf.grid) {
+            this._subMenuOverlaySettings.outlet = this.esf.grid.outlet;
+        }
+    }
 
     ngOnDestroy(): void {
         this.destroy$.next(true);
@@ -147,7 +151,7 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
         const exprTree = this.esf.column.filteringExpressionsTree;
         return exprTree && exprTree.filteringOperands && exprTree.filteringOperands.length &&
             !((exprTree.filteringOperands[0] as IFilteringExpression).condition &&
-            (exprTree.filteringOperands[0] as IFilteringExpression).condition.name === 'in');
+                (exprTree.filteringOperands[0] as IFilteringExpression).condition.name === 'in');
     }
 
     /**

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

@@ -3,7 +3,7 @@ import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IFilteringExpression, FilteringLogic } from '../../data-operations/filtering-expression.interface';
 import { Subject } from 'rxjs';
-import { takeUntil, filter } from 'rxjs/operators';
+import { takeUntil, filter, 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);
@@ -102,7 +103,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 = this.grid.excelStyleFilteringComponent ?
                     this.grid.excelStyleFilteringComponent :
@@ -115,7 +116,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((eventArgs) => {
                 const instance = this.grid.excelStyleFilteringComponent ?
                     this.grid.excelStyleFilteringComponent :

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

@@ -4524,6 +4524,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

@@ -1105,6 +1105,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,
@@ -1113,6 +1114,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);
     }
 }