feat(tree-grid): hierarchical transaction are in stable state now, #2921

ADD, UPDATE, DELETE, UNDO, REDO and COMMIT should working now for both
flat and hierarchical data source

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -206,7 +206,8 @@ export class DataUtil {
         data: any[],
         transactions: HierarchicalTransaction[],
         childDataKey: any,
-        primaryKey?: any): any[] {
+        primaryKey?: any,
+        deleteRows: boolean = false): any[] {
 
         for (let i = 0; i < transactions.length; i++) {
             const transaction = transactions[i];
@@ -219,7 +220,7 @@ export class DataUtil {
                 if (path.find(id => id === transaction.id)) {
                     path.splice(-1, 1);
                 }
-                const dataRow = this.getDataRowFromPath(data, primaryKey, childDataKey, path);
+                const dataRow = this.findDataRowFromPath(data, primaryKey, childDataKey, path);
                 switch (transaction.type) {
                     case TransactionType.ADD:
                         //  if there is no dataRow, but there is a path this is ADD row added to
@@ -235,9 +236,16 @@ export class DataUtil {
                         }
                         break;
                     case TransactionType.UPDATE:
-                        const index = dataRow[childDataKey].findIndex(r => r[primaryKey] === transaction.id);
-                        const dataItem = dataRow[childDataKey][index];
-                        dataRow[childDataKey][index] = mergeObjects(cloneValue(dataItem), transaction.newValue);
+                        const collectionToUpdate: any[] = this.findCollectionToManipulate(childDataKey, dataRow, data);
+                        const updateIndex: number = collectionToUpdate.findIndex(r => r[primaryKey] === transaction.id);
+                        collectionToUpdate[updateIndex] = mergeObjects(cloneValue(collectionToUpdate[updateIndex]), transaction.newValue);
+                        break;
+                    case TransactionType.DELETE:
+                        if (deleteRows) {
+                            const collectionToDelete: any[] = this.findCollectionToManipulate(childDataKey, dataRow, data);
+                            const deleteIndex: number = collectionToDelete.findIndex(r => r[primaryKey] === transaction.id);
+                            collectionToDelete.splice(deleteIndex, 1);
+                        }
                         break;
                 }
             } else {
@@ -248,7 +256,7 @@ export class DataUtil {
         return data;
     }
 
-    private static getDataRowFromPath(data: any[], primaryKey: any, childDataKey: any, path: any[]): any {
+    private static findDataRowFromPath(data: any[], primaryKey: any, childDataKey: any, path: any[]): any {
         let collection: any[] = data;
         let result: any;
         for (let i = 0; i < path.length; i++) {
@@ -262,4 +270,15 @@ export class DataUtil {
 
         return result;
     }
+
+    private static findCollectionToManipulate(childDataKey: any, dataRow: any, data: any[]): any[] {
+        let result: any[];
+        if (dataRow && dataRow[childDataKey]) {
+            result = dataRow[childDataKey];
+        } else {
+            result = data;
+        }
+
+        return result;
+    }
 }

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

@@ -127,9 +127,7 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
 
     protected updateCellData(grid: IgxTreeGridComponent, rowID: any, rowValue: any, rowData: any, newValue: {[x: string]: any}) {
         if (grid.transactions.enabled) {
-            const record: ITreeGridRecord = grid.records.get(rowID);
-            const path = [...record.path];
-            path.push(rowID);
+            const path = grid.generateRowPath(rowID).reverse();
             const transaction: HierarchicalTransaction = {
                 id: rowID,
                 type: TransactionType.UPDATE,

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

@@ -370,7 +370,7 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent {
                     const rowId = this.primaryKey ? data[this.primaryKey] : data;
                     const path: any[] = [];
                     path.push(parentRowID);
-                    path.push(...this.getPath(parentRowID));
+                    path.push(...this.generateRowPath(parentRowID));
                     path.reverse();
                     this.transactions.add({
                         id: rowId,
@@ -440,7 +440,7 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent {
             index = this.primaryKey ? childData.map(c => c[this.primaryKey]).indexOf(rowID) :
                 childData.indexOf(rowID);
             if (this.transactions.enabled) {
-                const path = this.getPath(rowID);
+                const path = this.generateRowPath(rowID);
                 this.transactions.add({
                     id: rowID,
                     type: TransactionType.DELETE,
@@ -454,7 +454,8 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent {
         }
     }
 
-    private getPath(rowId: any): any[] {
+    /** @hidden */
+    public generateRowPath(rowId: any): any[] {
         const path: any[] = [];
         let record = this.records.get(rowId);
 

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

@@ -264,31 +264,33 @@ export class IgxTreeGridTransactionPipe implements PipeTransform {
 
     transform(collection: any[], id: string, pipeTrigger: number): any[] {
         const grid: IgxTreeGridComponent = this.gridAPI.get(id);
-        const aggregatedChanges = grid.transactions.getAggregatedChanges(true);
-        if (collection && aggregatedChanges.length > 0) {
-            const primaryKey = grid.primaryKey;
-            if (!primaryKey) {
-                return collection;
-            }
+        if (collection && collection.length > 0 && grid.transactions.enabled) {
+            const aggregatedChanges = grid.transactions.getAggregatedChanges(true);
+            if (aggregatedChanges.length > 0) {
+                const primaryKey = grid.primaryKey;
+                if (!primaryKey) {
+                    return collection;
+                }
 
-            const foreignKey = grid.foreignKey;
-            const childDataKey = grid.childDataKey;
-
-            if (foreignKey) {
-                return DataUtil.mergeTransactions(
-                    cloneArray(collection),
-                    grid.transactions.getAggregatedChanges(true),
-                    grid.primaryKey);
-            } else if (childDataKey) {
-                const clone = cloneHierarchicalArray(collection, childDataKey);
-                return DataUtil.mergeHierarchicalTransactions(
-                    clone,
-                    aggregatedChanges,
-                    childDataKey,
-                    grid.primaryKey
-                );
-            }
-        }
+                const foreignKey = grid.foreignKey;
+                const childDataKey = grid.childDataKey;
+
+                if (foreignKey) {
+                    return DataUtil.mergeTransactions(
+                        cloneArray(collection),
+                        grid.transactions.getAggregatedChanges(true),
+                        grid.primaryKey);
+                    } else if (childDataKey) {
+                        const clone = cloneHierarchicalArray(collection, childDataKey);
+                        return DataUtil.mergeHierarchicalTransactions(
+                            clone,
+                            aggregatedChanges,
+                            childDataKey,
+                            grid.primaryKey
+                            );
+                        }
+                    }
+                }
 
         return collection;
     }

projects/igniteui-angular/src/lib/services/transaction/igx-hierarchical-transaction.ts

@@ -1,6 +1,7 @@
 import { HierarchicalTransaction, HierarchicalState, TransactionType } from './transaction';
 import { Injectable } from '@angular/core';
 import { IgxTransactionService } from '..';
+import { DataUtil } from 'igniteui-angular';
 
 /** @experimental @hidden */
 @Injectable()
@@ -40,6 +41,11 @@ export class IgxHierarchicalTransactionService<T extends HierarchicalTransaction
         }
     }
 
+    public commit(data: any[], childDataKey?: any, primaryKey?: any): void {
+        DataUtil.mergeHierarchicalTransactions(data, this.getAggregatedChanges(true), childDataKey, primaryKey, true);
+        this.clear();
+    }
+
     //  TODO: remove this method. Force cloning to strip child arrays when needed instead
     private clearArraysFromObject(obj: {}) {
         for (const prop of Object.keys(obj)) {

src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html

@@ -36,6 +36,9 @@
                     <button igxButton="raised" (click)="addRow()">Add row</button>
                     <button igxButton="raised" (click)="addChildRow()">Add child row</button>
                     <button igxButton="raised" (click)="deleteRow()">Delete selected row</button>
+                    <button igxButton="raised" (click)="undo()">Undo</button>
+                    <button igxButton="raised" (click)="redo()">Redo</button>
+                    <button igxButton="raised" (click)="commit()">Commit</button>
                 </div>
             </div>
         </div>

src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts

@@ -1,9 +1,9 @@
 import { Component, Injectable, ViewChild, OnInit } from '@angular/core';
 import { Http } from '@angular/http';
-import { IgxTreeGridComponent } from 'igniteui-angular';
+import { IgxTreeGridComponent, IgxHierarchicalTransactionService, IgxGridTransaction } from 'igniteui-angular';
 
 @Component({
-    providers: [],
+    providers: [{provide: IgxGridTransaction, useClass: IgxHierarchicalTransactionService}],
     selector: 'app-tree-grid-flat-data-sample',
     styleUrls: ['tree-grid-flat-data.sample.css'],
     templateUrl: 'tree-grid-flat-data.sample.html'
@@ -90,4 +90,16 @@ export class TreeGridFlatDataSampleComponent implements OnInit {
     public selectDensity(event) {
         this.density = this.displayDensities[event.index].label;
     }
+
+    public undo() {
+        this.grid1.transactions.undo();
+    }
+
+    public redo() {
+        this.grid1.transactions.redo();
+    }
+
+    public commit() {
+        this.grid1.transactions.commit(this.data);
+    }
 }

src/app/tree-grid/tree-grid.sample.html

@@ -30,6 +30,9 @@
                     <button igxButton="raised" (click)="addRow()">Add row</button>
                     <button igxButton="raised" (click)="addChildRow()">Add child row</button>
                     <button igxButton="raised" (click)="deleteRow()">Delete Selected Row</button>
+                    <button igxButton="raised" (click)="undo()">Undo</button>
+                    <button igxButton="raised" (click)="redo()">Redo</button>
+                    <button igxButton="raised" (click)="commit()">Commit</button>
                 </div>
             </div>
         </div>

src/app/tree-grid/tree-grid.sample.ts

@@ -449,4 +449,16 @@ export class TreeGridSampleComponent implements OnInit {
     public deleteRow() {
         this.grid1.deleteRowById(this.grid1.selectedRows()[0]);
     }
+
+    public undo() {
+        this.grid1.transactions.undo();
+    }
+
+    public redo() {
+        this.grid1.transactions.redo();
+    }
+
+    public commit() {
+        this.grid1.transactions.commit(this.data, this.grid1.childDataKey, this.grid1.primaryKey);
+    }
 }