Skip to content

Commit e62aa17

Browse files
skrustevskrustev
committed
feat(pivot-grid): Move pivot resizing logic. Fixing some issues and resolving dependencies.
1 parent 53a0e65 commit e62aa17

17 files changed

+288
-104
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -627,6 +627,7 @@ export interface PivotGridType extends GridType {
627627
showPivotConfigurationUI: boolean;
628628
columnDimensions: IPivotDimension[];
629629
rowDimensions: IPivotDimension[];
630+
rowDimensionResizing: boolean;
630631
values: IPivotValue[];
631632
filterDimensions: IPivotDimension[];
632633
dimensionDataColumns: ColumnType[];

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
</ng-template>
4848
</ng-template>
4949
<ng-template #record_template let-rowIndex="index" let-rowData>
50-
<igx-pivot-row [pivotRowWidths]='pivotRowWidths' [gridID]="id" [index]="rowIndex" [data]="rowData"
50+
<igx-pivot-row [pivotRowWidths]='pivotRowWidths' [resizing]="rowDimensionResizing" [gridID]="id" [index]="rowIndex" [data]="rowData"
5151
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
5252
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
5353
</igx-pivot-row>
@@ -111,7 +111,7 @@
111111
</igx-circular-bar>
112112
</div>
113113
</ng-template>
114-
<igx-pivot-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-pivot-grid-column-resizer>
114+
<igx-pivot-grid-column-resizer [restrictResizerTop]="theadRow.nativeElement.clientHeight" *ngIf="colResizingService.showResizer"></igx-pivot-grid-column-resizer>
115115
<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
116116
<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
117117

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ import { DropPosition } from '../moving/moving.service';
5050
import { DimensionValuesFilteringStrategy, NoopPivotDimensionsStrategy } from '../../data-operations/pivot-strategy';
5151
import { IgxGridExcelStyleFilteringComponent } from '../filtering/excel-style/grid.excel-style-filtering.component';
5252
import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service';
53-
import { IgxPivotColumnResizingService } from '../resizing/resizing.service';
53+
import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service';
5454
import { IgxFlatTransactionFactory, IgxOverlayService, State, Transaction, TransactionService } from '../../services/public_api';
5555
import { DOCUMENT } from '@angular/common';
5656
import { DisplayDensityToken, IDisplayDensityOptions } from '../../core/displayDensity';
@@ -61,7 +61,7 @@ import { IFilteringExpressionsTree } from '../../data-operations/filtering-expre
6161
import { IgxGridTransaction } from '../common/types';
6262
import { SortingDirection } from '../../data-operations/sorting-strategy';
6363
import { GridBaseAPIService } from '../api.service';
64-
import { IgxPivotGridColumnResizerComponent } from '../resizing/resizer.component';
64+
import { IgxPivotGridColumnResizerComponent } from '../resizing/pivot-grid/pivot-resizer.component';
6565

6666
let NEXT_ID = 0;
6767
const MINIMUM_COLUMN_WIDTH = 200;
@@ -336,6 +336,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
336336
return false;
337337
}
338338

339+
/**
340+
* @hidden @internal
341+
*/
342+
public rowDimensionResizing = true;
343+
339344
protected _defaultExpandState = false;
340345
private _data;
341346
private _filteredData;

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { GridColumnDataType } from '../../data-operations/data-util';
22
import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
33
import { SortingDirection } from '../../data-operations/sorting-strategy';
44
import { ColumnType } from '../common/grid.interface';
5+
import { IgxRowDirective } from '../row.directive';
56

