Merge from base.

Author: MKirova

CHANGELOG.md

@@ -58,7 +58,7 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Change** - The following input has been removed
         - Input `columns`. Use `igxGrid` `columns` input instead.
 - `IgxCarousel`
-    - **Breaking Changes** -The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`.      
+    - **Breaking Changes** -The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`. 
 
 ## 12.2.3
 

projects/igniteui-angular/migrations/update-13_0_0/index.spec.ts

@@ -22,13 +22,14 @@ describe(`Update to ${version}`, () => {
         }
     };
 
-    const migrationName = 'migration-22';
-
     beforeEach(() => {
         appTree = new UnitTestTree(new EmptyTree());
         appTree.create('/angular.json', JSON.stringify(configJson));
     });
 
+    const migrationName = 'migration-22';
+    const lineBreaksAndSpaceRegex = /\s/g;
+
     it('should rename CarouselAnimationType to HorizontalAnimationType', async () => {
         appTree.create(
             '/testSrc/appPrefix/component/test.component.ts',
@@ -67,4 +68,124 @@ describe(`Update to ${version}`, () => {
             )
         ).toEqual(expectedContent);
     });
+
+        /* eslint-disable arrow-parens */
+    it('Should properly rename columns property to columnsCollection',  async () => {
+        appTree.create('/testSrc/appPrefix/component/test.component.ts',
+        `
+        import { IgxGridComponent } from 'igniteui-angular';
+        export class MyClass {
+            @ViewChild(IgxGridComponent, { read: IgxGridComponent })
+            public grid1: IgxGridComponent;
+
+            public ngAfterViewInit() {
+                const columns = grid1.columns;
+            }
+        }
+        `);
+
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(
+            tree.readContent('/testSrc/appPrefix/component/test.component.ts')
+        ).toEqual(
+        `
+        import { IgxGridComponent } from 'igniteui-angular';
+        export class MyClass {
+            @ViewChild(IgxGridComponent, { read: IgxGridComponent })
+            public grid1: IgxGridComponent;
+
+            public ngAfterViewInit() {
+                const columns = grid1.columnsCollection;
+            }
+        }
+        `
+        );
+    });
+
+    it('Should properly rename columns property to columnsCollection - treeGrid',  async () => {
+        appTree.create('/testSrc/appPrefix/component/test.component.ts',
+        `
+        import { IgxTreeGridComponent } from 'igniteui-angular';
+        export class MyClass {
+            @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent })
+            public tGrid1: IgxTreeGridComponent;
+
+            public ngAfterViewInit() {
+                const columns = this.tGrid1.columns;
+            }
+
+            public soSth() {
+                const editableColumns = this.tGrid1.columns.filter(c => e.editable);
+            }
+        }
+        `);
+
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(
+            tree.readContent('/testSrc/appPrefix/component/test.component.ts')
+        ).toEqual(
+        `
+        import { IgxTreeGridComponent } from 'igniteui-angular';
+        export class MyClass {
+            @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent })
+            public tGrid1: IgxTreeGridComponent;
+
+            public ngAfterViewInit() {
+                const columns = this.tGrid1.columnsCollection;
+            }
+
+            public soSth() {
+                const editableColumns = this.tGrid1.columnsCollection.filter(c => e.editable);
+            }
+        }
+        `
+        );
+    });
+
+    it('should remove paging and paginationTemplate property and define a igx-paginator component with custom content', async () => {
+        appTree.create(
+            '/testSrc/appPrefix/component/test.component.html', `
+<div class="columnHidingContainer">
+    <div *ngFor="let col of grid.columns">
+        {{col.field}}
+    </div>
+</div>
+<div class="gridContainer">
+    <igx-grid igxPreventDocumentScroll #grid [data]="data" [autoGenerate]="false" width="100%" height="560px" columnWidth="200px"
+        [allowFiltering]="true">
+        <igx-column [field]="'ID'" dataType="string" [sortable]="true"></igx-column>
+        <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
+        <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
+        <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
+        <igx-column [field]="'CompanyName'" dataType="string" [sortable]="true"></igx-column>
+    </igx-grid>
+</div>`);
+        const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html').replace(lineBreaksAndSpaceRegex, ''))
+            .toEqual(`
+<div class="columnHidingContainer">
+    <div *ngFor="let col of grid.columnsCollection">
+        {{col.field}}
+    </div>
+</div>
+<div class="gridContainer">
+    <igx-grid igxPreventDocumentScroll #grid [data]="data" [autoGenerate]="false" width="100%" height="560px" columnWidth="200px"
+        [allowFiltering]="true">
+        <igx-column [field]="'ID'" dataType="string" [sortable]="true"></igx-column>
+        <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
+        <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
+        <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
+        <igx-column [field]="'CompanyName'" dataType="string" [sortable]="true"></igx-column>
+    </igx-grid>
+</div>
+`.replace(lineBreaksAndSpaceRegex, ''));
+    });
 });

projects/igniteui-angular/migrations/update-13_0_0/index.ts

@@ -1,11 +1,65 @@
-import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
 import { UpdateChanges } from '../common/UpdateChanges';
