Implement and expose a public CellType interface and API (#9853)

* chore(*): add cell API dev sample

* feat(grid): implement public CellType interface

* feat(grid): expose CellType interface to public API

* chore(*): fix dev sample to use public CellType

* chore(*): fix code indentation

* chore(*): fix code indentation

* chore(*): fix code indentation and lint errors

* chore(*): fix code indentation

* chore(*): fix code indentation

* feat(grid): implement row.cells, fix bugs

* chore(*): sample enhacements

* chore(*): fix lint error in code

* fix(grid): fix bugs in cell API implementation

* chore(*): fix sample issues

* chore(*): fix sample issues, treegridFlat data key is number

* feat(grid): implement column.cells

* feat(grid): implement column.cell

* fix(grid): dont return igxHierarchicalGridRow for child grid containers

* chore(*): sample update to remove uneeeded line

* chore(*): fix lint errors

* feat(grid): implement selectedCells

* feat(grid): add get_cell_by_index overload

* fix(grid): fix typing issues

* test(grid): first batch test fixes

* chore(*): fix lint error in treegrid

* chore(*): fix lint error in treegrid

* fix(grid): fix how crudService creatres a cell and row

* test(grid): add second btach of tests

* fix(grid): check if row exist in current dataView

* test(grid): do not create cell in EditMode, if the row is collapsed

* chore(*): fix lint errors

* test(grid): third batch of fixed tests

* fix(grid): consider if row is added row

* test(grid): fix grid search test

* test(grid): fix row pinning navigation tests

* fix(grid): update to be setter too, consider transactions in treeRow.getdata

* test(grid): fix few grid and treegrid tests, use cell component

* test(grid): fix some tests to use cell component

* test(grid): fix hierarchical grid tests

* fix(grid): add support for nested props, crud service bug fix

* test(grid): complete hgrid tests

* test(grid): complete tgrid tests

* fix(grid): fix bug in nested props support

* test(grid): fix nested props test to use cell component

* fix(grid): clear transactions if editing is cancelled

* chore(*): fix circular dep, code formatting, etc

* chore(*): add migrations for new CellType interface

* chore(*): Update changelog and readme files

* fix(grid): bind IgxGridCell to let-cell in template

* fix(grid): only update cell in crudService, if same cell

* chore(*): add todo comment

* chore(*): fix lint error, use const

* test(grid): increase debounce time for specific test that proved to be Unstable

* fix(grid): dont use ?? operator together with ?

* fix(grid): dont use ?? operator together with ?

* chore(*): fix lint error with quotes

* fix(grid): first take rowData, if available

* chore(*): Samples improvements

Co-authored-by: Zdravko Kolev <[email protected]>

Author: hanastasov

CHANGELOG.md

@@ -42,6 +42,13 @@ All notable changes for each version of this project will be documented in this
     </igx-grid>
     <button igxButton (click)="grid.transactions.undo">Undo</button>
     ```
+    - **Breaking changes**
+        - `IgxGridCellComponent`,  `IgxTreeGridCellComponent`, `IgxHierarchicalGridCellComponent` are no longer exposed in the public API. Instead, a new class `IgxGridCell` replaces all of these. It is a facade class which exposes only the public API of the above mentioned. Automatic migration will change these imports with `CellType`, which is the interface implemented by `IgxGridCell`
+    - **Behavioral changes**
+    - `getCellByKey`, `getCellByColumn`, `getCellByColumnVisibleIndex`, `row.cells`, `column.cells`, `grid.selectedCells` now return an `IgxGridCell` the `CellType` interface.
+    - `cell` in `IGridCellEventArgs` is now `CellType`. `IGridCellEventArgs` are emitetd in `cellClick`, `selected`, `contextMenu` and `doubleClick` events. 
+    - `let-cell` property in cell template is now `CellType`.
+    - `getCellByColumnVisibleIndex` is now deprecated and will be removed in next major version. Use `getCellByKey`, `getCellByColumn` instead.
 
 - `Transactions`
     - Added `IgxFlatTransactionFactory` - the singleton service instantiates a new `TransactionService<Transaction, State>` given a `transaction type`.

projects/igniteui-angular/migrations/update-12_1_0/changes/classes.json

@@ -0,0 +1,20 @@
+{
+    "$schema": "../../common/schema/class.schema.json",
+    "changes": [{
+            "name": "IgxHierarchicalGridCellComponent",
+            "replaceWith": "CellType"
+        },
+        {
+            "name": "IgxGridCellComponent",
+            "replaceWith": "CellType"
+        },
+        {
+            "name": "IgxTreeGridCellComponent",
+            "replaceWith": "CellType"
+        },
+        {
+            "name": "IgxGridExpandableCellComponent",
+            "replaceWith": "CellType"
+        }
+    ]
+}

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

@@ -652,6 +652,53 @@ public onBannerOpened(event: BannerEventArgs) {
         </igx-dialog>`);
     });
 