67
export const DEFAULT_PIVOT_KEYS = {
78
aggregations: 'aggregations', records: 'records', children: 'children', level: 'level',
@@ -118,3 +119,8 @@ export interface IPivotDimensionData {
118119
dimension: IPivotDimension;
119120
prevDimensions: IPivotDimension[];
120121
}
122+
123+
export interface PivotRowHeaderGroupType {
124+
intRow: IgxRowDirective;
125+
header: any;
126+
}

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

Lines changed: 109 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { fakeAsync, TestBed } from '@angular/core/testing';
1+
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
22
import { By } from '@angular/platform-browser';
33
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
4-
import { FilteringExpressionsTree, FilteringLogic, IgxPivotDateDimension, IgxPivotGridModule, IgxStringFilteringOperand } from 'igniteui-angular';
4+
import { FilteringExpressionsTree, FilteringLogic, IgxPivotDateDimension, IgxPivotGridComponent, IgxPivotGridModule, IgxPivotRowComponent, IgxPivotRowDimensionHeaderGroupComponent, IgxStringFilteringOperand } from 'igniteui-angular';
55
import { IgxChipsAreaComponent } from '../../chips/chips-area.component';
66
import { configureTestSuite } from '../../test-utils/configure-suite';
77
import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-functions.spec';
@@ -941,3 +941,110 @@ describe('IgxPivotGrid complex hierarchy #pivotGrid', () => {
941941
GridSelectionFunctions.verifyColumnGroupSelected(fixture, group, false);
942942
});
943943
});
944+
945+
describe('IgxPivotGrid Resizing #pivotGrid', () => {
946+
let fixture: ComponentFixture<any>;
947+
let pivotGrid: IgxPivotGridComponent;
948+
949+
configureTestSuite((() => {
950+
TestBed.configureTestingModule({
951+
declarations: [
952+
IgxPivotGridTestComplexHierarchyComponent
953+
],
954+
imports: [
955+
NoopAnimationsModule,
956+
IgxPivotGridModule
957+
]
958+
});
959+
}));
960+
961+
beforeEach(fakeAsync(() => {
962+
fixture = TestBed.createComponent(IgxPivotGridTestComplexHierarchyComponent);
963+
fixture.detectChanges();
964+
965+
pivotGrid = fixture.componentInstance.pivotGrid;
966+
}));
967+
968+
it('should define grid with resizable columns.', fakeAsync(() => {
969+
let pivotRows = fixture.debugElement.queryAll(By.directive(IgxPivotRowComponent));
970+
971+
let rowHeaders = pivotRows[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
972+
expect(rowHeaders.length).toEqual(2);
973+
expect(rowHeaders[0].componentInstance.column.resizable).toBeTrue();
974+
expect(rowHeaders[1].componentInstance.column.resizable).toBeTrue();
975+
976+
rowHeaders = pivotRows[3].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
977+
expect(rowHeaders[0].componentInstance.column.resizable).toBeTrue();
978+
expect(rowHeaders[1].componentInstance.column.resizable).toBeTrue();
979+
980+
rowHeaders = pivotRows[7].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
981+
expect(rowHeaders[0].componentInstance.column.resizable).toBeTrue();
982+
expect(rowHeaders[1].componentInstance.column.resizable).toBeTrue();
983+
}));
984+
985+
it('should update grid after resizing a top dimension header to be bigger.', fakeAsync(() => {
986+
let pivotRows = fixture.debugElement.queryAll(By.directive(IgxPivotRowComponent));
987+
988+
let rowHeaders = pivotRows[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
989+
expect(rowHeaders.length).toEqual(2);
990+
expect(rowHeaders[0].componentInstance.column.width).toEqual('200px');
991+
expect(rowHeaders[1].componentInstance.column.width).toEqual('200px');
992+
993+
const headerResArea = GridFunctions.getHeaderResizeArea(rowHeaders[0]).nativeElement;
994+
995+
// Resize first column
996+
UIInteractions.simulateMouseEvent('mousedown', headerResArea, 100, 0);
997+
tick(200);
998+
fixture.detectChanges();
999+
1000+
const resizer = GridFunctions.getResizer(fixture).nativeElement;
1001+
expect(resizer).toBeDefined();
1002+
UIInteractions.simulateMouseEvent('mousemove', resizer, 300, 5);
1003+
UIInteractions.simulateMouseEvent('mouseup', resizer, 300, 5);
1004+
fixture.detectChanges();
1005+
1006+
expect(rowHeaders[0].componentInstance.column.width).toEqual('400px');
1007+
expect(rowHeaders[1].componentInstance.column.width).toEqual('200px');
1008+
1009+
rowHeaders = pivotRows[3].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1010+
expect(rowHeaders[0].componentInstance.column.width).toEqual('400px');
1011+
expect(rowHeaders[1].componentInstance.column.width).toEqual('200px');
1012+
1013+
rowHeaders = pivotRows[7].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1014+
expect(rowHeaders[0].componentInstance.column.width).toEqual('400px');
1015+
expect(rowHeaders[1].componentInstance.column.width).toEqual('200px');
1016+
}));
1017+
1018+
it('should update grid after resizing a child dimension header to be bigger.', fakeAsync(() => {
1019+
let pivotRows = fixture.debugElement.queryAll(By.directive(IgxPivotRowComponent));
1020+
1021+
let rowHeaders = pivotRows[7].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1022+
expect(rowHeaders.length).toEqual(2);
1023+
expect(rowHeaders[0].componentInstance.column.width).toEqual('200px');
1024+
expect(rowHeaders[1].componentInstance.column.width).toEqual('200px');
1025+
1026+
const headerResArea = GridFunctions.getHeaderResizeArea(rowHeaders[0]).nativeElement;
1027+
1028+
// Resize first column
1029+
UIInteractions.simulateMouseEvent('mousedown', headerResArea, 100, 0);
1030+
tick(200);
1031+
fixture.detectChanges();
1032+
1033+
const resizer = GridFunctions.getResizer(fixture).nativeElement;
1034+
expect(resizer).toBeDefined();
1035+
UIInteractions.simulateMouseEvent('mousemove', resizer, 300, 5);
1036+
UIInteractions.simulateMouseEvent('mouseup', resizer, 300, 5);
1037+
fixture.detectChanges();
1038+
1039+
expect(rowHeaders[0].componentInstance.column.width).toEqual('400px');
1040+
expect(rowHeaders[1].componentInstance.column.width).toEqual('200px');
1041+
1042+
rowHeaders = pivotRows[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1043+
expect(rowHeaders[0].componentInstance.column.width).toEqual('400px');
1044+
expect(rowHeaders[1].componentInstance.column.width).toEqual('200px');
1045+
1046+
rowHeaders = pivotRows[3].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1047+
expect(rowHeaders[0].componentInstance.column.width).toEqual('400px');
1048+
expect(rowHeaders[1].componentInstance.column.width).toEqual('200px');
1049+
}));
1050+
});

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { IgxColumnComponent } from '../columns/column.component';
44
import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface';
55
import { IgxFilteringService } from '../filtering/grid-filtering.service';
66
import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component';
7-
import { IgxPivotColumnResizingService } from '../resizing/resizing.service';
7+
import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service';
88
import { IgxRowDirective } from '../row.directive';
9-
import { IPivotDimension } from './pivot-grid.interface';
9+
import { IPivotDimension, PivotRowHeaderGroupType } from './pivot-grid.interface';
1010
import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component';
1111

1212
/**
@@ -17,7 +17,13 @@ import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-heade
1717
selector: 'igx-pivot-row-dimension-header-group',
1818
templateUrl: './pivot-row-dimension-header-group.component.html'
1919
})
20-
export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupComponent {
20+
export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupComponent implements PivotRowHeaderGroupType {
21+
22+
/**
23+
* @hidden
24+
*/
25+
@HostBinding('style.user-select')
26+
public userSelect = 'none';
2127

2228
/**
2329
* @hidden

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Host
33
import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
44

55
import { IgxGridHeaderComponent } from '../headers/grid-header.component';
6-
import { IgxPivotColumnResizingService } from '../resizing/resizing.service';
6+
import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service';
77

88
/**
99
* @hidden

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,15 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
7878
){
7979
super(grid, selectionService, element, cdr);
8080
}
81+
82+
/**
83+
* @hidden
84+
* @internal
85+
*/
86+
public get resizing() {
87+
return this.grid.rowDimensionResizing;
88+
}
89+
8190
/**
8291
* @hidden
8392
* @internal
@@ -177,7 +186,7 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
177186
ref.instance.field = field;
178187
ref.instance.header = header;
179188
ref.instance.width = this.grid.resolveRowDimensionWidth(rootDim) + 'px';
180-
ref.instance.resizable = true;
189+
ref.instance.resizable = this.resizing;
181190
(ref as any).instance._vIndex = this.grid.columns.length + index + this.index * this.grid.pivotConfiguration.rows.length;
182191
if (dim.childLevel && lvl >= PivotUtil.getTotalLvl(this.data, this.grid.pivotKeys)) {
183192
ref.instance.headerTemplate = this.headerTemplate;

‎projects/igniteui-angular/src/lib/grids/resizing/pivot-grid/pivot-resize-handle.directive.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {
2+
Directive,
3+
ElementRef,
4+
Input,
5+
NgZone
6+
} from '@angular/core';
7+
import { ColumnType } from '../../common/grid.interface';
8+
import { PivotRowHeaderGroupType } from '../../pivot-grid/pivot-grid.interface';
9+
import { IgxPivotColumnResizingService } from './pivot-resizing.service'
10+
import { IgxResizeHandleDirective } from '../resize-handle.directive';
11+
12+
/**
13+
* @hidden
14+
* @internal
15+
*/
16+
@Directive({ selector: '[igxPivotResizeHandle]' })
17+
export class IgxPivotResizeHandleDirective extends IgxResizeHandleDirective {
18+
19+
/**
20+
* @hidden
21+
*/
22+
@Input('igxPivotResizeHandle')
23+
public set pivotColumn(value: ColumnType) {
24+
this.column = value;
25+
};
26+
27+
public get pivotColumn() {
28+
return this.column;
29+
}
30+
31+
/**
32+
* @hidden
33+
*/
34+
@Input('igxPivotResizeHandleHeader')
35+
public rowHeaderGroup: PivotRowHeaderGroupType;
36+
37+
constructor(protected zone: NgZone,
38+
protected element: ElementRef,
39+
public colResizingService: IgxPivotColumnResizingService) {
40+
super(zone, element, colResizingService);
41+
}
42+
43+
/**
44+
* @hidden
45+
*/
46+
protected initResizeService(event = null) {
47+
super.initResizeService(event);
48+
this.colResizingService.rowHeaderGroup = this.rowHeaderGroup;
49+
}
50+
}

‎projects/igniteui-angular/src/lib/grids/resizing/pivot-grid/pivot-resizer.component.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
2+
import { IgxGridColumnResizerComponent } from '../resizer.component';
3+
import { IgxPivotColumnResizingService } from './pivot-resizing.service';
4+
5+
@Component({
6+
changeDetection: ChangeDetectionStrategy.OnPush,
7+
selector: 'igx-pivot-grid-column-resizer',
8+
templateUrl: '../resizer.component.html'
9+
})
10+
export class IgxPivotGridColumnResizerComponent extends IgxGridColumnResizerComponent {
11+
@HostBinding('style.top.px')
12+
public topPos = 0;
13+
14+
@HostBinding('style.position')
15+
public pos = 'absolute';
16+
17+
constructor(public colResizingService: IgxPivotColumnResizingService) {
18+
super(colResizingService);
19+
}
20+
}

0 commit comments

Comments
 (0)