Merge pull request #6530 from IgniteUI/dmdimitrov/issue5993-master

DiyanDimitrov · web-flow · commit 399c438b27fc · 2020-01-24T10:09:59.000+02:00
fix(adv-filtering): added header name property to filtering expression #5993
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html
@@ -99,7 +99,7 @@ <h6 class="igx-filter-empty__title">
                           (onRemove)="onChipRemove(expressionItem)"
                           (onSelectionDone)="onChipSelectionEnd()"
                     >
-                    <span igxPrefix class="igx-filter-tree__expression-column">{{ expressionItem.expression.fieldName }}</span>
+                    <span igxPrefix class="igx-filter-tree__expression-column">{{ expressionItem.columnHeader || expressionItem.expression.fieldName }}</span>
                     <igx-icon
                         igxPrefix
                         fontSet="filtering-icons"
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts
@@ -56,6 +56,7 @@ class ExpressionOperandItem extends ExpressionItem {
     inEditMode: boolean;
     inAddMode: boolean;
     hovered: boolean;
+    columnHeader: string;
 }
 
 /**
@@ -470,6 +471,7 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
             this.editedExpression.expression.fieldName = this.selectedColumn.field;
             this.editedExpression.expression.condition = this.selectedColumn.filters.condition(this.selectedCondition);
             this.editedExpression.expression.searchVal = DataUtil.parseValue(this.selectedColumn.dataType, this.searchValue);
+            this.editedExpression.columnHeader = this.selectedColumn.header;
 
             this.editedExpression.inEditMode = false;
             this.editedExpression = null;
@@ -568,6 +570,8 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
                         ignoreCase: filteringExpr.ignoreCase
                     };
                     const operandItem = new ExpressionOperandItem(exprCopy, groupItem);
+                    const column = this.grid.getColumnByName(filteringExpr.fieldName);
+                    operandItem.columnHeader = column.header;
                     groupItem.children.push(operandItem);
                 }
             }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
@@ -382,6 +382,52 @@ describe('IgxGrid - Advanced Filtering #grid', () => {
                 .toBe(false, 'Button indicates there is active filtering.');
         }));
 
+        it('Should correctly display header name in select dropdown and in chip expression.', fakeAsync(() => {
+            // 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();
+
+            // Open column dropdown and verify header name is displayed for first item
+            GridFunctions.clickAdvancedFilteringColumnSelect(fix);
+            fix.detectChanges();
+            const dropdownItems = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix);
+            expect(dropdownItems[0].innerText).toBe('HeaderID');
+
+            selectColumnInEditModeExpression(fix, 0); // Select 'HeaderID' column
+            selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
+            const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+            sendInputNativeElement(fix, input, 'a'); // Type filter value.
+
+            // Commit the populated expression.
+            GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+            fix.detectChanges();
+
+            // Verify header name in chip text
+            verifyExpressionChipContent(fix, [0], 'HeaderID', 'Contains', 'a');
+
+            // Apply the filters.
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            fix.detectChanges();
+
+            // Close Advanced Filtering dialog.
+            GridFunctions.clickAdvancedFilteringCancelButton(fix);
+            tick(100);
+            fix.detectChanges();
+
+            // Open Advanced Filtering dialog again.
+            GridFunctions.clickAdvancedFilteringButton(fix);
+            fix.detectChanges();
+
+            // Verify header name in chip text
+            verifyExpressionChipContent(fix, [0], 'HeaderID', 'Contains', 'a');
+        }));
+
         it('Should correctly filter by a \'string\' column through UI.', fakeAsync(() => {
             // Test prerequisites
             grid.height = '800px';
@@ -896,7 +942,7 @@ describe('IgxGrid - Advanced Filtering #grid', () => {
             fix.detectChanges();
             const dropdownItems = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix);
             expect(dropdownItems.length).toBe(3);
-            expect(dropdownItems[0].innerText).toBe('ID');
+            expect(dropdownItems[0].innerText).toBe('HeaderID');
             expect(dropdownItems[1].innerText).toBe('ProductName');
             expect(dropdownItems[2].innerText).toBe('Another Field');
         }));
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -1218,7 +1218,7 @@ export class IgxTestExcelFilteringDatePickerComponent extends IgxGridFilteringCo
 
 @Component({
     template: `<igx-grid [data]="data" height="500px" [allowAdvancedFiltering]="true" [showToolbar]="true">
-        <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"></igx-column>
+        <igx-column width="100px" [field]="'ID'" [header]="'HeaderID'" [hasSummary]="true"></igx-column>
         <igx-column width="100px" [field]="'ProductName'" dataType="string"></igx-column>
         <igx-column width="100px" [field]="'Downloads'" dataType="number" [hasSummary]="true"></igx-column>
         <igx-column width="100px" [field]="'Released'" dataType="boolean"></igx-column>
diff --git a/src/app/grid-filtering/grid-filtering.sample.html b/src/app/grid-filtering/grid-filtering.sample.html
@@ -31,7 +31,7 @@
                 exportExcelText="Export to Excel" 
                 exportCsvText="Export to CSV">
                 <igx-column *ngFor="let c of columns" [field]="c.field"
-                                                    [header]="c.field"
+                                                    [header]="c.header"
                                                     [movable]="c.movable"
                                                     [groupable]="true"
                                                     [resizable]="c.resizable"
diff --git a/src/app/grid-filtering/grid-filtering.sample.ts b/src/app/grid-filtering/grid-filtering.sample.ts
@@ -77,15 +77,15 @@ export class GridFilteringComponent implements OnInit, AfterViewInit {
 
         this.columns = [
             { field: 'ID', width: 80, resizable: true, movable: true, type: 'string' },
-            { field: 'CompanyName', width: 150, resizable: true, movable: true, type: 'string'},
-            { field: 'ContactName', width: 150, resizable: true, movable: true, type: 'string' },
+            { field: 'CompanyName', header: 'Company Name', width: 175, resizable: true, movable: true, type: 'string'},
+            { field: 'ContactName', header: 'Contact Name', width: 175, resizable: true, movable: true, type: 'string' },
             { field: 'Employees', width: 150, resizable: true, movable: true, type: 'number' },
-            { field: 'ContactTitle', width: 150, resizable: true, movable: true, type: 'string' },
-            { field: 'DateCreated', width: 150, resizable: true, movable: true, type: 'date' },
+            { field: 'ContactTitle', header: 'Contact Title', width: 150, resizable: true, movable: true, type: 'string' },
+            { field: 'DateCreated', header: 'Date Created', width: 150, resizable: true, movable: true, type: 'date' },
             { field: 'Address', width: 150, resizable: true, movable: true, type: 'string' },
             { field: 'City', width: 150, resizable: true, movable: true, type: 'string' },
             { field: 'Region', width: 150, resizable: true, movable: true, type: 'string' },
-            { field: 'PostalCode', width: 150, resizable: true, movable: true, type: 'string' },
+            { field: 'PostalCode', header: 'Postal Code', width: 150, resizable: true, movable: true, type: 'string' },
             { field: 'Phone', width: 150, resizable: true, movable: true, type: 'string' },
             { field: 'Fax', width: 150, resizable: true, movable: true, type: 'string' },
             { field: 'Contract', width: 150, resizable: true, movable: true, type: 'boolean' }

Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,7 @@ <h6 class="igx-filter-empty__title">`
`99`	`99`	`(onRemove)="onChipRemove(expressionItem)"`
`100`	`100`	`(onSelectionDone)="onChipSelectionEnd()"`
`101`	`101`	`>`
`102`		`- <span igxPrefix class="igx-filter-tree__expression-column">{{ expressionItem.expression.fieldName }}</span>`
	`102`	`+ <span igxPrefix class="igx-filter-tree__expression-column">{{ expressionItem.columnHeader \|\| expressionItem.expression.fieldName }}</span>`
`103`	`103`	`<igx-icon`
`104`	`104`	`igxPrefix`
`105`	`105`	`fontSet="filtering-icons"`