feat(pivot): keyboard nav for pivot rows and values

Author: dkamburov

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -28,6 +28,7 @@ export interface IActiveNode {
     level?: number;
     mchCache?: ColumnGroupsCache;
     layout?: IMultiRowLayoutNode;
+    isRowDimensionHeader?: boolean;
 }
 
 /** @hidden */

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

@@ -1,12 +1,48 @@
 import { IgxGridNavigationService } from '../grid-navigation.service';
 import { Injectable } from '@angular/core';
 import { IgxPivotGridComponent } from './pivot-grid.component';
+import { HEADER_KEYS } from '../../core/utils';
 
 @Injectable()
 export class IgxPivotGridNavigationService extends IgxGridNavigationService {
     public grid: IgxPivotGridComponent;
 
-    public dispatchEvent(event: KeyboardEvent) {
-        // TODO
+    public get lastRowDimensionsIndex() {
+        return this.grid.rowDimensions.length - 1;
+    }
+
+    public focusValueCells() {
+        this.activeNode.isRowDimensionHeader = false;
+    }
+
+    public headerNavigation(event: KeyboardEvent) {
+        const key = event.key.toLowerCase();
+        const ctrl = event.ctrlKey;
+        if (!HEADER_KEYS.has(key)) {
+            return;
+        }
+        event.preventDefault();
+
+        const newActiveNode = {
+            row: this.activeNode.row, column: this.activeNode.column, level: null,
+            mchCache: null,
+            layout: null,
+            isRowDimensionHeader: this.activeNode.isRowDimensionHeader
+        }
+
+        if ((key.includes('left') || key === 'home') && this.activeNode.column > 0) {
+            newActiveNode.column = ctrl || key === 'home' ? 0 : this.activeNode.column - 1;
+        }
+        if ((key.includes('right') || key === 'end') && this.activeNode.column < this.lastRowDimensionsIndex) {
+            newActiveNode.column = ctrl || key === 'end' ? this.lastRowDimensionsIndex : this.activeNode.column + 1;
+        }
+        if ((key.includes('up')) && this.activeNode.row > 0) {
+            newActiveNode.row = ctrl ? 0 : this.activeNode.row - 1;
+        }
+        if ((key.includes('down')) && this.activeNode.row < this.findLastDataRowIndex()) {
+            newActiveNode.row = ctrl ? this.findLastDataRowIndex() : this.activeNode.row + 1;
+        }
+        this.setActiveNode(newActiveNode);
+        this.grid.navigateTo(newActiveNode.row);
     }
 }

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts

@@ -45,7 +45,7 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
      */
     public get visibleIndex(): number {
         const field = this.column.field;
-        const rows = this.grid.pivotConfiguration.rows;
+        const rows = this.grid.rowDimensions;
         const rootDimension = this.findRootDimension(field);
         return rows.indexOf(rootDimension);
     }
@@ -54,31 +54,34 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
     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;
+            node.isRowDimensionHeader &&
+            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;
+        return node ? node.isRowDimensionHeader && 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
+            isRowDimensionHeader: true
         };
     }
 
     private findRootDimension(field: string): IPivotDimension {
-        const rows = this.grid.pivotConfiguration.rows;
+        const rows = this.grid.rowDimensions;
         let tempRow;
         let result = null;
         rows.forEach(row => {
             tempRow = row;
             do {
-                if (row.memberName === field) {
+                if (tempRow.memberName === field) {
                     result = row;
                 }
                 tempRow = tempRow.childLevel;

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

@@ -32,7 +32,7 @@
             [column]="col"
             [formatter]="col.formatter"
             [intRow]="this"
-            [active]="isPivotCellActive(col)"
+            [active]="isCellActive(col.visibleIndex)"
             [style.min-height.px]="cellHeight"
             [data]="data"
             [style.min-width]="col.width"
@@ -44,7 +44,8 @@
             [cellTemplate]="col.bodyTemplate"
             [lastSearchInfo]="grid.lastSearchInfo"
             [cellSelectionMode]="grid.cellSelection"
-            [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)">
+            [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+            (pointerdown)="grid.navigation.focusValueCells($event)">
         </igx-grid-cell>
     </ng-template>
 
@@ -78,7 +79,7 @@
             [column]="col"
             [formatter]="col.formatter"
             [intRow]="this"
-            [active]="isPivotCellActive(col)"
+            [active]="isCellActive(col.visibleIndex)"
             [firstPinned]="col.isFirstPinned"
             [lastPinned]="col.isLastPinned"
             [style.min-height.px]="cellHeight"
@@ -93,7 +94,8 @@
             [cellTemplate]="col.bodyTemplate"
             [lastSearchInfo]="grid.lastSearchInfo"
             [cellSelectionMode]="grid.cellSelection"
-            [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)">
+            [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+            (pointerdown)="grid.navigation.focusValueCells($event)">
         </igx-grid-cell>
     </ng-template>
 

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

@@ -104,9 +104,13 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
         return this.grid.pivotConfiguration.values.find(v => v.member === measureName)?.styles;
     }
 
-    public isPivotCellActive(col: IgxColumnComponent) {
+    public isCellActive(visibleColumnIndex) {
         const node = this.grid.navigation.activeNode;
-        return node ? !node.isRowHeader && super.isCellActive(col.visibleIndex) : false;
+        console.log(node && Object.keys(node).length === 0 && !node.isRowDimensionHeader && super.isCellActive(visibleColumnIndex));
+        return node && Object.keys(node).length !== 0 ?
+            !node.isRowDimensionHeader &&
+            super.isCellActive(visibleColumnIndex) :
+            false;
     }
 
     protected extractFromDimensions(rowDimConfig: IPivotDimension[], level: number) {