Merge pull request #10070 from IgniteUI/sstoychev/add-row-api

ChronosSF · web-flow · commit 5000fff62959 · 2021-09-13T16:51:02.000+03:00
feat(add-row): implementing context-free beginAddRow method #9675 - master
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,18 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - Added two public methods that spawn the add row UI for an arbitrary record in the current data view. One that accepts a rowID to use as the row the UI spawns under and the other accepting an index that has a distinct implementation for `IgxTreeGrid`. Please, refer to the official documentation for more information:[Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-adding) and [Tree Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/row-adding).
+
+        _Note:_ That the new record is still added at the end of the data view, after the end-user submits it.
+        ```typescript
+        this.grid.beginAddRowById('ALFKI');             // spawns the add row UI under the row with PK 'ALFKI'
+        this.grid.beginAddRowById(null);                // spawns the add row UI as the first record
+        this.grid.beginAddRowByIndex(10);               // spawns the add row UI at index 10
+        this.grid.beginAddRowByIndex(0);                // spawns the add row UI as the first record
+        this.treeGrid.beginAddRowById('ALFKI', true);   // spawns the add row UI to add a child for the row with PK 'ALFKI'
+        this.treeGrid.beginAddRowByIndex(10, true);     // spawns the add row UI to add a child for the row at index 10
+        this.treeGrid.beginAddRowByIndex(null);         // spawns the add row UI as the first record
+        ```
     - Added capability to restore the state of multi column headers with `IgxGridStateDirective`.
 
 ## 12.1.3
