feat(pivot-grid): Initial implementaion of Pivot Grid row header resizing

skrustev · skrustev · commit 53a0e6595074 · 2022-01-13T13:16:34.000+02:00
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -111,7 +111,7 @@
         </igx-circular-bar>
     </div>
 </ng-template>
-<igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
+<igx-pivot-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-pivot-grid-column-resizer>
 <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
 
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -50,7 +50,7 @@ import { DropPosition } from '../moving/moving.service';
 import { DimensionValuesFilteringStrategy, NoopPivotDimensionsStrategy } from '../../data-operations/pivot-strategy';
 import { IgxGridExcelStyleFilteringComponent } from '../filtering/excel-style/grid.excel-style-filtering.component';
 import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service';
-import { IgxColumnResizingService } from '../resizing/resizing.service';
+import { IgxPivotColumnResizingService } from '../resizing/resizing.service';
 import { IgxFlatTransactionFactory, IgxOverlayService, State, Transaction, TransactionService } from '../../services/public_api';
 import { DOCUMENT } from '@angular/common';
 import { DisplayDensityToken, IDisplayDensityOptions } from '../../core/displayDensity';
@@ -61,6 +61,7 @@ import { IFilteringExpressionsTree } from '../../data-operations/filtering-expre
 import { IgxGridTransaction } from '../common/types';
 import { SortingDirection } from '../../data-operations/sorting-strategy';
 import { GridBaseAPIService } from '../api.service';
+import { IgxPivotGridColumnResizerComponent } from '../resizing/resizer.component';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -77,6 +78,7 @@ const MINIMUM_COLUMN_WIDTH = 200;
         { provide: IGX_GRID_BASE, useExisting: IgxPivotGridComponent },
         { provide: IgxFilteringService, useClass: IgxPivotFilteringService },
         IgxPivotGridNavigationService,
+        IgxPivotColumnResizingService,
         IgxForOfSyncService,
         IgxForOfScrollSyncService
     ]
