Merge pull request #8191 from IgniteUI/mdragnev/add-row-transactions

ChronosSF · web-flow · commit 341b280c8050 · 2020-09-30T19:11:33.000+03:00
Assign 'fake' id to the newly added row so that transactions could work
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,21 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
     - Added *getRowData(rowSelector)* method that returns an object that represents the data that is contained in the specified row component.
+    - Added ability to spawn row adding UI through exoposed methods. Note that rowEditing should be enabled.
+        - `beginAddRow` method which starts the adding row UI.
+        - `beginAddChild` method which starts the adding child UI.
+        ```typescript
+        this.grid.beginAddRow(rowID);
+        ```
+        - Added an input properties to `IgxGridEditingActions` component to show/hide add row and add child buttons which trigger the UI based on context expression.
+        ```html
+        <igx-tree-grid [rowEditing]="true">
+            <igx-action-strip #actionStrip>
+                <igx-grid-editing-actions [addRow]="true" [addChild]="actionStrip.context.level < 3">
+                </igx-grid-editing-actions>
+            </igx-action-strip>
+        </igx-tree-grid>
+        ```
 - ` IGX_INPUT_GROUP_TYPE` injection token
     - Allows for setting an input group `type` on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a `type`.
 - ` IgxExcelExporterService`
diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts
@@ -148,11 +148,21 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
     public update_add_cell(cell: IgxCell, value: any) {
         cell.editValue = value;
 
-        if (isEqual(cell.value, cell.editValue)) {
-            return;
+        const args = cell.createEditEventArgs();
+        this.grid.onCellEdit.emit(args);
+
+        if (args.cancel) {
+            return args;
+        }
+
+        if (isEqual(args.oldValue, args.newValue)) {
+            return args;
         }
         const data = cell.rowData;
-        this.updateData(this.grid, cell.id.rowID, data, cell.rowData, reverseMapper(cell.column.field, cell.editValue));
+        mergeObjects(data, reverseMapper(cell.column.field, args.newValue));
+        const doneArgs = cell.createDoneEditEventArgs(args.newValue);
+        doneArgs.rowData = data;
+        this.grid.cellEditDone.emit(doneArgs);
     }
 
     update_cell(cell: IgxCell, value: any) {
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -178,13 +178,13 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * @memberof IgxGridCellComponent
      */
     get template(): TemplateRef<any> {
-        if (this.grid.rowEditable && this.row.addRow) {
-            return this.addMode ? this.inlineEditorTemplate : this.addRowCellTemplate;
-        }
-        if (this.editMode) {
+        if (this.editMode || this.addMode) {
             const inlineEditorTemplate = this.column.inlineEditorTemplate;
             return inlineEditorTemplate ? inlineEditorTemplate : this.inlineEditorTemplate;
         }
+        if (this.grid.rowEditable && this.row.addRow) {
+            return this.addRowCellTemplate;
+        }
         if (this.cellTemplate) {
             return this.cellTemplate;
         }
diff --git a/projects/igniteui-angular/src/lib/grids/common/events.ts b/projects/igniteui-angular/src/lib/grids/common/events.ts
@@ -33,6 +33,7 @@ export interface IGridEditDoneEventArgs extends IBaseEventArgs {
     event?: Event;
     column?: ColumnType;
     owner?: IgxGridBaseDirective & GridType;
+    isAddRow?: boolean;
 }
 
 export interface IGridEditEventArgs extends CancelableEventArgs, IGridEditDoneEventArgs {
diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts
@@ -374,6 +374,7 @@ export class IgxGridAddRowPipe implements PipeTransform {
 
         const row = {...collection[parentIndex]};
         Object.keys(row).forEach(key => row[key] = undefined);
+        row[grid.primaryKey] = grid.generateRowID();
         const rec = {
             recordRef: row,
             addRow: true
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -150,6 +150,9 @@ import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
 import { IgxRowDragGhostDirective, IgxDragIndicatorIconDirective } from './row-drag.directive';
 import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/grid.excel-style-filtering.component';
 import { IgxSnackbarComponent } from '../snackbar/snackbar.component';
+import { v4 as uuidv4 } from 'uuid';
+
+let FAKE_ROW_ID = -1;
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
@@ -3103,6 +3106,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.columnList.forEach(column => column.resetCaches());
     }
 
+    /**
+     * @hidden @internal
+     */
+    public generateRowID(): string | number {
+        const primaryColumn = this.columnList.find(col => col.field === this.primaryKey);
+        const idType = primaryColumn ? primaryColumn.dataType : this.data.length ? typeof (this.data[0][this.primaryKey]) : 'string';
+        return idType === 'string' ? uuidv4() : FAKE_ROW_ID--;
+    }
+
     /**
      * @hidden
      * @internal
@@ -6549,7 +6561,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (commit) {
             this.onRowAdded.subscribe(rowData => {
                 // A check whether the row is in the current view
-                const index = this.dataView.findIndex(data => data === rowData);
+                const index = this.dataView.findIndex(data => data[this.primaryKey] === rowData[this.primaryKey]);
                 const shouldScroll = this.navigation.shouldPerformVerticalScroll(index, 0);
                 const showIndex = shouldScroll ? index : -1;
                 this.showSnackbarFor(showIndex);
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
@@ -0,0 +1,114 @@
+import { IgxGridModule, IgxGridComponent } from './public_api';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { async, TestBed, fakeAsync } from '@angular/core/testing';
+import { configureTestSuite } from '../../test-utils/configure-suite';
+import { DebugElement } from '@angular/core';
+import { GridFunctions } from '../../test-utils/grid-functions.spec';
+import {
+    IgxAddRowComponent
+} from '../../test-utils/grid-samples.spec';
+
+import { By } from '@angular/platform-browser';
+import { IgxActionStripComponent } from '../../action-strip/action-strip.component';
+import { IgxActionStripModule } from '../../action-strip/action-strip.module';
+import { UIInteractions } from '../../test-utils/ui-interactions.spec';
+
+describe('IgxGrid - Row Adding #grid', () => {
+        let fixture;
+        let grid: IgxGridComponent;
+        let gridContent: DebugElement;
+        let actionStrip: IgxActionStripComponent;
+    configureTestSuite();
+    beforeAll(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                IgxAddRowComponent
+            ],
+            imports: [
+                NoopAnimationsModule,
+                IgxActionStripModule,
+                IgxGridModule]
+        }).compileComponents();
+    }));
+
+    describe('General tests', () => {
+        beforeEach(fakeAsync(/** height/width setter rAF */() => {
+            fixture = TestBed.createComponent(IgxAddRowComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+            gridContent = GridFunctions.getGridContent(fixture);
+            actionStrip = fixture.componentInstance.actionStrip;
+        }));
+
+        it('Should be able to enter add row mode on action strip click', () => {
+            const row = grid.rowList.first;
+            actionStrip.show(row);
+            fixture.detectChanges();
+            const addRowIcon = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`))[1];
+            addRowIcon.parent.triggerEventHandler('click', new Event('click'));
+            fixture.detectChanges();
+            const addRow = grid.getRowByIndex(1);
+            expect(addRow.addRow).toBeTrue();
+        });
+
+        it('Should be able to enter add row mode through the exposed API method (w/ and w/o rowID)', () => {
+            grid.beginAddRow();
+            fixture.detectChanges();
+            let addRow = grid.getRowByIndex(1);
+            expect(addRow.addRow).toBeTrue();
+
+            UIInteractions.triggerEventHandlerKeyDown('escape', gridContent);
+            fixture.detectChanges();
+            addRow = grid.getRowByIndex(1);
+            expect(addRow.addRow).toBeFalse();
+
+            grid.beginAddRow('ANATR');
+            fixture.detectChanges();
+            addRow = grid.getRowByIndex(2);
+            expect(addRow.addRow).toBeTrue();
+        });
+
+        it('Should display the banner above the row if there is no room underneath it', () => {
+            grid.paging = true;
+            grid.perPage = 7;
+            fixture.detectChanges();
+
+            const lastRow = grid.rowList.last;
+            const lastRowIndex = lastRow.index;
+            actionStrip.show(lastRow);
+            fixture.detectChanges();
+
+            const addRowIcon = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`))[1];
+            addRowIcon.parent.triggerEventHandler('click', new Event('click'));
+            fixture.detectChanges();
+
+
+            const addRow = grid.getRowByIndex(lastRowIndex + 1);
+            expect(addRow.addRow).toBeTrue();
+
+            const banner = GridFunctions.getRowEditingOverlay(fixture);
+            fixture.detectChanges();
+            const bannerBottom = banner.getBoundingClientRect().bottom;
+            const addRowTop = addRow.nativeElement.getBoundingClientRect().top;
+
+            // The banner appears above the row
+            expect(bannerBottom).toBeLessThanOrEqual(addRowTop);
+
+            // No much space between the row and the banner
+            expect(addRowTop - bannerBottom).toBeLessThan(2);
+        });
+
+        it('Should not be able to enter add row mode when rowEditing is disabled', () => {
+            grid.rowEditable = false;
+            fixture.detectChanges();
+
+            grid.beginAddRow();
+            fixture.detectChanges();
+
+            const banner = GridFunctions.getRowEditingOverlay(fixture);
+            expect(banner).toBeNull();
+            expect(grid.getRowByIndex(1).addRow).toBeFalse();
+        });
+
+    });
+});
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts
@@ -156,7 +156,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 rowData: initialRowData,
                 oldValue: row.rowData,
                 cancel: false,
