fix(esf): discard filter in esf menu on cancel button click (#15123)

Co-authored-by: Galina Edinakova <[email protected]>
Co-authored-by: igdmdimitrov <[email protected]>

Author: 3 people

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.html

@@ -57,7 +57,7 @@ <h4 class="ig-typography__h6">
         <div class="igx-excel-filter__cancel">
             <button type="button"
                 igxButton="flat"
-                (click)="closeDialog()">
+                (click)="cancelDialog()">
                     {{ grid.resourceStrings.igx_grid_excel_cancel }}
             </button>
         </div>

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts

@@ -33,6 +33,7 @@ import { IgxOverlayService } from '../../../services/overlay/overlay';
 import { IgxIconComponent } from '../../../icon/icon.component';
 import { IgxButtonDirective } from '../../../directives/button/button.directive';
 import { NgClass, NgIf, NgFor } from '@angular/common';
+import { BaseFilteringComponent } from './base-filtering.component';
 
 /**
  * @hidden
@@ -95,6 +96,7 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
         protected overlayService: IgxOverlayService,
         private cdr: ChangeDetectorRef,
         protected platform: PlatformUtil,
+        public esf: BaseFilteringComponent
     ) { }
 
     public ngAfterViewInit(): void {
@@ -140,7 +142,7 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
         this.createInitialExpressionUIElement();
         this.cdr.detectChanges();
     }
-
+    
     public closeDialog() {
         if (this.overlayComponentId) {
             this.overlayService.hide(this.overlayComponentId);
@@ -150,6 +152,11 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
         }
     }
 
+    public cancelDialog() {
+        this.esf.cancel();
+        this.closeDialog();
+    }
+
     public onApplyButtonClick() {
         this.expressionsList = this.expressionsList.filter(
             element => element.expression.condition &&

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

@@ -7012,6 +7012,30 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
         }));
 
+        it('should discard filters through esf menu properly on cancel button click', fakeAsync(() => {
+            grid.filter('ProductName', 'Ignite', IgxStringFilteringOperand.instance().condition('contains'));
+            fix.detectChanges();
+
+            expect(fix.debugElement.nativeElement.querySelector('.igx-excel-filter__filter-number').textContent).toContain('(1)');
+            expect(grid.filteredData.length).toEqual(2);
+            tick(200);
+            fix.detectChanges();
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
+            tick(100);
+            fix.detectChanges();
+            GridFunctions.setOperatorESF(fix, 1, 0);
+            GridFunctions.setInputValueESF(fix, 1, 'Angular');
+            GridFunctions.clickCancelExcelStyleCustomFiltering(fix);
+
+            expect(fix.debugElement.nativeElement.querySelector('.igx-excel-filter__filter-number').textContent).toContain('(1)');
+            expect(grid.filteredData.length).toEqual(2);
+        }));
+
     });
 });