Skip to content

Commit 6effe05

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
feat(igxPivot): Add dimension insert/move/toggle/remove APIs.
1 parent d37d948 commit 6effe05

File tree

3 files changed

+99
-64
lines changed

3 files changed

+99
-64
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
3434
import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
3535
import { OverlaySettings } from '../../services/overlay/utilities';
3636
import { IPinningConfig } from '../grid.common';
37-
import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange } from '../pivot-grid/pivot-grid.interface';
37+
import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange, PivotDimensionType } from '../pivot-grid/pivot-grid.interface';
3838
import { IDataCloneStrategy } from '../../data-operations/data-clone-strategy';
3939

4040
export const IGX_GRID_BASE = new InjectionToken<GridType>('IgxGridBaseToken');
@@ -637,6 +637,9 @@ export interface PivotGridType extends GridType {
637637
toggleRow(rowID: any): void;
638638
resolveDataTypes(field: any): GridColumnDataType;
639639
resolveRowDimensionWidth(dim: IPivotDimension): number;
640+
moveDimension(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index? : number);
641+
getDimensionsByType(dimension: PivotDimensionType);
642+
toggleDimension(dimension: IPivotDimension);
640643
dimensionsChange: EventEmitter<IDimensionsChange>;
641644
valuesChange: EventEmitter<IValuesChange>;
642645
pivotKeys: IPivotKeys;

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

Lines changed: 88 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives
3333
import { GridType, IGX_GRID_BASE, RowType } from '../common/grid.interface';
3434
import { IgxGridCRUDService } from '../common/crud.service';
3535
import { IgxGridSummaryService } from '../summaries/grid-summary.service';
36-
import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IPivotConfiguration, IPivotDimension, IValuesChange, PivotDimensionType } from './pivot-grid.interface';
36+
import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotValue, IValuesChange, PivotDimensionType } from './pivot-grid.interface';
3737
import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
3838
import { IgxColumnGroupComponent } from '../columns/column-group.component';
3939
import { IgxColumnComponent } from '../columns/column.component';
@@ -133,11 +133,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
133133
* <igx-pivot-grid [pivotConfiguration]="config"></igx-pivot-grid>
134134
* ```
135135
*/
136-
public set pivotConfiguration(value :IPivotConfiguration) {
136+
public set pivotConfiguration(value: IPivotConfiguration) {
137137
this._pivotConfiguration = value;
138138
this.notifyChanges(true);
139139
}
140-
140+
141141
public get pivotConfiguration() {
142142
return this._pivotConfiguration;
143143
}
@@ -1040,6 +1040,91 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
10401040
}
10411041
}
10421042

1043+
public insertDimensionAt(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index?: number) {
1044+
const targetCollection = this.getDimensionsByType(targetCollectionType);
1045+
if (index !== undefined) {
1046+
targetCollection.splice(index, 0, dimension);
1047+
} else {
1048+
targetCollection.push(dimension);
1049+
}
1050+
if (targetCollectionType === PivotDimensionType.Column) {
1051+
this.setupColumns();
1052+
}
1053+
this.pipeTrigger++;
1054+
this.dimensionsChange.emit({ dimensions: targetCollection, dimensionCollectionType: targetCollectionType });
1055+
}
1056+
1057+
public moveDimension(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index?: number) {
1058+
// remove from old collection
1059+
this.removeDimension(dimension);
1060+
// add to target
1061+
this.insertDimensionAt(dimension, targetCollectionType, index);
1062+
}
1063+
1064+
public removeDimension(dimension: IPivotDimension) {
1065+
const prevCollectionType = this.getDimensionType(dimension);
1066+
const prevCollection = this.getDimensionsByType(prevCollectionType);
1067+
const currentIndex = prevCollection.indexOf(dimension);
1068+
prevCollection.splice(currentIndex, 1);
1069+
if (prevCollectionType === PivotDimensionType.Column) {
1070+
this.setupColumns();
1071+
}
1072+
this.pipeTrigger++;
1073+
}
1074+
1075+
public toggleDimension(dimension: IPivotDimension) {
1076+
const dimType = this.getDimensionType(dimension);
1077+
const collection = this.getDimensionsByType(dimType);
1078+
dimension.enabled = !dimension.enabled;
1079+
if (dimType === PivotDimensionType.Column) {
1080+
this.setupColumns();
1081+
}
1082+
if(!dimension.enabled) {
1083+
this.filteringService.clearFilter(dimension.memberName);
1084+
}
1085+
this.pipeTrigger++;
1086+
this.dimensionsChange.emit({ dimensions: collection, dimensionCollectionType: dimType });
1087+
}
1088+
1089+
public insertValueAt(value: IPivotValue, index?: number) {
1090+
1091+
}
1092+
1093+
public moveValue(dimension: IPivotValue, index?: number) {
1094+
1095+
}
1096+
1097+
public removeValue(value: IPivotValue,) {
1098+
1099+
}
1100+
1101+
public toggleValue(value: IPivotValue) {
1102+
1103+
}
1104+
1105+
public getDimensionsByType(dimension: PivotDimensionType) {
1106+
switch (dimension) {
1107+
case PivotDimensionType.Row:
1108+
if (!this.pivotConfiguration.rows) {
1109+
this.pivotConfiguration.rows = [];
1110+
}
1111+
return this.pivotConfiguration.rows;
1112+
case PivotDimensionType.Column:
1113+
if (!this.pivotConfiguration.columns) {
1114+
this.pivotConfiguration.columns = [];
1115+
}
1116+
return this.pivotConfiguration.columns;
1117+
case PivotDimensionType.Filter:
1118+
if (!this.pivotConfiguration.filters) {
1119+
this.pivotConfiguration.filters = [];
1120+
}
1121+
return this.pivotConfiguration.filters;
1122+
default:
1123+
return null;
1124+
}
1125+
}
1126+
1127+
10431128
@ViewChildren(IgxPivotRowDimensionContentComponent)
10441129
protected rowDimensionContentCollection: QueryList<IgxPivotRowDimensionContentComponent>;
10451130

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

Lines changed: 7 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -252,10 +252,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
252252
*/
253253
public rowRemoved(event: IBaseChipEventArgs) {
254254
const row = this.grid.pivotConfiguration.rows.find(x => x.memberName === event.owner.id);
255-
row.enabled = false;
256-
this.grid.pipeTrigger++;
257-
this.grid.filteringService.clearFilter(row.memberName);
258-
this.grid.dimensionsChange.emit({ dimensions: this.grid.pivotConfiguration.rows, dimensionCollectionType: PivotDimensionType.Row });
255+
this.grid.toggleDimension(row);
259256
}
260257

261258
/**
@@ -264,12 +261,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
264261
*/
265262
public columnRemoved(event: IBaseChipEventArgs) {
266263
const col = this.grid.pivotConfiguration.columns.find(x => x.memberName === event.owner.id);
267-
col.enabled = false;
268-
this.grid.setupColumns();
269-
this.grid.filteringService.clearFilter(col.memberName);
270-
this.grid.pipeTrigger++;
271-
this.grid.dimensionsChange.emit({ dimensions: this.grid.pivotConfiguration.columns, dimensionCollectionType: PivotDimensionType.Row });
272-
this.grid.reflow();
264+
this.grid.toggleDimension(col);
273265
}
274266

275267
/**
@@ -290,10 +282,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
290282
*/
291283
public filterRemoved(event: IBaseChipEventArgs) {
292284
const filter = this.grid.pivotConfiguration.filters.find(x => x.memberName === event.owner.id);
293-
filter.enabled = false;
294-
this.grid.filteringService.clearFilter(filter.memberName);
295-
this.grid.pipeTrigger++;
296-
this.grid.dimensionsChange.emit({ dimensions: this.grid.pivotConfiguration.filters, dimensionCollectionType: PivotDimensionType.Filter });
285+
this.grid.toggleDimension(filter);
297286
}
298287

299288
/**
@@ -459,9 +448,9 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
459448
* @hidden
460449
* @internal
461450
*/
462-
public onDimDrop(event, area, dimension: PivotDimensionType) {
451+
public onDimDrop(event, area, dimensionType: PivotDimensionType) {
463452
const dragId = event.dragChip?.id || event.dragData?.chip.id;
464-
const currentDim = this.getDimensionsByType(dimension);
453+
const currentDim = this.grid.getDimensionsByType(dimensionType);
465454
const chipsArray = area.chipsList.toArray();
466455
const chip = chipsArray.find(x => x.id === dragId);
467456
const isNewChip = chip === undefined;
@@ -480,60 +469,18 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
480469
// you have dragged something that is not a dimension
481470
return;
482471
}
483-
const dimType = this.getDimensionsType(dim);
484-
485-
// Dragged chip from a different dimension to the current one.
486-
const prevDimensionCollection = this.getDimensionsByType(dimType);
487-
// delete from previous dimension collection and add to current.
488-
prevDimensionCollection.splice(prevDimensionCollection.indexOf(dim), 1);
489-
currentDim.splice(targetIndex, 0, dim);
490-
491-
const isDraggedFromColumn = !!this.grid.pivotConfiguration.columns?.find(x => x && x.memberName === dragId);
492-
if (isDraggedFromColumn) {
493-
// columns have changed.
494-
this.grid.setupColumns();
495-
}
472+
this.grid.moveDimension(dim, dimensionType, targetIndex);
496473
} else if (isReorder) {
497474
// chip from same collection, reordered.
498475
const newDim = currentDim.find(x => x.memberName === dragId);
499-
//const dragChipIndex = chipsArray.indexOf(event.dragChip || event.dragData.chip);
500476
const dragChipIndex = currentDim.findIndex(x => x.memberName === dragId);
501-
currentDim.splice(dragChipIndex, 1);
502-
currentDim.splice(dragChipIndex > chipIndex ? targetIndex : targetIndex - 1, 0, newDim);
503-
}
504-
if (dimension === PivotDimensionType.Column) {
505-
// if columns have changed need to regenerate columns.
506-
this.grid.setupColumns();
477+
this.grid.moveDimension(newDim, dimensionType, dragChipIndex > chipIndex ? targetIndex : targetIndex - 1);
507478
}
508-
this.grid.pipeTrigger++;
509-
this.grid.dimensionsChange.emit({ dimensions: currentDim, dimensionCollectionType: dimension });
510479
// clean states
511480
this.onDimDragEnd();
512481
this.onAreaDragLeave(event, area);
513482
}
514483

515-
protected getDimensionsByType(dimension: PivotDimensionType) {
516-
switch (dimension) {
517-
case PivotDimensionType.Row:
518-
if (!this.grid.pivotConfiguration.rows) {
519-
this.grid.pivotConfiguration.rows = [];
520-
}
521-
return this.grid.pivotConfiguration.rows;
522-
case PivotDimensionType.Column:
523-
if (!this.grid.pivotConfiguration.columns) {
524-
this.grid.pivotConfiguration.columns = [];
525-
}
526-
return this.grid.pivotConfiguration.columns;
527-
case PivotDimensionType.Filter:
528-
if (!this.grid.pivotConfiguration.filters) {
529-
this.grid.pivotConfiguration.filters = [];
530-
}
531-
return this.grid.pivotConfiguration.filters;
532-
default:
533-
return null;
534-
}
535-
}
536-
537484
protected getDimensionsType(dimension: IPivotDimension) {
538485
const isColumn = !!this.grid.pivotConfiguration.columns?.find(x => x && x.memberName === dimension.memberName);
539486
const isRow = !!this.grid.pivotConfiguration.rows?.find(x => x && x.memberName === dimension.memberName);

0 commit comments

Comments
 (0)