feat(grid): Add Column Sorting Indicators (#7782)

feat(grid): Add Column Sorting Indicators

Co-authored-by: Zdravko Kolev <[email protected]>
Co-authored-by: Silvia Ivanova <[email protected]>

Author: 3 people

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1515,6 +1515,19 @@
             height: rem(15px);
             min-width: rem(15px); /* yeah IE, it really needs to be 15px wide... */
             font-size: rem(15px);
+            position: relative;
+
+            &::after {
+                content: attr(data-sortIndex);
+                position: absolute;
+                top: -5px;
+                #{$right}: -1px;
+                font-size: rem(10px);
+                text-align: $right;
+                font-family: sans-serif;
+                line-height: rem(10px);
+                background: --var($theme, 'header-background');
+            }
         }
     }
 

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

@@ -124,26 +124,36 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             expect(grid.getCellByColumn(grid.data.length - 1, firstColumn).value).toEqual(6);
             expect(grid.getCellByColumn(grid.data.length - 1, thirdColumn).value).toEqual('Jones');
 
+            expect(GridFunctions.getColumnSortingIndex(GridFunctions.getColumnHeader(secondColumn, fixture))).toEqual(1);
+            expect(GridFunctions.getColumnSortingIndex(GridFunctions.getColumnHeader(firstColumn, fixture))).toEqual(2);
+            expect(GridFunctions.getColumnSortingIndex(GridFunctions.getColumnHeader(thirdColumn, fixture))).toBeNull();
+
             // Clear sorting on a column
             grid.clearSort(firstColumn);
             fixture.detectChanges();
 
             expect(grid.sortingExpressions.length).toEqual(1);
             expect(grid.sortingExpressions[0].fieldName).toEqual(secondColumn);
+            expect(GridFunctions.getColumnSortingIndex(GridFunctions.getColumnHeader(firstColumn, fixture))).toBeNull();
+            expect(GridFunctions.getColumnSortingIndex(GridFunctions.getColumnHeader(secondColumn, fixture))).toEqual(1);
 
             grid.sortingExpressions = [
-                { fieldName: secondColumn, dir: SortingDirection.Asc, ignoreCase: true },
-                { fieldName: firstColumn, dir: SortingDirection.Desc, ignoreCase: true }
+                { fieldName: firstColumn, dir: SortingDirection.Desc, ignoreCase: true },
+                { fieldName: secondColumn, dir: SortingDirection.Asc, ignoreCase: true }
             ];
             fixture.detectChanges();
 
             expect(grid.sortingExpressions.length).toEqual(2);
+            expect(GridFunctions.getColumnSortingIndex(GridFunctions.getColumnHeader(firstColumn, fixture))).toEqual(1);
+            expect(GridFunctions.getColumnSortingIndex(GridFunctions.getColumnHeader(secondColumn, fixture))).toEqual(2);
 
             // Clear sorting on all columns
             grid.clearSort();
             fixture.detectChanges();
 
             expect(grid.sortingExpressions.length).toEqual(0);
+            expect(GridFunctions.getColumnSortingIndex(GridFunctions.getColumnHeader(firstColumn, fixture))).toBeNull();
+            expect(GridFunctions.getColumnSortingIndex(GridFunctions.getColumnHeader(secondColumn, fixture))).toBeNull();
         });
 
         it('Should sort grid by multiple expressions through API using ignoreCase for the second expression', () => {
@@ -202,6 +212,7 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             expect(grid.getCellByColumn(grid.data.length - 1, secondColumn).value).toEqual('ALex');
             expect(grid.getCellByColumn(grid.data.length - 1, thirdColumn).value).toEqual('Smith');
             expect(grid.getCellByColumn(grid.data.length - 1, firstColumn).value).toEqual(5);
+
         });
 
         it(`Should allow sorting using a custom Sorting Strategy.`, () => {
@@ -246,6 +257,7 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             const lastRowSecondCell = GridFunctions.getCurrentCellFromGrid(grid, grid.data.length - 1, 1);
             expect(GridFunctions.getValueFromCellElement(lastRowFirstCell)).toEqual('7');
             expect(GridFunctions.getValueFromCellElement(lastRowSecondCell)).toEqual('Rick');
+
         });
 
         it('Should sort grid descending by clicking twice on sort icon UI', () => {
@@ -274,6 +286,7 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             fixture.detectChanges();
             GridFunctions.clickHeaderSortIcon(firstHeaderCell);
             fixture.detectChanges();
+            expect(GridFunctions.getColumnSortingIndex(GridFunctions.getColumnHeader('ID', fixture))).toEqual(1);
             GridFunctions.clickHeaderSortIcon(firstHeaderCell);
             fixture.detectChanges();
 
@@ -283,6 +296,8 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             const lastRowSecondCell = GridFunctions.getCurrentCellFromGrid(grid, grid.data.length - 1, 1);
             expect(GridFunctions.getValueFromCellElement(lastRowSecondCell)).toEqual('Connor');
 
+            expect(GridFunctions.getColumnSortingIndex(GridFunctions.getColumnHeader('ID', fixture))).toBeNull();
+
         });
 
         it('Should have a valid sorting icon when sorting using the API.', () => {
@@ -297,7 +312,6 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             fixture.detectChanges();
 
             GridFunctions.verifyHeaderSortIndicator(firstHeaderCell, false, true);
-
             grid.clearSort();
             fixture.detectChanges();
             GridFunctions.verifyHeaderSortIndicator(firstHeaderCell, false, false);
@@ -345,13 +359,17 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             // tslint:disable-next-line: max-line-length
             expect(GridFunctions.getValueFromCellElement(GridFunctions.getCurrentCellFromGrid(grid, grid.data.length - 1, 1))).toEqual('Connor');
 
+            expect(GridFunctions.getColumnSortingIndex(firstHeaderCell)).toEqual(1);
+
             GridFunctions.clickHeaderSortIcon(firstHeaderCell);
             fixture.detectChanges();
 
             // Verify that the grid is NOT sorted.
             expect(GridFunctions.getValueFromCellElement(GridFunctions.getCurrentCellFromGrid(grid, 0, 1))).toEqual('Jane');
             // tslint:disable-next-line: max-line-length
             expect(GridFunctions.getValueFromCellElement(GridFunctions.getCurrentCellFromGrid(grid, grid.data.length - 1, 1))).toEqual('Connor');
+
+            expect(GridFunctions.getColumnSortingIndex(firstHeaderCell)).toEqual(1);
         });
     });
 });

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html

