Merge pull request #10506 from IgniteUI/rkaraivanov/column-moving-grid-prop

refactor: Column moving behavior

Author: kdinev

Diff for: CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 13.1.0
+
+### General
+
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    -  **Breaking Change** - `movable` property of `IgxColumnComponent` is now deprecated and will be removed in future version. Instead, use the newly exposed `moving` property on grid-level:
+    ```html
+    <igx-grid [data]="data" [moving]="true">
+        <igx-column field="Name"></igx-column>
+        <igx-column field="Age"></igx-column>
+    </igx-grid>
+   ```
+
 ## 13.0.5
 
 ### New Features

Diff for: projects/igniteui-angular/migrations/migration-collection.json

@@ -110,6 +110,11 @@
             "version": "13.0.0-alpha",
             "description": "Updates Ignite UI for Angular from v12.2.x to v13.0.0",
             "factory": "./update-13_0_0"
+        },
+        "migration-23": {
+            "version": "13.1.0",
+            "description": "Updates Ignite UI for Angular from v13.0.x to v13.1.0",
+            "factory": "./update-13_1_0"
         }
     }
 }

Diff for: projects/igniteui-angular/migrations/update-13_1_0/index.spec.ts

@@ -0,0 +1,87 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+const version = '13.1.0';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+    };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    const migrationName = 'migration-23';
+
+    it('should remove columns` movable prop and enable grid`s moving prop if there is movable columns', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.html`,
+            `
+<igx-grid>
+  <igx-column [movable]="true"></igx-column>
+  <igx-column></igx-column>
+</igx-grid>
+`
+        );
+
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(
+            tree.readContent('/testSrc/appPrefix/component/test.component.html')
+        ).toEqual(
+            `
+<igx-grid [moving]="true">
+  <igx-column ></igx-column>
+  <igx-column></igx-column>
+</igx-grid>
+`
+        );
+    });
+
+    it('should remove columns` movable prop and don`t set the grid`s moving prop if there isn`t movable columns', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.html`,
+            `
+<igx-grid>
+  <igx-column [movable]="false"></igx-column>
+  <igx-column></igx-column>
+</igx-grid>
+`
+        );
+
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(
+            tree.readContent('/testSrc/appPrefix/component/test.component.html')
+        ).toEqual(
+            `
+<igx-grid>
+  <igx-column ></igx-column>
+  <igx-column></igx-column>
+</igx-grid>
+`
+        );
+    });
+
+
+});

Diff for: projects/igniteui-angular/migrations/update-13_1_0/index.ts

@@ -0,0 +1,72 @@
+import { Element } from '@angular/compiler';
+import {
+  Rule,
+  SchematicContext,
+  Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+import { nativeImport } from '../common/import-helper.js';
+import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util';
+
+const version = '13.1.0';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+  context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+  const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+
+  const update = new UpdateChanges(__dirname, host, context);
+  const GRID_TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid', 'igx-row-island'];
+  const prop = ['[movable]'];
+  const changes = new Map<string, FileChange[]>();
+
+  const gridsToMigrate = new Set<any>();
+
+  const applyChanges = () => {
+    for (const [path, change] of changes.entries()) {
+      let buffer = host.read(path).toString();
+
+      change.sort((c, c1) => c.position - c1.position)
+        .reverse()
+        .forEach(c => buffer = c.apply(buffer));
+
+      host.overwrite(path, buffer);
+    }
+  };
+
+  const addChange = (path: string, change: FileChange) => {
+    if (changes.has(path)) {
+      changes.get(path).push(change);
+    } else {
+      changes.set(path, [change]);
+    }
+  };
+
+  // migrate movable on column-level to moving on grid-level for grid, tree grid, hierarchical grid and row island
+  for (const path of update.templateFiles) {
+    const grids = findElementNodes(parseFile(new HtmlParser(), host, path), GRID_TAGS);
+    grids.forEach(grid => {
+      const grid_elem = grid as Element;
+      const columns = grid_elem.children.filter(column => (column as Element).name === 'igx-column' && hasAttribute(column as Element, prop));
+      columns.map(node => getSourceOffset(node as Element))
+        .forEach(offset => {
+          const { startTag, file, node } = offset;
+          const { name, value } = getAttribute(node, prop)[0];
+          if (value === 'true') {
+            gridsToMigrate.add(grid_elem);
+          }
+          const repTxt = file.content.substring(startTag.start, startTag.end);
+          const property = `${name}="${value}"`;
+          const removePropTxt = repTxt.replace(property, '');
+          addChange(file.url, new FileChange(startTag.start, removePropTxt, repTxt, 'replace'));
+        });
+    });
+
+    Array.from(gridsToMigrate).map(node => getSourceOffset(node as Element)).forEach(offset => {
+      const { startTag, file } = offset;
+      addChange(file.url, new FileChange(startTag.end - 1, ' [moving]="true"'));
+    });
+  }
+
+  applyChanges();
+  changes.clear();
+};

Diff for: projects/igniteui-angular/src/lib/grids/README.md

@@ -167,6 +167,7 @@ Below is the list of all inputs that the developers may set to configure the gri
 |`resourceStrings`| IGridResourceStrings | Resource strings of the grid. |
 |`autoGenerate`|boolean|Autogenerate grid's columns, default value is _false_|
 |`batchEditing`|boolean|Toggles batch editing in the grid, default is _false_|
+|`moving`|boolean|Enables the columns moving feature. Defaults to _false_|
 |`paging`|boolean|Enables the paging feature. Defaults to _false_.|
 |`page`| number | The current page index.|
 |`perPage`|number|Visible items per page, default is 15|
