Merge pull request #5601 from IgniteUI/tzhelev/fix-4018-8.2.x

Disable 'apply' button in ESF when no filter results are present - 8.2.x

Author: DiyanDimitrov

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

@@ -29,6 +29,8 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit {
     @Input()
     public data: FilterListItem[];
 
+    public filteredData: FilterListItem[];
+
     @Input()
     public column: IgxColumnComponent;
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.pipe.ts

@@ -1,5 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { FilterListItem } from './grid.excel-style-filtering.component';
+import { FilterListItem, IgxGridExcelStyleFilteringComponent } from './grid.excel-style-filtering.component';
+import { cloneArray } from '../../../core/utils';
 
 /**
  * @hidden
@@ -8,12 +9,16 @@ import { FilterListItem } from './grid.excel-style-filtering.component';
     name: 'excelStyleSearchFilter'
 })
 export class IgxExcelStyleSearchFilterPipe implements PipeTransform {
+
+    constructor(private esf: IgxGridExcelStyleFilteringComponent) { }
+
     transform(items: FilterListItem[], searchText: string): any[] {
         if (!items || !items.length) {
             return [];
         }
 
         if (!searchText) {
+            this.esf.excelStyleSearch.filteredData = null;
             return items;
         }
 
@@ -22,6 +27,14 @@ export class IgxExcelStyleSearchFilterPipe implements PipeTransform {
             (it.value !== null && it.value !== undefined) &&
             it.value.toString().toLowerCase().indexOf(searchText) > -1);
 
-        return result.length > 1 ? result : [];
+        // If 'result' contains the 'Select All' item and at least one more, we use it as a 'finalResult',
+        // otherwise we use an empty array as a 'finalResult' of the filtering.
+        const finalResult = result.length > 1 ? result : [];
+
+        // Update the filteredData of the search component.
+        this.esf.excelStyleSearch.filteredData = cloneArray(finalResult);
+        this.esf.cdr.detectChanges();
+
+        return finalResult;
     }
 }

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

@@ -132,7 +132,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, OnInit, A
     public customDialog: IgxExcelStyleCustomDialogComponent;
 
     @ViewChild('excelStyleSearch', { read: IgxExcelStyleSearchComponent, static: true })
-    protected excelStyleSearch: IgxExcelStyleSearchComponent;
+    public excelStyleSearch: IgxExcelStyleSearchComponent;
 
     @ViewChild('excelStyleSorting', { read: IgxExcelStyleSortingComponent, static: false })
     protected excelStyleSorting: IgxExcelStyleSortingComponent;
@@ -172,7 +172,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, OnInit, A
         }
     }
 
-    constructor(private cdr: ChangeDetectorRef) {}
+    constructor(public cdr: ChangeDetectorRef) {}
 
     ngOnInit() {
         this.isColumnPinnable = this.column.pinnable;
@@ -552,7 +552,8 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, OnInit, A
     }
 
     get applyButtonDisabled() {
-        return this.listData[0] && !this.listData[0].isSelected && !this.listData[0].indeterminate;
+        return  (this.excelStyleSearch.filteredData && this.excelStyleSearch.filteredData.length === 0) ||
+                (this.listData[0] && !this.listData[0].isSelected && !this.listData[0].indeterminate);
     }
 
     public applyFilter() {

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

@@ -4258,6 +4258,42 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             tick(100);
         }));
 
+        it('Should filter, clear and enable/disable the apply button correctly.', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            tick(100);
+            fix.detectChanges();
+
+            // Type string in search box.
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
+            const inputNativeElement = searchComponent.querySelector('.igx-input-group__input');
+            sendInputNativeElement(inputNativeElement, 'hello there', fix);
+            tick(100);
+            fix.detectChanges();
+
+            // Verify there are no filtered-in results and that apply button is disabled.
+            let listItems = searchComponent.querySelectorAll('igx-list-item');
+            let excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+            let raisedButtons = Array.from(excelMenu.querySelectorAll('.igx-button--raised'));
+            let applyButton: any = raisedButtons.find((rb: any) => rb.innerText === 'apply');
+            expect(listItems.length).toBe(0, 'ESF search result should be empty');
+            expect(applyButton.classList.contains('igx-button--disabled')).toBe(true);
+
+            // Clear filtering.
+            const icons = Array.from(searchComponent.querySelectorAll('igx-icon'));
+            const clearIcon: any = icons.find((ic: any) => ic.innerText === 'clear');
+            clearIcon.click();
+            tick(100);
+            fix.detectChanges();
+
+            // Verify there are filtered-in results and that apply button is enabled.
+            listItems = searchComponent.querySelectorAll('igx-list-item');
+            excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+            raisedButtons = Array.from(excelMenu.querySelectorAll('.igx-button--raised'));
+            applyButton = raisedButtons.find((rb: any) => rb.innerText === 'apply');
+            expect(listItems.length).toBe(6, 'ESF search result should NOT be empty');
+            expect(applyButton.classList.contains('igx-button--disabled')).toBe(false);
+        }));
+
         it('display density is properly applied on the excel style filtering component', fakeAsync(() => {
             const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
             const column = grid.columns.find((c) => c.field === 'ProductName');