fix(esf): using column sort strategy for esf search

Author: igdmdimitrov

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

@@ -28,6 +28,8 @@ import { IgxGridBaseDirective } from '../../grid-base.directive';
 import { DisplayDensity } from '../../../core/density';
 import { GridSelectionMode } from '../../common/enums';
 import { GridBaseAPIService } from '../../api.service';
+import { SortingDirection } from '../../../data-operations/sorting-expression.interface';
+import { IgxSorting } from '../../../data-operations/sorting-strategy';
 
 /**
  * @hidden
@@ -557,7 +559,14 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
             this.addItems(shouldUpdateSelection);
         }
 
-        this.listData.sort((a, b) => this.sortData(a, b));
+        const sorting = new IgxSorting();
+        const expressions = [{
+            dir: SortingDirection.Asc,
+            fieldName: 'value',
+            ignoreCase: this.column.filteringIgnoreCase,
+            strategy: this.column.sortStrategy
+        }];
+        this.listData = sorting.sort(this.listData, expressions);
 
         if (this.containsNullOrEmpty) {
             this.addBlanksItem(shouldUpdateSelection);
@@ -700,23 +709,7 @@ 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) {
+    private getFilterItemLabel(element: any, applyFormatter: boolean = true) {
         if (this.column.dataType === DataType.Date) {
             return element && element.label ? element.label : this.column.formatter ?
                 this.column.formatter(element) :

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

@@ -3990,8 +3990,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);
@@ -4780,33 +4780,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', 'Custom', 'a', 'custoM', 'custom'],
+                [true, true, true, true, true]);
         }));
 
         it('Should display "Add to current filter selection" button on typing in input', fakeAsync(() => {
@@ -5135,6 +5129,47 @@ 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 case INsensitive', fakeAsync(() => {
+            const data = [
+                {
+                    Downloads: 254,
+                    ID: 1,
+                    ProductName: 'Ignite UI for JavaScript',
+                    ReleaseDate: null,
+                    Released: false,
+                    AnotherField: 'BWord'
+                },
+                {
+                    Downloads: 127,
+                    ID: 2,
+                    ProductName: 'NetAdvantage',
+                    ReleaseDate: null,
+                    Released: true,
+                    AnotherField: 'bWord'
+                },
+                {
+                    Downloads: 20,
+                    ID: 3,
+                    ProductName: 'Ignite UI for Angular',
+                    ReleaseDate: null,
+                    Released: null,
+                    AnotherField: 'aWord'
+                }
+            ];
+            fix.componentInstance.data = data;
+            fix.detectChanges();
+
+            // Open excel style custom filtering dialog.
+            GridFunctions.clickExcelFilterIcon(fix, 'AnotherField');
+            tick(100);
+            fix.detectChanges();
+
+            // Verify items order
+            verifyExcelStyleFilterAvailableOptions(fix,
+                ['Select All', 'aWord', 'BWord'],
+                [true, true, true]);
+        }));
     });
 
     describe('Templates: ', () => {
@@ -5600,7 +5635,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             tick(1050);
             fix.detectChanges();
-
         }));
 
         it('Done callback should be executed only once per column', fakeAsync(() => {
@@ -6179,6 +6213,7 @@ function 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) => {