refactor(*): Do not re-initialize the esf on filteringExpressions change

Author: mddragnev

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

@@ -23,6 +23,7 @@ export abstract class BaseFilteringComponent {
     public abstract columnChange: EventEmitter<any>;
     public abstract sortingChanged: EventEmitter<undefined>;
     public abstract listDataLoaded: EventEmitter<undefined>;
+    public abstract filterCleared: EventEmitter<undefined>;
 
     constructor(
         protected cdr: ChangeDetectorRef,

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

@@ -34,6 +34,7 @@ export class IgxExcelStyleClearFiltersComponent {
      */
     public clearFilter() {
         this.esf.grid.filteringService.clearFilter(this.esf.column.field);
+        this.esf.filterCleared.emit();
         this.selectAllFilterItems();
     }
 

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

@@ -128,6 +128,12 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
     @Output()
     public listDataLoaded = new EventEmitter();
 
+    /**
+     * @hidden @internal
+     */
+    @Output()
+    public filterCleared = new EventEmitter();
+
     @ViewChild('mainDropdown', { read: ElementRef })
     public mainDropdown: ElementRef<HTMLElement>;
 
@@ -434,7 +440,11 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
 
             this.subscriptions.add(this.grid.columnVisibilityChanged.subscribe(() => this.detectChanges()));
             this.subscriptions.add(this.grid.sortingExpressionsChange.subscribe(() => this.sortingChanged.emit()));
-            this.subscriptions.add(this.grid.filteringExpressionsTreeChange.subscribe(() => this.init()));
+            this.subscriptions.add(this.grid.filteringExpressionsTreeChange.subscribe(() => {
+                this.expressionsList = new Array<ExpressionUI>();
+                generateExpressionsList(this.column.filteringExpressionsTree, this.grid.filteringLogic, this.expressionsList);
+                this.cdr.detectChanges();
+            }));
             this.subscriptions.add(this.grid.columnMovingEnd.subscribe(() => this.cdr.markForCheck()));
         }
     }
@@ -528,12 +538,6 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
     private renderValues() {
         this.filterValues = this.generateFilterValues();
         this.generateListData();
-        this.expressionsList.forEach(expr => {
-            if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase
-                && expr.expression.searchVal && expr.expression.searchVal instanceof Set) {
-                this.modifyExpression(expr);
-            }
-        });
     }
 
     private generateFilterValues() {
@@ -564,16 +568,6 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         return filterValues;
     }
 
-    private modifyExpression(expr: ExpressionUI) {
-        const lowerCaseFilterValues = new Set(Array.from(expr.expression.searchVal).map((value: string) => value.toLowerCase()));
-
-        this.grid.data.forEach(item => {
-            if (typeof item[this.column.field] === "string" && lowerCaseFilterValues.has(item[this.column.field]?.toLowerCase())) {
-                expr.expression.searchVal.add(item[this.column.field]);
-            }
-        });
-    }
-
     private generateListData() {
         this.listData = new Array<FilterListItem>();
         const shouldUpdateSelection = this.areExpressionsSelectable();

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

@@ -76,7 +76,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     @ViewChild('input', { read: IgxInputDirective, static: true })
     public searchInput: IgxInputDirective;
 
-    @ViewChild('cancelButton', {read: IgxButtonDirective, static: true })
+    @ViewChild('cancelButton', { read: IgxButtonDirective, static: true })
     protected cancelButton: IgxButtonDirective;
 
     /**
@@ -251,6 +251,10 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
                 this.searchInput.nativeElement.focus();
             });
         });
+
+        esf.filterCleared.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.clearInput();
+        });
     }
 
     public ngAfterViewInit() {
@@ -396,7 +400,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         return `${this.id}-item-${index}`;
     }
 
-    protected setActiveDescendant() : void  {
+    protected setActiveDescendant(): void {
         this.activeDescendant = this.focusedItem?.id || '';
     }
 
@@ -585,20 +589,38 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
                     blanksItem = selectedItems[blanksItemIndex];
                     selectedItems.splice(blanksItemIndex, 1);
                 }
+                let searchVal;
+                switch (this.esf.column.dataType) {
+                    case GridColumnDataType.Date:
+                        searchVal = new Set(selectedItems.map(d => d.value.toDateString()));
+                        break;
+                    case GridColumnDataType.DateTime:
+                        searchVal = new Set(selectedItems.map(d => d.value.toISOString()));
+                        break;
+                    case GridColumnDataType.Time:
+                        searchVal = new Set(selectedItems.map(e => e.value.toLocaleTimeString()));
+                        break;
+                    case GridColumnDataType.String:
+                        if (this.esf.column.filteringIgnoreCase) {
+                            const selectedValues = new Set(selectedItems.map(item => item.value.toLowerCase()));
+                            searchVal = new Set();
+
+                            this.esf.grid.data.forEach(item => {
+                                if (typeof item[this.esf.column.field] === "string" && selectedValues.has(item[this.esf.column.field]?.toLowerCase())) {
+                                    searchVal.add(item[this.esf.column.field]);
+                                }
+                            });
+                            break;
+                        }
+                    default:
+                        searchVal = new Set(selectedItems.map(e => e.value))
+                }
                 filterTree.filteringOperands.push({
                     condition: this.createCondition('in'),
                     conditionName: 'in',
                     fieldName: this.esf.column.field,
                     ignoreCase: this.esf.column.filteringIgnoreCase,
-                    searchVal: new Set(
-                        this.esf.column.dataType === GridColumnDataType.Date ?
-                            selectedItems.map(d => d.value.toDateString()) :
-                        this.esf.column.dataType === GridColumnDataType.DateTime ?
-                            selectedItems.map(d => d.value.toISOString()) :
-                        this.esf.column.dataType === GridColumnDataType.Time ?
-                            selectedItems.map(e => e.value.toLocaleTimeString()) :
-                            selectedItems.map(e => e.value)
-                    )
+                    searchVal
                 });
 
                 if (blanksItem) {
@@ -628,12 +650,12 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         if (event) {
             const key = event.key.toLowerCase();
             const navKeys = ['space', 'spacebar', ' ',
-            'arrowup', 'up', 'arrowdown', 'down', 'home', 'end'];
-                if (navKeys.indexOf(key) === -1) { // If key has appropriate function in DD
-                    return;
-                }
-                event.preventDefault();
-                event.stopPropagation();
+                'arrowup', 'up', 'arrowdown', 'down', 'home', 'end'];
+            if (navKeys.indexOf(key) === -1) { // If key has appropriate function in DD
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
             switch (key) {
                 case 'arrowup':
                 case 'up':
@@ -827,9 +849,9 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         const direction = index > (this.focusedItem ? this.focusedItem.index : -1) ? Navigate.Down : Navigate.Up;
         const scrollRequired = this.isIndexOutOfBounds(index, direction);
         this.focusedItem = {
-           id: this.getItemId(index),
-           index: index,
-           checked: this.virtDir.igxForOf[index].isSelected
+            id: this.getItemId(index),
+            index: index,
+            checked: this.virtDir.igxForOf[index].isSelected
         };
         if (scrollRequired) {
             this.virtDir.scrollTo(index);

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

@@ -2220,6 +2220,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             ref.instance.resizable = this.rowDimensionResizing;
             ref.instance.sortable = dim.sortable === undefined ? true : dim.sortable;
             ref.instance.width = this.rowDimensionWidth(dim);
+            ref.instance.filteringIgnoreCase = false;
             ref.changeDetectorRef.detectChanges();
             columns.push(ref.instance);
         });