Merge branch 'master' into mpopov/responsive-filtering-row-MASTER

Author: DiyanDimitrov

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

@@ -53,14 +53,14 @@
     "@angular/platform-browser-dynamic": "^10.0.0",
     "@angular/router": "^10.0.0",
     "@types/hammerjs": "^2.0.36",
-    "@types/jszip": "^3.4.1",
     "@types/source-map": "0.5.2",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.6.11",
     "core-js-pure": "^3.6.5",
     "hammerjs": "^2.0.8",
     "igniteui-trial-watermark": "^1.0.3",
-    "jszip": "^3.4.0",
+    "jszip": "^3.5.0",
+    "lodash.merge": "^4.6.2",
     "resize-observer-polyfill": "^1.5.1",
     "rxjs": "^6.5.4",
     "tslib": "^2.0.0",

package.json

@@ -7,11 +7,11 @@
   },
   "whitelistedNonPeerDependencies": [
       "@types/hammerjs",
-      "@types/jszip",
       "core-js-pure",
       "hammerjs",
       "jszip",
       "resize-observer-polyfill",
-      "igniteui-trial-watermark"
+      "igniteui-trial-watermark",
+      "lodash.merge"
     ]
 }

projects/igniteui-angular/ng-package.json

@@ -9,11 +9,11 @@
   },
   "whitelistedNonPeerDependencies": [
       "@types/hammerjs",
-      "@types/jszip",
       "core-js-pure",
       "hammerjs",
       "jszip",
       "resize-observer-polyfill",
-      "igniteui-trial-watermark"
+      "igniteui-trial-watermark",
+      "lodash.merge"
     ]
 }

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

@@ -67,13 +67,13 @@
     ],
     "dependencies": {
         "@types/hammerjs": "^2.0.36",
-        "@types/jszip": "^3.1.7",
         "core-js-pure": "^3.6.5",
         "hammerjs": "^2.0.8",
-        "jszip": "^3.3.0",
+        "jszip": "^3.5.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

@@ -28,9 +28,9 @@ export const DEPENDENCIES_MAP: PackageEntry[] = [
         { name: 'tslib', target: PackageTarget.NONE },
         { name: 'resize-observer-polyfill', target: PackageTarget.REGULAR },
         { name: '@types/hammerjs', target: PackageTarget.DEV },
-        { 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);
     }
 }