fix(grid): strict string typing the grid paging mode (#15706)

Author: ChronosSF

projects/igniteui-angular/migrations/update-11_1_0/index.spec.ts

@@ -708,47 +708,4 @@ export class CsvExportComponent {
             )
         ).toEqual(expectedContent);
     });
-
-    it('should update GridPagingMode enum from lowerCase to TitleCase', async () => {
-        appTree.create(
-            '/testSrc/appPrefix/component/paging-test.component.ts',
-`import { Component } from '@angular/core';
-import { GridPagingMode } from "igniteui-angular";
-
-@Component({
-    selector: "app-paging-test",
-    styleUrls: ["./paging-test.component.scss"],
-    templateUrl: "./paging-test.component.html"
-})
-export class PagingComponent {
-    public pagingLocal: GridPagingMode = GridPagingMode.local;
-    public pagingRemote: GridPagingMode = GridPagingMode.remote;
-    constructor(){}
-}
-`);
-
-        const tree = await runner
-            .runSchematic('migration-19', {}, appTree);
-
-        const expectedContent =
-`import { Component } from '@angular/core';
-import { GridPagingMode } from "igniteui-angular";
-
-@Component({
-    selector: "app-paging-test",
-    styleUrls: ["./paging-test.component.scss"],
-    templateUrl: "./paging-test.component.html"
-})
-export class PagingComponent {
-    public pagingLocal: GridPagingMode = GridPagingMode.Local;
-    public pagingRemote: GridPagingMode = GridPagingMode.Remote;
-    constructor(){}
-}
-`;
-        expect(
-            tree.readContent(
-                '/testSrc/appPrefix/component/paging-test.component.ts'
-            )
-        ).toEqual(expectedContent);
-    });
 });

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

