Merge pull request #14185 from IgniteUI/skrastev/pivot-row-header

Author: dkamburov

CHANGELOG.md

@@ -10,6 +10,10 @@ All notable changes for each version of this project will be documented in this
     - Now accept the following  custom `inputFormat` options, as Angular's DatePipe:
         - Fractional seconds: S, SS, SSS.
         - Period (Am/Pm): a, aa, aaa, aaaa, aaaaa
+- `IgxPivotGrid`
+    - Added templatable row dimension headers displayed on the top, above all row headers.
+    - Replace the `showPivotConfigurationUI` property with `pivotUI` property, adding ability now to enable/disable the configuration UI and/or the new row dimension headers.
+    - Added `sortable` property for each IPivotDimension.
 
 ## 17.2.0
 ### New Features

projects/igniteui-angular/migrations/migration-collection.json

@@ -186,6 +186,11 @@
             "version": "17.2.3",
             "description": "Updates Ignite UI for Angular from v17.2.2 to v17.2.3",
             "factory": "./update-17_2_3"
+        },
+        "migration-38": {
+            "version": "18.0.0",
+            "description": "Updates Ignite UI for Angular from v17.2.x to v18.0.0",
+            "factory": "./update-18_0_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-18_0_0/changes/inputs.json

@@ -0,0 +1,14 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "showPivotConfigurationUI",
+            "replaceWith": "pivotUI",
+            "valueTransform": "pivotConfigurationUI_to_pivotUI",
+            "owner": {
+                "selector": "igx-pivot-grid",
+                "type": "component"
+            }
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-18_0_0/index.spec.ts

@@ -0,0 +1,64 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+const version = '18.0.0';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    const configJson = {
+        projects: {
+            testProj: {
+                root: '/',
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+    };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    const migrationName = 'migration-38';
+
+    it('should replace PivotGrid property `showPivotConfigurationUI` with `pivotUI`', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-pivot-grid [showPivotConfigurationUI]="false"></igx-pivot-grid>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-pivot-grid [pivotUI]="{ showConfiguration: false }"></igx-pivot-grid>
+        `
+        );
+    });
+
+    it('should replace PivotGrid property `showPivotConfigurationUI` with `pivotUI`', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-pivot-grid [showPivotConfigurationUI]="testProp"></igx-pivot-grid>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-pivot-grid [pivotUI]="{ showConfiguration: testProp }"></igx-pivot-grid>
+        `
+        );
+    });
+});

projects/igniteui-angular/migrations/update-18_0_0/index.ts

@@ -0,0 +1,28 @@
+import { Rule, SchematicContext, Tree } from "@angular-devkit/schematics";
+import { BoundPropertyObject, InputPropertyType, UpdateChanges } from "../common/UpdateChanges";
+
+const version = "18.0.0";
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(
+        `Applying migration for Ignite UI for Angular to version ${version}`,
+    );
+    const update = new UpdateChanges(__dirname, host, context);
+
+    update.addValueTransform('pivotConfigurationUI_to_pivotUI', (args: BoundPropertyObject): void => {
+        args.bindingType = InputPropertyType.EVAL;
+
+        switch (args.value) {
+            case 'true':
+                args.value = '{ showConfiguration: true }';
+                break;
+            case 'false':
+                args.value = '{ showConfiguration: false }';
+                break;
+            default:
+                args.value = `{ showConfiguration: ${args.value} }`;
+        }
+    });
+
+    update.applyChanges();
+};

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

@@ -3049,6 +3049,15 @@
         border-bottom: 0;
     }
 
+    %igx-grid__tr-pivot--small-row-area {
+        height: var(--header-size);
+        align-items: flex-end;
+
+        border-inline-start: 0;
+        border-inline-end: 0;
+        border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
+    }
+
     %igx-grid__tr-pivot--filter-container {
         display: flex;
         flex-direction: column;
@@ -3106,6 +3115,33 @@
                 align-items: center;
             }
         }
+
+        igx-pivot-row-header-group {
+            padding-left: pad-inline(
+                map.get($grid-header-padding-inline, 'compact'),
+                map.get($grid-header-padding-inline, 'cosy'),
+                map.get($grid-header-padding-inline, 'comfortable')
+            );
+
+            igx-pivot-row-dimension-header {
+                align-items: center;
+
+                .igx-grid-th__icons {
+                    padding-right: pad-inline(
+                        map.get($grid-header-padding-inline, 'compact'),
+                        map.get($grid-header-padding-inline, 'cosy'),
+                        map.get($grid-header-padding-inline, 'comfortable')
+                    );
+                }
+            }
+
+            &:last-of-type {
+                igx-pivot-row-dimension-header {
+                    border-inline-end: 0;
+                }
+            }
+        }
     }