-                owner: grid
+                owner: grid,
+                isAddRow: row.addRow
             };
             expect(grid.onCellEditEnter.emit).toHaveBeenCalledWith(cellArgs);
             expect(grid.onRowEditEnter.emit).toHaveBeenCalledWith(rowArgs);
@@ -183,7 +184,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 newValue: null,
                 oldValue: row.rowData,
                 cancel: false,
-                owner: grid
+                owner: grid,
+                isAddRow: row.addRow
             };
             expect(grid.onCellEditCancel.emit).toHaveBeenCalledWith(cellArgs);
             expect(grid.onRowEditCancel.emit).toHaveBeenCalledWith(rowArgs);
@@ -213,7 +215,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 newValue: Object.assign({}, row.rowData, { ProductName: newCellValue }),
                 oldValue: row.rowData,
                 cancel: false,
-                owner: grid
+                owner: grid,
+                isAddRow: row.addRow
             };
 
             const cellDoneArgs: IGridEditDoneEventArgs = {
@@ -231,7 +234,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 rowData: updatedRowData, // with rowEditable - IgxGridRowEditingComponent
                 oldValue: row.rowData,
                 newValue: Object.assign({}, row.rowData, { ProductName: newCellValue }),
-                owner: grid
+                owner: grid,
+                isAddRow: row.addRow
             };
             UIInteractions.triggerEventHandlerKeyDown('enter', gridContent);
 
