refactor: Column moving behavior

Author: rkaraivanov

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

@@ -122,10 +122,6 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
         } else {
             this.children.forEach(child => child.hidden = this.hidden);
         }
-
-        this.children.forEach(child => {
-            child.movable = false;
-        });
     }
 
     /*

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

@@ -427,6 +427,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     /**
      * Sets/gets whether the column is movable.
      * Default value is `false`.
+     *
+     * @deprecated
+     * Use `IgxGridComponent.moving` instead.
+     *
      * ```typescript
      * let isMovable = this.column.movable;
      * ```
@@ -436,8 +440,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      *
      * @memberof IgxColumnComponent
      */
-    @WatchColumnChanges()
-    @notifyChanges()
     @Input()
     public movable = false;
     /**

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

@@ -32,6 +32,7 @@ export interface GridType extends IGridDataBindable {
     renderedRowHeight: number;
     summaryPipeTrigger: number;
     hasColumnLayouts: boolean;
+    moving: boolean;
 
     filterMode: FilterMode;
 

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

@@ -9,7 +9,7 @@
     <igx-excel-style-sorting *ngIf="column?.sortable">
     </igx-excel-style-sorting>
 
-    <igx-excel-style-moving *ngIf="column?.movable">
+    <igx-excel-style-moving *ngIf="grid?.moving">
     </igx-excel-style-moving>
 
     <igx-excel-style-pinning *ngIf="!column?.disablePinning && displayDensity==='comfortable'">

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

@@ -195,6 +195,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @Input()
     public autoGenerate = false;
 
+    /**
+     * Controls whether columns moving is enabled in the grid.
+     *
+     */
+    @Input()
+    public moving = false;
+
     /**
      * Gets/Sets a custom template when empty.
      *
@@ -4905,13 +4912,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * Returns if the `IgxGridComponent` has moveable columns.
      *
+     * @deprecated
+     * Use `IgxGridComponent.moving` instead.
+     *
      * @example
      * ```typescript
      * const movableGrid = this.grid.hasMovableColumns;
      * ```
      */
     public get hasMovableColumns(): boolean {
-        return this.columnList && this.columnList.some((col) => col.movable);
+        return this.moving;
     }
 
     /**

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

@@ -269,6 +269,7 @@ describe('IgxGrid - Column Moving #grid', () => {
 
 
         it('Should reorder only movable columns when dropping the ghost image on an interactive area.', (async () => {
+            pending('Check applicability after moving behavior change');
             const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
 
             expect(grid.columns[0].movable).toBeTruthy();

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

@@ -1091,8 +1091,6 @@ describe('IgxGrid - Column Selection #grid', () => {
         });
 
         it('Moving: Verify that when move a column, it stays selected', () => {
-            colProductID.movable = true;
-            colProductName.movable = true;
             colProductID.selected = true;
             fix.detectChanges();
 

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

@@ -2916,7 +2916,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
         }));
 
         it('Should move column left/right when clicking buttons.', fakeAsync(() => {
-            grid.columns[2].movable = true;
+            grid.moving = true;
             fix.detectChanges();
 
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
@@ -2957,7 +2957,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(grid.pinnedColumns.length).toBe(1);
 
             const columnToMove = grid.unpinnedColumns[grid.unpinnedColumns.length - 1];
-            columnToMove.movable = true;
+            grid.moving = true;
 
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, columnToMove.field);
 
@@ -3415,11 +3415,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
         }));
 
         it('Should move pinned column correctly by using move buttons', fakeAsync(() => {
+            grid.moving = true;
             const productNameCol = grid.getColumnByName('ProductName');
             const idCol = grid.getColumnByName('ID');
-            productNameCol.movable = true;
             productNameCol.pinned = true;
-            idCol.movable = true;
             idCol.pinned = true;
             fix.detectChanges();
 
@@ -3460,11 +3459,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
         }));
 
         it('Should move unpinned column correctly by using move buttons', fakeAsync(() => {
+            grid.moving = true;
             const productNameCol = grid.getColumnByName('ProductName');
             const downloadsCol = grid.getColumnByName('Downloads');
-            productNameCol.movable = true;
             productNameCol.pinned = true;
-            downloadsCol.movable = true;
             fix.detectChanges();
             expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ProductName');
             expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 2).innerText).toBe('Downloads');
@@ -3559,7 +3557,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
         it('display density is properly applied on the excel style filtering component', fakeAsync(() => {
             const column = grid.columns.find((c) => c.field === 'ProductName');
             column.sortable = true;
-            column.movable = true;
+            grid.moving = true;
             fix.detectChanges();
 
             // Open excel style filtering component and verify its display density
@@ -3623,7 +3621,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
         it('display density is properly applied on the excel style custom filtering dialog', fakeAsync(() => {
             const column = grid.columns.find((c) => c.field === 'ProductName');
             column.sortable = true;
-            column.movable = true;
+            grid.moving = true;
             fix.detectChanges();
 
             // Open excel style custom filtering dialog and verify its display density
@@ -5427,7 +5425,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
         }));
 
         it('Should move column left/right when clicking buttons from template', fakeAsync(() => {
-            grid.columns[2].movable = true;
+            grid.moving = true;
             fix.detectChanges();
 
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
@@ -5884,7 +5882,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             fix.detectChanges();
             // Make 'AnotherField' column movable.
             const column = grid.columns.find((c) => c.field === 'AnotherField');
-            column.movable = true;
+            grid.moving = true;
             fix.detectChanges();
 
             // Pin the 'General Information' group by pinning its child 'ProductName' column.

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

@@ -1416,9 +1416,9 @@ describe('IgxGrid - Row Editing #grid', () => {
         }));
 
         it(`Moving: Should exit edit mode when moving a column`, () => {
+            grid.moving = true;
             const column = grid.columnList.filter(c => c.field === 'ProductName')[0];
             const targetColumn = grid.columnList.filter(c => c.field === 'ProductID')[0];
-            column.movable = true;
 
             fix.detectChanges();
 

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

@@ -580,9 +580,9 @@ describe('IgxGrid - Summaries #grid', () => {
             }));
 
             it('Moving: should move summaries when move column', () => {
+                grid.moving = true;
                 const colUnitsInStock = grid.getColumnByName('UnitsInStock');
                 const colProductID = grid.getColumnByName('ProductID');
-                colUnitsInStock.movable = true;
                 fix.detectChanges();
 
                 grid.moveColumn(colUnitsInStock, colProductID, DropPosition.BeforeDropTarget);