Skip to content

Commit 6e822f9

Browse files
dkamburovdkamburov
authored
Merge pull request #10679 from IgniteUI/mdragnev/fix-10666
fix(pivot): Fix reordering of value dimension chips
2 parents c98e56d + 659ed76 commit 6e822f9

File tree

3 files changed

+21
-19
lines changed

3 files changed

+21
-19
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -456,7 +456,7 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
456456
pivotGrid.setupColumns();
457457
fixture.detectChanges();
458458
const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
459-
const valueChip = headerRow.querySelector('igx-chip[id="AmountOfSale"]');
459+
const valueChip = headerRow.querySelector('igx-chip[id="Amount of Sale"]');
460460
let content = valueChip.querySelector('.igx-chip__content');
461461
expect(content.textContent.trim()).toBe('SUM(Amount of Sale)');
462462

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353

5454
<!-- Value area -->
5555
<igx-chips-area #valueArea droppable='true'>
56-
<igx-chip #currChip *ngFor="let value of grid.values" [draggable]="true" [id]="value.member"
56+
<igx-chip #currChip *ngFor="let value of grid.values" [draggable]="true" [id]="value.displayName || value.member"
5757
[displayDensity]="grid.displayDensity"
5858
[removable]="true" (remove)="valueRemoved($event)"
5959
(dragLeave)="onDimDragLeave($event)"

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

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
8484
row.enabled = false;
8585
this.grid.pipeTrigger++;
8686
this.grid.filteringService.clearFilter(row.memberName);
87-
this.grid.dimensionsChange.emit({dimensions: this.grid.pivotConfiguration.rows, dimensionCollectionType: PivotDimensionType.Row});
87+
this.grid.dimensionsChange.emit({ dimensions: this.grid.pivotConfiguration.rows, dimensionCollectionType: PivotDimensionType.Row });
8888
}
8989

9090
public columnRemoved(event: IBaseChipEventArgs) {
@@ -93,23 +93,23 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
9393
this.grid.setupColumns();
9494
this.grid.filteringService.clearFilter(col.memberName);
9595
this.grid.pipeTrigger++;
96-
this.grid.dimensionsChange.emit({dimensions: this.grid.pivotConfiguration.columns, dimensionCollectionType: PivotDimensionType.Row});
96+
this.grid.dimensionsChange.emit({ dimensions: this.grid.pivotConfiguration.columns, dimensionCollectionType: PivotDimensionType.Row });
9797
}
9898

9999
public valueRemoved(event: IBaseChipEventArgs) {
100-
const value = this.grid.pivotConfiguration.values.find(x => x.member === event.owner.id);
100+
const value = this.grid.pivotConfiguration.values.find(x => x.member === event.owner.id || x.displayName === event.owner.id);
101101
value.enabled = false;
102102
this.grid.setupColumns();
103103
this.grid.pipeTrigger++;
104-
this.grid.valuesChange.emit({values: this.grid.pivotConfiguration.values});
104+
this.grid.valuesChange.emit({ values: this.grid.pivotConfiguration.values });
105105
}
106106

107107
public filterRemoved(event: IBaseChipEventArgs) {
108108
const filter = this.grid.pivotConfiguration.filters.find(x => x.memberName === event.owner.id);
109109
filter.enabled = false;
110110
this.grid.filteringService.clearFilter(filter.memberName);
111111
this.grid.pipeTrigger++;
112-
this.grid.dimensionsChange.emit({dimensions: this.grid.pivotConfiguration.filters, dimensionCollectionType: PivotDimensionType.Filter});
112+
this.grid.dimensionsChange.emit({ dimensions: this.grid.pivotConfiguration.filters, dimensionCollectionType: PivotDimensionType.Filter });
113113
}
114114

115115
public onFilteringIconPointerDown(event) {
@@ -122,7 +122,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
122122
event.preventDefault();
123123
let dim = dimension;
124124
let col;
125-
while(dim) {
125+
while (dim) {
126126
col = this.grid.dimensionDataColumns.find(x => x.field === dim.memberName || x.field === dim.member);
127127
if (col) {
128128
break;
@@ -162,10 +162,10 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
162162
dimension.sortDirection = SortingDirection.None;
163163
}
164164
dimension.sortDirection = dimension.sortDirection + 1 > SortingDirection.Desc ?
165-
SortingDirection.None : dimension.sortDirection + 1;
165+
SortingDirection.None : dimension.sortDirection + 1;
166166
// apply same sort direction to children.
167167
let dim = dimension;
168-
while(dim.childLevel) {
168+
while (dim.childLevel) {
169169
dim.childLevel.sortDirection = dimension.sortDirection;
170170
dim = dim.childLevel;
171171
}
@@ -176,8 +176,9 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
176176
}
177177

178178
public onDimDragOver(event, dimension?: PivotDimensionType) {
179-
const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id) :
180-
!this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id);
179+
const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id
180+
|| x.displayName === event.dragChip.id) :
181+
!this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id || x.displayName === event.dragChip.id);
181182
if (typeMismatch) {
182183
// cannot drag between dimensions and value
183184
return;
@@ -211,8 +212,8 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
211212

212213
public onAreaDragEnter(event, area, dimension?: PivotDimensionType) {
213214
const dragId = event.detail.owner.element.nativeElement.parentElement.id;
214-
const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === dragId) :
215-
!this.grid.pivotConfiguration.values.find(x => x.member === dragId);
215+
const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === dragId || x.displayName === dragId) :
216+
!this.grid.pivotConfiguration.values.find(x => x.member === dragId || x.displayName === dragId);
216217
if (typeMismatch) {
217218
// cannot drag between dimensions and value
218219
return;
@@ -240,14 +241,15 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
240241
const currentDim = this.grid.pivotConfiguration.values;
241242
const dragId = event.dragChip?.id || event.dragData?.chip.id;
242243
const chipsArray = area.chipsList.toArray();
243-
const chipIndex = chipsArray.indexOf(event.owner) !== -1 ? chipsArray.indexOf(event.owner) : chipsArray.length;
244-
const newDim = currentDim.find(x => x.member === dragId);
244+
let chipIndex = chipsArray.indexOf(event.owner) !== -1 ? chipsArray.indexOf(event.owner) : chipsArray.length;
245+
chipIndex = this._dropPos === DropPosition.AfterDropTarget ? chipIndex + 1 : chipIndex;
246+
const newDim = currentDim.find(x => x.member === dragId || x.displayName === dragId);
245247
if (newDim) {
246248
const dragChipIndex = chipsArray.indexOf(event.dragChip || event.dragData.chip);
247249
currentDim.splice(dragChipIndex, 1);
248-
currentDim.splice(dragChipIndex > chipIndex ? chipIndex : chipIndex - 1, 0, newDim);
250+
currentDim.splice(dragChipIndex >= chipIndex ? chipIndex : chipIndex - 1, 0, newDim);
249251
this.grid.setupColumns();
250-
this.grid.valuesChange.emit({values: this.grid.pivotConfiguration.values});
252+
this.grid.valuesChange.emit({ values: this.grid.pivotConfiguration.values });
251253
}
252254
}
253255

@@ -304,7 +306,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
304306
this.grid.setupColumns();
305307
}
306308
this.grid.pipeTrigger++;
307-
this.grid.dimensionsChange.emit({dimensions: currentDim, dimensionCollectionType: dimension});
309+
this.grid.dimensionsChange.emit({ dimensions: currentDim, dimensionCollectionType: dimension });
308310
}
309311

310312
protected getDimensionsByType(dimension: PivotDimensionType) {

0 commit comments

Comments
 (0)