Merge pull request #11799 from IgniteUI/mdragnev/fix-11738

fix(pivot): Set correct data type when creating custom IgxPivotDateDi…

Author: kdinev

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-dimensions.ts

@@ -1,5 +1,6 @@
 import { IGridResourceStrings } from '../../core/i18n/grid-resources';
 import { CurrentResourceStrings } from '../../core/i18n/resources';
+import { GridColumnDataType } from '../../data-operations/data-util';
 import { IPivotDimension } from './pivot-grid.interface';
 import { PivotUtil } from './pivot-util';
 
@@ -46,6 +47,11 @@ export interface IPivotDateDimensionOptions {
 export class IgxPivotDateDimension implements IPivotDimension {
     /** Enables/Disables a particular dimension from pivot structure. */
     public enabled = true;
+    
+    /**
+     * Gets/Sets data type
+     */
+    public dataType?: GridColumnDataType;
 
     /** Default options used for initialization. */
     public defaultOptions = {
@@ -94,6 +100,9 @@ export class IgxPivotDateDimension implements IPivotDimension {
             return;
         }
 
+        this.dataType = GridColumnDataType.Date;
+        inBaseDimension.dataType = GridColumnDataType.Date;
+
         const baseDimension = options.fullDate ? inBaseDimension : null;
         const monthDimensionDef: IPivotDimension = {
             memberName: 'Months',
@@ -117,7 +126,7 @@ export class IgxPivotDateDimension implements IPivotDimension {
         };
         const quarterDimension = options.quarters ? quarterDimensionDef : monthDimension;
 
-        const yearsDimensionDef = {
+        const yearsDimensionDef: IPivotDimension = {
             memberName: 'Years',
             memberFunction: (rec) => {
                 const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec);

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

@@ -1,7 +1,7 @@
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { FilteringExpressionsTree, FilteringLogic, IgxPivotGridComponent, IgxPivotRowDimensionHeaderGroupComponent, IgxStringFilteringOperand } from 'igniteui-angular';
+import { FilteringExpressionsTree, FilteringLogic, GridColumnDataType, IgxPivotGridComponent, IgxPivotRowDimensionHeaderGroupComponent, IgxStringFilteringOperand } from 'igniteui-angular';
 import { IgxChipComponent } from '../../chips/chip.component';
 import { IgxChipsAreaComponent } from '../../chips/chips-area.component';
 import { DefaultPivotSortingStrategy } from '../../data-operations/pivot-sort-strategy';
@@ -1130,6 +1130,51 @@ describe('IgxPivotGrid #pivotGrid', () => {
                 expect(pivotGrid.dimensionsSortingExpressions).toEqual(expectedExpressions);
             });
 
+            it('should apply correct sorting for IgxPivotDateDimension', () => {
+                const pivotGrid = fixture.componentInstance.pivotGrid;
+
+                pivotGrid.pivotConfiguration.columns = [
+                    new IgxPivotDateDimension(
+                        {
+                            memberName: 'Date',
+                            memberFunction: (data) => {
+                                return data['Date'];
+                            },
+                            enabled: true,
+                            dataType: GridColumnDataType.Date
+                        },
+                        {
+                            total: false,
+                            years: false,
+                            quarters: false,
+                            months: false,
+                            fullDate: true
+                        }
+                    )
+                ];
+                pivotGrid.notifyDimensionChange(true);
+                fixture.detectChanges();
+
+                const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
+                const colChip = headerRow.querySelector('igx-chip[id="Date"]');
+
+                //sort asc
+                colChip.click();
+                fixture.detectChanges();
+
+                let colHeaders = pivotGrid.columns.filter(x => x.level === 0).map(x => x.header);
+                let expected = ['01/05/2019', '01/06/2020', '02/19/2020', '05/12/2020', '01/01/2021', '04/07/2021', '12/08/2021']
+                expect(colHeaders).toEqual(expected);
+
+                // sort desc
+                colChip.click();
+                fixture.detectChanges();
+
+                colHeaders = pivotGrid.columns.filter(x => x.level === 0).map(x => x.header);
+                expected = ['12/08/2021', '04/07/2021', '01/01/2021', '05/12/2020', '02/19/2020', '01/06/2020', '01/05/2019'];
+                expect(colHeaders).toEqual(expected);
+            });
+
             it('should sort on column for single row dimension.', () => {
                 const pivotGrid = fixture.componentInstance.pivotGrid;
                 let headerCell = GridFunctions.getColumnHeader('USA-UnitsSold', fixture);