+import { Element } from '@angular/compiler';
+import { findElementNodes, getSourceOffset, parseFile } from '../common/util';
 
 const version = '13.0.0';
 
 export default (): Rule => (host: Tree, context: SchematicContext) => {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
 
     const update = new UpdateChanges(__dirname, host, context);
+    const GRIDS = ['IgxGridComponent', 'IgxTreeGridComponent', 'IgxHierarchicalGridComponent'];
+    const TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid'];
+    const tsFiles = update.tsFiles;
+
+    for (const path of update.templateFiles) {
+        findElementNodes(parseFile(host, path), TAGS)
+        .map(node => getSourceOffset(node as Element))
+        .forEach(offset => {
+            const { file, node } = offset;
+            if (file.content.includes('columns')) {
+                const gridRef = node.attrs.find(e => e.name.includes('#')).name.substring(1);
+                const content = file.content.split(gridRef + '.columns').join(gridRef + '.columnsCollection');
+                host.overwrite(path, content);
+            }
+        });
+    }
+
+    const getIndicesOf = (searchStr, str) => {
+        if (searchStr.length === 0) {
+            return [];
+        }
+        let startIndex = 0;
+        let index = 0;
+        const indexes = [];
+        while ((index = str.indexOf(searchStr, startIndex)) > -1) {
+            indexes.push(index);
+            startIndex = index + searchStr.length;
+        }
+        return indexes;
+    };
+
+    for (const path of tsFiles) {
+        let content = host.read(path)?.toString();
+        GRIDS.forEach(grid => {
+            if (content.indexOf(grid) > -1) {
+                const indexes = getIndicesOf('@ViewChild', content);
+                indexes.forEach(index => {
+                    const viewChildRef = content.substring(index, content.indexOf(';', index)).replace(/\s\s+/g, ' ');
+                    if (viewChildRef.includes(grid)) {
+                        const gridDeclaration = viewChildRef.substring(viewChildRef.indexOf(')') + 1).replace(/\:/g, '').trim();
+                        const gridName = gridDeclaration.split(' ')[1];
+                        content = content.split(gridName + '.columns').join(gridName + '.columnsCollection');
+                        host.overwrite(path, content);
+                    }
+                });
+            }
+        });
+    }
     update.applyChanges();
 };

projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts

@@ -46,23 +46,21 @@ export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
                     hierarchies = PivotUtil.getFieldsHierarchy(collection, [row], PivotDimensionType.Row, pivotKeys);
                     // generate flat data from the hierarchies
                     data = PivotUtil.processHierarchy(hierarchies, collection[0] ?? [], pivotKeys, 0, true);
-                    row.fieldName = hierarchies.get(hierarchies.keys().next().value).dimension.fieldName;
                     prevRowDims.push(row);
                     prevDim = row;
                 } else {
                     const newData = [...data];
                     for (let i = 0; i < newData.length; i++) {
-                        const currData = newData[i][prevDim.fieldName + '_' + pivotKeys.records];
+                        const currData = newData[i][prevDim.memberName + '_' + pivotKeys.records];
                         const hierarchyFields = PivotUtil
                             .getFieldsHierarchy(currData, [row], PivotDimensionType.Row, pivotKeys);
                         const siblingData = PivotUtil
                             .processHierarchy(hierarchyFields, newData[i] ?? [], pivotKeys, 0);
-                        row.fieldName = hierarchyFields.get(hierarchyFields.keys().next().value).dimension.fieldName;
                         PivotUtil.processSiblingProperties(newData[i], siblingData, pivotKeys);
 
                         PivotUtil.processSubGroups(row, prevRowDims.slice(0), siblingData, pivotKeys);
                         if (PivotUtil.getDimensionDepth(prevDim) > PivotUtil.getDimensionDepth(row)) {
-                            newData[i][row.fieldName + '_' + pivotKeys.records] = siblingData;
+                            newData[i][row.memberName + '_' + pivotKeys.records] = siblingData;
                         } else {
                             newData.splice(i , 1, ...siblingData);
                         }

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

@@ -19,7 +19,7 @@ import { GridType } from '../common/grid.interface';
 import { IgxGridNavigationService } from '../grid-navigation.service';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
-import { IPivotConfiguration, IPivotDimension, IPivotKeys, PivotDimensionType } from './pivot-grid.interface';
+import { IPivotConfiguration, IPivotKeys, PivotDimensionType } from './pivot-grid.interface';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 import { IgxColumnGroupComponent } from '../columns/column-group.component';
 import { IgxColumnComponent } from '../columns/column.component';
@@ -298,7 +298,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         let fieldsMap;
         if (this.pivotConfiguration.columnStrategy && this.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy) {
             const fields = this.generateDataFields(data);
-            const rowFields = PivotUtil.flatten(this.pivotConfiguration.rows).map(x => x.fieldName);
+            const rowFields = PivotUtil.flatten(this.pivotConfiguration.rows).map(x => x.memberName);
             const keyFields = Object.values(this.pivotKeys);
             const filteredFields = fields.filter(x => rowFields.indexOf(x) === -1 && keyFields.indexOf(x) === -1 &&
                 x.indexOf('_level') === -1 && x.indexOf('_records') === -1);

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

@@ -19,12 +19,12 @@ export interface IPivotConfiguration {
 export interface IPivotDimension {
     // allow defining a hierarchy when multiple sub groups need to be extracted from single member.
     childLevel?: IPivotDimension;
-    // field name which to use to extract value or function that extract the value.
-    member: string | ((data: any) => any);
+    // field name which to use to extract value
+    memberName: string;
+    // function that extract the value
+    memberFunction?: (data: any) => any;
     // Enables/Disables a particular dimension from pivot structure.
     enabled: boolean;
-    // additional field name when using member as a function
-    fieldName?: string;
     // A predefined or defined via the `igxPivotSelector` filter expression tree for the current dimension to be applied in the filter pipe.
     filter?: FilteringExpressionsTree | null;
 }