feat(*): show already applied filter operands in filter dialog #14188

IgniteUI · Jun 10, 2024 · 450cb2c · 450cb2c
1 parent db46f9e
commit 450cb2c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/...niteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts b/...niteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts
@@ -246,18 +246,18 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
 
     private createInitialExpressionUIElement() {
         if (this.expressionsList.length == 1) {
-            const currentExpr = this.expressionsList[0].expression;
-            if (currentExpr.condition.name === this.selectedOperator) {
+            const currentExprUI = this.expressionsList.pop();
+            if (currentExprUI.expression.condition.name === this.selectedOperator) {
+                currentExprUI.beforeOperator = FilteringLogic.And;
                 const secondExprUI = new ExpressionUI();
                 secondExprUI.expression = {
                     condition: null,
                     fieldName: this.column.field,
                     ignoreCase: this.column.filteringIgnoreCase,
                     searchVal: null
                 };
-
-                secondExprUI.beforeOperator = FilteringLogic.And;
-
+                currentExprUI.afterOperator = FilteringLogic.And;
+                this.expressionsList.push(currentExprUI);
                 this.expressionsList.push(secondExprUI);
                 return;
             }

diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts
@@ -154,7 +154,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
     }
 
     public get filterIconClassName() {
-        return this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
+        return this.column.filteringExpressionsTree || this.isAdvancedFilterApplied() ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
     }
 
     public get selectable() {
@@ -276,6 +276,13 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
         this.sortDirection = expr ? expr.dir : SortingDirection.None;
     }
 
+    protected isAdvancedFilterApplied() {
+        if(!this.grid.advancedFilteringExpressionsTree) {
+            return false;
+        }
+        return !!this.grid.advancedFilteringExpressionsTree.find(this.column.field);
+    }
+
     private triggerSort() {
         const groupingExpr = this.grid.groupingExpressions ?
             this.grid.groupingExpressions.find((expr) => expr.fieldName === this.column.field) :

diff --git a/...cts/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html b/...cts/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html
@@ -7,4 +7,5 @@
         <ng-content></ng-content>
     </span>
     <span *ngIf="!ref.childNodes.length">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>
+    <span *ngIf="grid?.advancedFilteringExpressionsTree"> ({{ grid?.advancedFilteringExpressionsTree.filteringOperands.length}}) </span>
 </button>