@@ -1422,7 +1422,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         return this.grid.dataView
             .map((rec, index) => {
                 if (!this.grid.isGroupByRecord(rec) && !this.grid.isSummaryRow(rec)) {
-                    this.grid.pagingMode === 1 && this.grid.page !== 0 ? index = index + this.grid.perPage * this.grid.page : index = this.grid.dataRowList.first.index + index;
+                    this.grid.pagingMode === 'remote' && this.grid.page !== 0 ?
+                        index = index + this.grid.perPage * this.grid.page : index = this.grid.dataRowList.first.index + index;
                     const cell = new IgxGridCell(this.grid as any, index, this);
                     return cell;
                 }

projects/igniteui-angular/src/lib/grids/common/enums.ts

@@ -103,16 +103,16 @@ export enum RowPinningPosition {
     Bottom
 }
 
-/* mustCoerceToInt */
 /**
  * Enumeration representing different paging modes for the grid.
  * - Local: The grid will use local data to extract pages during paging.
  * - Remote: The grid will expect pages to be delivered from a remote location and will only raise events during paging interactions.
  */
-export enum GridPagingMode {
-    Local,
-    Remote
-}
+export const GridPagingMode = /*@__PURE__*/mkenum({
+    Local: 'local',
+    Remote: 'remote'
+});
+export type GridPagingMode = (typeof GridPagingMode)[keyof typeof GridPagingMode];
 
 /**
  * @hidden @internal

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

@@ -3053,7 +3053,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     /**
      * @hidden
      */
-    protected _pagingMode = GridPagingMode.Local;
+    protected _pagingMode: GridPagingMode = 'local';
     /**
      * @hidden
      */
@@ -4625,7 +4625,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      */
     protected _getDataViewIndex(index: number): number {
         let newIndex = index;
-        if ((index < 0 || index >= this.dataView.length) && this.pagingMode === 1 && this.page !== 0) {
+        if ((index < 0 || index >= this.dataView.length) && this.pagingMode === 'remote' && this.page !== 0) {
             newIndex = index - this.perPage * this.page;
         } else if (this.gridAPI.grid.verticalScrollContainer.isRemote) {
             newIndex = index - this.gridAPI.grid.virtualizationState.startIndex;
@@ -7270,7 +7270,7 @@ export abstract class IgxGridBaseDirective implements GridType,
 
         // eslint-disable-next-line prefer-const
         for (let [row, set] of selectionMap) {
-            row = this.paginator && (this.pagingMode === GridPagingMode.Local && source === this.filteredSortedData) ? row + (this.perPage * this.page) : row;
+            row = this.paginator && (this.pagingMode === 'local' && source === this.filteredSortedData) ? row + (this.perPage * this.page) : row;
             row = isRemote ? row - this.virtualizationState.startIndex : row;
             if (!source[row] || source[row].detailsData !== undefined) {
                 continue;

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

@@ -1126,7 +1126,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
             }
         }
 
-        if (this.pagingMode === 1 && this.page !== 0) {
+        if (this.pagingMode === 'remote' && this.page !== 0) {
             row.index = index + this.perPage * this.page;
         }
         return row;
@@ -1160,7 +1160,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      */
     public allRows(): RowType[] {
         return this.dataView.map((rec, index) => {
-            this.pagingMode === 1 && this.page !== 0 ? index = index + this.perPage * this.page : index = this.dataRowList.first.index + index;
+            this.pagingMode === 'remote' && this.page !== 0 ?
+                index = index + this.perPage * this.page : index = this.dataRowList.first.index + index;
             return this.createRow(index);
         });
     }
@@ -1201,7 +1202,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         const row = this.getRowByIndex(rowIndex);
         const column = this._columns.find((col) => col.field === columnField);
         if (row && row instanceof IgxGridRow && !row.data?.detailsData && column) {
-            if (this.pagingMode === 1 && this.page !== 0) {
+            if (this.pagingMode === 'remote' && this.page !== 0) {
                 row.index = rowIndex + this.perPage * this.page;
             }
             return new IgxGridCell(this, row.index, column);

projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

@@ -7,7 +7,6 @@ import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../../data-
 import { IGroupingExpression } from '../../data-operations/grouping-expression.interface';
 import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
 import { FilterUtil, IFilteringStrategy } from '../../data-operations/filtering-strategy';
-import { GridPagingMode } from '../common/enums';
 import { ISortingExpression } from '../../data-operations/sorting-strategy';
 import { IGridSortingStrategy, IGridGroupingStrategy } from '../common/strategy';
 
@@ -89,7 +88,7 @@ export class IgxGridPagingPipe implements PipeTransform {
     constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
 
     public transform(collection: IGroupByResult, enabled: boolean, page = 0, perPage = 15, _: number): IGroupByResult {
-        if (!enabled || this.grid.pagingMode !== GridPagingMode.Local) {
+        if (!enabled || this.grid.pagingMode !== 'local') {
             return collection;
         }
         const state = {

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts

@@ -1,7 +1,6 @@
 import { Inject, Pipe, PipeTransform } from '@angular/core';
 import { cloneArray, resolveNestedPath } from '../../core/utils';
 import { DataUtil } from '../../data-operations/data-util';
-import { GridPagingMode } from '../common/enums';
 import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
 
 /**
@@ -68,7 +67,7 @@ export class IgxGridHierarchicalPagingPipe implements PipeTransform {
     constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
 
     public transform(collection: any[], enabled: boolean, page = 0, perPage = 15, _id: string, _pipeTrigger: number): any[] {
-        if (!enabled || this.grid.pagingMode !== GridPagingMode.Local) {
+        if (!enabled || this.grid.pagingMode !== 'local') {
             return collection;
         }
 

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts

@@ -3,7 +3,6 @@ import { cloneArray, cloneHierarchicalArray } from '../../core/utils';
 import { DataUtil } from '../../data-operations/data-util';
 import { ITreeGridRecord } from './tree-grid.interfaces';
 import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
-import { GridPagingMode } from '../common/enums';
 import { TransactionType } from '../../services/public_api';
 import { IgxAddRow } from '../common/crud.service';
 import { ISortingExpression } from '../../data-operations/sorting-strategy';
@@ -233,7 +232,7 @@ export class IgxTreeGridPagingPipe implements PipeTransform {
     constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
 
     public transform(collection: ITreeGridRecord[], enabled: boolean, page = 0, perPage = 15, _: number): ITreeGridRecord[] {
-        if (!enabled || this.grid.pagingMode !== GridPagingMode.Local) {
+        if (!enabled || this.grid.pagingMode !== 'local') {
             return collection;
         }
 

projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts

@@ -3,7 +3,6 @@ import { SampleTestData } from './sample-test-data.spec';
 import { ColumnDefinitions, GridTemplateStrings } from './template-strings.spec';
 import { IgxGridComponent } from '../grids/grid/grid.component';
 import { IgxColumnActionsComponent } from '../grids/column-actions/column-actions.component';
-import { GridPagingMode } from '../grids/common/enums';
 import { IgxColumnComponent } from '../grids/columns/column.component';
 import { IgxGridToolbarComponent } from '../grids/toolbar/grid-toolbar.component';
 import { IgxGridToolbarHidingComponent } from '../grids/toolbar/grid-toolbar-hiding.component';
@@ -123,7 +122,7 @@ export class PagingComponent extends GridWithSizeComponent {
     imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent]
 })
 export class RemotePagingComponent extends GridWithSizeComponent {
-    public pagingMode = GridPagingMode.Remote;
+    public pagingMode = 'remote';
     public perPage = 3;
     public totalRecords = 10;
     public override data = SampleTestData.personJobDataFull();

src/app/grid-remote-paging/grid-remote-paging.sample.ts

@@ -15,7 +15,7 @@ import { GridPagingMode, IgxButtonDirective, IgxCardComponent, IgxCardContentDir
 export class GridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy {
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
 
-    public mode: GridPagingMode = GridPagingMode.Remote;
+    public mode: GridPagingMode = 'remote';
     public page = 0;
     public totalCount = 0;
     public pages = [];