Merge branch '11.1.x' into gedinakova/fix-9465-11.1

Author: gedinakova

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

@@ -31,6 +31,7 @@ import { GridBaseAPIService } from '../../api.service';
 import { FormattedValuesFilteringStrategy } from '../../../data-operations/filtering-strategy';
 import { TreeGridFormattedValuesFilteringStrategy } from '../../tree-grid/tree-grid.filtering.strategy';
 import { getLocaleCurrencyCode } from '@angular/common';
+import { SortingDirection } from '../../../data-operations/sorting-expression.interface';
 
 /**
  * @hidden
@@ -611,7 +612,8 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
             this.addItems(shouldUpdateSelection);
         }
 
-        this.listData.sort((a, b) => this.sortData(a, b));
+        this.listData = this.column.sortStrategy.sort(this.listData, 'value', SortingDirection.Asc, this.column.sortingIgnoreCase,
+            (obj, key) => obj[key]);
 
         if (this.containsNullOrEmpty) {
             this.addBlanksItem(shouldUpdateSelection);
@@ -756,22 +758,6 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         this.listData.unshift(blanks);
     }
 
-    private sortData(a: FilterListItem, b: FilterListItem) {
-        let valueA = a.value;
-        let valueB = b.value;
-        if (typeof(a) === DataType.String) {
-            valueA = a.value.toUpperCase();
-            valueB = b.value.toUpperCase();
-        }
-        if (valueA < valueB) {
-            return -1;
-        } else if (valueA > valueB) {
-            return 1;
-        } else {
-            return 0;
-        }
-    }
-
     private getFilterItemLabel(element: any, applyFormatter: boolean = true) {
         if (this.column.dataType === DataType.Date) {
             return element && element.label ? element.label : this.column.formatter ?

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

@@ -4080,8 +4080,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             fix.detectChanges();
 
             verifyExcelStyleFilterAvailableOptions(fix,
-                ['Select All', '(Blanks)', '0', '20', '100', '127', '254'],
-                [true, true, true, true, true, true, true]);
+                ['Select All', '(Blanks)', '0', '20', '100', '127', '254', '702', '1,000'],
+                [true, true, true, true, true, true, true, true, true]);
 
             GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
             tick(100);
@@ -4870,33 +4870,27 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             const column = grid.getColumnByName('AnotherField');
             expect(column.filteringIgnoreCase).toBeTrue();
 
-            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'AnotherField');
+            GridFunctions.clickExcelFilterIcon(fix, 'AnotherField');
             tick(100);
             fix.detectChanges();
 
-            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
-            const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
-
-            expect(listItems.length).toBe(3, 'incorrect rendered list items count');
-            expect(listItems[1].innerText).toBe('Custom', 'incorrect list item label');
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', 'a', 'Custom'],
+                [true, true, true]);
         }));
 
         it('Should not ignore duplicate records when column\'\s filteringIgnoreCase is false', fakeAsync(() => {
             const column = grid.getColumnByName('AnotherField');
             column.filteringIgnoreCase = false;
             expect(column.filteringIgnoreCase).toBeFalse();
 
-            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'AnotherField');
+            GridFunctions.clickExcelFilterIcon(fix, 'AnotherField');
             tick(100);
             fix.detectChanges();
 
-            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
-            const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
-
-            expect(listItems.length).toBe(5, 'incorrect rendered list items count');
-            expect(listItems[1].innerText).toBe('Custom', 'incorrect list item label');
-            expect(listItems[3].innerText).toBe('custoM', 'incorrect list item label');
-            expect(listItems[4].innerText).toBe('custom', 'incorrect list item label');
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', 'a', 'Custom', 'custoM', 'custom'],
+                [true, true, true, true, true]);
         }));
 
         it('Should display "Add to current filter selection" button on typing in input', fakeAsync(() => {
@@ -5269,6 +5263,53 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(listItems[2].innerText).toBe('No', 'incorrect list item label');
             expect(listItems[3].innerText).toBe('Yes', 'incorrect list item label');
         }));
+
+        it('Should sort items in excel style search correctly', fakeAsync(() => {
+            const data = [
+                {
+                    Downloads: 254,
+                    ID: 1,
+                    ProductName: 'Ignite UI for JavaScript',
+                    ReleaseDate: null,
+                    ReleaseDateTime: null,
+                    ReleaseTime: new Date(2010, 4, 27, 23, 0, 0),
+                    Released: false,
+                    AnotherField: 'BWord'
+                },
+                {
+                    Downloads: 127,
+                    ID: 2,
+                    ProductName: 'NetAdvantage',
+                    ReleaseDate: null,
+                    ReleaseDateTime: null,
+                    ReleaseTime: new Date(2021, 4, 27, 1, 0, 0),
+                    Released: true,
+                    AnotherField: 'bWord'
+                },
+                {
+                    Downloads: 20,
+                    ID: 3,
+                    ProductName: 'Ignite UI for Angular',
+                    ReleaseDate: null,
+                    ReleaseDateTime: null,
+                    ReleaseTime: new Date(2015, 4, 27, 12, 0, 0),
+                    Released: null,
+                    AnotherField: 'aWord'
+                }
+            ];
+            fix.componentInstance.data = data;
+            fix.detectChanges();
+
+            // Open excel style custom filtering dialog for string column
+            GridFunctions.clickExcelFilterIcon(fix, 'AnotherField');
+            tick(100);
+            fix.detectChanges();
+
+            // Verify items order is case INsensitive
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', 'aWord', 'BWord'],
+                [true, true, true]);
+        }));
     });
 
     describe('Templates: ', () => {
@@ -5743,7 +5784,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             tick(1050);
             fix.detectChanges();
-
         }));
 
         it('Done callback should be executed only once per column', fakeAsync(() => {
@@ -6321,6 +6361,7 @@ const verifyExcelStyleFilterAvailableOptions = (fix, labels: string[], checked:
     const labelElements: any[] = Array.from(GridFunctions.getExcelStyleSearchComponentListItems(fix, excelMenu));
     const checkboxElements: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu));
 
+    expect(labelElements.length).toBe(labels.length, 'incorrect rendered list items count');
     expect(labelElements.length).toBeGreaterThan(2);
     expect(checkboxElements.length).toBeGreaterThan(2);
     labels.forEach((l, index) => {

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

@@ -920,7 +920,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     public onChipClicked(event: IChipClickEventArgs) {
         const sortingExpr = this.sortingExpressions;
         const columnExpr = sortingExpr.find((expr) => expr.fieldName === event.owner.id);
+        const groupExpr = this.groupingExpressions.find((expr) => expr.fieldName === event.owner.id);
         columnExpr.dir = 3 - columnExpr.dir;
+        groupExpr.dir = columnExpr.dir;
         this.sort(columnExpr);
         this.notifyChanges();
     }