+    // CellType
+    it('Should update cell component types with CellType', async () => {
+        appTree.create(
+            '/testSrc/appPrefix/component/cells.component.ts', `
+        import { IgxGridComponent, IgxGridCellComponent, IgxHierarchicalGridCellComponent,
+            IgxTreeGridCellComponent, IgxGridExpandableCellComponent } from 'igniteui-angular';
+        export class HGridMultiRowDragComponent {
+            public onDropAllowed(args: IDropDroppedEventArgs)
+                const hierRow: RowType = args.dragData;
+                const row: RowType = args.dragData;
+                const treeRow: RowType = args.dragData;
+                const cells: IgxGridCellComponent[] = row.cells;
+                const tells: IgxTreeGridCellComponent[] = treeRow.cells;
+                const hcells: IgxHierarchicalGridCellComponent[] = hierRow.cells;
+            }
+            public ngOnInit() {
+                const cell: this.grid1.getCellByColumn(0, "ContactName") as IgxGridCellComponent;
+                const cell2: this.grid1.getCellByColumnVisibleIndex(0, 2) as IgxTreeGridCellComponent;
+                const cell3: this.grid1.getCellByKey(0, "Age") as IgxHierarchicalGridCellComponent;
+
+                const cells = grid.selectedCells as IgxGridCellComponent[];
+            }
+        }`);
+    const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+            expect(tree.readContent('/testSrc/appPrefix/component/cells.component.ts'))
+                .toEqual(`
+        import { IgxGridComponent, CellType } from 'igniteui-angular';
+        export class HGridMultiRowDragComponent {
+            public onDropAllowed(args: IDropDroppedEventArgs)
+                const hierRow: RowType = args.dragData;
+                const row: RowType = args.dragData;
+                const treeRow: RowType = args.dragData;
+                const cells: CellType[] = row.cells;
+                const tells: CellType[] = treeRow.cells;
+                const hcells: CellType[] = hierRow.cells;
+            }
+            public ngOnInit() {
+                const cell: this.grid1.getCellByColumn(0, "ContactName") as CellType;
+                const cell2: this.grid1.getCellByColumnVisibleIndex(0, 2) as CellType;
+                const cell3: this.grid1.getCellByKey(0, "Age") as CellType;
+
+                const cells = grid.selectedCells as CellType[];
+            }
+        }`);
+    });
 });
 
 

projects/igniteui-angular/src/lib/grids/README.md

@@ -495,20 +495,23 @@ import {
 |--- |--- |--- |
 |`toggle()`|void| Toggles the expand state of the group row. |
 
-## IgxGridCellComponent
+## IgxGridCell
 
 ### Getters/Setters
 
 |Name|Type|Getter|Setter|Description|
 |--- |--- |--- |--- |--- |
-|`column`|IgxColumnComponent|Yes|No|The column to which the cell belongs.|
-|`row`|IgxGridRowComponent|Yes|No|The row to which the cell belongs.|
-|`value`|any|Yes|No|The value in the cell.|
-|`rowIndex`|number|Yes|No|The index of the row this cell belongs to.|
-|`columnIndex`|number|Yes|No|The index of the column this cell belongs to.|
 |`grid`|IgxGridComponent|Yes|No|The grid component itself.|
-|`inEditMode`|boolean|Yes|Yes|Gets/Sets the cell in edit mode.|
-|`nativeElement`|HTMLElement|Yes|No|The native DOM element representing the cell. Could be `null` in certain environments.|
+|`column`|IgxColumnComponent|Yes|No|The column to which the cell belongs.|
+|`row`|RowType|Yes|No|The row to which the cell belongs.|
+|`value`|any|Yes|Yes|The value in the cell.|
+|`editValue`|any|Yes|No|The value in the cell editor.|
+|`selected`|boolean|Yes|Yes|Returns if the cell is selected.|
+|`active`|boolean|Yes|No|Returns if the cell is active (focused).|
+|`editable`|boolean|Yes|No|Returns if the cell can enter edit mode).|
+|`editMode`|boolean|Yes|Yes|Gets/Sets the cell in edit mode.|
+|`cellID`|object|Yes|No|An object describing the cell with `rowID`, `columnID` and `rowIndex`.|
+|`editMode`|boolean|Yes|Yes|Gets/Sets the cell in edit mode.|
 
 ### Methods
 

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
-import { cloneArray, isEqual, reverseMapper, mergeObjects } from '../core/utils';
+import { cloneArray, reverseMapper, mergeObjects } from '../core/utils';
 import { DataUtil, GridColumnDataType } from '../data-operations/data-util';
 import { ISortingExpression, SortingDirection } from '../data-operations/sorting-expression.interface';
 import { IgxGridCellComponent } from './cell.component';
