feat(grid): add FormattedValuesSortingStrategy for sorting by formatted values - master (#14538)

* feat(grid): add FormattedValuesSortingStrategy for sorting by formatted values

* docs(changelog): add info for new FormattedValuesSortingStrategy

* docs(changelog): move the description for the feature from version 18.1 to 18.2

---------

Co-authored-by: Hristo <[email protected]>
Co-authored-by: Bozhidara Pachilova <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `IgxSimpleCombo`
     - Introduced ability for Simple Combo to automatically select and retain valid input on "Tab" press enhancing user experience by streamlining data entry and reducing the need for manual selection improving form navigation.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - To streamline the sorting of columns with custom formats, a new `FormattedValuesSortingStrategy` has been introduced. This strategy simplifies the sorting process by allowing direct sorting based on formatted values, eliminating the need to extend the `DefaultSortingStrategy` or implement a custom `ISortingStrategy`. This enhancement improves the ease of handling sorting with custom column formatters.
 
 #### Scrollbar: New CSS variables
 

projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts

@@ -132,3 +132,60 @@ export class GroupMemberCountSortingStrategy implements ISortingStrategy {
         return reverse * (firstItemValuesLength - secondItemValuesLength);
     }
 }
+
+export class FormattedValuesSortingStrategy extends DefaultSortingStrategy {
+    protected static override _instance: FormattedValuesSortingStrategy = null;
+
+    constructor() {
+        super();
+    }
+
+    public static override instance(): FormattedValuesSortingStrategy {
+        return this._instance || (this._instance = new this());
+    }
+
+    public override sort(
+        data: any[],
+        fieldName: string,
+        dir: SortingDirection,
+        ignoreCase: boolean,
+        valueResolver: (obj: any, key: string, isDate?: boolean) => any,
+        isDate?: boolean,
+        isTime?: boolean,
+        grid?: GridType
+    ) {
+        const key = fieldName;
+        const reverse = (dir === SortingDirection.Desc ? -1 : 1);
+        const cmpFunc = (obj1: any, obj2: any) => this.compareObjects(obj1, obj2, key, reverse, ignoreCase, valueResolver, isDate, isTime, grid);
+        return this.arraySort(data, cmpFunc);
+    }
+
+    protected override compareObjects(
+        obj1: any,
+        obj2: any,
+        key: string,
+        reverse: number,
+        ignoreCase: boolean,
+        valueResolver: (obj: any, key: string, isDate?: boolean, isTime?: boolean) => any,
+        isDate: boolean,
+        isTime: boolean,
+        grid?: GridType
+    ) {
+        let a = valueResolver.call(this, obj1, key, isDate, isTime);
+        let b = valueResolver.call(this, obj2, key, isDate, isTime);
+
+        if (grid) {
+            const col = grid.getColumnByName(key);
+            if (col && col.formatter) {
+                a = col.formatter(a);
+                b = col.formatter(b);
+            }
+        }
+
+        if (ignoreCase) {
+            a = a && a.toLowerCase ? a.toLowerCase() : a;
+            b = b && b.toLowerCase ? b.toLowerCase() : b;
+        }
+        return reverse * this.compareValues(a, b);
+    }
+}

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

@@ -1,14 +1,15 @@
 import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { IgxGridComponent } from './grid.component';
-import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy';
+import { DefaultSortingStrategy, FormattedValuesSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
-import { GridDeclaredColumnsComponent, SortByParityComponent, GridWithPrimaryKeyComponent, SortByAnotherColumnComponent, SortOnInitComponent } from '../../test-utils/grid-samples.spec';
+import { GridDeclaredColumnsComponent, SortByParityComponent, GridWithPrimaryKeyComponent, SortByAnotherColumnComponent, SortOnInitComponent, IgxGridFormattedValuesSortingComponent } from '../../test-utils/grid-samples.spec';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { CellType } from '../common/grid.interface';
 import { NoopSortingStrategy } from '../common/strategy';
+import { By } from '@angular/platform-browser';
 
 describe('IgxGrid - Grid Sorting #grid', () => {
 
@@ -21,7 +22,8 @@ describe('IgxGrid - Grid Sorting #grid', () => {
                 GridDeclaredColumnsComponent,
                 SortByParityComponent,
                 GridWithPrimaryKeyComponent,
-                NoopAnimationsModule
+                NoopAnimationsModule,
+                IgxGridFormattedValuesSortingComponent
             ]
         });
     }));
@@ -405,6 +407,58 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             expect(grid.getCellByKey(6, 'LastName').row.index).toBeGreaterThan(grid.getCellByKey(7, 'LastName').row.index);
             expect(grid.getCellByKey(4, 'LastName').row.index).toBeGreaterThan(grid.getCellByKey(5, 'LastName').row.index);
         });