@@ -1604,7 +1608,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 newValue: Object.assign({}, initialData, { ProductName: 'New Name' }),
                 oldValue: initialData,
                 cancel: false,
-                owner: grid
+                owner: grid,
+                isAddRow: false
             });
         });
 
@@ -1641,7 +1646,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 newValue: Object.assign({}, initialData, { ProductName: 'New Name' }),
                 oldValue: initialData,
                 cancel: true,
-                owner: grid
+                owner: grid,
+                isAddRow: false
             });
 
             // Enter cell edit mode again
@@ -1663,7 +1669,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 newValue: Object.assign({}, initialData, { ProductName: 'New Name' }),
                 oldValue: initialData,
                 cancel: true,
-                owner: grid
+                owner: grid,
+                isAddRow: false
             });
         });
 
@@ -1692,7 +1699,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 newValue: null,
                 oldValue: initialData,
                 cancel: false,
-                owner: grid
+                owner: grid,
+                isAddRow: false
             });
         });
 
@@ -1730,7 +1738,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 newValue: null,
                 oldValue: initialData,
                 cancel: true,
-                owner: grid
+                owner: grid,
+                isAddRow: false
             });
 
             // Enter cell edit mode again
@@ -1753,7 +1762,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 newValue: null,
                 oldValue: initialData,
                 cancel: true,
-                owner: grid
+                owner: grid,
+                isAddRow: false
             });
         });
 
@@ -1777,7 +1787,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 rowData: initialData,
                 oldValue: initialData,
                 cancel: false,
-                owner: grid
+                owner: grid,
+                isAddRow: false
             });
         });
 
@@ -1804,7 +1815,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 rowData: initialData,
                 oldValue: initialData,
                 cancel: true,
-                owner: grid
+                owner: grid,
+                isAddRow: false
             });
         });
 
@@ -1834,7 +1846,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 newValue: Object.assign({}, initialData, { ProductName: 'New Name' }),
                 oldValue: initialData,
                 cancel: false,
-                owner: grid
+                owner: grid,
+                isAddRow: false
             });
         });
 
@@ -1863,7 +1876,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 newValue: null,
                 oldValue: initialData,
                 cancel: false,
-                owner: grid
+                owner: grid,
+                isAddRow: false
             });
         });
 
@@ -2087,7 +2101,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 rowData: updatedRowData, // with rowEditable&Transactions - IgxGridRowEditingTransactionComponent
                 oldValue: row.rowData,
                 newValue: Object.assign({}, row.rowData, { ProductName: newCellValue }),
-                owner: grid
+                owner: grid,
+                isAddRow: row.addRow
             };
 
             UIInteractions.triggerEventHandlerKeyDown('enter', gridContent);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.crud.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.crud.spec.ts
diff --git a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,7 @@ export interface IGridEditDoneEventArgs extends IBaseEventArgs {`
`33`	`33`	`event?: Event;`
`34`	`34`	`column?: ColumnType;`
`35`	`35`	`owner?: IgxGridBaseDirective & GridType;`
	`36`	`+ isAddRow?: boolean;`
`36`	`37`	`}`
`37`	`38`
`38`	`39`	`export interface IGridEditEventArgs extends CancelableEventArgs, IGridEditDoneEventArgs {`