@@ -103,11 +103,16 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
         }
     }
 
-    public get_cell_by_index(rowIndex: number, columnIndex: number): IgxGridCellComponent {
+    public get_cell_by_index(rowIndex: number, columnID: number | string): IgxGridCellComponent {
         const row = this.get_row_by_index(rowIndex);
-        if (row && row.cells) {
-            return row.cells.find((cell) => cell.columnIndex === columnIndex);
+        const hasCells = row && row.cells;
+        if (hasCells && typeof columnID === 'number') {
+            return row.cells.find((cell) => cell.column.index === columnID);
+        }
+        if (hasCells && typeof columnID === 'string'){
+            return row.cells.find((cell) => cell.column.field === columnID);
         }
+
     }
 
     public get_cell_by_visible_index(rowIndex: number, columnIndex: number): IgxGridCellComponent {

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

@@ -25,10 +25,12 @@ import { ColumnType } from './common/column.interface';
 import { RowType } from './common/row.interface';
 import { GridSelectionMode } from './common/enums';
 import { GridType } from './common/grid.interface';
-import { ISearchInfo } from './grid/public_api';
 import { getCurrencySymbol, getLocaleCurrencyCode} from '@angular/common';
 import { GridColumnDataType } from '../data-operations/data-util';
 import { IgxRowDirective } from './row.directive';
+import { ISearchInfo } from './common/events';
+import { CellType } from './common/cell.interface';
+import { IgxGridCell } from './grid-public-cell';
 
 /**
  * Providing reference to `IgxGridCellComponent`:
@@ -165,7 +167,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     public get context(): any {
         return {
             $implicit: this.value,
-            cell: this,
+            cell: this.getCellType(),
             additionalTemplateContext: this.column.additionalTemplateContext
         };
     }
@@ -193,9 +195,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     /**
-     * Gets the cell template.
+     * Gets the pinned indicator template.
      * ```typescript
-     * let template = this.cell.template;
+     * let template = this.cell.pinnedIndicatorTemplate;
      * ```
      *
      * @memberof IgxGridCellComponent
@@ -257,7 +259,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     /**
-     * Gets the visible `index` of the in which the cell is stored.
+     * Returns the column visible index.
      * ```typescript
      * let visibleColumnIndex = this.cell.visibleColumnIndex;
      * ```
@@ -412,7 +414,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         return this.column.gridColumnSpan;
     }
 
-
     public get rowEnd(): number {
         return this.column.rowEnd;
     }
@@ -678,7 +679,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         }
 
         this.grid.doubleClick.emit({
-            cell: this,
+            cell: this.getCellType(),
             event
         });
     };
@@ -690,7 +691,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     @HostListener('click', ['$event'])
     public onClick(event: MouseEvent) {
         this.grid.cellClick.emit({
-            cell: this,
+            cell: this.getCellType(),
             event
         });
     }
@@ -702,7 +703,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     @HostListener('contextmenu', ['$event'])
     public onContextMenu(event: MouseEvent) {
         this.grid.contextMenu.emit({
-            cell: this,
+            cell: this.getCellType(),
             event
         });
     }
@@ -908,7 +909,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
             this.selectionService.keyboardStateOnFocus(node, this.grid.rangeSelected, this.nativeElement);
         }
         if (this.grid.isCellSelectable && shouldEmitSelection) {
-            this.grid.selected.emit({ cell: this, event });
+            this.grid.selected.emit({ cell: this.getCellType(), event });
         }
     }
 
@@ -1031,4 +1032,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         this.nativeElement.removeEventListener('pointerenter', this.pointerenter);
         this.nativeElement.removeEventListener('pointerup', this.pointerup);
     }
+
+    private getCellType(): CellType {
+        return new IgxGridCell(this.grid, this.row.index, this.column.field);
+    }
 }

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

@@ -12,8 +12,8 @@ import {
 } from '@angular/core';
 
 import { IgxColumnComponent } from './column.component';
-import { IgxGridCellComponent } from '../cell.component';
 import { flatten } from '../../core/utils';
+import { CellType } from '../common/cell.interface';
 
 
 @Component({
@@ -189,14 +189,14 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
      */
     public set inlineEditorTemplate(template: TemplateRef<any>) { }
     /**
-     * Gets the column group cells.
+     * Will return empty array. Use this.children.toArray()[index].cells to get the cells for a column that is part of the column group.
      * ```typescript
      * let columnCells = this.columnGroup.cells;
      * ```
      *
      * @memberof IgxColumnGroupComponent
      */
-    public get cells(): IgxGridCellComponent[] {
+    public get cells(): CellType[] {
         return [];
     }
     /**

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

@@ -52,6 +52,8 @@ import { DropPosition } from '../moving/moving.service';
 import { IgxColumnGroupComponent } from './column-group.component';
 import { IColumnVisibilityChangingEventArgs, IPinColumnCancellableEventArgs, IPinColumnEventArgs } from '../common/events';
 import { PlatformUtil } from '../../core/utils';
+import { CellType } from '../common/cell.interface';
+import { IgxGridCell } from '../grid-public-cell';
 
 const DEFAULT_DATE_FORMAT = 'mediumDate';
 const DEFAULT_TIME_FORMAT = 'mediumTime';
@@ -1202,19 +1204,33 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     /**
      * Gets the cells of the column.
      * ```typescript
-     * let columnCells =  this.column.cells;
+     * let columnCells = this.column._cells;
      * ```
      *
-     * @memberof IgxColumnComponent
      */
-    public get cells(): IgxGridCellComponent[] {
+    public get cells(): CellType[] {
+        return this.grid.dataView
+            .map((rec, index) => {
+                if (!this.grid.isGroupByRecord(rec) && !this.grid.isSummaryRow(rec)) {
+                    const cell = new IgxGridCell(this.grid as any, index, this.field);
+                    return cell;
+                }
+            }).filter(cell => cell);
+    }
+
+
+    /**
+     * @hidden @internal
+     */
+    public get _cells(): IgxGridCellComponent[] {
         return this.grid.rowList.filter((row) => row instanceof IgxRowDirective)
             .map((row) => {
-                if (row.cells) {
-                    return row.cells.filter((cell) => cell.columnIndex === this.index);
+                if (row._cells) {
+                    return row._cells.filter((cell) => cell.columnIndex === this.index);
                 }
             }).reduce((a, b) => a.concat(b), []);
     }
+
     /**
      * Gets the column visible index.
      * If the column is not visible, returns `-1`.
@@ -2247,12 +2263,12 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
         const range = this.grid.document.createRange();
         const largest = new Map<number, number>();
 
-        if (this.cells.length > 0) {
+        if (this._cells.length > 0) {
             const cellsContentWidths = [];
-            this.cells.forEach((cell) => cellsContentWidths.push(cell.calculateSizeToFit(range)));
+            this._cells.forEach((cell) => cellsContentWidths.push(cell.calculateSizeToFit(range)));
 
             const index = cellsContentWidths.indexOf(Math.max(...cellsContentWidths));
-            const cellStyle = this.grid.document.defaultView.getComputedStyle(this.cells[index].nativeElement);
+            const cellStyle = this.grid.document.defaultView.getComputedStyle(this._cells[index].nativeElement);
             const cellPadding = parseFloat(cellStyle.paddingLeft) + parseFloat(cellStyle.paddingRight) +
                 parseFloat(cellStyle.borderLeftWidth) + parseFloat(cellStyle.borderRightWidth);
 

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

@@ -0,0 +1,21 @@
+import { IgxColumnComponent } from '../columns/column.component';
+import { IgxGridComponent } from '../grid/grid.component';
+import { IgxHierarchicalGridComponent } from '../hierarchical-grid/hierarchical-grid.component';
+import { IgxTreeGridComponent } from '../tree-grid/tree-grid.component';
+import { RowType } from './row.interface';
+
+export interface CellType {
+	value: any;
+	editValue: any;
+	selected: boolean;
+	active: boolean;
+	editable: boolean;
+	editMode: boolean;
+	column: IgxColumnComponent;
+	row: RowType;
+	grid: IgxGridComponent | IgxTreeGridComponent | IgxHierarchicalGridComponent;
+	cellID: { rowID: any; columnID: number; rowIndex: number };
+	width: string;
+	update: (value: any) => void;
+}
+

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

@@ -44,7 +44,6 @@ export interface ColumnType {
     width: string;
     topLevelParent?: ColumnType;
     parent?: ColumnType;
-    hasLastPinnedChildColumn: boolean;
     pipeArgs: IColumnPipeArgs;
     hasNestedPath: boolean;
     defaultTimeFormat: string;