From 73cc267a6a658e4346bb75c2966cc9df37c966b1 Mon Sep 17 00:00:00 2001 From: wnvko Date: Wed, 14 Nov 2018 12:04:54 +0200 Subject: [PATCH] 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 --- .../src/lib/data-operations/data-util.ts | 31 +++++++++--- .../grids/tree-grid/tree-grid-api.service.ts | 4 +- .../grids/tree-grid/tree-grid.component.ts | 7 +-- .../lib/grids/tree-grid/tree-grid.pipes.ts | 50 ++++++++++--------- .../igx-hierarchical-transaction.ts | 6 +++ .../tree-grid-flat-data.sample.html | 3 ++ .../tree-grid-flat-data.sample.ts | 16 +++++- src/app/tree-grid/tree-grid.sample.html | 3 ++ src/app/tree-grid/tree-grid.sample.ts | 12 +++++ 9 files changed, 94 insertions(+), 38 deletions(-) diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.ts index 456fd235596..7d4ab6edff7 100644 --- a/projects/igniteui-angular/src/lib/data-operations/data-util.ts +++ b/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; + } } 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 index df81b3fde75..0115a16e286 100644 --- 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 @@ -127,9 +127,7 @@ export class IgxTreeGridAPIService extends GridBaseAPIService 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); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts index 78a6fc962d6..76a9a129fcc 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts +++ b/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; } diff --git a/projects/igniteui-angular/src/lib/services/transaction/igx-hierarchical-transaction.ts b/projects/igniteui-angular/src/lib/services/transaction/igx-hierarchical-transaction.ts index f65015105fb..7fd429fccb6 100644 --- a/projects/igniteui-angular/src/lib/services/transaction/igx-hierarchical-transaction.ts +++ b/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 IgxHierarchicalTransactionServiceAdd row + + + diff --git a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts index ac00af58e41..7bba3140c44 100644 --- a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts +++ b/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); + } } diff --git a/src/app/tree-grid/tree-grid.sample.html b/src/app/tree-grid/tree-grid.sample.html index a1418693e32..a6655054fe3 100644 --- a/src/app/tree-grid/tree-grid.sample.html +++ b/src/app/tree-grid/tree-grid.sample.html @@ -30,6 +30,9 @@ + + + diff --git a/src/app/tree-grid/tree-grid.sample.ts b/src/app/tree-grid/tree-grid.sample.ts index 487aab838f5..6f1c508e006 100644 --- a/src/app/tree-grid/tree-grid.sample.ts +++ b/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); + } }