cx 24.3.6 → 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,44 +16921,34 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 				},
 				"dropzone",
 			);
+			var dataRecordClass = CSS.element(baseClass, "data");
+			var isDataRecord = widget.buffered
+				? function (item) {
+						var _item$props;
+						return (
+							(item == null ||
+							(_item$props = item.props) == null ||
+							(_item$props = _item$props.instance) == null ||
+							(_item$props = _item$props.data) == null
+								? void 0
+								: _item$props["class"]) == dataRecordClass
+						);
+					}
+				: function (item) {
+						var _item$props2;
+						return item == null || (_item$props2 = item.props) == null || (_item$props2 = _item$props2.record) == null
+							? void 0
+							: _item$props2.type;
+					};
 			var index = 0;
-			while (
-				index < children.length &&
-				((_children$index = children[index]) == null ||
-				(_children$index = _children$index.props) == null ||
-				(_children$index = _children$index.record) == null
-					? void 0
-					: _children$index.type) != "data"
-			) {
-				var _children$index;
-				index++;
-			}
+			while (index < children.length && !isDataRecord(children[index])) index++;
 			var count = 0;
 			while (index < children.length && count < this.state.dropInsertionIndex) {
-				var _children$index2;
-				if (
-					((_children$index2 = children[index]) == null ||
-					(_children$index2 = _children$index2.props) == null ||
-					(_children$index2 = _children$index2.record) == null
-						? void 0
-						: _children$index2.type) == "data"
-				)
-					count++;
+				if (isDataRecord(children[index])) count++;
 				index++;
 			}
 			var savedIndexPos = index;
-			if (!this.state.dropNextToTheRowAbove)
-				while (
-					index < children.length &&
-					((_children$index3 = children[index]) == null ||
-					(_children$index3 = _children$index3.props) == null ||
-					(_children$index3 = _children$index3.record) == null
-						? void 0
-						: _children$index3.type) != "data"
-				) {
-					var _children$index3;
-					index++;
-				}
+			if (!this.state.dropNextToTheRowAbove) while (index < children.length && !isDataRecord(children[index])) index++;
 
 			// do not allow insertion after the last group footer
 			if (savedIndexPos < index && index == children.length) index = savedIndexPos;
@@ -17353,15 +17343,15 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			if (dropTarget == "grid" && widget.onDrop && dropInsertionIndex != null) {
 				e.target = {
 					insertionIndex: start + dropInsertionIndex,
-					recordBefore: this.getRecordAt(start + dropInsertionIndex - 1),
-					recordAfter: this.getRecordAt(start + dropInsertionIndex),
+					recordBefore: this.getDataRecordAt(start + dropInsertionIndex - 1),
+					recordAfter: this.getDataRecordAt(start + dropInsertionIndex),
 					dropNextToTheRowAbove: dropNextToTheRowAbove,
 				};
 				instance.invoke("onDrop", e, instance);
 			} else if (dropTarget == "row") {
 				e.target = {
 					index: start + dropInsertionIndex,
-					record: this.getRecordAt(start + dropInsertionIndex),
+					record: this.getDataRecordAt(start + dropInsertionIndex),
 				};
 				instance.invoke("onRowDrop", e, instance);
 			} else if (dropTarget == "column" && widget.onColumnDrop) {
@@ -18034,6 +18024,14 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		}
 		widget.selection.selectMultiple(instance.store, selection, indexes, options);
 	};
+	_proto2.getDataRecordAt = function getDataRecordAt(index) {
+		var records = this.props.instance.records;
+		if (!records) return this.getRecordAt(index);
+		var dataRecords = records.filter(function (r) {
+			return r.type == "data";
+		});
+		return dataRecords[index];
+	};
 	_proto2.getRecordAt = function getRecordAt(cursor) {
 		var _this$props7 = this.props,
 			instance = _this$props7.instance,
@@ -18412,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.6",
+   "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);
+      });
+   });
+});