Skip to content

Commit 4751db5

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Minor change to allow drop in the whole row area zone.
1 parent 54175a8 commit 4751db5

File tree

3 files changed

+77
-73
lines changed

3 files changed

+77
-73
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2907,6 +2907,7 @@
29072907

29082908
igx-chips-area {
29092909
flex-wrap: nowrap;
2910+
width: auto;
29102911

29112912
> * {
29122913
margin-#{$right}: rem(8px);

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

Lines changed: 74 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,79 @@
11
<div class="igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot" role="row" [style.width.px]="width">
22
<div class="igx-grid__tr" role="row" [style.width.px]="width">
3-
<div #pivotFilterContainer *ngIf="grid.showPivotConfigurationUI" class="igx-grid__tr-pivot igx-grid__tr-pivot--filter" [style.min-width.px]="grid.pivotRowWidths - 1" [style.max-width.px]="grid.pivotRowWidths - 1"
4-
(igxDragEnter)="onAreaDragEnter($event, filterArea, 2)" (igxDragLeave)="onAreaDragLeave($event, filterArea)"
5-
igxDrop (dropped)="onDimDrop($event, filterArea, 2)" (pointerdown)="$event.preventDefault()">
6-
7-
8-
9-
<!-- Filter area -->
10-
<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>
12-
<igx-chip *ngFor="let filter of grid.filterDimensions" [id]="filter.memberName" [draggable]="true"
13-
[displayDensity]="grid.displayDensity"
14-
[removable]="true" (remove)="filterRemoved($event)"
15-
(dragOver)="onDimDragOver($event, 2)"
16-
(dragLeave)="onDimDragLeave($event)"
17-
(dragDrop)="onDimDrop($event, filterArea, 2)"
18-
(moveStart)= 'onDimDragStart($event, filterArea)'
19-
(moveEnd)= 'onDimDragEnd()'>
20-
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>
21-
{{filter.memberName}}
22-
</igx-chip>
23-
<igx-chip igxDrop (dragDrop)="onDimDrop($event, filterArea, 2)" #notifyChip [hidden]='true'>
24-
Drop here to use as filter
25-
</igx-chip>
26-
</igx-chips-area>
3+
<div class='igx-grid__tr-pivot--filterContainer'>
4+
<div #pivotFilterContainer *ngIf="grid.showPivotConfigurationUI"
5+
class="igx-grid__tr-pivot igx-grid__tr-pivot--filter" [style.min-width.px]="grid.pivotRowWidths - 1"
6+
[style.max-width.px]="grid.pivotRowWidths - 1" (igxDragEnter)="onAreaDragEnter($event, filterArea, 2)"
7+
(igxDragLeave)="onAreaDragLeave($event, filterArea)" igxDrop
8+
(dropped)="onDimDrop($event, filterArea, 2)" (pointerdown)="$event.preventDefault()">
9+
<!-- Filter area -->
10+
<igx-chips-area #filterArea droppable='true'>
11+
<span igxDrop (dropped)="onDimDrop($event, filterArea, 2)"
12+
*ngIf="grid.filterDimensions.length === 0" class='igx-pivot__emptyChipArea'>Drop Filter Fields
13+
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>
23+
<igx-chip igxDrop (dragDrop)="onDimDrop($event, filterArea, 2)" #notifyChip [hidden]='true'>
24+
Drop here to use as filter
25+
</igx-chip>
26+
</igx-chips-area>
27+
</div>
28+
<div class='igx-grid__tr-pivot--rowDropAreaContainer' style='height:100%;' (igxDragEnter)="onAreaDragEnter($event, rowArea, 0)"
29+
(igxDragLeave)="onAreaDragLeave($event, rowArea)" igxDrop (dropped)="onDimDrop($event, rowArea, 0)">
30+
</div>
2731
</div>
2832

2933
<div class="igx-grid__tr-pivot-group">
30-
<div #pivotColumnContainer *ngIf="grid.showPivotConfigurationUI" class="igx-grid__tr-pivot" (dropped)="onDimDrop($event, colArea, 1)" igxDrop
31-
(igxDragEnter)="onAreaDragEnter($event, colArea, 1)" (igxDragLeave)="onAreaDragLeave($event, colArea)">
34+
<div #pivotColumnContainer *ngIf="grid.showPivotConfigurationUI" class="igx-grid__tr-pivot"
35+
(dropped)="onDimDrop($event, colArea, 1)" igxDrop (igxDragEnter)="onAreaDragEnter($event, colArea, 1)"
36+
(igxDragLeave)="onAreaDragLeave($event, colArea)">
3237
<!-- Columns area -->
3338
<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>
39+
<span (dropped)="onDimDrop($event, colArea, 1)" igxDrop *ngIf="grid.columnDimensions.length === 0"
40+
class='igx-pivot__emptyChipArea'>Drop Column Fields here.</span>
3541
<igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="true" [id]="col.memberName"
36-
[displayDensity]="grid.displayDensity"
37-
[removable]="true" (remove)="columnRemoved($event)"
38-
(dragOver)="onDimDragOver($event, 1)"
39-
(dragLeave)="onDimDragLeave($event)"
40-
(dragDrop)="onDimDrop($event, colArea, 1)"
41-
(moveStart)= 'onDimDragStart($event, colArea)'
42-
(moveEnd)= 'onDimDragEnd()'
43-
(click)="onChipSort($event, col, 1)">
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)">
4446
<igx-icon igxPrefix>view_column</igx-icon>
45-
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>
47+
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'
48+
(click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>
4649
{{col.memberName}}
4750

48-
<igx-icon *ngIf="col.sortDirection" igxSuffix> {{ col.sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
51+
<igx-icon *ngIf="col.sortDirection" igxSuffix> {{ col.sortDirection < 2 ? 'arrow_upward'
52+
: 'arrow_downward' }}</igx-icon>
4953
</igx-chip>
5054
<igx-chip igxDrop (dragDrop)="onDimDrop($event, colArea, 1)" #notifyChip [hidden]='true'>
5155
Drop here to use as column
5256
</igx-chip>
5357
</igx-chips-area>
5458
</div>
5559

56-
<div #pivotValueContainer *ngIf="grid.showPivotConfigurationUI" class="igx-grid__tr-pivot" (pointerdown)="$event.preventDefault()"
57-
(dropped)="onValueDrop($event, valueArea)" igxDrop
58-
(igxDragEnter)="onAreaDragEnter($event, valueArea)"
59-
(igxDragLeave)="onAreaDragLeave($event, valueArea)">
60+
<div #pivotValueContainer *ngIf="grid.showPivotConfigurationUI" class="igx-grid__tr-pivot"
61+
(pointerdown)="$event.preventDefault()" (dropped)="onValueDrop($event, valueArea)" igxDrop
62+
(igxDragEnter)="onAreaDragEnter($event, valueArea)" (igxDragLeave)="onAreaDragLeave($event, valueArea)">
6063
<!-- Value area -->
6164
<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>
63-
<igx-chip #currChip *ngFor="let value of grid.values" [draggable]="true" [id]="value.displayName || value.member"
64-
[displayDensity]="grid.displayDensity"
65-
[removable]="true" (remove)="valueRemoved($event)"
66-
(dragLeave)="onDimDragLeave($event)"
67-
(dragOver)="onDimDragOver($event)"
68-
(dragDrop)="onValueDrop($event, valueArea)">
69-
<div class="igx-grid__tr-pivot-toggle-icons" igxPrefix (click)='onSummaryClick($event, value, dropdown, currChip)' (pointerdown)='$event.stopPropagation()'
70-
[igxDropDownItemNavigation]="dropdown">
65+
<span (dropped)="onValueDrop($event, valueArea)" igxDrop *ngIf="grid.values.length === 0"
66+
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">
7174
<igx-icon>functions</igx-icon>
7275
<igx-icon>arrow_drop_down</igx-icon>
73-
</div>
76+
</div>
7477
{{value.aggregate.key}}({{value.displayName || value.member}})
7578
</igx-chip>
7679
<igx-chip igxDrop (dragDrop)="onValueDrop($event, valueArea)" #notifyValueChip [hidden]='true'>
@@ -87,26 +90,27 @@
8790

8891
<!-- Column headers area -->
8992
<div class="igx-grid__tr" role="row" [style.width.px]="width">
90-
<div #pivotContainer class="igx-grid__tr-pivot igx-grid__tr-pivot--row-area" [style.min-width.px]="grid.pivotRowWidths - 1"
91-
(igxDragEnter)="onAreaDragEnter($event, rowArea, 0)" (igxDragLeave)="onAreaDragLeave($event, rowArea)"
92-
igxDrop (dropped)="onDimDrop($event, rowArea, 0)" (pointerdown)="$event.preventDefault()">
93+
<div #pivotContainer class="igx-grid__tr-pivot igx-grid__tr-pivot--row-area"
94+
[style.min-width.px]="grid.pivotRowWidths - 1" (igxDragEnter)="onAreaDragEnter($event, rowArea, 0)"
95+
(igxDragLeave)="onAreaDragLeave($event, rowArea)" igxDrop (dropped)="onDimDrop($event, rowArea, 0)"
96+
(pointerdown)="$event.preventDefault()">
9397
<!-- Row area -->
9498
<igx-chips-area #rowArea droppable='true'>
9599
<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>
100+
<span igxDrop (dropped)="onDimDrop($event, rowArea, 0)"
101+
*ngIf="grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI"
102+
class='igx-pivot__emptyChipArea'>Drop Row Fields here.</span>
97103
<igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="true" [id]="row.memberName"
98-
[displayDensity]="grid.displayDensity"
99-
[removable]="true" (remove)="rowRemoved($event)"
100-
(dragLeave)="onDimDragLeave($event)"
101-
(dragDrop)="onDimDrop($event, rowArea, 0)"
102-
(dragOver)="onDimDragOver($event, 0)"
103-
(moveStart)= 'onDimDragStart($event, rowArea)'
104-
(moveEnd)= 'onDimDragEnd()'
105-
(click)="onChipSort($event, row, 0)">
104+
[displayDensity]="grid.displayDensity" [removable]="true" (remove)="rowRemoved($event)"
105+
(dragLeave)="onDimDragLeave($event)" (dragDrop)="onDimDrop($event, rowArea, 0)"
106+
(dragOver)="onDimDragOver($event, 0)" (moveStart)='onDimDragStart($event, rowArea)'
107+
(moveEnd)='onDimDragEnd()' (click)="onChipSort($event, row, 0)">
106108
<igx-icon igxPrefix>table_rows</igx-icon>
107-
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>
109+
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'
110+
(click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>
108111
{{ row.memberName}}
109-
<igx-icon *ngIf="row.sortDirection" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
112+
<igx-icon *ngIf="row.sortDirection" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward'
113+
: 'arrow_downward' }}</igx-icon>
110114
</igx-chip>
111115
<igx-chip igxDrop (dragDrop)="onDimDrop($event, rowArea, 0)" #notifyChip [hidden]='true'>
112116
Drop here to use as row
@@ -130,9 +134,8 @@
130134
<!-- Unpinned columns collection -->
131135
<ng-template igxGridFor #headerVirtualContainer let-column
132136
[igxGridForOf]="unpinnedColumnCollection | igxTopLevel" [igxForScrollContainer]="grid.parentVirtDir"
133-
[igxForContainerSize]="grid.unpinnedWidth"
134-
[igxForTrackBy]="grid.trackColumnChanges" [igxForSizePropName]="'calcPixelWidth'"
135-
[igxForScrollOrientation]="'horizontal'">
137+
[igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges"
138+
[igxForSizePropName]="'calcPixelWidth'" [igxForScrollOrientation]="'horizontal'">
136139
<igx-grid-header-group [ngClass]="column.headerGroupClasses"
137140
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
138141
[style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
@@ -148,8 +151,7 @@
148151
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
149152
[style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
150153
[style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
151-
[style.left]="column.rightPinnedOffset"
152-
(pointerdown)="grid.navigation.focusOutRowHeader($event)">
154+
[style.left]="column.rightPinnedOffset" (pointerdown)="grid.navigation.focusOutRowHeader($event)">
153155
</igx-grid-header-group>
154156
</ng-container>
155157
</ng-container>
@@ -161,7 +163,7 @@
161163
</div>
162164

163165
<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>
164-
<igx-drop-down-item *ngFor="let item of aggregateList" [selected] ='isSelected(item)' [value]='item'>
166+
<igx-drop-down-item *ngFor="let item of aggregateList" [selected]='isSelected(item)' [value]='item'>
165167
{{ item.label }}
166168
</igx-drop-down-item>
167-
</igx-drop-down>
169+
</igx-drop-down>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
286286
const chipsArray = area.chipsList.toArray();
287287
const chip = chipsArray.find(x => x.id === dragId);
288288
const isNewChip = chip === undefined;
289+
const isReorder = event.owner.id !== undefined;
289290
//const chipIndex = chipsArray.indexOf(event.owner) !== -1 ? chipsArray.indexOf(event.owner) : chipsArray.length;
290291
const chipIndex = currentDim.findIndex(x => x.memberName === event.owner.id) !== -1 ?
291292
currentDim.findIndex(x => x.memberName === event.owner.id) : currentDim.length;
@@ -320,7 +321,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
320321
// columns have changed.
321322
this.grid.setupColumns();
322323
}
323-
} else {
324+
} else if (isReorder) {
324325
// chip from same collection, reordered.
325326
const newDim = currentDim.find(x => x.memberName === dragId);
326327
//const dragChipIndex = chipsArray.indexOf(event.dragChip || event.dragData.chip);

0 commit comments

Comments
 (0)