fix(grid): Grouping for columns of dataType date, time and dateTime (#12630)

* fix(grid): groupBy for date, time and dateTime col

* chore(*): add line at end

* chore(sorting-test): set correct dataType in test

Author: ddaribo

projects/igniteui-angular/src/lib/grids/common/strategy.ts

@@ -43,9 +43,9 @@ export class IgxSorting implements IGridSortingStrategy {
         while (i < data.length) {
             const column = grid ? grid.getColumnByName(expressions[level].fieldName) : null;
             const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE;
-            const isTime = column?.dataType === TIME_TYPE;
+            const isTime = column?.dataType === TIME_TYPE || column?.dataType === DATE_TIME_TYPE;
             const isString = column?.dataType === STRING_TYPE;
-            const group = this.groupedRecordsByExpression(data, i, expressions[level], isDate, isString);
+            const group = this.groupedRecordsByExpression(data, i, expressions[level], isDate, isTime, isString);
             const groupRow: IGroupByRecord = {
                 expression: expressions[level],
                 level,
@@ -93,11 +93,13 @@ export class IgxSorting implements IGridSortingStrategy {
 
     protected getFieldValue<T>(obj: T, key: string, isDate: boolean = false, isTime: boolean = false) {
         let resolvedValue = resolveNestedPath(obj, key);
-        if (isDate || isTime) {
-            const date = parseDate(resolvedValue);
-            resolvedValue = isTime && date ?
-                new Date().setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) : date;
-
+        const date = parseDate(resolvedValue);
+        if (date && isDate && isTime) {
+            resolvedValue = date;
+        } else if (date && isDate && !isTime) {
+            resolvedValue = new Date(date.setHours(0, 0, 0, 0));
+        } else if (date && isTime && !isDate) {
+            resolvedValue = new Date().setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
         }
         return resolvedValue;
     }
@@ -107,17 +109,18 @@ export class IgxSorting implements IGridSortingStrategy {
         index: number,
         expression: IGroupingExpression,
         isDate: boolean = false,
+        isTime: boolean = false,
         isString: boolean
     ): T[] {
         const res = [];
         const key = expression.fieldName;
         const len = data.length;
-        let groupval = this.getFieldValue(data[index], key, isDate);
+        let groupval = this.getFieldValue(data[index], key, isDate, isTime);
         res.push(data[index]);
         index++;
         const comparer = expression.groupingComparer || DefaultSortingStrategy.instance().compareValues;
         for (let i = index; i < len; i++) {
-            let fieldValue = this.getFieldValue(data[i], key, isDate);
+            let fieldValue = this.getFieldValue(data[i], key, isDate, isTime);
             if (expression.ignoreCase && isString) {
                 // when column's dataType is string but the value is number
                 fieldValue = fieldValue?.toString().toLowerCase();
@@ -155,15 +158,15 @@ export class IgxSorting implements IGridSortingStrategy {
         }
         const column = grid?.getColumnByName(expr.fieldName);
         const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE;
-        const isTime = column?.dataType === TIME_TYPE;
+        const isTime = column?.dataType === TIME_TYPE || column?.dataType === DATE_TIME_TYPE;
         const isString = column?.dataType === STRING_TYPE;
         data = expr.strategy.sort(data, expr.fieldName, expr.dir, expr.ignoreCase, this.getFieldValue, isDate, isTime, grid);
         if (expressionIndex === exprsLen - 1) {
             return data;
         }
         // in case of multiple sorting
         for (i = 0; i < dataLen; i++) {
-            gbData = this.groupedRecordsByExpression(data, i, expr, isDate, isString);
+            gbData = this.groupedRecordsByExpression(data, i, expr, isDate, isTime, isString);
             gbDataLen = gbData.length;
             if (gbDataLen > 1) {
                 gbData = this.sortDataRecursive(gbData, expressions, expressionIndex + 1, grid);

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

@@ -13,7 +13,7 @@ import { IgxChipComponent } from '../../chips/chip.component';
 import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { DefaultSortingStrategy, ISortingExpression, SortingDirection } from '../../data-operations/sorting-strategy';
 import { configureTestSuite } from '../../test-utils/configure-suite';
-import { DataParent } from '../../test-utils/sample-test-data.spec';
+import { DataParent, SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { MultiColumnHeadersWithGroupingComponent } from '../../test-utils/grid-samples.spec';
 import { GridSelectionFunctions, GridFunctions, GRID_SCROLL_CLASS } from '../../test-utils/grid-functions.spec';
 import { GridSelectionMode } from '../common/enums';
@@ -39,7 +39,8 @@ describe('IgxGrid - GroupBy #grid', () => {
                 GroupByEmptyColumnFieldComponent,
                 MultiColumnHeadersWithGroupingComponent,
                 GridGroupByRowCustomSelectorsComponent,
-                GridGroupByCaseSensitiveComponent
+                GridGroupByCaseSensitiveComponent,
+                GridGroupByTestDateTimeDataComponent
             ],
             imports: [NoopAnimationsModule, IgxGridModule]
         });
@@ -180,6 +181,145 @@ describe('IgxGrid - GroupBy #grid', () => {
             [null, fix.componentInstance.prevDay, fix.componentInstance.today, fix.componentInstance.nextDay]);
     }));
 
+    it('should only account for year, month and day when grouping by \'date\' dataType column', fakeAsync(() => {
+        const fix = TestBed.createComponent(GridGroupByTestDateTimeDataComponent);
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.grid;
+        fix.detectChanges();
+
+        grid.groupBy({
+            fieldName: 'DateField', dir: SortingDirection.Asc, ignoreCase: false
+        });
+        fix.detectChanges();
+
+        const groupRows = grid.groupsRowList.toArray();
+        expect(groupRows.length).toEqual(3);
+
+        const targetTestVal = new Date(2012, 1, 12);
+        const index = groupRows.findIndex(gr => new Date(gr.groupRow.value).getTime() === targetTestVal.getTime());
+        expect(groupRows[index].groupRow.records.length).toEqual(2);
+
+        // compare the date values in the target group which are two identical dates with different time values
+        const field = groupRows[index].groupRow.expression.fieldName;
+        const record1 = groupRows[index].groupRow.records[0];
+        const record2 = groupRows[index].groupRow.records[1];
+        const rec1Date = new Date(record1[field]);
+        const rec2Date = new Date(record2[field]);
+
+        // the time portions of the two records differ, so the Dates are not equal even though they are in the same group
+        expect(rec1Date.getTime()).not.toEqual(rec2Date.getTime());
+        // the date portions are the same, so they are in the same group, as the column type is `date`
+        expect(rec1Date.getDate()).toEqual(rec2Date.getDate());
+        expect(rec1Date.getMonth()).toEqual(rec2Date.getMonth());
+        expect(rec1Date.getFullYear()).toEqual(rec2Date.getFullYear());
+    }));
+
+    it('should only account for hours, minutes, seconds and ms when grouping by \'time\' dataType column', fakeAsync(() => {
+        const fix = TestBed.createComponent(GridGroupByTestDateTimeDataComponent);
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.grid;
+
+        grid.groupBy({
+            fieldName: 'TimeField', dir: SortingDirection.Asc, ignoreCase: false
+        });
+        fix.detectChanges();
+
+        const groupRows = grid.groupsRowList.toArray();
+        expect(groupRows.length).toEqual(3);
+
+        const targetTestVal = new Date(new Date().setHours(3, 20, 0, 1));
+        const index = groupRows.findIndex(gr => new Date(gr.groupRow.value).getHours() === targetTestVal.getHours()
+            && new Date(gr.groupRow.value).getMinutes() === targetTestVal.getMinutes()
+            && new Date(gr.groupRow.value).getSeconds() === targetTestVal.getSeconds()
+            && new Date(gr.groupRow.value).getMilliseconds() === targetTestVal.getMilliseconds());
+
+        expect(groupRows[index].groupRow.records.length).toEqual(3);
+
+        // compare the date values in the target group which are three different dates with same time values
+        const field = groupRows[index].groupRow.expression.fieldName;
+        const record1 = groupRows[index].groupRow.records[0];
+        const record2 = groupRows[index].groupRow.records[1];
+        const record3 = groupRows[index].groupRow.records[2];
+        const rec1Date = new Date(record1[field]);
+        const rec2Date = new Date(record2[field]);
+        const rec3Date = new Date(record3[field]);
+
+        // the date portions of the following records differ, so the Dates are not equal even though they are in the same group
+        expect(rec1Date.getTime()).not.toEqual(rec2Date.getTime());
+        // the below are equal by date as well
+        expect(rec2Date.getTime()).toEqual(rec3Date.getTime());
+        // the time portions of the not equal dates are the same, so they are in the same group, as the column type is `time`
+        expect(rec1Date.getHours()).toEqual(rec2Date.getHours());
+        expect(rec1Date.getMinutes()).toEqual(rec2Date.getMinutes());
+        expect(rec1Date.getSeconds()).toEqual(rec2Date.getSeconds());
+        expect(rec1Date.getMilliseconds()).toEqual(rec2Date.getMilliseconds());
+    }));
+
+    it('should account for all date values when grouping by \'dateTime\' dataType column', fakeAsync(() => {
+        const fix = TestBed.createComponent(GridGroupByTestDateTimeDataComponent);
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.grid;
+
+        grid.groupBy({
+            fieldName: 'DateTimeField', dir: SortingDirection.Asc, ignoreCase: false
+        });
+        fix.detectChanges();
+
+        // there are two identical DateTime values, so 4 groups out of 5 data records
+        const groupRows = grid.groupsRowList.toArray();
+        expect(groupRows.length).toEqual(4);
+
+        const targetTestVal = new Date(new Date('2003-03-17').setHours(3, 20, 0, 1));
+        const index = groupRows.findIndex(gr => new Date(gr.groupRow.value).getTime() === targetTestVal.getTime());
+        expect(groupRows[index].groupRow.records.length).toEqual(2);
+
+        // compare the date values in the target group which are two identical dates - date and time portions
+        const field = groupRows[index].groupRow.expression.fieldName;
+        const record1 = groupRows[index].groupRow.records[0];
+        const record2 = groupRows[index].groupRow.records[1];
+        const rec1Date = new Date(record1[field]);
+        const rec2Date = new Date(record2[field]);
+
+        expect(rec1Date.getTime()).toEqual(rec2Date.getTime());
+    }));
+
+    it('should display time value in the group by row when grouped by a \'time\' column', fakeAsync(() => {
+        const fix = TestBed.createComponent(GridGroupByTestDateTimeDataComponent);
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.grid;
+
+        grid.groupBy({
+            fieldName: 'TimeField', dir: SortingDirection.Asc, ignoreCase: false
+        });
+        fix.detectChanges();
+
+        const groupRows = grid.groupsRowList.toArray();
+        const expectedValue1 = groupRows[0].nativeElement.nextElementSibling.querySelectorAll('igx-grid-cell')[3].textContent;
+        const actualValue1 = groupRows[0].element.nativeElement.querySelector('.igx-group-label__text').textContent;
+        expect(expectedValue1).toEqual(actualValue1);
+    }));
+
+    it('should display time value in the group by row when grouped by a \'dateTime\' column', fakeAsync(() => {
+        const fix = TestBed.createComponent(GridGroupByTestDateTimeDataComponent);
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.grid;
+
+        grid.groupBy({
+            fieldName: 'DateTimeField', dir: SortingDirection.Asc, ignoreCase: false
+        });
+        fix.detectChanges();
+
+        const groupRows = grid.groupsRowList.toArray();
+        const expectedValue1 = groupRows[0].nativeElement.nextElementSibling.querySelectorAll('igx-grid-cell')[4].textContent;
+        const actualValue1 = groupRows[0].element.nativeElement.querySelector('.igx-group-label__text').textContent;
+        expect(expectedValue1).toEqual(actualValue1);
+    }));
+
     it('should allow grouping by multiple columns.', fakeAsync(() => {
         const fix = TestBed.createComponent(DefaultGridComponent);
         fix.detectChanges();
@@ -3816,3 +3956,27 @@ export class GridGroupByCaseSensitiveComponent {
         }
     ];
 }
+
+@Component({
+    template: `
+        <igx-grid
+            #grid
+            [width]='width'
+            [height]='height'
+            [data]="datesData">
+            <igx-column [field]="'ProductID'" [width]="200" [groupable]="true" dataType="number"></igx-column>
+            <igx-column [field]="'ProductName'" [width]="200" [groupable]="true" dataType="string"></igx-column>
+            <igx-column [field]="'DateField'" [width]="200" [groupable]="true" dataType="date"></igx-column>
+            <igx-column [field]="'TimeField'" [width]="200" [groupable]="true" dataType="time"></igx-column>
+            <igx-column [field]="'DateTimeField'" [width]="200" [groupable]="true" dataType="dateTime"></igx-column>
+        </igx-grid>
+    `
+})
+export class GridGroupByTestDateTimeDataComponent {
+    @ViewChild("grid", { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+
+    public width = '800px';
+    public height = null;
+    public datesData = SampleTestData.generateTestDateTimeData();
+}

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

@@ -163,6 +163,9 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             });
             fixture.detectChanges();
             grid = fixture.componentInstance.grid;
+            const hireDateCol = grid.columns.findIndex(col => col.field === "HireDate");
+            grid.columns[hireDateCol].dataType = 'dateTime';
+            fixture.detectChanges();
 
             const currentColumn = 'HireDate';
             grid.sort({ fieldName: currentColumn, dir: SortingDirection.Asc, ignoreCase: false });

projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html

@@ -55,8 +55,9 @@
                 <ng-container *ngIf="dataType === 'number'">
                     <span class="igx-group-label__text">{{ groupRow.value | number }}</span>
                 </ng-container>
-                <ng-container *ngIf="dataType === 'date'">
-                    <span class="igx-group-label__text">{{ groupRow.value | date }}</span>
+                <ng-container *ngIf="dataType === 'date' || dataType === 'dateTime' || dataType === 'time'">
+                    <span class="igx-group-label__text">{{ groupRow.value |
+                        date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale }}</span>
                 </ng-container>
             </ng-template>
 

projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts

@@ -2499,6 +2499,46 @@ export class SampleTestData {
         return prods;
     }
 
+    public static generateTestDateTimeData = () => {
+        return [
+            {
+                ProductID: 1,
+                ProductName: 'Product1',
+                DateField: new Date('2012-02-12'),
+                TimeField: new Date(new Date('2012-02-12').setHours(3, 20, 0, 1)),
+                DateTimeField: new Date(new Date('2003-03-17').setHours(3, 20, 5)),
+            },
+            {
+                ProductID: 2,
+                ProductName: 'Product2',
+                DateField: new Date('2012-02-13'),
+                TimeField: new Date(new Date('2003-03-17').setHours(3, 20, 0, 1)),
+                DateTimeField: new Date(new Date('2003-03-17').setHours(3, 20)),
+            },
+            {
+                ProductID: 3,
+                ProductName: 'Product3',
+                DateField: new Date('2012-02-12').setHours(1, 55),
+                TimeField: new Date(new Date('2012-02-12').setHours(4, 4)),
+                DateTimeField: new Date(new Date('2006-03-17').setHours(1, 55)),
+            },
+            {
+                ProductID: 4,
+                ProductName: 'Product4',
+                DateField: new Date(new Date('2006-03-17').setHours(11, 11)),
+                TimeField: new Date(new Date('2006-03-17').setHours(11, 11)),
+                DateTimeField: new Date(new Date('2003-03-17').setHours(3, 20, 0, 1)),
+            },
+            {
+                ProductID: 5,
+                ProductName: 'Product5',
+                DateField: new Date(new Date('2006-03-17').setHours(11, 11)),
+                TimeField: new Date(new Date('2003-03-17').setHours(3, 20, 0, 1)),
+                DateTimeField: new Date(new Date('2003-03-17').setHours(3, 20, 0, 1)),
+            }
+        ];
+    };
+
     /* Gets the name of the identifier column if exists. */
     private static getIDColumnName(dataItem: any) {
         if (!dataItem) {