@@ -7,7 +7,9 @@
     </ng-container>
 </span>
 <div class="igx-grid__th-icons" *ngIf="!column.columnGroup">
-    <igx-icon [attr.draggable]="false"
+    <igx-icon 
+        [attr.draggable]="false"
+        [attr.data-sortIndex]="column.field | sortingIndex:grid.sortingExpressions"
         class="sort-icon"
         *ngIf="column.sortable"
         (click)="onSortingIconClick($event)">

projects/igniteui-angular/src/lib/grids/headers/headers.module.ts

@@ -5,12 +5,13 @@ import { IgxGridSharedModules } from '../common/shared.module';
 import { IgxColumnMovingModule } from '../moving/moving.module';
 import { IgxGridFilteringModule } from '../filtering/base/filtering.module';
 import { IgxGridResizingModule } from '../resizing/resize.module';
-
+import { SortingIndexPipe } from './sorting-index.pipe';
 
 @NgModule({
     declarations: [
         IgxGridHeaderComponent,
-        IgxGridHeaderGroupComponent
+        IgxGridHeaderGroupComponent,
+        SortingIndexPipe
     ],
     imports: [
         IgxGridSharedModules,

projects/igniteui-angular/src/lib/grids/headers/sorting-index.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ISortingExpression } from '../../data-operations/sorting-expression.interface';
+
+@Pipe({
+  name: 'sortingIndex',
+  pure: true
+})
+export class SortingIndexPipe implements PipeTransform {
+
+  transform(columnField: string, sortingExpressions: ISortingExpression[]): number {
+    let sortIndex = sortingExpressions.findIndex(expression => expression.fieldName === columnField);
+    return sortIndex !== -1 ? ++sortIndex : null;
+  }
+
+}
+

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

@@ -80,6 +80,7 @@ const COLUMN_PINNING_CLASS = 'igx-column-pinning';
 const GRID_TOOLBAR_CLASS = 'igx-grid-toolbar';
 const GRID_TOOLBAR_EXPORT_BUTTON_CLASS = '.igx-grid-toolbar__dropdown#btnExport';
 const GRID_OUTLET_CLASS = 'div.igx-grid__outlet';
+const SORT_INDEX_ATTRIBUTE = 'data-sortIndex';
 export const GRID_SCROLL_CLASS = 'igx-grid__scroll';
 export const GRID_MRL_BLOCK_CLASS = 'igx-grid__mrl-block';
 export const CELL_PINNED_CLASS = 'igx-grid__td--pinned';
@@ -1889,6 +1890,15 @@ export class GridFunctions {
         return columnChooserElement.query(By.css(COLUMN_HIDING_COLUMNS_CLASS));
     }
 
+    public static getColumnSortingIndex(columnHeader: DebugElement): number {
+        let sortIndex = columnHeader.query(By.css(SORT_ICON_CLASS)).nativeElement.getAttribute(SORT_INDEX_ATTRIBUTE);
+        sortIndex = parseInt(sortIndex?.trim(), 10);
+        if (!isNaN(sortIndex)) {
+            return sortIndex;
+        }
+        return null;
+    }
+
     public static verifyLayoutHeadersAreAligned(headerCells, rowCells) {
         for (let i; i < headerCells.length; i++) {
             expect(headerCells[i].headerCell.elementRef.nativeElement.offsetWidth)