Merge branch 'simeonoff/fix-12634' of github.com:IgniteUI/igniteui-angular into simeonoff/fix-12634

simeonoff · simeonoff · commit 90a5c7873119 · 2023-02-10T18:59:42.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,7 +14,9 @@ All notable changes for each version of this project will be documented in this
 - `igxPivotGrid`
     - Adding `aggregatorName` for pivot value configuration as an alternative to setting `aggregator` function. If both are set `aggregatorName` takes precedent. If none are set an error is thrown.
 - `IgxSimpleCombo`
-    - **Behavioral Change** - Keyboard navigation `ArrowUp` - when the combo is opened `ArrowUp` will close the dropdown if the search input is focused. If the active item is the first one in the list, the focus will be moved back to the search input while also selecting all of the text in the input. Otherwise `ArrowUp` will move to the previous list item.
+    - **Behavioral Change** 
+    - When the user clicks on the combo's input, the dropdown opens up.
+    - Keyboard navigation `ArrowUp` - when the combo is opened `ArrowUp` will close the dropdown if the search input is focused. If the active item is the first one in the list, the focus will be moved back to the search input while also selecting all of the text in the input. Otherwise `ArrowUp` will move to the previous list item.
 
 ## 15.0.0
 
diff --git a/projects/igniteui-angular/src/lib/grids/common/strategy.ts b/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);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/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();
+}
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts b/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 });
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html b/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>
 
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html
@@ -14,7 +14,7 @@
         [attr.aria-expanded]="!this.dropdown.collapsed" [attr.aria-controls]="this.dropdown.listId"
         [attr.aria-labelledby]="this.ariaLabelledBy || this.label?.id || this.placeholder"
         [attr.placeholder]="placeholder" [disabled]="disabled" [igxTextSelection]="!composing"
-        (focus)="onFocus()" (input)="handleInputChange($event)"
+        (focus)="onFocus()" (input)="handleInputChange($event)" (click)="handleInputClick()"
         (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (blur)="onBlur()"/>
 
     <ng-container ngProjectAs="igx-suffix">
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts
@@ -1139,6 +1139,37 @@ describe('IgxSimpleCombo', () => {
             expect(combo.selection.length).toEqual(0);
         });
 
+        it('should open the combo when input is focused', () => {
+            spyOn(combo, 'open').and.callThrough();
+            spyOn(combo, 'close').and.callThrough();
+
+            input.triggerEventHandler('focus', {});
+            fixture.detectChanges();
+
+            input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+
+            expect(combo.open).toHaveBeenCalledTimes(1);
+
+            input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+
+            expect(combo.open).toHaveBeenCalledTimes(1);
+
+            UIInteractions.triggerEventHandlerKeyDown('Tab', input);
+            fixture.detectChanges();
+
+            expect(combo.close).toHaveBeenCalledTimes(1);
+
+            input.triggerEventHandler('focus', {});
+            fixture.detectChanges();
+
+            input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+
+            expect(combo.open).toHaveBeenCalledTimes(1);
+        });
+
         it('should empty any invalid item values', () => {
             combo.valueKey = 'key';
             combo.displayKey = 'value';
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts
@@ -272,6 +272,14 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         this.composing = true;
     }
 
+    /** @hidden @internal */
+    public handleInputClick(): void {
+        if (this.collapsed) {
+            this.open();
+            this.comboInput.focus();
+        }
+    }
+
     /** @hidden @internal */
     public handleKeyDown(event: KeyboardEvent): void {
         if (event.key === this.platformUtil.KEYMAP.ENTER) {
@@ -373,7 +381,9 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
     /** @hidden @internal */
     public handleOpened(): void {
         this.triggerCheck();
-        this.dropdownContainer.nativeElement.focus();
+        if (!this.comboInput.focused) {
+            this.dropdownContainer.nativeElement.focus();
+        }
         this.opened.emit({ owner: this });
     }
 
diff --git a/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts b/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