@@ -127,7 +129,14 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      * <igx-pivot-grid [pivotConfiguration]="config"></igx-pivot-grid>
      * ```
      */
-    public pivotConfiguration: IPivotConfiguration = { rows: null, columns: null, values: null, filters: null };
+    public set pivotConfiguration(value :IPivotConfiguration) {
+        this._pivotConfiguration = value;
+        this.notifyChanges(true);
+    }
+    
+    public get pivotConfiguration() {
+        return this._pivotConfiguration;
+    }
 
     @Input()
     /**
@@ -159,6 +168,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     @ViewChild('headerTemplate', { read: TemplateRef, static: true })
     public headerTemplate: TemplateRef<any>;
 
+    /**
+     * @hidden @internal
+     */
+    @ViewChild(IgxPivotGridColumnResizerComponent)
+    public resizeLine: IgxPivotGridColumnResizerComponent;
+
     /**
      * @hidden @interal
      */
@@ -324,6 +339,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     protected _defaultExpandState = false;
     private _data;
     private _filteredData;
+    private _pivotConfiguration: IPivotConfiguration = { rows: null, columns: null, values: null, filters: null };
     private p_id = `igx-pivot-grid-${NEXT_ID++}`;
 
 
@@ -496,7 +512,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
     constructor(
         public selectionService: IgxGridSelectionService,
-        public colResizingService: IgxColumnResizingService,
+        public colResizingService: IgxPivotColumnResizingService,
         gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>,
         protected transactionFactory: IgxFlatTransactionFactory,
         elementRef: ElementRef<HTMLElement>,
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.html
@@ -98,7 +98,8 @@
     </igx-pivot-row-dimension-header>
     <igx-grid-filtering-cell *ngIf="grid.allowFiltering && grid.filterMode === 'quickFilter'" [column]="column" [attr.draggable]="false"></igx-grid-filtering-cell>
     <span *ngIf="!column.columnGroup && column.resizable" class="igx-grid-th__resize-handle"
-        [igxResizeHandle]="column"
+        [igxPivotResizeHandle]="column"
+        [igxPivotResizeHandleHeader]="this"
         [attr.draggable]="false"
         [style.cursor]="colResizingService.resizeCursor">
     </span>
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
@@ -1,12 +1,13 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Inject, Input } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Inject, Input, ViewChild } from '@angular/core';
 import { PlatformUtil } from '../../core/utils';
 import { IgxColumnComponent } from '../columns/column.component';
 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 { IgxPivotColumnResizingService } from '../resizing/resizing.service';
 import { IgxRowDirective } from '../row.directive';
 import { IPivotDimension } from './pivot-grid.interface';
+import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component';
 
 /**
  * @hidden
@@ -18,10 +19,16 @@ import { IPivotDimension } from './pivot-grid.interface';
 })
 export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupComponent {
 
+    /**
+     * @hidden
+     */
+    @ViewChild(IgxPivotRowDimensionHeaderComponent)
+    public header: IgxPivotRowDimensionHeaderComponent;
+
     constructor(private cdRef: ChangeDetectorRef,
         @Inject(IGX_GRID_BASE) public grid: PivotGridType,
         private elementRef: ElementRef<HTMLElement>,
-        public colResizingService: IgxColumnResizingService,
+        public colResizingService: IgxPivotColumnResizingService,
         public filteringService: IgxFilteringService,
         protected platform: PlatformUtil) {
         super(cdRef, grid, elementRef, colResizingService, filteringService, platform);
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header.component.ts
@@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Host
 import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
 
 import { IgxGridHeaderComponent } from '../headers/grid-header.component';
-import { IgxColumnResizingService } from '../resizing/resizing.service';
+import { IgxPivotColumnResizingService } from '../resizing/resizing.service';
 
 /**
  * @hidden
@@ -17,7 +17,7 @@ export class IgxPivotRowDimensionHeaderComponent extends IgxGridHeaderComponent
 
     constructor(
         @Inject(IGX_GRID_BASE) public grid: GridType,
-        public colResizingService: IgxColumnResizingService,
+        public colResizingService: IgxPivotColumnResizingService,
         public cdr: ChangeDetectorRef,
         private refInstance: ElementRef<HTMLElement>
     ) {
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
@@ -177,6 +177,7 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
         ref.instance.field = field;
         ref.instance.header = header;
         ref.instance.width = this.grid.resolveRowDimensionWidth(rootDim) + 'px';
+        ref.instance.resizable = true;
         (ref as any).instance._vIndex = this.grid.columns.length + index + this.index * this.grid.pivotConfiguration.rows.length;
         if (dim.childLevel && lvl >= PivotUtil.getTotalLvl(this.data, this.grid.pivotKeys)) {
             ref.instance.headerTemplate = this.headerTemplate;
diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resize-handle.directive.ts b/projects/igniteui-angular/src/lib/grids/resizing/resize-handle.directive.ts
@@ -8,9 +8,10 @@ import {
     OnDestroy
 } from '@angular/core';
 import { Subject, fromEvent } from 'rxjs';
-import { debounceTime, takeUntil} from 'rxjs/operators';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 import { ColumnType } from '../common/grid.interface';
-import { IgxColumnResizingService } from './resizing.service';
+import { IgxPivotRowDimensionHeaderGroupComponent } from '../pivot-grid/pivot-row-dimension-header-group.component';
+import { IgxColumnResizingService, IgxPivotColumnResizingService } from './resizing.service';
 
 
 /**
@@ -38,9 +39,9 @@ export class IgxResizeHandleDirective implements AfterViewInit, OnDestroy {
 
     private readonly DEBOUNCE_TIME = 200;
 
-    constructor(private zone: NgZone,
-               private element: ElementRef,
-               public colResizingService: IgxColumnResizingService) { }
+    constructor(protected zone: NgZone,
+        protected element: ElementRef,
+        public colResizingService: IgxColumnResizingService) { }
 
     /**
      * @hidden
@@ -56,7 +57,7 @@ export class IgxResizeHandleDirective implements AfterViewInit, OnDestroy {
     @HostListener('dblclick')
     public onDoubleClick() {
         this._dblClick = true;
-        this.colResizingService.column = this.column;
+        this.initResizeService();
         this.colResizingService.autosizeColumnOnDblClick();
     }
 
@@ -106,12 +107,61 @@ export class IgxResizeHandleDirective implements AfterViewInit, OnDestroy {
      * @hidden
      */
     private _onResizeAreaMouseDown(event) {
-        this.colResizingService.column = this.column;
-        this.colResizingService.isColumnResizing = true;
-        this.colResizingService.startResizePos = event.clientX;
+        this.initResizeService(event);
 
         this.colResizingService.showResizer = true;
         this.column.grid.cdr.detectChanges();
     }
+
+    /**
+     * @hidden
+     */
+    protected initResizeService(event = null) {
+        this.colResizingService.column = this.column;
+
+        if (event) {
+            this.colResizingService.isColumnResizing = true;
+            this.colResizingService.startResizePos = event.clientX;
+        }
+    }
 }
 
+/**
+ * @hidden
+ * @internal
+ */
+@Directive({ selector: '[igxPivotResizeHandle]' })
+export class IgxPivotResizeHandleDirective extends IgxResizeHandleDirective {
+
+    /**
+     * @hidden
+     */
+    @Input('igxPivotResizeHandle')
+    public set pivotColumn(value: ColumnType) {
+        this.column = value;
+    };
+
+    public get pivotColumn() {
+        return this.column;
+    }
+
+    /**
+     * @hidden
+     */
+    @Input('igxPivotResizeHandleHeader')
+    public rowHeaderGroup: IgxPivotRowDimensionHeaderGroupComponent;
+
+    constructor(protected zone: NgZone,
+        protected element: ElementRef,
+        public colResizingService: IgxPivotColumnResizingService) {
+        super(zone, element, colResizingService);
+    }
+
+    /**
+     * @hidden
+     */
+    protected initResizeService(event = null) {
+        super.initResizeService(event);
+        this.colResizingService.rowHeaderGroup = this.rowHeaderGroup;
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resize.module.ts b/projects/igniteui-angular/src/lib/grids/resizing/resize.module.ts
@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IgxColumnResizingService } from './resizing.service';
-import { IgxGridColumnResizerComponent } from './resizer.component';
-import { IgxResizeHandleDirective } from './resize-handle.directive';
+import { IgxColumnResizingService, IgxPivotColumnResizingService } from './resizing.service';
+import { IgxGridColumnResizerComponent, IgxPivotGridColumnResizerComponent } from './resizer.component';
+import { IgxPivotResizeHandleDirective, IgxResizeHandleDirective } from './resize-handle.directive';
 import { IgxColumnResizerDirective } from './resizer.directive';
 
 export { IgxGridColumnResizerComponent } from './resizer.component';
@@ -13,18 +13,23 @@ export { IgxColumnResizerDirective } from './resizer.directive';
     declarations: [
         IgxGridColumnResizerComponent,
         IgxResizeHandleDirective,
-        IgxColumnResizerDirective
+        IgxColumnResizerDirective,
+        IgxPivotGridColumnResizerComponent,
+        IgxPivotResizeHandleDirective
     ],
     imports: [
         CommonModule
     ],
     exports: [
         IgxGridColumnResizerComponent,
         IgxResizeHandleDirective,
-        IgxColumnResizerDirective
+        IgxColumnResizerDirective,
+        IgxPivotGridColumnResizerComponent,
+        IgxPivotResizeHandleDirective
     ],
     providers: [
-        IgxColumnResizingService
+        IgxColumnResizingService,
+        IgxPivotColumnResizingService
     ]
 })
 export class IgxGridResizingModule {}
diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizer.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
-import { IgxColumnResizingService } from './resizing.service';
+import { IgxColumnResizingService, IgxPivotColumnResizingService } from './resizing.service';
 import { IgxColumnResizerDirective } from './resizer.directive';
 
 @Component({
@@ -13,3 +13,14 @@ export class IgxGridColumnResizerComponent {
 
     constructor(public colResizingService: IgxColumnResizingService) { }
 }
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'igx-pivot-grid-column-resizer',
+    templateUrl: './resizer.component.html'
+})
+export class IgxPivotGridColumnResizerComponent extends IgxGridColumnResizerComponent {
+    constructor(public colResizingService: IgxPivotColumnResizingService) {
+        super(colResizingService);
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts
diff --git a/src/app/pivot-grid/pivot-grid.sample.ts b/src/app/pivot-grid/pivot-grid.sample.ts
