Skip to content

Commit 54175a8

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
feat(pivot): Show additional "Drop Here" chip in dimension areas with existing chips where the dragged chip may be added.
1 parent 6e822f9 commit 54175a8

File tree

3 files changed

+59
-18
lines changed

3 files changed

+59
-18
lines changed

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

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,55 +4,62 @@
44
(igxDragEnter)="onAreaDragEnter($event, filterArea, 2)" (igxDragLeave)="onAreaDragLeave($event, filterArea)"
55
igxDrop (dropped)="onDimDrop($event, filterArea, 2)" (pointerdown)="$event.preventDefault()">
66

7-
<span *ngIf="grid.filterDimensions.length === 0" class='igx-pivot__emptyChipArea'>Drop Filter Fields here.</span>
7+
88

99
<!-- Filter area -->
1010
<igx-chips-area #filterArea droppable='true'>
11+
<span igxDrop (dropped)="onDimDrop($event, filterArea, 2)" *ngIf="grid.filterDimensions.length === 0" class='igx-pivot__emptyChipArea'>Drop Filter Fields here.</span>
1112
<igx-chip *ngFor="let filter of grid.filterDimensions" [id]="filter.memberName" [draggable]="true"
1213
[displayDensity]="grid.displayDensity"
1314
[removable]="true" (remove)="filterRemoved($event)"
1415
(dragOver)="onDimDragOver($event, 2)"
1516
(dragLeave)="onDimDragLeave($event)"
16-
(dragDrop)="onDimDrop($event, filterArea, 2)">
17+
(dragDrop)="onDimDrop($event, filterArea, 2)"
18+
(moveStart)= 'onDimDragStart($event, filterArea)'
19+
(moveEnd)= 'onDimDragEnd()'>
1720
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>
1821
{{filter.memberName}}
1922
</igx-chip>
23+
<igx-chip igxDrop (dragDrop)="onDimDrop($event, filterArea, 2)" #notifyChip [hidden]='true'>
24+
Drop here to use as filter
25+
</igx-chip>
2026
</igx-chips-area>
2127
</div>
2228

2329
<div class="igx-grid__tr-pivot-group">
2430
<div #pivotColumnContainer *ngIf="grid.showPivotConfigurationUI" class="igx-grid__tr-pivot" (dropped)="onDimDrop($event, colArea, 1)" igxDrop
2531
(igxDragEnter)="onAreaDragEnter($event, colArea, 1)" (igxDragLeave)="onAreaDragLeave($event, colArea)">
26-
27-
<span *ngIf="grid.columnDimensions.length === 0" class='igx-pivot__emptyChipArea'>Drop Column Fields here.</span>
28-
2932
<!-- Columns area -->
3033
<igx-chips-area #colArea droppable='true'>
34+
<span (dropped)="onDimDrop($event, colArea, 1)" igxDrop *ngIf="grid.columnDimensions.length === 0" class='igx-pivot__emptyChipArea'>Drop Column Fields here.</span>
3135
<igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="true" [id]="col.memberName"
3236
[displayDensity]="grid.displayDensity"
3337
[removable]="true" (remove)="columnRemoved($event)"
3438
(dragOver)="onDimDragOver($event, 1)"
3539
(dragLeave)="onDimDragLeave($event)"
3640
(dragDrop)="onDimDrop($event, colArea, 1)"
41+
(moveStart)= 'onDimDragStart($event, colArea)'
42+
(moveEnd)= 'onDimDragEnd()'
3743
(click)="onChipSort($event, col, 1)">
3844
<igx-icon igxPrefix>view_column</igx-icon>
3945
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>
4046
{{col.memberName}}
4147

