Merge pull request #8566 from IgniteUI/hanastasov/fix-issue-esf-m

ESF use date iso strings in filterValues list

Author: zdrawku

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

@@ -451,7 +451,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         }
 
         for (let index = 0; index < this.uniqueValues.length; index++) {
-            const value = this.column.dataType === DataType.Date ? this.uniqueValues[index].label : this.uniqueValues[index];
+            const value = this.getExpressionValue(this.uniqueValues[index]);
             if (this.filterValues.has(value)) {
                 return true;
             }
@@ -531,9 +531,10 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         if (isDateColumn) {
             this.filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
                 if (e.expression.condition.name === 'in') {
-                    return [ ...arr, ...Array.from((e.expression.searchVal as Set<any>).values()).map(v => this.getFilterItemLabel(v))];
+                    return [ ...arr, ...Array.from((e.expression.searchVal as Set<any>).values()).map(v =>
+                        new Date(v).toISOString()) ];
                 }
-                return [ ...arr, ...[e.expression.searchVal ? this.getFilterItemLabel(e.expression.searchVal) : e.expression.searchVal] ];
+                return [ ...arr, ...[e.expression.searchVal ? e.expression.searchVal.toISOString() : e.expression.searchVal] ];
             }, []));
         } else {
             this.filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
@@ -642,7 +643,8 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
                     filterListItem.isFiltered = false;
 
                     if (shouldUpdateSelection) {
-                        if (this.filterValues.has(element.label || element)) {
+                        const value = this.getExpressionValue(element);
+                        if (this.filterValues.has(value)) {
                             filterListItem.isSelected = true;
                             filterListItem.isFiltered = true;
                         }
@@ -736,6 +738,16 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         return element;
     }
 
+    private getExpressionValue(element: any): string {
+        let value;
+        if (this.column.dataType === DataType.Date) {
+            value = element && element.value ? new Date(element.value).toISOString() : element.value;
+        } else {
+            value = element;
+        }
+        return value;
+    }
+
     // TODO: sort members by access modifier
 
     /**

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

@@ -5322,6 +5322,57 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(loadingIndicator).toBeNull('esf loading indicator is visible');
         }));
 
+        it('Verify date values are displayed in correct format according to column formatter after filtering', fakeAsync(() => {
+            registerLocaleData(localeFR);
+            const grid = fix.componentInstance.grid;
+            grid.locale = 'fr-FR';
+            const datePipe = new DatePipe(grid.locale);
+            grid.getColumnByName('ReleaseDate').formatter = ((value: any) => {
+                const pipe = new DatePipe('fr-FR');
+                const val = value !== null && value !== undefined && value !== '' ? pipe.transform(value, 'longDate') : 'No value!';
+                return val;
+            });
+
+            const dates = fix.componentInstance.data.filter(d => d.ReleaseDate !== null && d.ReleaseDate !== undefined)
+                .map(el => new Date(el.ReleaseDate)).sort((a, b) => a - b);
+            fix.detectChanges();
+
+            // Open excel style custom filtering dialog and wait a bit.
+            GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
+            tick(1050);
+            fix.detectChanges();
+
+            // Verify items in search have loaded and that the loading indicator is not visible.
+            let listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(8, 'incorrect rendered list items count');
+
+            const checkboxElements = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
+            checkboxElements[2].click();
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix);
+            fix.detectChanges();
+
+            // Open excel style custom filtering dialog and wait a bit.
+            GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
+            tick(1050);
+            fix.detectChanges();
+
+            listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(8, 'incorrect rendered list items count');
+
+            expect(listItems[1].innerText).toBe('No value!');
+            for (let i = 2; i < listItems.length; i++) {
+                const date = dates[i - 2];
+                const label = date !== null && date !== undefined && date !== '' ? datePipe.transform(date, 'longDate') : 'No value!';
+                expect(listItems[i].innerText).toBe(label);
+            }
+
+            const loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix);
+            expect(loadingIndicator).toBeNull('esf loading indicator is visible');
+        }));
+
         it('Done callback should be executed only once per column', fakeAsync(() => {
             const compInstance = fix.componentInstance as IgxGridFilteringESFLoadOnDemandComponent;
             // Open excel style custom filtering dialog and wait a bit.