Merge pull request #6337 from IgniteUI/dmdimitrov/issue6257-8.2.x

fix(adv-filtering): transforming search value based on column type #6257

Author: Lipata

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -210,6 +210,14 @@ export class DataUtil {
         return data;
     }
 
+    public static parseValue(dataType: DataType, value: any): any {
+        if (dataType === DataType.Number) {
+            value = parseFloat(value);
+        }
+
+        return value;
+    }
+
     private static findParentFromPath(data: any[], primaryKey: any, childDataKey: any, path: any[]): any {
         let collection: any[] = data;
         let result: any;

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -18,6 +18,7 @@ import { takeUntil, first } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { KEYS } from '../../../core/utils';
 import { AbsoluteScrollStrategy, AutoPositionStrategy } from '../../../services/index';
+import { DataUtil } from './../../../data-operations/data-util';
 
 /**
  *@hidden
@@ -301,7 +302,7 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
         if (this.editedExpression) {
             this.editedExpression.expression.fieldName = this.selectedColumn.field;
             this.editedExpression.expression.condition = this.selectedColumn.filters.condition(this.selectedCondition);
-            this.editedExpression.expression.searchVal = this.searchValue;
+            this.editedExpression.expression.searchVal = DataUtil.parseValue(this.selectedColumn.dataType, this.searchValue);
 
             this.editedExpression.inEditMode = false;
             this.editedExpression = null;

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

@@ -13,7 +13,7 @@ import { ExpressionUI } from '../grid-filtering.service';
 import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component';
 import { IgxDropDownItemComponent, IgxDropDownComponent } from '../../../drop-down/index';
 import { IgxInputGroupComponent, IgxInputDirective } from '../../../input-group/index';
-import { DataType } from '../../../data-operations/data-util';
+import { DataType, DataUtil } from '../../../data-operations/data-util';
 import { IFilteringOperation } from '../../../data-operations/filtering-condition';
 import { OverlaySettings, ConnectedPositioningStrategy, CloseScrollStrategy } from '../../../services/index';
 import { KEYS, IBaseEventArgs } from '../../../core/utils';
@@ -167,7 +167,7 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
     }
 
     public onValuesInput(eventArgs) {
-        this.expressionUI.expression.searchVal = this.transformValue(eventArgs.target.value);
+        this.expressionUI.expression.searchVal = DataUtil.parseValue(this.column.dataType, eventArgs.target.value);
     }
 
     public onLogicOperatorButtonClicked(eventArgs, buttonIndex: number) {
@@ -207,14 +207,4 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
 
         event.stopPropagation();
     }
-
-    private transformValue(value): any {
-        if (this.column.dataType === DataType.Number) {
-            value = parseFloat(value);
-        } else if (this.column.dataType === DataType.Boolean) {
-            value = Boolean(value);
-        }
-
-        return value;
-    }
 }

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

@@ -13,7 +13,7 @@ import {
     ChangeDetectionStrategy,
     ViewRef
 } from '@angular/core';
-import { DataType } from '../../data-operations/data-util';
+import { DataType, DataUtil } from '../../data-operations/data-util';
 import { IgxColumnComponent } from '../column.component';
 import { IgxDropDownComponent, ISelectionEventArgs } from '../../drop-down/index';
 import { IFilteringOperation } from '../../data-operations/filtering-condition';
@@ -100,7 +100,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
             this.expression.searchVal = null;
             this.showHideArrowButtons();
         } else {
-            this.expression.searchVal = this.transformValue(val);
+            this.expression.searchVal = DataUtil.parseValue(this.column.dataType, val);
             if (this.expressionsList.find(item => item.expression === this.expression) === undefined) {
                 this.addExpression(true);
             }
@@ -659,16 +659,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         });
     }
 
-    private transformValue(value): any {
-        if (this.column.dataType === DataType.Number) {
-            value = parseFloat(value);
-        } else if (this.column.dataType === DataType.Boolean) {
-            value = Boolean(value);
-        }
-
-        return value;
-    }
-
     private addExpression(isSelected: boolean) {
         const exprUI = new ExpressionUI();
         exprUI.expression = this.expression;

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

@@ -419,7 +419,7 @@ describe('IgxGrid - Advanced Filtering', () => {
             expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular');
         }));
 
-        it('Should correctly filter by a \'number\' column through UI.', fakeAsync(() => {
+        it('Should correctly filter by a \'Greater Than\' with \'number\' column through UI.', fakeAsync(() => {
             // Test prerequisites
             grid.height = '800px';
             fix.detectChanges();
@@ -461,6 +461,47 @@ describe('IgxGrid - Advanced Filtering', () => {
             expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
         }));
 
+        it('Should correctly filter by a \'Equals\' with \'number\' column through UI.', fakeAsync(() => {
+            // Test prerequisites
+            grid.height = '800px';
+            fix.detectChanges();
+            tick(50);
+
+            // Verify no filters are present.
+            expect(grid.filteredData).toBeNull();
+            expect(grid.rowList.length).toBe(8);
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
+
+            // Open Advanced Filtering dialog.
+            GridFunctions.clickAdvancedFilteringButton(fix);
+            fix.detectChanges();
+
+            // Click the initial 'Add And Group' button.
+            const addAndGroupButton = GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix)[0];
+            addAndGroupButton.click();
+            tick(100);
+            fix.detectChanges();
+
+            selectColumnInEditModeExpression(fix, 2); // Select 'Downloads' column.
+            selectOperatorInEditModeExpression(fix, 0); // Select 'Equals' operator.
+            const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+            sendInputNativeElement(fix, input, '127'); // Type filter value.
+
+            // Commit the populated expression.
+            GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+            fix.detectChanges();
+
+            // Apply the filters.
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            fix.detectChanges();
+
+            // Verify the filter results.
+            expect(grid.filteredData.length).toEqual(1);
+            expect(grid.rowList.length).toBe(1);
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('NetAdvantage');
+        }));
+
         it('Should correctly filter by a \'boolean\' column through UI.', fakeAsync(() => {
             // Test prerequisites
             grid.height = '800px';