4248
<igx-icon *ngIf="col.sortDirection" igxSuffix> {{ col.sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
4349
</igx-chip>
50+
<igx-chip igxDrop (dragDrop)="onDimDrop($event, colArea, 1)" #notifyChip [hidden]='true'>
51+
Drop here to use as column
52+
</igx-chip>
4453
</igx-chips-area>
4554
</div>
4655

4756
<div #pivotValueContainer *ngIf="grid.showPivotConfigurationUI" class="igx-grid__tr-pivot" (pointerdown)="$event.preventDefault()"
4857
(dropped)="onValueDrop($event, valueArea)" igxDrop
4958
(igxDragEnter)="onAreaDragEnter($event, valueArea)"
5059
(igxDragLeave)="onAreaDragLeave($event, valueArea)">
51-
52-
<span *ngIf="grid.values.length === 0" class='igx-pivot__emptyChipArea'>Drop Value Fields here.</span>
53-
5460
<!-- Value area -->
5561
<igx-chips-area #valueArea droppable='true'>
62+
<span (dropped)="onValueDrop($event, valueArea)" igxDrop *ngIf="grid.values.length === 0" class='igx-pivot__emptyChipArea'>Drop Value Fields here.</span>
5663
<igx-chip #currChip *ngFor="let value of grid.values" [draggable]="true" [id]="value.displayName || value.member"
5764
[displayDensity]="grid.displayDensity"
5865
[removable]="true" (remove)="valueRemoved($event)"
@@ -66,6 +73,9 @@
6673
</div>
6774
{{value.aggregate.key}}({{value.displayName || value.member}})
6875
</igx-chip>
76+
<igx-chip igxDrop (dragDrop)="onValueDrop($event, valueArea)" #notifyValueChip [hidden]='true'>
77+
Drop here to use as value
78+
</igx-chip>
6979
</igx-chips-area>
7080
</div>
7181
</div>
@@ -80,24 +90,27 @@
8090
<div #pivotContainer class="igx-grid__tr-pivot igx-grid__tr-pivot--row-area" [style.min-width.px]="grid.pivotRowWidths - 1"
8191
(igxDragEnter)="onAreaDragEnter($event, rowArea, 0)" (igxDragLeave)="onAreaDragLeave($event, rowArea)"
8292
igxDrop (dropped)="onDimDrop($event, rowArea, 0)" (pointerdown)="$event.preventDefault()">
83-
84-
<span *ngIf="grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI" class='igx-pivot__emptyChipArea'>Drop Row Fields here.</span>
85-
8693
<!-- Row area -->
8794
<igx-chips-area #rowArea droppable='true'>
8895
<ng-container *ngIf="grid.showPivotConfigurationUI">
96+
<span igxDrop (dropped)="onDimDrop($event, rowArea, 0)" *ngIf="grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI" class='igx-pivot__emptyChipArea'>Drop Row Fields here.</span>
8997
<igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="true" [id]="row.memberName"
9098
[displayDensity]="grid.displayDensity"
9199
[removable]="true" (remove)="rowRemoved($event)"
92100
(dragLeave)="onDimDragLeave($event)"
93101
(dragDrop)="onDimDrop($event, rowArea, 0)"
94102
(dragOver)="onDimDragOver($event, 0)"
103+
(moveStart)= 'onDimDragStart($event, rowArea)'
104+
(moveEnd)= 'onDimDragEnd()'
95105
(click)="onChipSort($event, row, 0)">
96106
<igx-icon igxPrefix>table_rows</igx-icon>
97107
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>
98108
{{ row.memberName}}
99109
<igx-icon *ngIf="row.sortDirection" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
100110
</igx-chip>
111+
<igx-chip igxDrop (dragDrop)="onDimDrop($event, rowArea, 0)" #notifyChip [hidden]='true'>
112+
Drop here to use as row
113+
</igx-chip>
101114
</ng-container>
102115
</igx-chips-area>
103116
</div>

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

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import {
44
Component,
55
ElementRef,
66
Inject,
7-
Renderer2
7+
QueryList,
8+
Renderer2,
9+
ViewChildren
810
} from '@angular/core';
911
import { first } from 'rxjs/operators';
1012
import { IBaseChipEventArgs, IgxChipComponent } from '../../chips/chip.component';
@@ -60,6 +62,30 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
6062
super(ref, cdr);
6163
}
6264

65+
@ViewChildren('notifyChip')
66+
public notificationChips: QueryList<IgxChipComponent>;
67+
68+
public showDropDimensionChips = false;
69+
70+
public onDimDragStart(event, area) {
71+
this.showDropDimensionChips = true;
72+
this.cdr.detectChanges();
73+
for (let chip of this.notificationChips) {
74+
if (area.chipsList.toArray().indexOf(chip) === -1 &&
75+
chip.nativeElement.parentElement.children.length > 0 &&
76+
chip.nativeElement.parentElement.children.item(0).tagName !== 'SPAN' ) {
77+
chip.nativeElement.hidden = false;
78+
chip.nativeElement.scrollIntoView();
79+
}
80+
}
81+
}
82+
83+
public onDimDragEnd() {
84+
for (let chip of this.notificationChips) {
85+
chip.nativeElement.hidden = true;
86+
}
87+
}
88+
6389
public getAggregateList(val: IPivotValue): IPivotAggregator[] {
6490
if (!val.aggregateList) {
6591
let defaultAggr = this.getAggregatorsForValue(val);
@@ -218,8 +244,9 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
218244
// cannot drag between dimensions and value
219245
return;
220246
}
221-
const lastElem = area.chipsList.last?.nativeElement;
222-
if (lastElem) {
247+
const lastChip = area.chipsList.last;
248+
if (lastChip && this.notificationChips.toArray().indexOf(lastChip) === -1) {
249+
const lastElem = area.chipsList.last?.nativeElement;
223250
const targetElem = event.detail.originalEvent.target;
224251
const targetOwner = event.detail.owner.element.nativeElement.parentElement;
225252
if (targetOwner !== lastElem && targetElem.getBoundingClientRect().x >= lastElem.getBoundingClientRect().x) {
@@ -307,6 +334,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
307334
}
308335
this.grid.pipeTrigger++;
309336
this.grid.dimensionsChange.emit({ dimensions: currentDim, dimensionCollectionType: dimension });
337+
this.onDimDragEnd();
310338
}
311339

312340
protected getDimensionsByType(dimension: PivotDimensionType) {

‎src/styles/_variables.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *;
22

3-
$palette: $dark-fluent-word-palette;
4-
$schema: $dark-fluent-schema;
5-
$typeface: $fluent-typeface;
6-
$type-scale: $fluent-type-scale;
3+
$palette: $light-material-palette;
4+
$schema: $light-material-schema;
5+
$typeface: $material-typeface;
6+
$type-scale: $material-type-scale;
77

88
$direction: ltr;
99

0 commit comments

Comments
 (0)