Fix new row to be added on correct position and to enter edit mode - 15.0 (#12412)

* fix(tree-grid): add new row on correct position

* refactor(tree-grid): add missing new line

Author: MonikaKirkova

projects/igniteui-angular/src/lib/grids/common/crud.service.ts

@@ -634,7 +634,9 @@ export class IgxGridCRUDService extends IgxRowAddCrudState {
 
         this.grid.navigateTo(this.row.index, -1);
         // when selecting the dummy row we need to adjust for top pinned rows
-        const indexAdjust = this.grid.isRowPinningToTop && !this.addRowParent.isPinned ? this.grid.pinnedRows.length : 0;
+        const indexAdjust = this.grid.isRowPinningToTop ?
+            (!this.addRowParent.isPinned ? this.grid.pinnedRows.length : 0) :
+            (!this.addRowParent.isPinned ? 0 : this.grid.unpinnedRecords.length);
 
         // TODO: Type this without shoving a bunch of internal properties in the row type
         const dummyRow = this.grid.gridAPI.get_row_by_index(this.row.index + indexAdjust) as any;

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts

@@ -2,7 +2,7 @@
 import { TestBed, fakeAsync, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IgxTreeGridModule, IgxTreeGridComponent } from './public_api';
-import { IgxTreeGridEditActionsComponent } from '../../test-utils/tree-grid-components.spec';
+import { IgxTreeGridEditActionsComponent, IgxTreeGridEditActionsPinningComponent } from '../../test-utils/tree-grid-components.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxActionStripModule, IgxActionStripComponent } from '../../action-strip/public_api';
@@ -24,7 +24,8 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => {
     beforeAll(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
-                IgxTreeGridEditActionsComponent
+                IgxTreeGridEditActionsComponent,
+                IgxTreeGridEditActionsPinningComponent
             ],
             imports: [IgxTreeGridModule, NoopAnimationsModule, IgxActionStripModule]
         })
@@ -128,5 +129,70 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => {
 
             expect(treeGrid.rowList.length).toBe(1);
         });
+
+        it('should add row on correct position and enter edit mode from pinned row - pinning position: Top', () => {
+            fix = TestBed.createComponent(IgxTreeGridEditActionsPinningComponent);
+            fix.detectChanges();
+            treeGrid = fix.componentInstance.treeGrid;
+            actionStrip = fix.componentInstance.actionStrip;
+
+            treeGrid.pinRow(1);
+            treeGrid.pinRow(6);
+
+            expect(treeGrid.getRowByKey(1).pinned).toBeTrue();
+            expect(treeGrid.getRowByKey(6).pinned).toBeTrue();
+
+            actionStrip.show(treeGrid.rowList.toArray()[1]);
+            fix.detectChanges();
+
+            const editActions = fix.debugElement.queryAll(By.css(`igx-grid-action-button`));
+
+            expect(editActions[3].componentInstance.iconName).toBe('add-row');
+            const addRowBtn = editActions[3].componentInstance;
+            addRowBtn.actionClick.emit();
+            fix.detectChanges();
+            endTransition();
+
+            let addRow = treeGrid.gridAPI.get_row_by_index(2);
+            expect(addRow.addRowUI).toBeTrue();
+            expect(addRow.inEditMode).toBeTrue();
+
+            treeGrid.gridAPI.crudService.endEdit(true);
+            fix.detectChanges();
+        });
+
+        it('should add row on correct position and enter edit mode from pinned row - pinning position: Bottom', () => {
+            fix = TestBed.createComponent(IgxTreeGridEditActionsPinningComponent);
+            fix.detectChanges();
+            treeGrid = fix.componentInstance.treeGrid;
+            actionStrip = fix.componentInstance.actionStrip;
+
+            treeGrid.pinning = fix.componentInstance.pinningConfig;
+            fix.detectChanges();
+
+            treeGrid.pinRow(1);
+            treeGrid.pinRow(6);
+
+            expect(treeGrid.getRowByKey(1).pinned).toBeTrue();
+            expect(treeGrid.getRowByKey(6).pinned).toBeTrue();
+
+            actionStrip.show(treeGrid.rowList.last);
+            fix.detectChanges();
+
+            const editActions = fix.debugElement.queryAll(By.css(`igx-grid-action-button`));
+
+            expect(editActions[3].componentInstance.iconName).toBe('add-row');
+            const addRowBtn = editActions[3].componentInstance;
+            addRowBtn.actionClick.emit();
+            fix.detectChanges();
+            endTransition();
+
+            let addRow = treeGrid.gridAPI.get_row_by_index(10);
+            expect(addRow.addRowUI).toBeTrue();
+            expect(addRow.inEditMode).toBeTrue();
+
+            treeGrid.gridAPI.crudService.endEdit(true);
+            fix.detectChanges();
+        });
     });
 });

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

@@ -315,7 +315,12 @@ export class IgxTreeGridAddRowPipe implements PipeTransform {
         }
         const copy = collection.slice(0);
         const rec = (this.grid.crudService.row as IgxAddRow).recordRef;
-        copy.splice(this.grid.crudService.row.index, 0, rec);
+        if (this.grid.crudService.addRowParent.isPinned) {
+            const parentRowIndex = copy.findIndex(record => record.rowID === this.grid.crudService.addRowParent.rowID);
+            copy.splice(parentRowIndex + 1, 0, rec);
+        } else {
+            copy.splice(this.grid.crudService.row.index, 0, rec);            
+        }
         this.grid.records.set(rec.key, rec);
         return copy;
     }

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

@@ -1,10 +1,10 @@
 import { Component, ViewChild, OnInit } from '@angular/core';
 import { IgxTreeGridComponent } from '../grids/tree-grid/tree-grid.component';
 import { SampleTestData } from './sample-test-data.spec';
-import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxSummaryResult } from '../grids/public_api';
+import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxSummaryResult, IPinningConfig } from '../grids/public_api';
 import { DisplayDensity } from '../core/displayDensity';
 import { IgxActionStripComponent } from '../action-strip/action-strip.component';
-import { DefaultSortingStrategy } from 'igniteui-angular';
+import { DefaultSortingStrategy, RowPinningPosition } from 'igniteui-angular';
 import { IGroupingExpression } from '../data-operations/grouping-expression.interface';
 import { IgxTreeGridGroupByAreaComponent } from '../grids/grouping/tree-grid-group-by-area.component';
 
@@ -1025,3 +1025,26 @@ export class IgxTreeGridPrimaryForeignKeyCascadeSelectionComponent {
     public actionStrip: IgxActionStripComponent;
     public data = SampleTestData.employeeSmallPrimaryForeignKeyTreeData();
 }
+
+@Component({
+    template: `
+    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" width="900px" height="600px" [rowEditable]="true">
+        <igx-column [field]="'ID'" dataType="number"></igx-column>
+        <igx-column [field]="'ParentID'" dataType="number"></igx-column>
+        <igx-column [field]="'Name'" dataType="string"></igx-column>
+        <igx-column [field]="'JobTitle'" dataType="string"></igx-column>
+        <igx-column [field]="'Age'" dataType="number"></igx-column>
+        <igx-action-strip #actionStrip>
+        <igx-grid-pinning-actions></igx-grid-pinning-actions>
+        <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
+    </igx-action-strip>
+    </igx-tree-grid>
+    `
+})
+export class IgxTreeGridEditActionsPinningComponent {
+    @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent;
+    @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
+    public actionStrip: IgxActionStripComponent;
+    public data = SampleTestData.employeePrimaryForeignKeyTreeData();
+    public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom };
+}