Skip to content

Commit 730797e

Browse files
rkaraivanovrkaraivanov
committed
refactor: Column moving behavior
1 parent daa8d75 commit 730797e

File tree

44 files changed

+234
-256
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+234
-256
lines changed

‎projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts

-4
Original file line numberDiff line numberDiff line change
@@ -122,10 +122,6 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
122122
} else {
123123
this.children.forEach(child => child.hidden = this.hidden);
124124
}
125-
126-
this.children.forEach(child => {
127-
child.movable = false;
128-
});
129125
}
130126

131127
/*

‎projects/igniteui-angular/src/lib/grids/columns/column.component.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -427,6 +427,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
427427
/**
428428
* Sets/gets whether the column is movable.
429429
* Default value is `false`.
430+
*
431+
* @deprecated
432+
* Use `IgxGridComponent.moving` instead.
433+
*
430434
* ```typescript
431435
* let isMovable = this.column.movable;
432436
* ```
@@ -436,8 +440,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
436440
*
437441
* @memberof IgxColumnComponent
438442
*/
439-
@WatchColumnChanges()
440-
@notifyChanges()
441443
@Input()
442444
public movable = false;
443445
/**

‎projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export interface GridType extends IGridDataBindable {
3232
renderedRowHeight: number;
3333
summaryPipeTrigger: number;
3434
hasColumnLayouts: boolean;
35+
moving: boolean;
3536

3637
filterMode: FilterMode;
3738

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<igx-excel-style-sorting *ngIf="column?.sortable">
1010
</igx-excel-style-sorting>
1111

12-
<igx-excel-style-moving *ngIf="column?.movable">
12+
<igx-excel-style-moving *ngIf="grid?.moving">
1313
</igx-excel-style-moving>
1414

1515
<igx-excel-style-pinning *ngIf="!column?.disablePinning && displayDensity==='comfortable'">

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

+11-1
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
195195
@Input()
196196
public autoGenerate = false;
197197

198+
/**
199+
* Controls whether columns moving is enabled in the grid.
200+
*
201+
*/
202+
@Input()
203+
public moving = false;
204+
198205
/**
199206
* Gets/Sets a custom template when empty.
200207
*
@@ -4905,13 +4912,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
49054912
/**
49064913
* Returns if the `IgxGridComponent` has moveable columns.
49074914
*
4915+
* @deprecated
4916+
* Use `IgxGridComponent.moving` instead.
4917+
*
49084918
* @example
49094919
* ```typescript
49104920
* const movableGrid = this.grid.hasMovableColumns;
49114921
* ```
49124922
*/
49134923
public get hasMovableColumns(): boolean {
4914-
return this.columnList && this.columnList.some((col) => col.movable);
4924+
return this.moving;
49154925
}
49164926

