Skip to content

Commit b6487d1

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
Re-emit chip events for easier drop handling. Allow moving chips between different chip areas.
1 parent 43cadd0 commit b6487d1

File tree

4 files changed

+102
-25
lines changed

4 files changed

+102
-25
lines changed

‎projects/igniteui-angular/src/lib/chips/chip.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
(dragClick)="onChipDragClicked($event)"
1111
igxDrop
1212
(enter)="onChipDragEnterHandler($event)"
13+
(leave)= "onChipDragLeaveHandler($event)"
1314
(dropped)="onChipDrop($event)">
1415

1516
<div #selectContainer [ngClass]="selectClass(selected)">

‎projects/igniteui-angular/src/lib/chips/chip.component.ts‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -419,12 +419,38 @@ export class IgxChipComponent extends DisplayDensityBase {
419419
*
420420
* @example
421421
* ```html
422-
* <igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onDragEnter)="chipEnter($event)">
422+
* <igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragEnter)="chipEnter($event)">
423423
* ```
424424
*/
425425
@Output()
426426
public dragEnter = new EventEmitter<IChipEnterDragAreaEventArgs>();
427427

428+
/**
429+
* Emits an event when the `IgxChipComponent` has left the `IgxChipsAreaComponent`.
430+
* Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as
431+
* the original drop event arguments.
432+
*
433+
* @example
434+
* ```html
435+
* <igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragLeave)="chipLeave($event)">
436+
* ```
437+
*/
438+
@Output()
439+
public dragLeave = new EventEmitter<IChipEnterDragAreaEventArgs>();
440+
441+
/**
442+
* Emits an event when the `IgxChipComponent` has been dropped in the `IgxChipsAreaComponent`.
443+
* Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as
444+
* the original drop event arguments.
445+
*
446+
* @example
447+
* ```html
448+
* <igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragDrop)="chipLeave($event)">
449+
* ```
450+
*/
451+
@Output()
452+
public dragDrop = new EventEmitter<IChipEnterDragAreaEventArgs>();
453+
428454
/**
429455
* @hidden
430456
* @internal
@@ -743,13 +769,28 @@ export class IgxChipComponent extends DisplayDensityBase {
743769
this.dragEnter.emit(eventArgs);
744770
}
745771

772+
public onChipDragLeaveHandler(event: IDropBaseEventArgs) {
773+
const eventArgs: IChipEnterDragAreaEventArgs = {
774+
owner: this,
775+
dragChip: event.drag.data.chip,
776+
originalEvent: event
777+
};
778+
this.dragLeave.emit(eventArgs);
779+
}
780+
746781
/**
747782
* @hidden
748783
* @internal
749784
*/
750785
public onChipDrop(event: IDropDroppedEventArgs) {
751786
// Cancel the default drop logic
752787
event.cancel = true;
788+
const eventArgs: IChipEnterDragAreaEventArgs = {
789+
owner: this,
790+
dragChip: event.drag.data.chip,
791+
originalEvent: event
792+
};
793+
this.dragDrop.emit(eventArgs);
753794
}
754795
// End chip igxDrop behavior
755796

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,13 @@
1414
(pointerdown)="$event.preventDefault()">
1515

1616
<!-- Columns area -->
17-
<igx-chips-area (reorder)="columnsOrderChanged($event)">
18-
<igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="'true'" [id]="col.fieldName" [removable]="true" (remove)="columnRemoved($event)">
17+
<igx-chips-area #colArea>
18+
<igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="'true'" [id]="col.fieldName"
19+
[removable]="true" (remove)="columnRemoved($event)"
20+
(dragEnter)="onDimDragEnter($event)"
21+
(dragLeave)="onDimDragLeave($event)"
22+
(dragDrop)="onDimDrop($event, colArea, 1)"
23+
>
1924
<igx-icon igxPrefix>view_column</igx-icon>
2025
<igx-icon igxPrefix>filter_list</igx-icon>
2126
{{col.fieldName}}
@@ -41,8 +46,13 @@
4146
<div #pivotContainer class="igx-grid__tr-action" [style.min-width.px] = "grid.pivotRowWidths"
4247
(pointerdown)="$event.preventDefault()" style='display: flex; align-items: flex-end;'>
4348
<!-- Row area -->
44-
<igx-chips-area (reorder)="rowsOrderChanged($event)">
45-
<igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="'true'" [id]="row.fieldName" [removable]="true" (remove)="rowRemoved($event)">
49+
<igx-chips-area #rowArea>
50+
<igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="'true'" [id]="row.fieldName"
51+
[removable]="true" (remove)="rowRemoved($event)"
52+
(dragEnter)="onDimDragEnter($event)"
53+
(dragLeave)="onDimDragLeave($event)"
54+
(dragDrop)="onDimDrop($event, rowArea, 0)"
55+
>
4656
<igx-icon igxPrefix>table_rows</igx-icon>
4757
<igx-icon igxPrefix>filter_list</igx-icon>
4858
{{ row.fieldName}}

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

Lines changed: 45 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
import { IBaseChipEventArgs } from '../../chips/chip.component';
77
import { IChipsAreaReorderEventArgs } from '../../chips/chips-area.component';
88
import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
9+
import { PivotDimensionType } from './pivot-grid.interface';
910
import { IgxPivotRowComponent } from './pivot-row.component';
1011

1112
export interface IgxGridRowSelectorsTemplateContext {
@@ -34,26 +35,6 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
3435
@Input()
3536
public row: IgxPivotRowComponent;
3637

37-
public columnsOrderChanged(event: IChipsAreaReorderEventArgs) {
38-
const newOrder = [];
39-
for (const chip of event.chipsArray) {
40-
const chipItem = this.grid.pivotConfiguration.columns.filter((item) => item.fieldName === chip.id)[0];
41-
newOrder.push(chipItem);
42-
}
43-
this.grid.pivotConfiguration.columns = newOrder;
44-
this.grid.setupColumns();
45-
this.grid.pipeTrigger++;
46-
}
47-
48-
public rowsOrderChanged(event: IChipsAreaReorderEventArgs) {
49-
const newOrder = [];
50-
for (const chip of event.chipsArray) {
51-
const chipItem = this.grid.pivotConfiguration.rows.filter((item) => item.fieldName === chip.id)[0];
52-
newOrder.push(chipItem);
53-
}
54-
this.grid.pivotConfiguration.rows = newOrder;
55-
}
56-
5738
public rowRemoved(event: IBaseChipEventArgs) {
5839
const row = this.grid.pivotConfiguration.rows.find(x => x.fieldName === event.owner.id);
5940
row.enabled = false;
@@ -73,4 +54,48 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
7354
this.grid.setupColumns();
7455
this.grid.pipeTrigger++;
7556
}
57+
58+
public onDimDragEnter(event) {
59+
const isValue = this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id);
60+
if (isValue) {
61+
// cannot drag value in dimensions
62+
return;
63+
}
64+
event.owner.nativeElement.style.borderLeft = '1px solid red';
65+
}
66+
public onDimDragLeave(event) {
67+
event.owner.nativeElement.style.borderLeft = '';
68+
}
69+
70+
public onDimDrop(event, area, dimension: PivotDimensionType) {
71+
const currentDim = dimension === PivotDimensionType.Row ? this.grid.pivotConfiguration.rows :
72+
this.grid.pivotConfiguration.columns;
73+
const chipsArray = area.chipsList.toArray();
74+
const chip = chipsArray.find(x => x.id === event.dragChip.id);
75+
const isNewChip = chip === undefined;
76+
const currIndex = area.chipsList.toArray().indexOf(event.owner);
77+
if (isNewChip) {
78+
// chip moved from external collection
79+
const oppositeDim = dimension === PivotDimensionType.Row ? this.grid.pivotConfiguration.columns :
80+
this.grid.pivotConfiguration.rows;
81+
const dim = oppositeDim.find(x => x.fieldName === event.dragChip.id);
82+
if(!dim) {
83+
// you have dragged something that is not a dimension
84+
return;
85+
}
86+
dim.enabled = false;
87+
88+
const newDim = Object.assign({}, dim);
89+
newDim.enabled = true;
90+
currentDim.splice(currIndex, 0, newDim);
91+
this.grid.setupColumns();
92+
} else {
93+
// chip from same collection, reordered.
94+
const newDim = currentDim.find(x => x.fieldName === event.dragChip.id);
95+
const dragChipIndex = chipsArray.indexOf(event.dragChip);
96+
currentDim.splice(dragChipIndex, 1);
97+
currentDim.splice(currIndex, 0, newDim);
98+
}
99+
this.grid.pipeTrigger++;
100+
}
76101
}

0 commit comments

Comments
 (0)