feat(girds): add custom data clone strategy for batch editing #10678 (#10734)

Author: PlamenaMiteva

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 13.0.5
+
+### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Added `dataCloneStrategy` input, which allows users provide their own implementation of how data objects are cloned when row and/or batch editing is enabled. The custom strategy should implement the `IDataCloneStrategy` interface.
+
 ## 13.0.1
 
 ### New Features

projects/igniteui-angular/src/lib/core/utils.ts

@@ -81,6 +81,22 @@ export const cloneHierarchicalArray = (array: any[], childDataKey: any): any[] =
     return result;
 };
 
+/**
+ * Creates an object with prototype from provided source and copies
+ * all properties descriptors from provided source
+ * @param obj Source to copy prototype and descriptors from
+ * @returns New object with cloned prototype and property descriptors
+ */
+export const copyDescriptors = (obj) => {
+    if (obj) {
+        return Object.create(
+            Object.getPrototypeOf(obj),
+            Object.getOwnPropertyDescriptors(obj)
+            );
+    }
+}
+
+
 /**
  * Deep clones all first level keys of Obj2 and merges them to Obj1
  *
@@ -164,7 +180,7 @@ export const uniqueDates = (columnValues: any[]) => columnValues.reduce((a, c) =
  * @returns true if provided variable is Object
  * @hidden
  */