@@ -69,7 +81,7 @@ All notable changes for each version of this project will be documented in this
         - `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.
+    - `cell` in `IGridCellEventArgs` is now `CellType`. `IGridCellEventArgs` are emitted 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.
 
diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts
@@ -96,6 +96,21 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
         return this.grid.rowList.find((row) => row.index === rowIndex);
     }
 
+    /**
+     * Gets the rowID of the record at the specified data view index
+     *
+     * @param index
+     * @param dataCollection
+     */
+    public get_rec_id_by_index(index: number, dataCollection?: any[]): any {
+        dataCollection = dataCollection || this.grid.data;
+        if (index >= 0 && index < dataCollection.length) {
+            const rec = dataCollection[index];
+            return this.grid.primaryKey ? rec[this.grid.primaryKey] : rec;
+        }
+        return null;
+    }
+
     public get_cell_by_key(rowSelector: any, field: string): IgxGridCellComponent {
         const row = this.get_row_by_key(rowSelector);
         if (row && row.cells) {
@@ -393,6 +408,17 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
         return this.grid.primaryKey ? this.getRowData(rowID) : rowID;
     }
 
+    /**
+     * Returns the index of the record in the data view by pk or -1 if not found or primaryKey is not set.
+     *
+     * @param pk
+     * @param dataCollection
+     */
+    public get_rec_index_by_id(pk: string | number, dataCollection?: any[]): number {
+        dataCollection = dataCollection || this.grid.data;
+        return this.grid.primaryKey ? dataCollection.findIndex(rec => rec[this.grid.primaryKey] === pk) : -1;
+    }
+
     public allow_expansion_state_change(rowID, expanded) {
         return this.grid.expansionStates.get(rowID) !== expanded;
     }
diff --git a/projects/igniteui-angular/src/lib/grids/common/crud.service.ts b/projects/igniteui-angular/src/lib/grids/common/crud.service.ts
@@ -436,9 +436,8 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
      * @hidden @internal
      */
     public createAddRowParent(row: IgxRowDirective<IgxGridBaseDirective & GridType>, newRowAsChild?: boolean) {
-        const rowIndex = row ? row.index : this.grid.rowList.length - 1;
-        const rowId = row ? row.rowID : (rowIndex >= 0 ? this.grid.rowList.last.rowID : null);
-
+        const rowIndex = row ? row.index : -1;
+        const rowId = row ? row.rowID : null;
         const isInPinnedArea = this.grid.isRecordPinnedByViewIndex(rowIndex);
         const pinIndex = this.grid.pinnedRecords.findIndex(x => x[this.primaryKey] === rowId);
         const unpinIndex = this.grid.getUnpinnedIndexById(rowId);
@@ -580,6 +579,7 @@ export class IgxGridCRUDService extends IgxRowAddCrudState {
         this.grid.navigateTo(this.row.index, -1);
         const dummyRow = this.grid.gridAPI.get_row_by_index(this.row.index);
         dummyRow.triggerAddAnimation();
+        dummyRow.cdr.detectChanges();
         dummyRow.addAnimationEnd.pipe(first()).subscribe(() => {
             const cell = dummyRow.cells.find(c => c.editable);
             if (cell) {
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -5966,6 +5966,92 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.crudService.endEdit(commit, event);
     }
 
+    /**
+     * Enters add mode by spawning the UI under the specified row by rowID.
+     *
+     * @remarks
+     * If null is passed as rowID, the row adding UI is spawned as the first record in the data view
+     * @remarks
+     * Spawning the UI to add a child for a record only works if you provide a rowID
+     * @example
+     * ```typescript
+     * this.grid.beginAddRowById('ALFKI');
+     * this.grid.beginAddRowById('ALFKI', true);
+     * this.grid.beginAddRowById(null);
+     * ```
+     * @param rowID - The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view
+     * @param asChild - Whether the record should be added as a child. Only applicable to igxTreeGrid.
+     */
+    public beginAddRowById(rowID: any, asChild?: boolean): void {
+        let index = rowID;
+        if (rowID == null) {
+            if (asChild) {
+                console.warn('The record cannot be added as a child to an unspecified record.');
+                return;
+            }
+            index = 0;
+        } else {
+            // find the index of the record with that PK
+            index = this.gridAPI.get_rec_index_by_id(rowID, this.dataView);
+            rowID = index;
+            if (index === -1) {
+                console.warn('No row with the specified ID was found.');
+                return;
+            }
+        }
+        if (!this.dataView.length) {
+            this.beginAddRowForIndex(rowID, asChild);
+            return;
+        }
+        // check if the index is valid - won't support anything outside the data view
+        if (index >= 0 && index < this.dataView.length) {
+            // check if the index is in the view port
+            if ((index < this.virtualizationState.startIndex ||
+                index >= this.virtualizationState.startIndex + this.virtualizationState.chunkSize) &&
+                !this.isRecordPinnedByViewIndex(index)) {
+                this.verticalScrollContainer.chunkLoad
+                    .pipe(first(), takeUntil(this.destroy$))
+                    .subscribe(() => {
+                        this.beginAddRowForIndex(rowID, asChild);
+                    });
+                this.navigateTo(index);
+                this.notifyChanges(true);
+                return;
+            }
+            this.beginAddRowForIndex(rowID, asChild);
+        } else {
+            console.warn('The row with the specified PK or index is outside of the current data view.');
+        }
+    }
+
+    /**
+     * Enters add mode by spawning the UI at the specified index.
+     *
+     * @remarks
+     * Accepted values for index are integers from 0 to this.grid.dataView.length
+     * @example
+     * ```typescript
+     * this.grid.beginAddRowByIndex(0);
+     * ```
+     * @param index - The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
+     */
+    public beginAddRowByIndex(index: number): void {
+        if (index === 0) {
+            return this.beginAddRowById(null);
+        }
+        return this.beginAddRowById(this.gridAPI.get_rec_id_by_index(index - 1, this.dataView));
+    }
+
+    protected beginAddRowForIndex(index: number, asChild: boolean = false) {
+        const row: IgxRowDirective<IgxGridBaseDirective & GridType> = index == null ?
+            null : this.rowList.find(r => r.index === index);
+        if (row !== undefined) {
+            this.crudService.enterAddRowMode(row, asChild);
+        } else {
+            console.warn('No row with the specified PK or index was found.');
+        }
+    }
+
     protected switchTransactionService(val: boolean) {
         if (val) {
             this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.Base);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts
@@ -1,6 +1,6 @@
 import { IgxGridModule, IgxGridComponent } from './public_api';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { TestBed, fakeAsync } from '@angular/core/testing';
+import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { DebugElement } from '@angular/core';
 import { GridFunctions, GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
@@ -22,6 +22,8 @@ import { IgxGridRowComponent } from './grid-row.component';
 import { takeUntil, first } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
+const DEBOUNCETIME = 30;
+
 describe('IgxGrid - Row Adding #grid', () => {
         const GRID_ROW = 'igx-grid-row';
         const DISPLAY_CONTAINER = 'igx-display-container';
@@ -479,6 +481,35 @@ describe('IgxGrid - Row Adding #grid', () => {
 
             expect(grid.gridAPI.get_row_by_index(1).addRowUI).toBeTrue();
         });
+
+        it('Should scroll and start adding a row as the first one when using the public API method', async () => {
+            await wait(DEBOUNCETIME);
+            fixture.detectChanges();
+
+            grid.navigateTo(20, 0);
+
+            await wait(DEBOUNCETIME);
+            fixture.detectChanges();
+
+            grid.beginAddRowById(null);
+
+            await wait(DEBOUNCETIME);
+            fixture.detectChanges();
+
+            expect(grid.gridAPI.get_row_by_index(0).addRowUI).toBeTrue();
+        });
+
+        xit('Should scroll and start adding a row as for a row that is not in view', async () => {
+            await wait(DEBOUNCETIME);
+            fixture.detectChanges();
+
+            grid.beginAddRowById('FAMIA');
+
+            await wait(DEBOUNCETIME);
+            fixture.detectChanges();
+
+            expect(grid.gridAPI.get_row_by_index(8).addRowUI).toBeTrue();
+        });
     });
 
     describe('Exit add row mode tests', () => {
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts
@@ -169,6 +169,32 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
         return this.grid.records.get(rowID);
     }
 
+    /**
+     * Gets the rowID of the record at the specified data view index
+     *
+     * @param index
+     * @param dataCollection
+     */
+     public get_rec_id_by_index(index: number, dataCollection?: any[]): any {
+        dataCollection = dataCollection || this.grid.data;
+        if (index >= 0 && index < dataCollection.length) {
+            const rec = dataCollection[index];
+            return this.grid.primaryKey ? rec.data[this.grid.primaryKey] : rec.data;
+        }
+        return null;
+    }
+
+    /**
+     * Returns the index of the record in the data view by pk or -1 if not found or primaryKey is not set.
+     *
+     * @param pk
+     * @param dataCollection
+     */
+    public get_rec_index_by_id(pk: string | number, dataCollection?: any[]): number {
+        dataCollection = dataCollection || this.grid.data;
+        return this.grid.primaryKey ? dataCollection.findIndex(rec => rec.data[this.grid.primaryKey] === pk) : -1;
+    }
+
     public addRowToData(data: any, parentRowID?: any) {
         if (parentRowID !== undefined && parentRowID !== null) {
 
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
@@ -605,6 +605,32 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         this.notifyChanges();
     }
 
+    /**
+     * Enters add mode by spawning the UI with the context of the specified row by index.
+     *
+     * @remarks
+     * Accepted values for index are integers from 0 to this.grid.dataView.length
+     * @remarks
+     * When adding the row as a child, the parent row is the specified row.
+     * @remarks
+     * To spawn the UI on top, call the function with index = null or a negative number.
+     * In this case trying to add this row as a child will result in error.
+     * @example
+     * ```typescript
+     * this.grid.beginAddRowByIndex(10);
+     * this.grid.beginAddRowByIndex(10, true);
+     * this.grid.beginAddRowByIndex(null);
+     * ```
+     * @param index - The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
+     * @param asChild - Whether the record should be added as a child. Only applicable to igxTreeGrid.
+     */
+    public beginAddRowByIndex(index: number, asChild?: boolean): void {
+        if (index === null || index < 0) {
+            return this.beginAddRowById(null, asChild);
+        }
+        return this.beginAddRowById(this.gridAPI.get_rec_id_by_index(index, this.dataView), asChild);
+    }
+
     /**
      * @hidden
      */
diff --git a/src/app/grid-add-row/grid-add-row.sample.html b/src/app/grid-add-row/grid-add-row.sample.html
@@ -43,6 +43,17 @@ <h1 igxCardHeaderTitle>Settings</h1>
             <igx-select [(ngModel)]="perPage">
                 <igx-select-item *ngFor="let value of selectOptions" [value]="value">{{value}}</igx-select-item>
             </igx-select>
+            <button igxButton="raised" (click)="beginAddRowAtIndex(indexInput.value)">Add Row At Index</button>
+            <igx-input-group>
+                <input igxInput name="index" type="number" #indexInput/>
+                <label igxLabel for="index">Index</label>
+            </igx-input-group>
+            <button igxButton="raised" (click)="beginAddRowStart()">Add Row At Start</button>
+            <igx-input-group>
+                <input igxInput name="string" type="string" #stringInput value="CENTC"/>
+                <label igxLabel for="string">PK</label>
+            </igx-input-group>
+            <button igxButton="raised" (click)="beginAddRowById(stringInput.value)">Add Row For ID</button>
         </igx-card-content>
     </igx-card>
 </div>
diff --git a/src/app/grid-add-row/grid-add-row.sample.ts b/src/app/grid-add-row/grid-add-row.sample.ts
@@ -1,11 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IgxGridComponent } from 'igniteui-angular';
 
 @Component({
     selector: 'app-grid-add-row',
     styleUrls: ['grid-add-row.sample.scss'],
     templateUrl: `grid-add-row.sample.html`
 })
 export class GridAddRowSampleComponent implements OnInit {
+
+    @ViewChild(IgxGridComponent)
+    public grid: IgxGridComponent;
+
     public data: any[];
     public dataFull: any[];
     public columns: any[];
@@ -69,4 +74,17 @@ export class GridAddRowSampleComponent implements OnInit {
         this.data = [];
         /* eslint-enable max-len */
     }
+
+    public beginAddRowAtIndex(index: string) {
+        const numeric = parseInt(index, 10);
+        this.grid.beginAddRowByIndex(numeric);
+    }
+
+    public beginAddRowStart() {
+        this.grid.beginAddRowById(null);
+    }
+
+    public beginAddRowById(string: string) {
+        this.grid.beginAddRowById(string);
+    }
 }
diff --git a/src/app/tree-grid-add-row/tree-grid-add-row.sample.html b/src/app/tree-grid-add-row/tree-grid-add-row.sample.html
diff --git a/src/app/tree-grid-add-row/tree-grid-add-row.sample.scss b/src/app/tree-grid-add-row/tree-grid-add-row.sample.scss
diff --git a/src/app/tree-grid-add-row/tree-grid-add-row.sample.ts b/src/app/tree-grid-add-row/tree-grid-add-row.sample.ts