@@ -333,7 +334,6 @@ Inputs available on the **IgxGridColumnComponent** to define columns:
 |`hasSummary`| boolean  |Sets whether or not the specific column has summaries enabled.|
 |`summaries`| IgxSummaryOperand |Set custom summary for the specific column|
 |`hidden`|boolean|Visibility of the column|
-|`movable`|boolean|Set column to be movable|
 |`resizable`|boolean|Set column to be resizable|
 |`selectable`|boolean|Set column to be selectable|
 |`selected`|boolean|Set column to be selected|

Diff for: 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;
-        });
     }
 
     /*

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

@@ -422,8 +422,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
     @Input()
     public disablePinning = false;
     /**
+     * @deprecated in version 13.1.0. Use `IgxGridComponent.moving` instead.
+     * 
      * Sets/gets whether the column is movable.
      * Default value is `false`.
+     *
      * ```typescript
      * let isMovable = this.column.movable;
      * ```
@@ -433,8 +436,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      *
      * @memberof IgxColumnComponent
      */
-    @WatchColumnChanges()
-    @notifyChanges()
     @Input()
     public movable = false;
     /**

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

@@ -143,6 +143,7 @@ export interface ColumnType {
     resizable: boolean;
     searchable: boolean;
     columnGroup: boolean;
+    /** @deprecated in version 13.1.0. Use `IgxGridComponent.moving` instead.*/
     movable: boolean;
     groupable: boolean;
     sortable: boolean;
@@ -267,6 +268,7 @@ export interface GridType extends IGridDataBindable {
     pipeTrigger: number;
     summaryPipeTrigger: number;
     hasColumnLayouts: boolean;
+    moving: boolean;
     isLoading: boolean;
     dataCloneStrategy: IDataCloneStrategy;
 

Diff for: 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'">

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

@@ -189,6 +189,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.
      *
@@ -4879,13 +4886,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;
     }
 
     /**

Diff for: projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts

@@ -424,11 +424,10 @@ describe('IgxGrid - Cell component #grid', () => {
 });
 @Component({
     template: `
-    <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" [width]="'900px'" [height]="'500px'" rowSelection = "multiple">
+    <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" [width]="'900px'" [height]="'500px'" rowSelection = "multiple" [moving]="true">
         <igx-column *ngFor="let c of columns" [field]="c.field"
                                               [header]="c.field"
-                                              [width]="c.width"
-                                              [movable]="true"
+                                              [width]="c.width"                                             
                                               [groupable]="true"
                                               [resizable]="true"
                                               [sortable]="true"

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

@@ -48,6 +48,7 @@ describe('IgxGrid - Column Moving #grid', () => {
             fixture = TestBed.createComponent(MovableColumnsComponent);
             fixture.detectChanges();
             grid = fixture.componentInstance.grid;
+            grid.moving = true;
         }));
 
         it('Should be able to reorder columns.', (() => {
@@ -264,33 +265,6 @@ describe('IgxGrid - Column Moving #grid', () => {
             expect(grid.getCellByColumn(0, 'ID').selected).toBeTruthy();
         }));
 
-
-
-        it('Should reorder only movable columns when dropping the ghost image on an interactive area.', (async () => {
-            const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
-
-            expect(grid.columnList.get(0).movable).toBeTruthy();
-            expect(grid.columnList.get(2).movable).toBeFalsy();
-
-            // step 1 - verify columns are not reordered when
-            // moving a column that is not movable
-            const header = headers[2].nativeElement;
-            UIInteractions.simulatePointerEvent('pointerdown', header, 450, 75);
-            await wait();
-            UIInteractions.simulatePointerEvent('pointermove', header, 455, 81);
-            await wait(50);
-            UIInteractions.simulatePointerEvent('pointermove', header, 100, 75);
-            await wait();
-            UIInteractions.simulatePointerEvent('pointerup', header, 100, 75);
-            await wait();
-            fixture.detectChanges();
-
-            const columnsList = grid.columnList;
-            expect(columnsList.get(0).field).toEqual('ID');
-            expect(columnsList.get(1).field).toEqual('Name');
-            expect(columnsList.get(2).field).toEqual('LastName');
-        }));
-
         it('Should not reorder columns when dropping the ghost image on a non-interactive area.', (async () => {
             const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
 
@@ -735,6 +709,7 @@ describe('IgxGrid - Column Moving #grid', () => {
             fixture = TestBed.createComponent(MovableTemplatedColumnsComponent);
             fixture.detectChanges();
             grid = fixture.componentInstance.grid;
+            grid.moving = true;
         }));
 
         it('Should reorder movable columns with templated headers.', (async () => {
@@ -771,6 +746,7 @@ describe('IgxGrid - Column Moving #grid', () => {
             fixture = TestBed.createComponent(MovableColumnsLargeComponent);
             fixture.detectChanges();
             grid = fixture.componentInstance.grid;
+            grid.moving = true;
         }));
 
         it('Should be able to scroll forwards to reorder columns that are out of view.', (async () => {
@@ -1304,7 +1280,6 @@ describe('IgxGrid - Column Moving #grid', () => {
         }));
 
         it('Pinning - Should not be able to pin a column programmaticaly if disablePinning is enabled for that column', (async () => {
-            const columnsList = grid.columnList;
 
             // step 1 - pin some columns
             grid.getColumnByName('Address').pinned = true;
@@ -1398,6 +1373,7 @@ describe('IgxGrid - Column Moving #grid', () => {
             fixture = TestBed.createComponent(MultiColumnHeadersComponent);
             fixture.detectChanges();
             grid = fixture.componentInstance.grid;
+            grid.moving = true;
         }));
 
         it('MCH - should reorder only columns on the same level (top level simple column).', (async () => {

Diff for: 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();