feat(grid): Support for binding to nested data source (#7777)

* test(grid): Add base tests for nested props

* feat(grid): Support for binding to nested data.

* fix(grid): Use the public prop of the grid

* fix(grid): Group by expand states and column style bindings

* refactor(grid): Move data mapper pipe

* feat(tree-grid): Add support for tree grid

* feat(grid): Nested props copy/paste behavior

* feat(grid): Add hierarchical grid support

Added support for summaries with nested data binding
Tree grid supports updating with nested data binding.

* refactor: Lodash imports and fixture clean-up

* test(nested-props): Skip unit test for now

* fix(grid): Aria described by escape invalid characters

Removed the host binding from the cell component.
Removed constructor definition in tree cell.

* fix(grid): Summary cells aria attributes

* test(tree-grid): Leave the test for later investigation

* feat(grid): Grid exporter support for nested props

* test(grid): Clean up test suite

* chore(grid): Add demo sample for nested props

* feat(grid): Apply styling pipes when updating cell values

* chore(*): Add changelog entry.

Add peer deps and cleanup mapper functions.

* chore(*): 🤦‍♂️

* fix(*): mergeObjects is now lodash merge

* fix(*): Row editing row data state

Apply correct order of merges when partial nested objects are applied
over the original row data

* fix(*): Tree grid filtering pipe

* fix(grid): Search cache resolving nested data

* fix(grid): Various fixes

Fixed edited transaction cell style in all grids.
Moved the logic for checking applying said style to a pipe. Should
improve performance a little bit.
Cleaned some unused imports.

* fix(grid): Row editing

Correctly detect the number of changes when editing complex objects.

* fix(grid): Apply transaction styles through API calls

* fix(grid): Performance in hierarchical data

* build(*): Move lodash merge into dependencies

Co-authored-by: Desislava Dincheva <[email protected]>

Author: rkaraivanov

CHANGELOG.md

@@ -49,6 +49,11 @@ The following example shows how you can use the Indigo theme:
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Introduced `showSummaryOnCollapse` grid property which allows you to control whether the summary row stays visible when the groupBy / parent row is collapsed.
     - Added support for tooltips on data cells default template and summary cells.
+    - Added support for binding columns to properties in nested data objects.
+    Data operations (filtering/sorting/updating/etc) are supported for the nested properties.
+    ```html
+        <igx-column field="foo.bar.baz"></igx-column>
+    ```
 - `IgxGridState` directive
     - Added support for expansion states, column selection and row pinning.
     - Added support for `IgxTreeGrid` and `IgxHierarchicalGrid` (including child grids)

package-lock.json

@@ -61,6 +61,7 @@
     "hammerjs": "^2.0.8",
     "igniteui-trial-watermark": "^1.0.3",
     "jszip": "^3.4.0",
+    "lodash.merge": "^4.6.2",
     "resize-observer-polyfill": "^1.5.1",
     "rxjs": "^6.5.4",
     "tslib": "^2.0.0",

package.json

@@ -12,6 +12,7 @@
       "hammerjs",
       "jszip",
       "resize-observer-polyfill",
-      "igniteui-trial-watermark"
+      "igniteui-trial-watermark",
+      "lodash.merge"
     ]
 }

projects/igniteui-angular/ng-package.json

@@ -14,6 +14,7 @@
       "hammerjs",
       "jszip",
       "resize-observer-polyfill",
-      "igniteui-trial-watermark"
+      "igniteui-trial-watermark",
+      "lodash.merge"
     ]
 }

projects/igniteui-angular/ng-package.prod.json

@@ -73,7 +73,8 @@
         "jszip": "^3.3.0",
         "tslib": "^2.0.0",
         "resize-observer-polyfill": "^1.5.1",
-        "igniteui-trial-watermark": "^1.0.3"
+        "igniteui-trial-watermark": "^1.0.3",
+        "lodash.merge": "^4.6.2"
     },
     "peerDependencies": {
         "@angular/common": "^10.0.0",

projects/igniteui-angular/package.json

@@ -31,6 +31,7 @@ export const DEPENDENCIES_MAP: PackageEntry[] = [
         { name: '@types/jszip', target: PackageTarget.DEV },
         { name: 'igniteui-trial-watermark', target: PackageTarget.NONE },
         { name: 'core-js-pure', target: PackageTarget.NONE },
+        { name: 'lodash.merge', target: PackageTarget.NONE },
         // peerDependencies
         { name: '@angular/forms', target: PackageTarget.NONE },
         { name: '@angular/common', target: PackageTarget.NONE },

projects/igniteui-angular/schematics/utils/dependency-handler.ts

@@ -171,146 +171,6 @@ describe('Utils', () => {
         });
     });
 
