Merge branch 'master' into mdragnev/add-row-tests

mddragnev · web-flow · commit 31eb5c300933 · 2020-10-09T13:08:51.000+03:00
diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts
@@ -104,7 +104,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
         const context = this.strip.context;
         const grid = context.grid;
         if (!grid.rowEditable) {
-            console.warn('The grid must be in row edit mode to perform row adding!');
+            console.warn('The grid must use row edit mode to perform row adding! Please set rowEditable to true.');
             return;
         }
         grid.beginAddRowByIndex(context.rowID, context.index, asChild);
diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts
@@ -370,9 +370,9 @@ export class IgxGridAddRowPipe implements PipeTransform {
 
     constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) { }
 
-    transform(collection: any, pipeTrigger: number) {
+    transform(collection: any, isPinned = false, pipeTrigger: number) {
         const grid = this.gridAPI.grid;
-        if (!grid.rowEditable || !grid.addRowParent || grid.cancelAddMode) {
+        if (!grid.rowEditable || !grid.addRowParent || grid.cancelAddMode || isPinned !== grid.addRowParent.isPinned) {
             return collection;
         }
         const copy = collection.slice(0);
@@ -383,7 +383,11 @@ export class IgxGridAddRowPipe implements PipeTransform {
             addRow: true
         };
         copy.splice(parentIndex + 1, 0, rec);
-        grid.unpinnedRecords = copy;
+        if (isPinned) {
+            grid.pinnedRecords = copy;
+        } else {
+            grid.unpinnedRecords = copy;
+        }
         return copy;
     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -4082,33 +4082,43 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden @internal
      */
     public beginAddRowByIndex(rowID: any, index: number, asChild?: boolean) {
+        if (!this.rowEditable) {
+            console.warn('The grid must use row edit mode to perform row adding! Please set rowEditable to true.');
+            return;
+        }
         this.endEdit(true);
         this.cancelAddMode = false;
+        const isInPinnedArea = this.isRecordPinnedByViewIndex(index);
+        const pinIndex = this.pinnedRecords.findIndex(x => x[this.primaryKey] === rowID);
+        const unpinIndex = this.getUnpinnedIndexById(rowID);
 
         if (this.expansionStates.get(rowID)) {
             this.collapseRow(rowID);
         }
 
         this.addRowParent = {
             rowID: rowID,
-            index: index,
-            asChild: asChild
+            index: isInPinnedArea ? pinIndex : unpinIndex,
+            asChild: asChild,
+            isPinned: isInPinnedArea
         };
-        this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
-            this.cdr.detectChanges();
-            const newRowIndex = this.addRowParent.index + 1;
-            // ensure adding row is in view.
-            const shouldScroll = this.navigation.shouldPerformVerticalScroll(newRowIndex, -1);
-            if (shouldScroll) {
-                this.navigateTo(newRowIndex, -1);
-            }
-            const row = this.getRowByIndex(newRowIndex);
-            const cell = row.cells.find(c => c.editable);
+        this._pipeTrigger++;
+        this.cdr.detectChanges();
+        if (isInPinnedArea) {
+            this.calculateGridHeight();
+        }
+        const newRowIndex = this.addRowParent.index + 1;
+        // ensure adding row is in view.
+        const shouldScroll = this.navigation.shouldPerformVerticalScroll(newRowIndex, -1);
+        if (shouldScroll) {
+            this.navigateTo(newRowIndex, -1);
+        }
+        const row = this.getRowByIndex(index + 1);
+        const cell = row.cells.find(c => c.editable);
+        if (cell) {
             cell.setEditMode(true);
             cell.activate();
-        });
-        this._pipeTrigger++;
-        this.notifyChanges();
+        }
     }
 
     /**
@@ -4404,6 +4414,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.endEdit(true);
         this.selectionService.clearHeaderCBState();
         this.summaryService.clearSummaryCache();
+        this.cdr.detectChanges();
     }
 
     // TODO: We have return values here. Move them to event args ??
@@ -6594,9 +6605,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             return;
         }
         if (commit) {
-            this.onRowAdded.pipe(first()).subscribe(rowData => {
+            this.onRowAdded.pipe(first()).subscribe((args: IRowDataEventArgs) => {
+                const rowData = args.data;
+                const pinnedIndex = this.pinnedRecords.findIndex(x => x[this.primaryKey] === rowData[this.primaryKey]);
                 // A check whether the row is in the current view
-                const viewIndex = this.findRecordIndexInView(rowData);
+                const viewIndex = pinnedIndex !== -1 ? pinnedIndex : this.findRecordIndexInView(rowData);
                 const dataIndex = this.filteredSortedData.findIndex(data => data[this.primaryKey] === rowData[this.primaryKey]);
                 const isInView = viewIndex !== -1 && !this.navigation.shouldPerformVerticalScroll(viewIndex, 0);
                 const showIndex = isInView ? -1 : dataIndex;
@@ -6605,6 +6618,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             this.gridAPI.submit_add_value();
             this.gridAPI.addRowToData(row.data, this.addRowParent.asChild ? this.addRowParent.rowID : undefined);
             this.crudService.endRowEdit();
+            if (this.addRowParent.isPinned) {
+                this.pinRow(row.id);
+            }
             this.addRowParent = null;
         } else {
             this.crudService.exitCellEdit();
@@ -6615,7 +6631,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this._pipeTrigger++;
         if (!this.cancelAddMode) {
             this.cdr.detectChanges();
-            this.onRowAdded.emit(row.data);
+            this.onRowAdded.emit({ data: row.data});
         }
     }
 
@@ -6640,6 +6656,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.dataView.findIndex(data => data[this.primaryKey] === rec[this.primaryKey]);
     }
 
+    protected getUnpinnedIndexById(id) {
+        return this.unpinnedRecords.findIndex(x => x[this.primaryKey] === id);
+    }
+
     /**
      * @hidden
      */
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
@@ -18,6 +18,7 @@ import { IgxStringFilteringOperand } from '../../data-operations/filtering-condi
 import { SortingDirection } from '../../data-operations/sorting-expression.interface';
 import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy';
 import { TransactionType } from '../../services/public_api';
+import { IgxGridRowComponent } from './grid-row.component';
 
 
 describe('IgxGrid - Row Adding #grid', () => {
@@ -27,7 +28,7 @@ describe('IgxGrid - Row Adding #grid', () => {
         let gridContent: DebugElement;
         let actionStrip: IgxActionStripComponent;
     configureTestSuite();
-    beforeAll(async(() => {
+    beforeAll( async(() => {
         TestBed.configureTestingModule({
             declarations: [
                 IgxAddRowComponent,
@@ -146,6 +147,51 @@ describe('IgxGrid - Row Adding #grid', () => {
             expect(grid.getRowByIndex(1).addRow).toBeFalse();
         });
 
+        it('Should allow adding row from pinned row.', () => {
+            let row = grid.getRowByIndex(0);
+            row.pin();
+            fixture.detectChanges();
+            expect(grid.pinnedRecords.length).toBe(1);
+
+            row = grid.getRowByIndex(0);
+            row.beginAddRow();
+            fixture.detectChanges();
+
+            // add row should be pinned
+            const addRow = grid.getRowByIndex(1) as IgxGridRowComponent;
+            expect(addRow.addRow).toBe(true);
+            expect(grid.pinnedRows[1]).toBe(addRow);
+
+            grid.endEdit(true);
+            fixture.detectChanges();
+
+            // added record should be pinned.
+            expect(grid.pinnedRecords.length).toBe(2);
+            expect(grid.pinnedRecords[1]).toBe(grid.data[grid.data.length - 1]);
+
+        });
+        it('Should allow adding row from ghost row.', () => {
+            const row = grid.getRowByIndex(0);
+            row.pin();
+            fixture.detectChanges();
+            expect(grid.pinnedRecords.length).toBe(1);
+
+            const ghostRow = grid.getRowByIndex(1);
+            ghostRow.beginAddRow();
+            fixture.detectChanges();
+
+            // add row should be unpinned
+            const addRow = grid.getRowByIndex(2);
+            expect(addRow.addRow).toBe(true);
+            expect(grid.pinnedRows.length).toBe(1);
+
+            grid.endEdit(true);
+            fixture.detectChanges();
+
+            // added record should be unpinned.
+            expect(grid.pinnedRecords.length).toBe(1);
+            expect(grid.unpinnedRecords[grid.unpinnedRecords.length - 1]).toBe(grid.data[grid.data.length - 1]);
+        });
         it('should navigate to added row on snackbar button click.', async() => {
             const rows = grid.rowList.toArray();
             const dataCount = grid.data.length;
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -117,7 +117,8 @@
         | visibleColumns:hasVisibleColumns
         | gridRowPinning:id:true:pipeTrigger
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
-        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
+        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true
+        | gridAddRow:true:pipeTrigger as pinnedData'>
             <div #pinContainer *ngIf='pinnedData.length > 0'
                 [ngClass]="{
                     'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,
@@ -141,7 +142,7 @@
         | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
         | gridDetails:hasDetails:expansionStates:pipeTrigger
         | gridRowPinning:id:false:pipeTrigger
-        | gridAddRow:pipeTrigger"
+        | gridAddRow:false:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight'
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
@@ -161,8 +162,8 @@
             <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [disabled]="disabledRow" [addRow]="isAddRow" #row>
             </igx-grid-row>
         </ng-template>
-        <ng-template #pinned_record_template let-rowIndex="index" let-rowData>
-            <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row #pinnedRow>
+        <ng-template #pinned_record_template let-rowIndex="index" let-rowData let-isAddRow="addRow">
+            <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [addRow]="isAddRow" #row #pinnedRow>
             </igx-grid-row>
         </ng-template>
         <ng-template #group_template let-rowIndex="index" let-rowData>
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -99,7 +99,8 @@
             | visibleColumns:hasVisibleColumns
             | gridRowPinning:id:true:pipeTrigger
             | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
-            | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData">
+            | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true
+            | gridAddRow:true:pipeTrigger as pinnedData">
                 <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'
                     [ngClass]="{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }"
                     [style.width.px]='calcWidth'>
@@ -120,7 +121,7 @@
         | gridHierarchicalPaging:page:perPage:id:pipeTrigger
         | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger
         | gridRowPinning:id:false:pipeTrigger
-        | gridAddRow:pipeTrigger"
+        | gridAddRow:false:pipeTrigger"
             [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" [igxForTrackBy]='trackChanges'
             #verticalScrollContainer (onChunkPreload)="dataLoading($event)">
@@ -136,8 +137,8 @@
             </igx-hierarchical-grid-row>
         </ng-template>
 
-        <ng-template #pinned_hierarchical_record_template let-rowIndex="index" let-rowData>
-            <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row #pinnedRow>
+        <ng-template #pinned_hierarchical_record_template let-rowIndex="index" let-rowData let-isAddRow="addRow">
+            <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [addRow]="isAddRow" #row #pinnedRow>
             </igx-hierarchical-grid-row>
         </ng-template>
         <ng-template #child_record_template let-rowIndex="index" let-rowData>
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
@@ -265,10 +265,6 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
                 }
             }
         } else {
-            if (this.grid.primaryKey && this.grid.foreignKey) {
-                const rowID = data[this.grid.foreignKey];
-                this.grid.summaryService.clearSummaryCache({rowID: rowID});
-            }
             super.addRowToData(data);
         }
     }
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts
@@ -50,7 +50,12 @@ export class IgxTreeGridRowComponent extends IgxRowDirective<IgxTreeGridComponen
      * @hidden
      */
     public get isRoot(): boolean {
-        return this.treeRow.level === 0;
+        let treeRec = this.treeRow;
+        const isPinnedArea = this.pinned && !this.disabled;
+        if (isPinnedArea) {
+            treeRec = this.grid.unpinnedRecords.find(x => x.data === this.rowData);
+        }
+        return treeRec.level === 0;
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -81,7 +81,8 @@
             | treeGridNormalizeRecord:pipeTrigger
             | gridRowPinning:id:true:pipeTrigger
             | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
-            | treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
+            | treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger:true
+            | gridAddRow:true:pipeTrigger as pinnedData'>
                 <div #pinContainer *ngIf='pinnedData.length > 0'
                     [ngClass]="{
                         'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,
@@ -106,7 +107,7 @@
         | treeGridPaging:page:perPage:id:pipeTrigger
         | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:id:pipeTrigger:summaryPipeTrigger
         | gridRowPinning:id:false:pipeTrigger
-        | gridAddRow:pipeTrigger"
+        | gridAddRow:false:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer>
             <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'
@@ -119,8 +120,8 @@
             <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [disabled]="disabledRow" [addRow]="isAddRow" #row>
             </igx-tree-grid-row>
         </ng-template>
-        <ng-template #pinned_record_template let-rowIndex="index" let-rowData>
-            <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" #row #pinnedRow>
+        <ng-template #pinned_record_template let-rowIndex="index" let-rowData let-isAddRow="addRow">
+            <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [addRow]="isAddRow" #row #pinnedRow>
             </igx-tree-grid-row>
         </ng-template>
         <ng-template #summary_template let-rowIndex="index" let-rowData>
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
@@ -439,6 +439,10 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         return this.dataView.findIndex(x => x.data[this.primaryKey] === rec[this.primaryKey]);
     }
 
+    protected getUnpinnedIndexById(id) {
+        return this.unpinnedRecords.findIndex(x => x.data[this.primaryKey] === id);
+    }
+
     private cloneMap(mapIn: Map<any, boolean>): Map<any, boolean> {
         const mapCloned: Map<any, boolean> = new Map<any, boolean>();
 
@@ -479,6 +483,19 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         this.expansionStates = new Map<any, boolean>();
     }
 
+    /**
+     * @hidden
+     */
+    public refreshGridState(args?) {
+        super.refreshGridState();
+        if (this.primaryKey && this.foreignKey) {
+            const rowID = args.data[this.foreignKey];
+            this.summaryService.clearSummaryCache({rowID: rowID});
+            this._pipeTrigger++;
+            this.cdr.detectChanges();
+        }
+    }
+
     /**
      * Creates a new `IgxTreeGridRowComponent` with the given data. If a parentRowID is not specified, the newly created
      * row would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches
diff --git a/src/app/grid-add-row/grid-add-row.sample.html b/src/app/grid-add-row/grid-add-row.sample.html
@@ -24,6 +24,7 @@
         </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-grid>
diff --git a/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.html b/src/app/hierarchical-grid-add-row/hierarchical-grid-add-row.sample.html
@@ -3,7 +3,8 @@
 [primaryKey]="'ID'"
 [rowEditable]="true">
 <igx-action-strip #actionstrip>
-    <igx-grid-editing-actions [asMenuItems]='true' [addRow]="true"></igx-grid-editing-actions>
+    <igx-grid-pinning-actions></igx-grid-pinning-actions>
+    <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
 </igx-action-strip>
 <igx-row-island #island [key]="'childData'" [autoGenerate]="true"
     [allowFiltering]='true' [rowEditable]="true" [primaryKey]="'ID'">
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
@@ -1,5 +1,5 @@
 <div>
-    <igx-tree-grid #grid [allowFiltering]='true' [data]="data" primaryKey="employeeID" foreignKey="PID"
+    <igx-tree-grid [pinning]="pinningConfig" #grid [allowFiltering]='true' [data]="data" primaryKey="employeeID" foreignKey="PID"
     [paging]="false" [width]="'900px'" [height]="'800px'" [rowEditable]="true"
     (mouseleave)="onMouseLeave(actionstrip)"
     (mouseover)="onMouseOver($event, grid, actionstrip)">
@@ -9,6 +9,7 @@
         [minWidth]="c.minWidth" [maxWidth]="c.maxWidth">
     </igx-column>
     <igx-action-strip #actionstrip>
+        <igx-grid-pinning-actions></igx-grid-pinning-actions>
         <igx-grid-editing-actions [addRow]="true" [addChild]='true'></igx-grid-editing-actions>
     </igx-action-strip>
 </igx-tree-grid>
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

Original file line number	Diff line number	Diff line change
`@@ -104,7 +104,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective`
`104`	`104`	`const context = this.strip.context;`
`105`	`105`	`const grid = context.grid;`
`106`	`106`	`if (!grid.rowEditable) {`
`107`		`- console.warn('The grid must be in row edit mode to perform row adding!');`
	`107`	`+ console.warn('The grid must use row edit mode to perform row adding! Please set rowEditable to true.');`
`108`	`108`	`return;`
`109`	`109`	`}`
`110`	`110`	`grid.beginAddRowByIndex(context.rowID, context.index, asChild);`
Original file line number	Diff line number	Diff line change
`@@ -265,10 +265,6 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone`
`265`	`265`	`}`
`266`	`266`	`}`
`267`	`267`	`} else {`
`268`		`- if (this.grid.primaryKey && this.grid.foreignKey) {`
`269`		`- const rowID = data[this.grid.foreignKey];`
`270`		`- this.grid.summaryService.clearSummaryCache({rowID: rowID});`
`271`		`- }`
`272`	`268`	`super.addRowToData(data);`
`273`	`269`	`}`
`274`	`270`	`}`