49174927
/**

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

+1
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@ describe('IgxGrid - Column Moving #grid', () => {
269269

270270

271271
it('Should reorder only movable columns when dropping the ghost image on an interactive area.', (async () => {
272+
pending('Check applicability after moving behavior change');
272273
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
273274

274275
expect(grid.columns[0].movable).toBeTruthy();

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

-2
Original file line numberDiff line numberDiff line change
@@ -1091,8 +1091,6 @@ describe('IgxGrid - Column Selection #grid', () => {
10911091
});
10921092

10931093
it('Moving: Verify that when move a column, it stays selected', () => {
1094-
colProductID.movable = true;
1095-
colProductName.movable = true;
10961094
colProductID.selected = true;
10971095
fix.detectChanges();
10981096

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

+8-10
Original file line numberDiff line numberDiff line change
@@ -2916,7 +2916,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
29162916
}));
29172917

29182918
it('Should move column left/right when clicking buttons.', fakeAsync(() => {
2919-
grid.columns[2].movable = true;
2919+
grid.moving = true;
29202920
fix.detectChanges();
29212921

29222922
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
@@ -2957,7 +2957,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
29572957
expect(grid.pinnedColumns.length).toBe(1);
29582958

29592959
const columnToMove = grid.unpinnedColumns[grid.unpinnedColumns.length - 1];
2960-
columnToMove.movable = true;
2960+
grid.moving = true;
29612961

29622962
GridFunctions.clickExcelFilterIconFromCode(fix, grid, columnToMove.field);
29632963

@@ -3415,11 +3415,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
34153415
}));
34163416

34173417
it('Should move pinned column correctly by using move buttons', fakeAsync(() => {
3418+
grid.moving = true;
34183419
const productNameCol = grid.getColumnByName('ProductName');
34193420
const idCol = grid.getColumnByName('ID');
3420-
productNameCol.movable = true;
34213421
productNameCol.pinned = true;
3422-
idCol.movable = true;
34233422
idCol.pinned = true;
34243423
fix.detectChanges();
34253424

@@ -3460,11 +3459,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
34603459
}));
34613460

34623461
it('Should move unpinned column correctly by using move buttons', fakeAsync(() => {
3462+
grid.moving = true;
34633463
const productNameCol = grid.getColumnByName('ProductName');
34643464
const downloadsCol = grid.getColumnByName('Downloads');
3465-
productNameCol.movable = true;
34663465
productNameCol.pinned = true;
3467-
downloadsCol.movable = true;
34683466
fix.detectChanges();
34693467
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ProductName');
34703468
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 2).innerText).toBe('Downloads');
@@ -3559,7 +3557,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
35593557
it('display density is properly applied on the excel style filtering component', fakeAsync(() => {
35603558
const column = grid.columns.find((c) => c.field === 'ProductName');
35613559
column.sortable = true;
3562-
column.movable = true;
3560+
grid.moving = true;
35633561
fix.detectChanges();
35643562

35653563
// Open excel style filtering component and verify its display density
@@ -3623,7 +3621,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
36233621
it('display density is properly applied on the excel style custom filtering dialog', fakeAsync(() => {
36243622
const column = grid.columns.find((c) => c.field === 'ProductName');
36253623
column.sortable = true;
3626-
column.movable = true;
3624+
grid.moving = true;
36273625
fix.detectChanges();
36283626

36293627
// Open excel style custom filtering dialog and verify its display density
@@ -5427,7 +5425,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
54275425
}));
54285426

54295427
it('Should move column left/right when clicking buttons from template', fakeAsync(() => {
5430-
grid.columns[2].movable = true;
5428+
grid.moving = true;
54315429
fix.detectChanges();
54325430

54335431
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
@@ -5884,7 +5882,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
58845882
fix.detectChanges();
58855883
// Make 'AnotherField' column movable.
58865884
const column = grid.columns.find((c) => c.field === 'AnotherField');
5887-
column.movable = true;
5885+
grid.moving = true;
58885886
fix.detectChanges();
58895887

58905888
// Pin the 'General Information' group by pinning its child 'ProductName' column.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1416,9 +1416,9 @@ describe('IgxGrid - Row Editing #grid', () => {
14161416
}));
14171417

14181418
it(`Moving: Should exit edit mode when moving a column`, () => {
1419+
grid.moving = true;
14191420
const column = grid.columnList.filter(c => c.field === 'ProductName')[0];
14201421
const targetColumn = grid.columnList.filter(c => c.field === 'ProductID')[0];
1421-
column.movable = true;
14221422

14231423
fix.detectChanges();
14241424

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -580,9 +580,9 @@ describe('IgxGrid - Summaries #grid', () => {
580580
}));
581581

582582
it('Moving: should move summaries when move column', () => {
583+
grid.moving = true;
583584
const colUnitsInStock = grid.getColumnByName('UnitsInStock');
584585
const colProductID = grid.getColumnByName('ProductID');
585-
colUnitsInStock.movable = true;
586586
fix.detectChanges();
587587

588588
grid.moveColumn(colUnitsInStock, colProductID, DropPosition.BeforeDropTarget);

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@
3737
(dragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
3838
(dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
3939
[style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant">
40-
<span *ngIf="hasMovableColumns && columnInDrag && pinnedColumns.length <= 0"
40+
<span *ngIf="moving && columnInDrag && pinnedColumns.length <= 0"
4141
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
4242
class="igx-grid__scroll-on-drag-left"></span>
43-
<span *ngIf="hasMovableColumns && columnInDrag && pinnedColumns.length > 0"
43+
<span *ngIf="moving && columnInDrag && pinnedColumns.length > 0"
4444
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
4545
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
4646
<ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
@@ -139,7 +139,7 @@
139139
<igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
140140
</igx-circular-bar>
141141
</div>
142-
<span *ngIf="hasMovableColumns && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
142+
<span *ngIf="moving && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
143143
id="right" class="igx-grid__scroll-on-drag-right"></span>
144144
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()">
145145
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1876,7 +1876,7 @@ describe('IgxGrid Component Tests #grid', () => {
18761876
prevCellCoords = grid.getPreviousCell(0, 2, (col) => col.editable);
18771877
expect(prevCellCoords).toEqual({ rowIndex: 0, visibleColumnIndex: 2 });
18781878
// when the filter function has no matching colums
1879-
prevCellCoords = grid.getPreviousCell(0, 3, (col) => col.movable);
1879+
prevCellCoords = grid.getPreviousCell(0, 3);
18801880
expect(prevCellCoords).toEqual({ rowIndex: 0, visibleColumnIndex: 3 });
18811881
// when grid has no data
18821882
grid.filter('col0', 2, IgxNumberFilteringOperand.instance().condition('greaterThan'));

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<ng-container *ngIf="grid.hasColumnLayouts && column.columnGroup">
2-
<span *ngIf="grid.hasMovableColumns" class="igx-grid-th__drop-indicator-left"></span>
2+
<span *ngIf="grid.moving" class="igx-grid-th__drop-indicator-left"></span>
33
<div class="igx-grid-thead__group igx-grid__mrl-block"
44
[ngClass]="{
55
'igx-grid-th--pinned-last': hasLastPinnedChildColumn,
@@ -21,7 +21,7 @@
2121
</igx-grid-header-group>
2222
</ng-container>
2323
</div>
24-
<span *ngIf="grid.hasMovableColumns" class="igx-grid-th__drop-indicator-right"></span>
24+
<span *ngIf="grid.moving" class="igx-grid-th__drop-indicator-right"></span>
2525
</ng-container>
2626

2727

@@ -35,7 +35,7 @@
3535
</ng-template>
3636

3737
<ng-container *ngIf="!grid.hasColumnLayouts && column.columnGroup">
38-
<span *ngIf="grid.hasMovableColumns" class="igx-grid-th__drop-indicator-left"></span>
38+
<span *ngIf="grid.moving" class="igx-grid-th__drop-indicator-left"></span>
3939
<div class="igx-grid-thead__title"
4040
role="columnheader"
4141
[attr.aria-label]="column.header || column.field"
@@ -78,11 +78,11 @@
7878
</igx-grid-header-group>
7979
</ng-container>
8080
</div>
81-
<span *ngIf="grid.hasMovableColumns" class="igx-grid-th__drop-indicator-right"></span>
81+
<span *ngIf="grid.moving" class="igx-grid-th__drop-indicator-right"></span>
8282
</ng-container>
8383

8484
<ng-container *ngIf="!column.columnGroup">
85-
<span *ngIf="grid.hasMovableColumns" class="igx-grid-th__drop-indicator-left"></span>
85+
<span *ngIf="grid.moving" class="igx-grid-th__drop-indicator-left"></span>
8686
<igx-grid-header
8787
role="columnheader"
8888
class="igx-grid-th--fw"
@@ -104,5 +104,5 @@
104104
[attr.draggable]="false"
105105
[style.cursor]="colResizingService.resizeCursor">
106106
</span>
107-
<span *ngIf="grid.hasMovableColumns" class="igx-grid-th__drop-indicator-right"></span>
107+
<span *ngIf="grid.moving" class="igx-grid-th__drop-indicator-right"></span>
108108
</ng-container>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<div class="igx-grid__tr" role="row" [style.width.px]="width">
66

77
<!-- Left column moving area -->
8-
<ng-container *ngIf="grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length <= 0">
8+
<ng-container *ngIf="grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0">
99
<span id="left" class="igx-grid__scroll-on-drag-left" droppable="true" [style.left.px]="grid.pinnedWidth"
1010
[igxColumnMovingDrop]="headerContainer"></span>
1111
</ng-container>
12-
<ng-container *ngIf="grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length > 0">
12+
<ng-container *ngIf="grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0">
1313
<span id="left" class="igx-grid__scroll-on-drag-pinned" droppable="true" [style.left.px]="grid.pinnedWidth"
1414
[igxColumnMovingDrop]="headerContainer"></span>
1515
</ng-container>
@@ -115,7 +115,7 @@
115115
</ng-container>
116116

117117
<!-- Right column moving area -->
118-
<ng-container *ngIf="grid.hasMovableColumns && grid.columnInDrag">
118+
<ng-container *ngIf="grid.moving && grid.columnInDrag">
119119
<span id="right" class="igx-grid__scroll-on-drag-right" droppable="true" [igxColumnMovingDrop]="headerContainer"></span>
120120
</ng-container>
121121
</div>

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@
2121
(keydown)="navigation.handleNavigation($event)" (dragStop)="selectionService.dragMode = $event"
2222
(dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [attr.aria-activedescendant]="activeDescendant" [attr.role]="dataView.length ? null : 'row'"
2323
[style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>
24-
<span *ngIf="hasMovableColumns && columnInDrag && pinnedColumns.length <= 0"
24+
<span *ngIf="moving && columnInDrag && pinnedColumns.length <= 0"
2525
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
2626
class="igx-grid__scroll-on-drag-left"></span>
27-
<span *ngIf="hasMovableColumns && columnInDrag && pinnedColumns.length > 0"
27+
<span *ngIf="moving && columnInDrag && pinnedColumns.length > 0"
2828
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
2929
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
3030
<ng-template #pinnedRecordsTemplate>
@@ -93,7 +93,7 @@
9393
<ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null">
9494
</ng-container>
9595
<ng-container *ngTemplateOutlet="template"></ng-container>
96-
<span *ngIf="hasMovableColumns && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
96+
<span *ngIf="moving && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
9797
id="right" class="igx-grid__scroll-on-drag-right"></span>
9898
<div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>
9999
<igc-trial-watermark *ngIf="!this.parent"></igc-trial-watermark>
@@ -102,7 +102,7 @@
102102
<igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
103103
</igx-circular-bar>
104104
</div>
105-
<span *ngIf="hasMovableColumns && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
105+
<span *ngIf="moving && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
106106
id="right" class="igx-grid__scroll-on-drag-right"></span>
107107
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()">
108108
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>

‎projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective implements On
1616
public column: IgxColumnComponent;
1717

1818
public get draggable(): boolean {
19-
return this.column && (this.column.movable || (this.column.groupable && !this.column.columnGroup));
19+
return this.column && (this.column.grid.moving || (this.column.groupable && !this.column.columnGroup));
2020
}
2121

2222
public get icon(): HTMLElement {

‎projects/igniteui-angular/src/lib/grids/moving/moving.drop.directive.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On
2828
}
2929

3030
public get isDropTarget(): boolean {
31-
return this.column && this.column.grid.hasMovableColumns && this.cms.column?.movable &&
31+
return this.column && this.column.grid.moving &&
3232
((!this.column.pinned && this.cms.column?.disablePinning) || !this.cms.column?.disablePinning);
3333
}
3434

0 commit comments

Comments
 (0)