-    describe('Utils - mergeObjects() unit tests', () => {
-        it('Should correctly merge objects', () => {
-            const obj1 = {
-                Numeric: 1,
-                String: 'Some test string',
-                Boolean: true,
-                Date: new Date(0),
-                Object: {
-                    Numeric: 10,
-                    String: 'Some inner test string',
-                    Boolean: false,
-                    Date: new Date(1000 * 60 * 60 * 24 * 10),
-                }
-            };
-
-            const obj2 = {
-                Numeric: 100,
-                String: 'Some changed test string',
-                Boolean: false,
-                Date: new Date(1000 * 60 * 60 * 24 * 100),
-                Object: {
-                    Numeric: Infinity,
-                }
-            };
-
-            const result = mergeObjects(obj1, obj2);
-            expect(result.Numeric).toBe(obj2.Numeric);
-            expect(result.String).toBe(obj2.String);
-            expect(result.Boolean).toBe(obj2.Boolean);
-            expect(result.Date).toEqual(obj2.Date);
-            expect(result.Date).not.toBe(obj2.Date);
-            expect(result.Date.getTime()).toBe(obj2.Date.getTime());
-
-            expect(result.Object).toEqual(obj2.Object);
-            expect(result.Object).not.toBe(obj2.Object);
-            expect(result.Object.Numeric).toEqual(obj2.Object.Numeric);
-        });
-
-        it('Should correctly merge into empty object', () => {
-            const obj1 = {};
-            const obj2 = {
-                Test: 'Test',
-                Date: new Date(0)
-            };
-
-            const result = mergeObjects(obj1, obj2);
-            expect(result).toEqual(obj2);
-            expect(result).not.toBe(obj2);
-        });
-
-        it('Should correctly merge from empty object', () => {
-            const obj1 = {
-                Test: 'Test',
-                Date: new Date(0)
-            };
-            const obj2 = {};
-
-            const result = mergeObjects(obj1, obj2);
-            expect(result).toEqual(obj1);
-            expect(result).toBe(obj1);
-        });
-
-        it('Should throw when try to merge into null object', () => {
-            const obj1 = null;
-            const obj2 = {
-                Test: 'Test',
-                Date: new Date(0)
-            };
-
-            const errorFunction = function () { mergeObjects(obj1, obj2); };
-            expect(errorFunction).toThrowError(`Cannot merge into ${obj1}. First param must be an object.`);
-        });
-
-        it('Should correctly merge from null object', () => {
-            const obj1 = {
-                Test: 'Test',
-                Date: new Date(0)
-            };
-            const obj2 = null;
-
-            const result = mergeObjects(obj1, obj2);
-            expect(result).toEqual(obj1);
-            expect(result).toBe(obj1);
-        });
-
-        it('Should throw when try to merge into undefined object', () => {
-            const obj1 = undefined;
-            const obj2 = {
-                Test: 'Test',
-                Date: new Date(0)
-            };
-
-            const errorFunction = function () { mergeObjects(obj1, obj2); };
-            expect(errorFunction).toThrowError(`Cannot merge into ${obj1}. First param must be an object.`);
-        });
-
-        it('Should correctly merge from undefined object', () => {
-            const obj1 = {
-                Test: 'Test',
-                Date: new Date(0)
-            };
-            const obj2 = undefined;
-
-            const result = mergeObjects(obj1, obj2);
-            expect(result).toEqual(obj1);
-            expect(result).toBe(obj1);
-        });
-
-        it('Should throw error when try to merge into non object type', () => {
-            let obj1: any = 'Some string';
-            const obj2 = {};
-            const errorFunction = function () { mergeObjects(obj1, obj2); };
-            expect(errorFunction).toThrowError(`Cannot merge into ${obj1}. First param must be an object.`);
-
-            obj1 = 100;
-            expect(errorFunction).toThrowError(`Cannot merge into ${obj1}. First param must be an object.`);
-
-            obj1 = true;
-            expect(errorFunction).toThrowError(`Cannot merge into ${obj1}. First param must be an object.`);
-
-            obj1 = new Date(0);
-            expect(errorFunction).toThrowError(`Cannot merge into ${obj1}. First param must be an object.`);
-        });
-
-        it('Should return first object when try to merge from non object type', () => {
-            const obj1 = {};
-            let obj2: any = 'Some string';
-            expect(mergeObjects(obj1, obj2)).toBe(obj1);
-
-            obj2 = 100;
-            expect(mergeObjects(obj1, obj2)).toBe(obj1);
-
-            obj2 = true;
-            expect(mergeObjects(obj1, obj2)).toBe(obj1);
-
-            obj2 = new Date(0);
-            expect(mergeObjects(obj1, obj2)).toBe(obj1);
-        });
-    });
-
     describe('Utils - isObject() unit tests', () => {
         it('Should correctly determine if variable is Object', () => {
             let variable: any = {};

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

@@ -3,6 +3,7 @@ import { isPlatformBrowser } from '@angular/common';
 import { Observable } from 'rxjs';
 import ResizeObserver from 'resize-observer-polyfill';
 import { setImmediate } from 'core-js-pure';
+import merge from 'lodash.merge';
 
 /**
  * @hidden
@@ -47,19 +48,7 @@ export function cloneHierarchicalArray(array: any[], childDataKey: any): any[] {
  * @hidden
  */
 export function mergeObjects(obj1: {}, obj2: {}): any {
-    if (!isObject(obj1)) {
-        throw new Error(`Cannot merge into ${obj1}. First param must be an object.`);
-    }
-
-    if (!isObject(obj2)) {
-        return obj1;
-    }
-
-    for (const key of Object.keys(obj2)) {
-        obj1[key] = cloneValue(obj2[key]);
-    }
-
-    return obj1;
+    return merge(obj1, obj2);
 }
 
 /**
@@ -385,6 +374,66 @@ export function compareMaps(map1: Map<any, any>, map2: Map<any, any>): boolean {
     return match;
 }
 
+/**
+ *
+ * Given a property access path in the format `x.y.z` resolves and returns
+ * the value of the `z` property in the passed object.
+ *
+ * @hidden
+ * @internal
+ */
+export function resolveNestedPath(obj: any, path: string) {
+    const parts = path?.split('.') ?? [];
+    let current = obj[parts.shift()];
+
+    parts.forEach(prop => {
+        if (current) {
+            current = current[prop];
+        }
+    });
+
+    return current;
+}
+
+
+/**
+ *
+ * Given a property access path in the format `x.y.z` and a value
+ * this functions builds and returns an object following the access path.
+ *
+ * @example
+ * ```typescript
+ * console.log('x.y.z.', 42);
+ * >> { x: { y: { z: 42 } } }
+ * ```
+ *
+ * @hidden
+ * @internal
+ */
+export function reverseMapper(path: string, value: any) {
+    const obj = {};
+    const parts = path?.split('.') ?? [];
+
+    let _prop = parts.shift();
+    let mapping: any;
+
+    // Initial binding for first level bindings
+    obj[_prop] = value;
+    mapping = obj;
+
+    parts.forEach(prop => {
+        // Start building the hierarchy
+        mapping[_prop] = {};
+        // Go down a level
+        mapping = mapping[_prop];
+        // Bind the value and move the key
+        mapping[prop] = value;
+        _prop = prop;
+    });
+
+    return obj;
+}
+
 export function yieldingLoop(count: number, chunkSize: number, callback: (index: number) => void, done: () => void) {
     let i = 0;
     const chunk = () => {

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

@@ -1,5 +1,6 @@
 import { FilteringLogic, IFilteringExpression } from './filtering-expression.interface';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from './filtering-expressions-tree';
+import { resolveNestedPath } from '../core/utils';
 
 export interface IFilteringStrategy {
     filter(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree): any[];
@@ -95,6 +96,6 @@ export class FilteringStrategy extends BaseFilteringStrategy {
     }
 
     protected getFieldValue(rec: object, fieldName: string): any {
-        return rec[fieldName];
+        return resolveNestedPath(rec, fieldName);
     }
 }