cx 24.3.7 → 24.3.8

package/dist/ui.js

@@ -4149,15 +4149,7 @@ var GroupAdapter = /*#__PURE__*/ (function (_ArrayAdapter) {
 		results.forEach(function (gr) {
 			var _data;
 			keys.push(gr.key);
-			var key = keys
-				.map(function (key) {
-					return Object.keys(key)
-						.map(function (k) {
-							return key[k];
-						})
-						.join(":");
-				})
-				.join("|");
+			var key = keys.map(serializeKey).join("|");
 			var $group = _extends({}, gr.key, gr.aggregates, {
 				$name: gr.name,
 				$level: inverseLevel,
@@ -4243,6 +4235,16 @@ var GroupAdapter = /*#__PURE__*/ (function (_ArrayAdapter) {
 	return GroupAdapter;
 })(ArrayAdapter);
 GroupAdapter.prototype.groupName = "$group";
+function serializeKey(data) {
+	var _data$toString;
+	if (isObject(data))
+		return Object.keys(data)
+			.map(function (k) {
+				return serializeKey(data[k]);
+			})
+			.join(":");
+	return (_data$toString = data == null ? void 0 : data.toString()) != null ? _data$toString : "";
+}
 
 var TreeAdapter = /*#__PURE__*/ (function (_ArrayAdapter) {
 	_inheritsLoose(TreeAdapter, _ArrayAdapter);

package/dist/widgets.js

@@ -16190,9 +16190,9 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 								colSpan++;
 						}
 						if (colSpan > 1) skip = colSpan - 1;
-					} else if (c.aggregate && c.aggregateAlias && c.caption !== false) {
+					} else if (c.aggregate && c.aggregateAliasGetter && c.caption !== false) {
 						empty = false;
-						v = group[c.aggregateAlias];
+						v = c.aggregateAliasGetter(group);
 						if (isString(ci.data.format)) v = Format.value(v, ci.data.format);
 					}
 					if (cls) cls += " ";
@@ -16282,9 +16282,9 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 							colSpan++;
 					}
 					if (colSpan > 1) skip = colSpan - 1;
-				} else if (c.aggregate && c.aggregateAlias && c.footer !== false) {
+				} else if (c.aggregate && c.aggregateAliasGetter && c.footer !== false) {
 					empty = false;
-					v = group[c.aggregateAlias];
+					v = c.aggregateAliasGetter(group);
 					if (isString(ci.data.format)) v = Format.value(v, ci.data.format);
 				}
 				if (cls) cls += " ";
@@ -16921,20 +16921,22 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 				},
 				"dropzone",
 			);
+			var dataRecordClass = CSS.element(baseClass, "data");
 			var isDataRecord = widget.buffered
 				? function (item) {
 						var _item$props;
 						return (
-							((_item$props = item.props) == null ||
+							(item == null ||
+							(_item$props = item.props) == null ||
 							(_item$props = _item$props.instance) == null ||
 							(_item$props = _item$props.data) == null
 								? void 0
-								: _item$props["class"]) == "cxe-grid-data"
+								: _item$props["class"]) == dataRecordClass
 						);
 					}
 				: function (item) {
 						var _item$props2;
-						return (_item$props2 = item.props) == null || (_item$props2 = _item$props2.record) == null
+						return item == null || (_item$props2 = item.props) == null || (_item$props2 = _item$props2.record) == null
 							? void 0
 							: _item$props2.type;
 					};
@@ -18408,6 +18410,7 @@ var GridColumnHeader = /*#__PURE__*/ (function (_Widget) {
 			};
 		if (!this.aggregateField && this.field) this.aggregateField = this.field;
 		if (!this.aggregateAlias) this.aggregateAlias = this.aggregateField;
+		if (this.aggregateAlias) this.aggregateAliasGetter = Binding.get(this.aggregateAlias).value;
 		if (this.footer && isSelector(this.footer))
 			this.footer = {
 				value: this.footer,

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.3.7",
+   "version": "24.3.8",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/data/Grouper.js

@@ -1,120 +1,144 @@
-import {getSelector} from './getSelector';
-import {AggregateFunction} from './AggregateFunction';
-
-/*
- 'column': {
-   index: 0,
-   sort: 'asc',
-   group: true
-   aggregate: 'count'
- }
- */
-
-function transform(o, f) {
-   var res = {};
-   for (var k in o)
-      res[k] = f(o[k], k);
-   return res;
-}
-
-export class Grouper {
-   constructor(key, aggregates, dataGetter, nameGetter) {
-      this.keys = Object.keys(key).map(k => {
-         return {
-            name: k,
-            value: getSelector(key[k])
-         }
-      });
-      if (nameGetter)
-         this.nameGetter = getSelector(nameGetter);
-      this.dataGetter = dataGetter || (x=>x);
-      this.aggregates = aggregates && transform(aggregates, prop => {
-            if (!AggregateFunction[prop.type])
-               throw new Error(`Unknown aggregate function '${prop.type}'.`);
-
-            return {
-               value: getSelector(prop.value),
-               weight: getSelector(prop.weight || 1),
-               type: prop.type
-            }
-         });
-      this.reset();
-   }
-
-   reset() {
-      this.groups = this.initGroup(this.keys.length == 0)
-   }
-
-   initGroup(leaf) {
-      if (!leaf)
-         return {};
-
-      return {
-         records: [],
-         indexes: [],
-         aggregates: this.aggregates && transform(this.aggregates, prop => {
-            var f = AggregateFunction[prop.type];
-            return {
-               processor: f(),
-               value: prop.value,
-               weight: prop.weight
-            }
-         })
-      }
-   }
-
-   process(record, index) {
-      var data = this.dataGetter(record);
-      var key = this.keys.map(k=>k.value(data));
-      var g = this.groups;
-      for (var i = 0; i < key.length; i++) {
-         var sg = g[key[i]];
-         if (!sg) {
-            sg = g[key[i]] = this.initGroup(i + 1 == key.length);
-            if (this.nameGetter)
-               sg.name = this.nameGetter(data);
-         }
-         g = sg;
-      }
-
-      g.records.push(record);
-      g.indexes.push(index);
-
-      if (g.aggregates) {
-         for (var k in g.aggregates)
-            g.aggregates[k].processor.process(g.aggregates[k].value(data), g.aggregates[k].weight(data));
-      }
-   }
-
-   processAll(records, indexes) {
-      if (indexes) {
-         for (var i = 0; i < records.length; i++)
-            this.process(records[i], indexes[i]);
-      }
-      else
-         records.forEach((r, i)=>this.process(r, i));
-   }
-
-   report(g, path, level, results) {
-      if (level == this.keys.length) {
-         var key = {};
-         this.keys.forEach((k, i) => key[k.name] = path[i]);
-         results.push({
-            key: key,
-            name: g.name,
-            records: g.records,
-            indexes: g.indexes,
-            aggregates: transform(g.aggregates, p=>p.processor.getResult())
-         })
-      } else {
-         Object.keys(g).forEach(k=>this.report(g[k], [...path, k], level + 1, results));
-      }
-   }
-
-   getResults() {
-      var g = this.groups;
-      var results = [];
-      this.report(g, [], 0, results);
-      return results;
-   }
-}
+import { getSelector } from "./getSelector";
+import { AggregateFunction } from "./AggregateFunction";
+import { Binding } from "./Binding";
+
+/*
+ 'column': {
+   index: 0,
+   sort: 'asc',
+   group: true
+   aggregate: 'count'
+ }
+ */
+
+export class Grouper {
+   constructor(key, aggregates, dataGetter, nameGetter) {
+      this.keys = Object.keys(key).map((keyField) => {
+         let isSimpleField = keyField.indexOf(".") === -1;
+         let keySetter;
+         if (isSimpleField) {
+            // use simple field setter wherever possible
+            keySetter = function set(result, value) {
+               result[keyField] = value;
+               return result;
+            };
+         } else {
+            // for complex paths, use deep setter
+            let binding = Binding.get(keyField);
+            keySetter = (result, value) => binding.set(result, value);
+         }
+         return {
+            name: keyField,
+            keySetter,
+            value: getSelector(key[keyField]),
+         };
+      });
+      if (nameGetter) this.nameGetter = getSelector(nameGetter);
+      this.dataGetter = dataGetter || ((x) => x);
+      this.aggregates =
+         aggregates &&
+         transformValues(aggregates, (prop) => {
+            if (!AggregateFunction[prop.type]) throw new Error(`Unknown aggregate function '${prop.type}'.`);
+
+            return {
+               value: getSelector(prop.value),
+               weight: getSelector(prop.weight ?? 1),
+               type: prop.type,
+            };
+         });
+      this.reset();
+   }
+
+   reset() {
+      this.groups = this.initGroup(this.keys.length == 0);
+   }
+
+   initGroup(leaf) {
+      if (!leaf) return {};
+
+      return {
+         records: [],
+         indexes: [],
+         aggregates:
+            this.aggregates &&
+            transformValues(this.aggregates, (prop) => {
+               let f = AggregateFunction[prop.type];
+               return {
+                  processor: f(),
+                  value: prop.value,
+                  weight: prop.weight,
+               };
+            }),
+      };
+   }
+
+   process(record, index) {
+      let data = this.dataGetter(record);
+      let key = this.keys.map((k) => k.value(data));
+      let g = this.groups;
+      for (let i = 0; i < key.length; i++) {
+         let sg = g[key[i]];
+         if (!sg) {
+            sg = g[key[i]] = this.initGroup(i + 1 == key.length);
+            if (this.nameGetter) sg.name = this.nameGetter(data);
+         }
+         g = sg;
+      }
+
+      g.records.push(record);
+      g.indexes.push(index);
+
+      if (g.aggregates) {
+         for (let k in g.aggregates)
+            g.aggregates[k].processor.process(g.aggregates[k].value(data), g.aggregates[k].weight(data));
+      }
+   }
+
+   processAll(records, indexes) {
+      if (indexes) {
+         for (let i = 0; i < records.length; i++) this.process(records[i], indexes[i]);
+      } else records.forEach((r, i) => this.process(r, i));
+   }
+
+   report(g, path, level, results) {
+      if (level == this.keys.length) {
+         let key = {};
+         this.keys.forEach((k, i) => {
+            key = k.keySetter(key, path[i]);
+         });
+         results.push({
+            key: key,
+            name: g.name,
+            records: g.records,
+            indexes: g.indexes,
+            aggregates: resolveKeyPaths(transformValues(g.aggregates, (p) => p.processor.getResult())),
+         });
+      } else {
+         Object.keys(g).forEach((k) => this.report(g[k], [...path, k], level + 1, results));
+      }
+   }
+
+   getResults() {
+      let g = this.groups;
+      let results = [];
+      this.report(g, [], 0, results);
+      return results;
+   }
+}
+
+// transform object values using a function
+function transformValues(o, f) {
+   let res = {};
+   for (let k in o) res[k] = f(o[k], k);
+   return res;
+}
+
+// transform keys like 'a.b.c' into nested objects
+function resolveKeyPaths(o) {
+   let res = {};
+   for (let k in o) {
+      if (k.indexOf(".") > 0) res = Binding.get(k).set(res, o[k]);
+      else res[k] = o[k];
+   }
+   return res;
+}

package/src/data/Grouper.spec.js

@@ -1,42 +1,57 @@
-var Grouper = require("./Grouper").Grouper;
-import assert from "assert";
-
-describe("Grouper", function () {
-   describe("single grouping", function () {
-      it("should work", function () {
-         var data = [
-            { name: "John", age: 12 },
-            { name: "Jane", age: 12 },
-         ];
-
-         var grouper = new Grouper({ name: { bind: "name" } });
-         grouper.processAll(data);
-
-         var results = grouper.getResults();
-         // console.log(results);
-         assert.equal(results.length, 2);
-      });
-   });
-
-   describe("multi grouping", function () {
-      it("should work", function () {
-         var data = [
-            { name: "John", age: 12 },
-            { name: "John", age: 12 },
-            { name: "John", age: 13 },
-            { name: "John", age: 14 },
-            { name: "Jane", age: 12 },
-            { name: "Jane", age: 13 },
-            { name: "Jane", age: 14 },
-         ];
-
-         var grouper = new Grouper({ name: { bind: "name" }, age: { bind: "age" } });
-         grouper.processAll(data);
-
-         var results = grouper.getResults();
-         // console.log(results);
-         assert.equal(results.length, 6);
-         assert.equal(results[0].records.length, 2);
-      });
-   });
-});
+let Grouper = require("./Grouper").Grouper;
+import assert from "assert";
+
+describe("Grouper", function () {
+   describe("single grouping", function () {
+      it("should work", function () {
+         let data = [
+            { name: "John", age: 12 },
+            { name: "Jane", age: 12 },
+         ];
+
+         let grouper = new Grouper({ name: { bind: "name" } });
+         grouper.processAll(data);
+
+         let results = grouper.getResults();
+         // console.log(results);
+         assert.equal(results.length, 2);
+      });
+
+      it("keys can have nested properties", function () {
+         let data = [
+            { name: "John", age: 12 },
+            { name: "Jane", age: 12 },
+         ];
+
+         let grouper = new Grouper({ "person.name": { bind: "name" } });
+         grouper.processAll(data);
+
+         let results = grouper.getResults();
+         assert.equal(results.length, 2);
+         assert.equal(results[0].key.person?.name, "John");
+         assert.equal(results[1].key.person?.name, "Jane");
+      });
+   });
+
+   describe("multi grouping", function () {
+      it("should work", function () {
+         let data = [
+            { name: "John", age: 12 },
+            { name: "John", age: 12 },
+            { name: "John", age: 13 },
+            { name: "John", age: 14 },
+            { name: "Jane", age: 12 },
+            { name: "Jane", age: 13 },
+            { name: "Jane", age: 14 },
+         ];
+
+         let grouper = new Grouper({ name: { bind: "name" }, age: { bind: "age" } });
+         grouper.processAll(data);
+
+         let results = grouper.getResults();
+         // console.log(results);
+         assert.equal(results.length, 6);
+         assert.equal(results[0].records.length, 2);
+      });
+   });
+});