feat(pivot-nav): set correct ids for row headers and set activation

dkamburov · dkamburov · commit f4e98457c839 · 2021-11-22T22:35:24.000+02:00
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts
@@ -324,7 +324,7 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
         this.column.applySelectableClass = false;
     }
 
-    private get activeNode() {
+    protected get activeNode() {
         return {
             row: -1, column: this.column.visibleIndex, level: this.column.level,
             mchCache: { level: this.column.level, visibleIndex: this.column.visibleIndex },
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.module.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.module.ts
@@ -7,6 +7,7 @@ import { IgxPivotRowPipe, IgxPivotColumnPipe, IgxPivotGridFilterPipe,
 import { IgxGridComponent } from '../grid/grid.component';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component';
+import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-header-group.component';
 
 /**
  * @hidden
@@ -17,6 +18,7 @@ import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-cont
     IgxPivotRowComponent,
     IgxPivotHeaderRowComponent,
     IgxPivotRowDimensionContentComponent,
+    IgxPivotRowDimensionHeaderGroupComponent,
     IgxPivotRowPipe,
     IgxPivotRowExpansionPipe,
     IgxPivotColumnPipe,
@@ -29,6 +31,7 @@ import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-cont
     IgxPivotRowComponent,
     IgxPivotHeaderRowComponent,
     IgxPivotRowDimensionContentComponent,
+    IgxPivotRowDimensionHeaderGroupComponent,
     IgxPivotRowExpansionPipe,
     IgxPivotRowPipe,
     IgxPivotColumnPipe,
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html
@@ -5,11 +5,12 @@
         <!-- Unpinned columns collection -->
         <ng-template ngFor #headerVirtualContainer let-column
             [ngForOf]="unpinnedColumnCollection | igxTopLevel">
-            <igx-grid-header-group [ngClass]="column.headerGroupClasses"
+            <igx-pivot-row-dimension-header-group [ngClass]="column.headerGroupClasses"
                 [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
                 [style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                [style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
-            </igx-grid-header-group>
+                [style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
+                [intRow]="intRow">
+            </igx-pivot-row-dimension-header-group>
         </ng-template>
     </div>
 </div>
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.ts
@@ -1,8 +1,10 @@
 import {
     ChangeDetectionStrategy,
-    Component
+    Component,
+    Input
 } from '@angular/core';
 import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
+import { IgxRowDirective } from '../row.directive';
 
 /**
  *
@@ -18,4 +20,10 @@ import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component'
     templateUrl: './pivot-row-dimension-content.component.html'
 })
 export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowComponent {
+    /**
+     * @hidden
+     * @internal
+     */
+    @Input()
+    public intRow: IgxRowDirective;
 }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts
@@ -0,0 +1,89 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Inject, Input } from '@angular/core';
+
+import { PlatformUtil } from '../../core/utils';
+import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface';
+import { IgxFilteringService } from '../filtering/grid-filtering.service';
+import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component';
+import { IgxColumnResizingService } from '../resizing/resizing.service';
+import { IgxRowDirective } from '../row.directive';
+import { IPivotDimension } from './pivot-grid.interface';
+
+/**
+ * @hidden
+ */
+ @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'igx-pivot-row-dimension-header-group',
+    templateUrl: '../headers/grid-header-group.component.html'
+})
+export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupComponent {
+
+    constructor(private cdRef: ChangeDetectorRef,
+        @Inject(IGX_GRID_BASE) public grid: PivotGridType,
+        private elementRef: ElementRef<HTMLElement>,
+        public colResizingService: IgxColumnResizingService,
+        public filteringService: IgxFilteringService,
+        protected platform: PlatformUtil) {
+            super(cdRef, grid, elementRef, colResizingService, filteringService, platform);
+         }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    @Input()
+    public intRow: IgxRowDirective;
+
+    @HostBinding('attr.id')
+    public get headerID() {
+        return `${this.grid.id}_-2_${this.intRow.index}_${this.visibleIndex}`;
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public get visibleIndex(): number {
+        const field = this.column.field;
+        const rows = this.grid.pivotConfiguration.rows;
+        const rootDimension = this.findRootDimension(field);
+        return rows.indexOf(rootDimension);
+    }
+
+    @HostBinding('class.igx-grid-th--active')
+    public get active() {
+        const node = this.grid.navigation.activeNode;
+        return node && !this.column.columnGroup ?
+            node.isRowHeader && node.row === this.intRow.index && node.column === this.visibleIndex : false;
+    }
+
+    public get activeGroup() {
+        const node = this.grid.navigation.activeNode;
+        return node ? node.isRowHeader && node.row === this.intRow.index && node.column === this.visibleIndex : false;
+    }
+
+    protected get activeNode() {
+        return {
+            row: this.intRow.index, column: this.visibleIndex, level: null,
+            mchCache: null,
+            layout: null,
+            isRowHeader: true
+        };
+    }
+
+    private findRootDimension(field: string): IPivotDimension {
+        const rows = this.grid.pivotConfiguration.rows;
+        let tempRow;
+        let result = null;
+        rows.forEach(row => {
+            tempRow = row;
+            do {
+                if (row.memberName === field) {
+                    result = row;
+                }
+                tempRow = tempRow.childLevel;
+            } while(tempRow)
+        });
+        return result;
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html
@@ -8,6 +8,7 @@
             [width]="grid.pivotRowWidths"
             [unpinnedColumnCollection]="rowDimension"
             (scroll)="grid.preventHeaderScroll($event)"
+            [intRow]="this"
         >
         </igx-pivot-row-dimension-content>
     </div>
@@ -31,7 +32,7 @@
             [column]="col"
             [formatter]="col.formatter"
             [intRow]="this"
-            [active]="isCellActive(col.visibleIndex)"
+            [active]="isPivotCellActive(col)"
             [style.min-height.px]="cellHeight"
             [data]="data"
             [style.min-width]="col.width"
@@ -77,7 +78,7 @@
             [column]="col"
             [formatter]="col.formatter"
             [intRow]="this"
-            [active]="isCellActive(col.visibleIndex)"
+            [active]="isPivotCellActive(col)"
             [firstPinned]="col.isFirstPinned"
             [lastPinned]="col.isLastPinned"
             [style.min-height.px]="cellHeight"
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.ts
@@ -94,7 +94,7 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
         }
     }
 
-    public getCellClass(col: any) {
+    public getCellClass(col: IgxColumnComponent) {
         const configuration = this.grid.pivotConfiguration;
         if (configuration.values.length === 1) {
             return configuration.values[0].styles;
@@ -104,6 +104,11 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
         return this.grid.pivotConfiguration.values.find(v => v.member === measureName)?.styles;
     }
 
+    public isPivotCellActive(col: IgxColumnComponent) {
+        const node = this.grid.navigation.activeNode;
+        return node ? !node.isRowHeader && super.isCellActive(col.visibleIndex) : false;
+    }
+
     protected extractFromDimensions(rowDimConfig: IPivotDimension[], level: number) {
         let dimIndex = 0;
         let currentLvl = 0;
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/public_api.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/public_api.ts
@@ -7,3 +7,4 @@ export * from './pivot-grid.pipes';
 export * from './pivot-row.component';
 export * from './pivot-header-row.component';
 export * from './pivot-row-dimension-content.component';
+export * from './pivot-row-dimension-header-group.component';

Original file line number	Diff line number	Diff line change
`@@ -324,7 +324,7 @@ export class IgxGridHeaderGroupComponent implements DoCheck {`
`324`	`324`	`this.column.applySelectableClass = false;`
`325`	`325`	`}`
`326`	`326`
`327`		`- private get activeNode() {`
	`327`	`+ protected get activeNode() {`
`328`	`328`	`return {`
`329`	`329`	`row: -1, column: this.column.visibleIndex, level: this.column.level,`
`330`	`330`	`mchCache: { level: this.column.level, visibleIndex: this.column.visibleIndex },`
Original file line number	Diff line number	Diff line change
`@@ -94,7 +94,7 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {`
`94`	`94`	`}`
`95`	`95`	`}`
`96`	`96`
`97`		`- public getCellClass(col: any) {`
	`97`	`+ public getCellClass(col: IgxColumnComponent) {`
`98`	`98`	`const configuration = this.grid.pivotConfiguration;`
`99`	`99`	`if (configuration.values.length === 1) {`
`100`	`100`	`return configuration.values[0].styles;`
`@@ -104,6 +104,11 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {`
`104`	`104`	`return this.grid.pivotConfiguration.values.find(v => v.member === measureName)?.styles;`
`105`	`105`	`}`
`106`	`106`
	`107`	`+ public isPivotCellActive(col: IgxColumnComponent) {`
	`108`	`+ const node = this.grid.navigation.activeNode;`
	`109`	`+ return node ? !node.isRowHeader && super.isCellActive(col.visibleIndex) : false;`
	`110`	`+ }`
	`111`	`+`
`107`	`112`	`protected extractFromDimensions(rowDimConfig: IPivotDimension[], level: number) {`
`108`	`113`	`let dimIndex = 0;`
`109`	`114`	`let currentLvl = 0;`