Skip to content

Commit 03002e9

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Apply to other areas as well.
1 parent aefc3e9 commit 03002e9

File tree

2 files changed

+71
-44
lines changed

2 files changed

+71
-44
lines changed

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

Lines changed: 64 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,25 @@
88
(dropped)="onDimDrop($event, filterArea, 2)" (pointerdown)="$event.preventDefault()">
99
<!-- Filter area -->
1010
<igx-chips-area #filterArea droppable='true'>
11-
<span igxDrop (dropped)="onDimDrop($event, filterArea, 2)"
11+
<span id='empty' igxDrop (dropped)="onDimDrop($event, filterArea, 2)"
1212
*ngIf="grid.filterDimensions.length === 0" class='igx-pivot__emptyChipArea'>Drop Filter Fields
1313
here.</span>
14-
<igx-chip *ngFor="let filter of grid.filterDimensions" [id]="filter.memberName" [draggable]="true"
15-
[displayDensity]="grid.displayDensity" [removable]="true" (remove)="filterRemoved($event)"
16-
(dragOver)="onDimDragOver($event, 2)" (dragLeave)="onDimDragLeave($event)"
17-
(dragDrop)="onDimDrop($event, filterArea, 2)" (moveStart)='onDimDragStart($event, filterArea)'
18-
(moveEnd)='onDimDragEnd()'>
19-
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'
20-
(click)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>
21-
{{filter.memberName}}
22-
</igx-chip>
14+
<ng-container *ngFor="let filter of grid.filterDimensions; let last = last;">
15+
<span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
16+
[style.height.px]='getAreaHeight(filterArea)'></span>
17+
<igx-chip [id]="filter.memberName" [draggable]="true" [displayDensity]="grid.displayDensity"
18+
[removable]="true" (remove)="filterRemoved($event)" (dragOver)="onDimDragOver($event, 2)"
19+
(dragLeave)="onDimDragLeave($event)" (dragDrop)="onDimDrop($event, filterArea, 2)"
20+
(moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>
21+
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'
22+
(click)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>
23+
{{filter.memberName}}
24+
</igx-chip>
25+
<ng-container *ngIf='last'>
26+
<span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
27+
[style.height.px]='getAreaHeight(filterArea)'></span>
28+
</ng-container>
29+
</ng-container>
2330
<igx-chip igxDrop (dragDrop)="onDimDrop($event, filterArea, 2)" #notifyChip [hidden]='true'>
2431
Drop here to use as filter
2532
</igx-chip>
@@ -36,21 +43,28 @@
3643
(igxDragLeave)="onAreaDragLeave($event, colArea)">
3744
<!-- Columns area -->
3845
<igx-chips-area #colArea droppable='true'>
39-
<span (dropped)="onDimDrop($event, colArea, 1)" igxDrop *ngIf="grid.columnDimensions.length === 0"
46+
<span id='empty' (dropped)="onDimDrop($event, colArea, 1)" igxDrop *ngIf="grid.columnDimensions.length === 0"
4047
class='igx-pivot__emptyChipArea'>Drop Column Fields here.</span>
41-
<igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="true" [id]="col.memberName"
42-
[displayDensity]="grid.displayDensity" [removable]="true" (remove)="columnRemoved($event)"
43-
(dragOver)="onDimDragOver($event, 1)" (dragLeave)="onDimDragLeave($event)"
44-
(dragDrop)="onDimDrop($event, colArea, 1)" (moveStart)='onDimDragStart($event, colArea)'
45-
(moveEnd)='onDimDragEnd()' (click)="onChipSort($event, col, 1)">
46-
<igx-icon igxPrefix>view_column</igx-icon>
47-
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'
48-
(click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>
49-
{{col.memberName}}
50-
51-
<igx-icon *ngIf="col.sortDirection" igxSuffix> {{ col.sortDirection < 2 ? 'arrow_upward'
52-
: 'arrow_downward' }}</igx-icon>
53-
</igx-chip>
48+
<ng-container *ngFor="let col of grid.columnDimensions; let last = last;">
49+
<span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
50+
[style.height.px]='getAreaHeight(colArea)'></span>
51+
<igx-chip [draggable]="true" [id]="col.memberName" [displayDensity]="grid.displayDensity"
52+
[removable]="true" (remove)="columnRemoved($event)" (dragOver)="onDimDragOver($event, 1)"
53+
(dragLeave)="onDimDragLeave($event)" (dragDrop)="onDimDrop($event, colArea, 1)"
54+
(moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'
55+
(click)="onChipSort($event, col, 1)">
56+
<igx-icon igxPrefix>view_column</igx-icon>
57+
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'
58+
(click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>
59+
{{col.memberName}}
60+
<igx-icon *ngIf="col.sortDirection" igxSuffix> {{ col.sortDirection < 2 ? 'arrow_upward'
61+
: 'arrow_downward' }}</igx-icon>
62+
</igx-chip>
63+
<ng-container *ngIf='last'>
64+
<span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
65+
[style.height.px]='getAreaHeight(colArea)'></span>
66+
</ng-container>
67+
</ng-container>
5468
<igx-chip igxDrop (dragDrop)="onDimDrop($event, colArea, 1)" #notifyChip [hidden]='true'>
5569
Drop here to use as column
5670
</igx-chip>
@@ -62,20 +76,28 @@
6276
(igxDragEnter)="onAreaDragEnter($event, valueArea)" (igxDragLeave)="onAreaDragLeave($event, valueArea)">
6377
<!-- Value area -->
6478
<igx-chips-area #valueArea droppable='true'>
65-
<span (dropped)="onValueDrop($event, valueArea)" igxDrop *ngIf="grid.values.length === 0"
79+
<span id='empty' (dropped)="onValueDrop($event, valueArea)" igxDrop *ngIf="grid.values.length === 0"
6680
class='igx-pivot__emptyChipArea'>Drop Value Fields here.</span>
67-
<igx-chip #currChip *ngFor="let value of grid.values" [draggable]="true"
68-
[id]="value.displayName || value.member" [displayDensity]="grid.displayDensity"
69-
[removable]="true" (remove)="valueRemoved($event)" (dragLeave)="onDimDragLeave($event)"
70-
(dragOver)="onDimDragOver($event)" (dragDrop)="onValueDrop($event, valueArea)">
71-
<div class="igx-grid__tr-pivot-toggle-icons" igxPrefix
72-
(click)='onSummaryClick($event, value, dropdown, currChip)'
73-
(pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]="dropdown">
74-
<igx-icon>functions</igx-icon>
75-
<igx-icon>arrow_drop_down</igx-icon>
76-
</div>
77-
{{value.aggregate.key}}({{value.displayName || value.member}})
78-
</igx-chip>
81+
<ng-container *ngFor="let value of grid.values; let last = last;">
82+
<span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
83+
[style.height.px]='getAreaHeight(valueArea)'></span>
84+
<igx-chip #currChip [draggable]="true" [id]="value.displayName || value.member"
85+
[displayDensity]="grid.displayDensity" [removable]="true" (remove)="valueRemoved($event)"
86+
(dragLeave)="onDimDragLeave($event)" (dragOver)="onDimDragOver($event)"
87+
(dragDrop)="onValueDrop($event, valueArea)">
88+
<div class="igx-grid__tr-pivot-toggle-icons" igxPrefix
89+
(click)='onSummaryClick($event, value, dropdown, currChip)'
90+
(pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]="dropdown">
91+
<igx-icon>functions</igx-icon>
92+
<igx-icon>arrow_drop_down</igx-icon>
93+
</div>
94+
{{value.aggregate.key}}({{value.displayName || value.member}})
95+
</igx-chip>
96+
<ng-container *ngIf='last'>
97+
<span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
98+
[style.height.px]='getAreaHeight(valueArea)'></span>
99+
</ng-container>
100+
</ng-container>
79101
<igx-chip igxDrop (dragDrop)="onValueDrop($event, valueArea)" #notifyValueChip [hidden]='true'>
80102
Drop here to use as value
81103
</igx-chip>
@@ -97,11 +119,12 @@
97119
<!-- Row area -->
98120
<igx-chips-area #rowArea droppable='true'>
99121
<ng-container *ngIf="grid.showPivotConfigurationUI">
100-
<span igxDrop (dropped)="onDimDrop($event, rowArea, 0)"
122+
<span igxDrop (dropped)="onDimDrop($event, rowArea, 0)"
101123
*ngIf="grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI"
102124
class='igx-pivot__emptyChipArea'>Drop Row Fields here.</span>
103125
<ng-container *ngFor="let row of grid.rowDimensions; let last = last;">
104-
<span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator" [style.height.px]='getAreaHeight(rowArea)'></span>
126+
<span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
127+
[style.height.px]='getAreaHeight(rowArea)'></span>
105128
<igx-chip [draggable]="true" [id]="row.memberName" [displayDensity]="grid.displayDensity"
106129
[removable]="true" (remove)="rowRemoved($event)" (dragLeave)="onDimDragLeave($event)"
107130
(dragDrop)="onDimDrop($event, rowArea, 0)" (dragOver)="onDimDragOver($event, 0)"
@@ -115,7 +138,8 @@
115138
: 'arrow_downward' }}</igx-icon>
116139
</igx-chip>
117140
<ng-container *ngIf='last'>
118-
<span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator" [style.height.px]='getAreaHeight(rowArea)'></span>
141+
<span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
142+
[style.height.px]='getAreaHeight(rowArea)'></span>
119143
</ng-container>
120144
</ng-container>
121145
<igx-chip igxDrop (dragDrop)="onDimDrop($event, rowArea, 0)" #notifyChip [hidden]='true'>

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
7272
for (let chip of this.notificationChips) {
7373
if (area.chipsList.toArray().indexOf(chip) === -1 &&
7474
chip.nativeElement.parentElement.children.length > 0 &&
75-
chip.nativeElement.parentElement.children.item(0).tagName !== 'SPAN' ) {
75+
chip.nativeElement.parentElement.children.item(0).id !== 'empty' ) {
7676
chip.nativeElement.hidden = false;
7777
chip.nativeElement.scrollIntoView();
7878
}
@@ -253,9 +253,12 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
253253
}
254254
}
255255
public onAreaDragLeave(event, area) {
256-
area.chipsList.toArray().forEach(element => {
257-
event.owner.nativeElement.previousElementSibling.style.visibility = 'hidden';
258-
event.owner.nativeElement.nextElementSibling.style.visibility = 'hidden';
256+
const dataChips = area.chipsList.toArray().filter(x => this.notificationChips.toArray().indexOf(x) === -1);
257+
dataChips.forEach(element => {
258+
element.nativeElement.previousElementSibling.style.visibility = 'hidden';
259+
if (element.nativeElement.nextElementSibling) {
260+
element.nativeElement.nextElementSibling.style.visibility = 'hidden';
261+
}
259262
});
260263
}
261264

0 commit comments

Comments
 (0)