+
     // Pivot grid END
 }

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -35,7 +35,7 @@ import { ISortingExpression, ISortingStrategy, SortingDirection } from '../../da
 import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
 import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
 import { OverlaySettings } from '../../services/overlay/utilities';
-import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange, PivotDimensionType } from '../pivot-grid/pivot-grid.interface';
+import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange, PivotDimensionType, IPivotUISettings } from '../pivot-grid/pivot-grid.interface';
 import { IDataCloneStrategy } from '../../data-operations/data-clone-strategy';
 import { FormControl, FormGroup, ValidationErrors } from '@angular/forms';
 import { IgxGridValidationService } from '../grid/grid-validation.service';
@@ -1233,7 +1233,7 @@ export interface PivotGridType extends GridType {
      */
     allDimensions: IPivotDimension[],
     /** Specifies whether to show the pivot configuration UI in the grid. */
-    showPivotConfigurationUI: boolean;
+    pivotUI: IPivotUISettings;
     /** @hidden @internal */
     columnDimensions: IPivotDimension[];
     /** @hidden @internal */
@@ -1276,12 +1276,15 @@ export interface PivotGridType extends GridType {
     dimensionsChange: EventEmitter<IDimensionsChange>;
     /** Emits an event when the values in the pivot grid change. */
     valuesChange: EventEmitter<IValuesChange>;
+    /** Emits an event when the a dimension is sorted. */
+    dimensionsSortingExpressionsChange: EventEmitter<ISortingExpression[]>;
     /** @hidden @internal */
     pivotKeys: IPivotKeys;
     hasMultipleValues: boolean;
     excelStyleFilterMaxHeight: string;
     excelStyleFilterMinHeight: string;
     valueChipTemplate: TemplateRef<any>;
+    rowDimensionHeaderTemplate: TemplateRef<IgxColumnTemplateContext>;
 }
 
 export interface GridSVGIcon {

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

@@ -18,7 +18,7 @@
 <ng-container *ngIf="!column.columnGroup">
     <div class="igx-grid-th__icons">
         <ng-container *ngIf="column.sortable && !disabled">
-            <div class="sort-icon"
+            <div #sortIconContainer class="sort-icon"
                 [attr.data-sortIndex]="(grid.sortingOptions.mode === 'single' && grid.sortingExpressions.length <=1) ? null : column.field | sortingIndex:grid.sortingExpressions"
                 (pointerdown)="onPointerDownIndicator($event)" (click)="onSortingIconClick($event)">
                 <ng-container *ngTemplateOutlet="sortIconTemplate; context: { $implicit:  this }"></ng-container>

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

@@ -53,6 +53,12 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
     @ViewChild('defaultSortHeaderIconTemplate', { read: TemplateRef, static: true })
     protected defaultSortHeaderIconTemplate;
 
+    /**
+     * @hidden
+     */
+    @ViewChild('sortIconContainer', { read: ElementRef })
+    protected sortIconContainer: ElementRef;
+
     /**
      * Returns the `aria-selected` of the header.
      */
@@ -194,7 +200,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
     }
 
     public sortDirection = SortingDirection.None;
-    private _destroy$ = new Subject<boolean>();
+    protected _destroy$ = new Subject<boolean>();
 
     constructor(
         @Inject(IGX_GRID_BASE) public grid: GridType,

projects/igniteui-angular/src/lib/grids/pivot-grid/README.md

@@ -79,7 +79,7 @@ Below is the list of all inputs that are specific to the pivot-grid look/behavio
 |Name|Type|Description|
 |--- |--- |--- |
 |`pivotConfiguration`|IPivotConfiguration|Gets/Sets the pivot configuration with all related dimensions and values.|
-|`showPivotConfigurationUI`|boolean|Gets/Sets the pivot configuration ui for the pivot grid - chips and their corresponding containers for row, filter, column dimensions and values|
+|`pivotUI`|IPivotUISettings|Gets/Sets whether to show the ui for the pivot grid configuration - chips and their corresponding containers for row, filter, column dimensions and values. Also enables/disabled row dimension headers.|
 |`defaultExpandState`| boolean | Gets/Sets the default expand state for all rows. |
 
 Note that the pivot-grid extends base igx-grid, so most of the @Input properties make sense and work in the pivot-grid as well. Keep in mind that due to some specifics, not all grid features and @Input properties will work.