fix(grid): keep conditionName in sycn on conditon changed callback (#16922)

Author: hanastasov

projects/igniteui-angular/core/src/data-operations/expressions-tree-util.spec.ts

@@ -478,29 +478,4 @@ describe('Unit testing FilteringUtil', () => {
         expect(nestedCondition.condition.logic(200, nestedCondition.searchVal)).toBe(true);
     });
 
-    it('should recreate string expression with correct conditionName', () => {
-        const fields: FieldType[] = [
-            { field: 'Name', dataType: 'string' }
-        ];
-
-        // such expression will exist if user has changed the condition OR restore grid state through the IgxGridState directive
-        const expression: IFilteringExpression = {
-            fieldName: 'Name',
-            conditionName: 'contains',
-            searchVal: 'test',
-            condition: {
-                name: 'startsWith',
-                iconName: 'starts_with',
-                isUnary: false,
-            }
-        };
-
-        const result = recreateExpression(expression, fields);
-
-        expect(result.condition).toBe(IgxStringFilteringOperand.instance().condition('startsWith'));
-        expect(result.condition.logic).toBeDefined();
-        expect(result.conditionName).toBe('startsWith');
-        expect(result.searchVal).toBe('test');
-    });
-
 });

projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts

@@ -125,7 +125,7 @@ function getFilteringCondition(dataType: string, name: string): IFilteringOperat
  */
 function recreateOperatorFromDataType(expression: IFilteringExpression, dataType: string): IFilteringOperation {
     if (!expression.condition?.logic) {
-        return getFilteringCondition(dataType, expression.condition?.name || expression.conditionName);
+        return getFilteringCondition(dataType, expression.conditionName || expression.condition?.name);
     }
 
     return expression.condition;
@@ -145,15 +145,18 @@ export function recreateExpression(expression: IFilteringExpression, fields: Fie
         if (!field.filters) {
             expression.condition = recreateOperatorFromDataType(expression, field.dataType);
         } else {
-            expression.condition = field.filters.condition(expression.condition?.name || expression.conditionName);
+            expression.condition = field.filters.condition(expression.conditionName || expression.condition?.name);
         }
     }
 
     if (!expression.condition && expression.conditionName) {
         throw Error('Wrong `conditionName`, `condition` or `field` provided! It is possible that there is a type mismatch between the condition type and field type.');
     }
 
-    expression.conditionName = expression.condition?.name;
+    if (!expression.conditionName) {
+        expression.conditionName = expression.condition?.name;
+    }
+
     expression.searchVal = recreateSearchValue(expression.searchVal, field?.dataType);
 
     return expression;

projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts

@@ -611,6 +611,7 @@ export class IgxGridFilteringRowComponent implements OnInit, AfterViewInit, OnDe
     public onConditionsChanged(eventArgs) {
         const value = (eventArgs.newSelection as IgxDropDownItemComponent).value;
         this.expression.condition = this.getCondition(value);
+        this.expression.conditionName = value;
         if (this.expression.condition.isUnary) {
             // update grid's filtering on the next cycle to ensure the drop-down is closed
             // if the drop-down is not closed this event handler will be invoked multiple times

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts

@@ -133,6 +133,7 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
     public onConditionsChanged(eventArgs: any) {
         const value = (eventArgs.newSelection as IgxSelectComponent).value;
         this.expressionUI.expression.condition = this.getCondition(value);
+        this.expressionUI.expression.conditionName = value;
 
         this.focus();
     }

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

@@ -132,6 +132,11 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             tick();
             fix.detectChanges();
 
+
+            let operands =
+                (grid.filteringExpressionsTree.filteringOperands[0] as IFilteringExpressionsTree)
+                    .filteringOperands as IFilteringExpression[];
+            verifyFilteringExpression(operands[0], 'ProductName', 'startsWith', 'Net');
             verifyFilterUIPosition(filterUIRow, grid);
             verifyFilterRowUI(input, close, reset, false);
             expect(grid.rowList.length).toEqual(1);
@@ -143,6 +148,10 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             tick();
             fix.detectChanges();
 
+            operands =
+                (grid.filteringExpressionsTree.filteringOperands[0] as IFilteringExpressionsTree)
+                    .filteringOperands as IFilteringExpression[];
+            verifyFilteringExpression(operands[0], 'ProductName', 'endsWith', 'script');
             expect(grid.rowList.length).toEqual(2);
             verifyFilterRowUI(input, close, reset, false);
 
@@ -3824,6 +3833,33 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(filterIcon).toBeDefined();
         }));
 
+        it('Should keep conditionName in sync when changing condition in ESF custom dialog.', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick();
+            fix.detectChanges();
+
+            // Open custom dialog with 'contains' condition (index 0 in cascade menu for string column)
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
+            tick(100);
+
+            // set first expression's value
+            GridFunctions.setInputValueESF(fix, 0, 'Net');
+            tick(100);
+
+            // change first expression's operator from 'contains' to 'startsWith' (index 2 for string column)
+            GridFunctions.setOperatorESF(fix, 0, 2);
+            tick(100);
+
+            GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
+
+            const operands =
+                (grid.filteringExpressionsTree.filteringOperands[0] as IFilteringExpressionsTree)
+                    .filteringOperands as IFilteringExpression[];
+            verifyFilteringExpression(operands[0], 'ProductName', 'startsWith', 'Net');
+        }));
+
         it('Should filter grid via custom dialog.', fakeAsync(() => {
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
 
@@ -7538,6 +7574,7 @@ const verifyGridSubmenuSize = (gridNativeElement: HTMLElement, expectedSize: ɵS
 const verifyFilteringExpression = (operand: IFilteringExpression, fieldName: string, conditionName: string, searchVal: any) => {
     expect(operand.fieldName).toBe(fieldName);
     expect(operand.condition.name).toBe(conditionName);
+    expect(operand.conditionName).toBe(conditionName);
     expect(operand.searchVal).toEqual(searchVal);
 };