-export const isObject = (value: any): boolean => value && value.toString() === '[object Object]';
+export const isObject = (value: any): boolean => !!(value && value.toString() === '[object Object]');
 
 /**
  * Checks if provided variable is Date

projects/igniteui-angular/src/lib/data-operations/data-clone-strategy.ts

@@ -0,0 +1,11 @@
+import { cloneValue } from "../core/utils";
+
+export interface IDataCloneStrategy {
+    clone(data: any): any;
+}
+
+export class DefaultDataCloneStrategy implements IDataCloneStrategy {
+    public clone(data: any): any {
+        return cloneValue(data);
+    }
+}

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

@@ -20,6 +20,7 @@ import {
 import { IPagingState, PagingError } from './paging-state.interface';
 import { SampleTestData } from '../test-utils/sample-test-data.spec';
 import { Transaction, TransactionType, HierarchicalTransaction } from '../services/public_api';
+import { DefaultDataCloneStrategy } from './data-clone-strategy';
 
 /* Test sorting */
 const testSort = () => {
@@ -516,19 +517,21 @@ const testMerging = () => {
         });
 
         it('Should merge delete transactions correctly', () => {
+            const cloneStrategy = new DefaultDataCloneStrategy();
             const data = SampleTestData.personIDNameData();
             const secondRow = data[1];
             const transactions: Transaction[] = [
                 { id: 1, newValue: null, type: TransactionType.DELETE },
                 { id: 3, newValue: null, type: TransactionType.DELETE },
             ];
 
-            DataUtil.mergeTransactions(data, transactions, 'ID', true);
+            DataUtil.mergeTransactions(data, transactions, 'ID', cloneStrategy, true);
             expect(data.length).toBe(1);
             expect(data[0]).toEqual(secondRow);
         });
 
         it('Should merge add hierarchical transactions correctly', () => {
+            const cloneStrategy = new DefaultDataCloneStrategy();
             const data = SampleTestData.employeeSmallTreeData();
             const addRootRow = { ID: 1000, Name: 'Pit Peter', HireDate: new Date(2008, 3, 20), Age: 55 };
             const addChildRow1 = { ID: 1001, Name: 'Marry May', HireDate: new Date(2018, 4, 1), Age: 102 };
@@ -539,7 +542,7 @@ const testMerging = () => {
                 { id: addChildRow2.ID, newValue: addChildRow2, type: TransactionType.ADD, path: [addRootRow.ID] },
             ];
 
-            DataUtil.mergeHierarchicalTransactions(data, transactions, 'Employees', 'ID', false);
+            DataUtil.mergeHierarchicalTransactions(data, transactions, 'Employees', 'ID', cloneStrategy, false);
             expect(data.length).toBe(4);
 
             expect(data[3].Age).toBe(addRootRow.Age);
@@ -555,6 +558,7 @@ const testMerging = () => {
         });
 
         it('Should merge update hierarchical transactions correctly', () => {
+            const cloneStrategy = new DefaultDataCloneStrategy();
             const data = SampleTestData.employeeSmallTreeData();
             const updateRootRow = { Name: 'May Peter', Age: 13 };
             const updateChildRow1 = { HireDate: new Date(2100, 1, 12), Age: 1300 };
@@ -581,7 +585,7 @@ const testMerging = () => {
                 },
             ];
 
-            DataUtil.mergeHierarchicalTransactions(data, transactions, 'Employees', 'ID', false);
+            DataUtil.mergeHierarchicalTransactions(data, transactions, 'Employees', 'ID',cloneStrategy, false);
             expect(data[1].Name).toBe(updateRootRow.Name);
             expect(data[1].Age).toBe(updateRootRow.Age);
 
@@ -593,6 +597,7 @@ const testMerging = () => {
         });
 
         it('Should merge delete hierarchical transactions correctly', () => {
+            const cloneStrategy = new DefaultDataCloneStrategy();
             const data = SampleTestData.employeeSmallTreeData();
             const transactions: HierarchicalTransaction[] = [
                 //  root row with no children
@@ -605,7 +610,7 @@ const testMerging = () => {
                 { id: data[0].Employees[2].ID, newValue: null, type: TransactionType.DELETE, path: [data[0].ID] }
             ];
 
-            DataUtil.mergeHierarchicalTransactions(data, transactions, 'Employees', 'ID', true);
+            DataUtil.mergeHierarchicalTransactions(data, transactions, 'Employees', 'ID', cloneStrategy, true);
 
             expect(data.length).toBe(1);
             expect(data[0].Employees.length).toBe(1);

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

@@ -8,7 +8,7 @@ import { IGroupByKey } from './groupby-expand-state.interface';
 import { IGroupByRecord } from './groupby-record.interface';
 import { IGroupingState } from './groupby-state.interface';
 import { FilteringStrategy } from './filtering-strategy';
-import { cloneValue, mergeObjects, mkenum } from '../core/utils';
+import { mergeObjects, mkenum } from '../core/utils';
 import { Transaction, TransactionType, HierarchicalTransaction } from '../services/transaction/transaction';
 import { getHierarchy, isHierarchyMatch } from './operations';
 import { GridType } from '../grids/common/grid.interface';
@@ -21,6 +21,7 @@ import {
     IgxSorting,
     IgxGrouping
 } from '../grids/common/strategy';
+import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../data-operations/data-clone-strategy';
 
 /**
  * @hidden
@@ -147,12 +148,12 @@ export class DataUtil {
      * @param deleteRows Should delete rows with DELETE transaction type from data
      * @returns Provided data collections updated with all provided transactions
      */
-    public static mergeTransactions<T>(data: T[], transactions: Transaction[], primaryKey?: any, deleteRows: boolean = false): T[] {
+    public static mergeTransactions<T>(data: T[], transactions: Transaction[], primaryKey?: any, cloneStrategy: IDataCloneStrategy = new DefaultDataCloneStrategy(), deleteRows: boolean = false): T[] {
         data.forEach((item: any, index: number) => {
             const rowId = primaryKey ? item[primaryKey] : item;
             const transaction = transactions.find(t => t.id === rowId);
             if (transaction && transaction.type === TransactionType.UPDATE) {
-                data[index] = transaction.newValue;
+                data[index] = mergeObjects(cloneStrategy.clone(data[index]), transaction.newValue);
             }
         });
 
@@ -189,6 +190,7 @@ export class DataUtil {
         transactions: HierarchicalTransaction[],
         childDataKey: any,
         primaryKey?: any,
+        cloneStrategy: IDataCloneStrategy = new DefaultDataCloneStrategy(),
         deleteRows: boolean = false): any[] {
         for (const transaction of transactions) {
             if (transaction.path) {
@@ -205,7 +207,7 @@ export class DataUtil {
                     case TransactionType.UPDATE:
                         const updateIndex = collection.findIndex(x => x[primaryKey] === transaction.id);
                         if (updateIndex !== -1) {
-                            collection[updateIndex] = mergeObjects(cloneValue(collection[updateIndex]), transaction.newValue);
+                            collection[updateIndex] = mergeObjects(cloneStrategy.clone(collection[updateIndex]), transaction.newValue);
                         }
                         break;
                     case TransactionType.DELETE:

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

@@ -40,7 +40,8 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
                 data = DataUtil.mergeTransactions(
                     cloneArray(grid.data),
                     grid.transactions.getAggregatedChanges(true),
-                    grid.primaryKey
+                    grid.primaryKey,
+                    grid.dataCloneStrategy
                 );
                 const deletedRows = grid.transactions.getTransactionLog().filter(t => t.type === TransactionType.DELETE).map(t => t.id);
                 deletedRows.forEach(rowID => {

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

@@ -3,7 +3,7 @@ import { first } from 'rxjs/operators';
 import { IGridEditDoneEventArgs, IGridEditEventArgs, IRowDataEventArgs } from '../common/events';
 import { GridType, RowType } from './grid.interface';
 import { Subject } from 'rxjs';
-import { isEqual } from '../../core/utils';
+import { copyDescriptors, isEqual } from '../../core/utils';
 
 export class IgxEditRow {
     public transactionState: any;
@@ -405,7 +405,8 @@ export class IgxRowCrudState extends IgxCellCrudState {
 
 
         if (rowInEditMode && row.id === rowInEditMode.id) {
-            row.data = { ...row.data, ...rowInEditMode.transactionState };
+            // do not use spread operator here as it will copy everything over an empty object with no descriptors
+            row.data = Object.assign(copyDescriptors(row.data), row.data, rowInEditMode.transactionState);
             // TODO: Workaround for updating a row in edit mode through the API
         } else if (this.grid.transactions.enabled) {
             const state = grid.transactions.getState(row.id);

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -34,6 +34,7 @@ import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
 import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
 import { OverlaySettings } from '../../services/overlay/utilities';
 import { IPinningConfig } from '../grid.common';
+import { IDataCloneStrategy } from '../../data-operations/data-clone-strategy';
 
 export const IGX_GRID_BASE = new InjectionToken<GridType>('IgxGridBaseToken');
 export const IGX_GRID_SERVICE_BASE = new InjectionToken<GridServiceType>('IgxGridServiceBaseToken');
@@ -267,6 +268,7 @@ export interface GridType extends IGridDataBindable {
     summaryPipeTrigger: number;
     hasColumnLayouts: boolean;
     isLoading: boolean;
+    dataCloneStrategy: IDataCloneStrategy;
 
     gridAPI: GridServiceType;
 

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -200,7 +200,8 @@ export class IgxGridTransactionPipe implements PipeTransform {
             const result = DataUtil.mergeTransactions(
                 cloneArray(collection),
                 this.grid.transactions.getAggregatedChanges(true),
-                this.grid.primaryKey);
+                this.grid.primaryKey,
+                this.grid.dataCloneStrategy);
             return result;
         }
         return collection;

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -150,6 +150,7 @@ import { IGridSortingStrategy } from './common/strategy';
 import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/grid.excel-style-filtering.component';
 import { IgxGridHeaderComponent } from './headers/grid-header.component';
 import { IgxGridFilteringRowComponent } from './filtering/base/grid-filtering-row.component';
+import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../data-operations/data-clone-strategy';
 
 let FAKE_ROW_ID = -1;
 const DEFAULT_ITEMS_PER_PAGE = 15;
@@ -240,6 +241,26 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return 0;
     }
 
+    /**
+     * Gets/Sets the data clone strategy of the grid when in edit mode.
+     *
+     * @example
+     * ```html
+     *  <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid>
+     * ```
+     */
+    @Input()
+    public get dataCloneStrategy(): IDataCloneStrategy {
+        return this._dataCloneStrategy;
+    }
+
+    public set dataCloneStrategy(strategy: IDataCloneStrategy) {
+        if (strategy) {
+            this._dataCloneStrategy = strategy;
+            this._transactions.cloneStrategy = strategy;
+        }
+    }
+
     /**
      * Controls the copy behavior of the grid.
      */
@@ -2796,6 +2817,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private transactionChange$ = new Subject<void>();
     private _rendered = false;
     private readonly DRAG_SCROLL_DELTA = 10;
+    private _dataCloneStrategy: IDataCloneStrategy = new DefaultDataCloneStrategy();
 
     /**
      * @hidden @internal
@@ -2951,6 +2973,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         super(_displayDensityOptions);
         this.locale = this.locale || this.localeId;
         this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.None);
+        this._transactions.cloneStrategy = this.dataCloneStrategy;
         this.cdr.detach();
     }
 
@@ -5923,6 +5946,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         } else {
             this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.None);
         }
+
+        if (this.dataCloneStrategy) {
+            this._transactions.cloneStrategy = this.dataCloneStrategy;
+        }
     }
 
     protected subscribeToTransactions(): void {