+
+        it('Should sort grid by formatted values using FormattedValuesSortingStrategy', fakeAsync(() => {
+            fixture = TestBed.createComponent(IgxGridFormattedValuesSortingComponent);
+            tick();
+            fixture.detectChanges();
+
+            grid = fixture.componentInstance.grid;
+            tick();
+            fixture.detectChanges();
+
+            const productNameColumn = grid.getColumnByName("ProductName");
+            const quantityColumn = grid.getColumnByName("QuantityPerUnit");
+
+            expect(productNameColumn.sortStrategy instanceof FormattedValuesSortingStrategy).toBeTruthy();
+            expect(quantityColumn.sortStrategy instanceof FormattedValuesSortingStrategy).toBeTruthy();
+
+            const productNameHeaderCell = GridFunctions.getColumnHeader('ProductName', fixture);
+
+            GridFunctions.clickHeaderSortIcon(productNameHeaderCell);
+            tick(30);
+            fixture.detectChanges();
+
+            const firstProductNameCell = fixture.debugElement.queryAll(By.css('.igx-grid__td'))[1];
+            expect(firstProductNameCell.nativeElement.textContent.trim()).toBe("a-Alice Mutton");
+
+            GridFunctions.clickHeaderSortIcon(productNameHeaderCell);
+            tick(30);
+            fixture.detectChanges();
+
+            const lastProductNameCell = fixture.debugElement.queryAll(By.css('.igx-grid__td'))[1];
+            expect(lastProductNameCell.nativeElement.textContent.trim()).toBe("b-Tofu");
+
+            grid.clearSort();
+            tick();
+            fixture.detectChanges();
+
+            const quantityPerUnitHeaderCell = GridFunctions.getColumnHeader('QuantityPerUnit', fixture);
+
+            GridFunctions.clickHeaderSortIcon(quantityPerUnitHeaderCell);
+            tick(30);
+            fixture.detectChanges();
+
+            const firstQuantityCell = fixture.debugElement.queryAll(By.css('.igx-grid__td'))[2];
+            expect(firstQuantityCell.nativeElement.textContent.trim()).toBe("c");
+
+            GridFunctions.clickHeaderSortIcon(quantityPerUnitHeaderCell);
+            tick(30);
+            fixture.detectChanges();
+
+            const lastQuantityCell = fixture.debugElement.queryAll(By.css('.igx-grid__td'))[2];
+            expect(lastQuantityCell.nativeElement.textContent.trim()).toBe("d-36 boxes");
+        }));
     });
 
     describe('UI tests', () => {

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -18,7 +18,7 @@ import { ISortingOptions, IgxExcelStyleHeaderIconDirective, IgxGridToolbarAdvanc
 import { IgxRowAddTextDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective } from '../grids/grid.rowEdit.directive';
 import { IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxGridExcelStyleFilteringComponent } from '../grids/filtering/excel-style/excel-style-filtering.component';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
-import { ISortingStrategy, SortingDirection } from '../data-operations/sorting-strategy';
+import { FormattedValuesSortingStrategy, ISortingStrategy, SortingDirection } from '../data-operations/sorting-strategy';
 import { IgxActionStripComponent } from '../action-strip/action-strip.component';
 import { IDataCloneStrategy } from '../data-operations/data-clone-strategy';
 import { IgxColumnLayoutComponent } from '../grids/columns/column-layout.component';
@@ -2266,6 +2266,42 @@ export class SortOnInitComponent extends GridDeclaredColumnsComponent implements
     }
 }
 
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="900px" height="600px">
+        <igx-column field="ProductID" header="Product ID" [sortable]="true"></igx-column>
+        <igx-column field="ProductName" header="Product Name" [dataType]="'string'" [sortable]="true"
+                    [formatter]="formatProductName" [sortStrategy]="sortStrategy"></igx-column>
+        <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [dataType]="'string'" [sortable]="true"
+                    [formatter]="formatQuantity" [sortStrategy]="sortStrategy"></igx-column>
+        <igx-column field="UnitPrice" header="Unit Price" [dataType]="'number'" [sortable]="true"></igx-column>
+        <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [sortable]="true"></igx-column>
+    </igx-grid>
+    `,
+    standalone: true,
+    imports: [IgxGridComponent, IgxColumnComponent]
+})
+export class IgxGridFormattedValuesSortingComponent extends BasicGridComponent {
+    public override data = SampleTestData.gridProductData();
+    public sortStrategy = new FormattedValuesSortingStrategy();
+
+    public formatProductName = (value: string) => {
+        if (!value) {
+            return 'a';
+        }
+        const prefix = value.length > 10 ? 'a' : 'b';
+        return `${prefix}-${value}`;
+    }
+
+    public formatQuantity = (value: string) => {
+        if (!value) {
+            return 'c';
+        }
+        const prefix = value.length > 10 ? 'c' : 'd';
+        return `${prefix}-${value}`;
+    }
+}
+
 @Component({
     template: `
     <igx-grid #grid [data]="data" [height]="'500px'" [width]="'500px'">