Fix nested group (#280)

* tests reduce whitespaces

* fix init load of {} as jlogic

* nit

* tests - reduce whitespace

* fix export of nested groups

* added test "query nested !group"

* lint fix

* fix nested group css

* 2.1.16

* added test with two separate group rules
added test query with !struct inside !group

Author: ukrbublik

CHANGELOG.md

@@ -1,4 +1,8 @@
 # Changelog
+- 2.1.16
+  - Fixed issues with export to Mongo and JsonLogic of queries with nested groups (#279, #279)
+- 2.1.15
+  - Fixed issue #276 with TS definitions
 - 2.1.14
   - Require Node v10+ (for karma)
   - Fixed "SyntaxError Unexpected token '<'" in sandboxes
@@ -60,7 +64,7 @@
   - Removed coupling with AntDesign. Now it should be possible to use another UI framework.
   - Added vanilla widgets. Added switcher between `antd` and `vanilla` in demo.
 - 1.3.7
-  - Fixed [issue](https://github.com/ukrbublik/react-awesome-query-builder/issues/168) with dot in field name
+  - Fixed issue #168 with dot in field name
 - 1.3.6
   - Added config options to disable inputs: `immutableFieldsMode`, `immutableOpsMode`, `immutableValuesMode` 
 - 1.3.5

css/styles.scss

@@ -471,7 +471,6 @@ div.tooltip-inner {
   }
   .group--header:hover .group--header,
   .group--header:not(:hover),
-  .rule_group:hover .rule_group,
   .rule_group:not(:hover) {
     #{$what} {
       opacity: 0;
@@ -485,7 +484,6 @@ div.tooltip-inner {
   }
   .group--header:hover .group--header,
   .group--header:not(:hover),
-  .rule_group:hover .rule_group,
   .rule_group:not(:hover) {
     #{$inactive} {
       width: 0;

modules/export/jsonLogic.js

@@ -146,7 +146,7 @@ const jsonLogicFormatItem = (item, config, meta, isRoot, parentField = null) =>
       return undefined;
     }
 
-    const groupField = isRuleGroup ? (parentField ? [parentField, field] : [field]).join(fieldSeparator) : parentField;
+    const groupField = isRuleGroup ? field : parentField;
     const list = children
       .map((currentChild) => jsonLogicFormatItem(currentChild, config, meta, false, groupField))
       .filter((currentChild) => typeof currentChild !== "undefined");
@@ -173,9 +173,13 @@ const jsonLogicFormatItem = (item, config, meta, isRoot, parentField = null) =>
     // rule_group (issue #246)
     if (isRuleGroup) {
       const op = not ? "none" : "some";
+      let fieldName = field;
+      if (parentField) {
+        fieldName = cutBeginOfString(fieldName, parentField + fieldSeparator);
+      }
       resultQuery = {
         [op]: [
-          [{var: field}],
+          [{var: fieldName}],
           resultQuery
         ]
       };
@@ -244,8 +248,8 @@ const jsonLogicFormatItem = (item, config, meta, isRoot, parentField = null) =>
       fieldName = cutBeginOfString(fieldName, parentField + fieldSeparator);
     }
     const formattedField = { "var": fieldName };
-    if (meta.usedFields.indexOf(fieldName) == -1)
-      meta.usedFields.push(fieldName);
+    if (meta.usedFields.indexOf(field) == -1)
+      meta.usedFields.push(field);
 
     // format logic
     let formatteOp = operator;

modules/export/mongoDb.js

@@ -121,6 +121,12 @@ const mongodbFormatItem = (parents, item, config, meta, _not = false) => {
   const children = item.get("children1");
   const {fieldSeparator, canShortMongoQuery} = config.settings;
 
+  const hasParentRuleGroup = parents.filter(it => it.get("type") == "rule_group").length > 0;
+  const parentPath = parents
+    .filter(it => it.get("type") == "rule_group")
+    .map(it => it.get("properties").get("field"))
+    .slice(-1).pop();
+
   if ((type === "group" || type === "rule_group") && children && children.size) {
     const not = _not ? !(properties.get("not")) : (properties.get("not"));
     const list = children
@@ -181,7 +187,17 @@ const mongodbFormatItem = (parents, item, config, meta, _not = false) => {
         resultQuery = { [mongoConj] : rules };
     }
     if (field) {
-      resultQuery = { [field]: {"$elemMatch": resultQuery} };
+      //format field
+      let fieldName = field;
+      if (hasParentRuleGroup) {
+        if (parentPath && fieldName.indexOf(parentPath+".") == 0) {
+          fieldName = fieldName.slice((parentPath+".").length);
+        } else {
+          meta.errors.push(`Can't cut group ${parentPath} from field ${fieldName}`);
+        }
+      }
+      
+      resultQuery = { [fieldName]: {"$elemMatch": resultQuery} };
     }
     return resultQuery;
   } else if (type === "rule") {
@@ -204,21 +220,16 @@ const mongodbFormatItem = (parents, item, config, meta, _not = false) => {
       [operatorDefinition, revOperatorDefinition] = [revOperatorDefinition, operatorDefinition];
     }
 
-    const hasParentRuleGroup = parents.filter(it => it.get("type") == "rule_group").length > 0;
-    const parentPath = parents
-      .filter(it => it.get("type") == "rule_group")
-      .map(it => it.get("properties").get("field"))
-      .join(fieldSeparator);
-
     //format field
     let fieldName = field;
     if (hasParentRuleGroup) {
-      if (parentPath.length > 0 && fieldName.indexOf(parentPath+".") == 0) {
+      if (parentPath && fieldName.indexOf(parentPath+".") == 0) {
         fieldName = fieldName.slice((parentPath+".").length);
       } else {
-        meta.errors.push(`Can't cut group from field ${fieldName}`);
+        meta.errors.push(`Can't cut group ${parentPath} from field ${fieldName}`);
       }
     }
+    
     // if (fieldDefinition.tableName) {
     //   let fieldParts = Array.isArray(field) ? [...field] : field.split(fieldSeparator);
     //   fieldParts[0] = fieldDefinition.tableName;

modules/import/jsonLogic.js

@@ -28,7 +28,7 @@ export const loadFromJsonLogic = (logicTree, config) => {
   };
   const extendedConfig = extendConfig(config);
   const conv = buildConv(extendedConfig);
-  let jsTree = convertFromLogic(logicTree, conv, extendedConfig, "rule", meta);
+  let jsTree = logicTree ? convertFromLogic(logicTree, conv, extendedConfig, "rule", meta) : undefined;
   if (jsTree && jsTree.type != "group") {
     jsTree = wrapInDefaultConj(jsTree, extendedConfig);
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-awesome-query-builder",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "description": "User-friendly query builder for React. Demo: https://ukrbublik.github.io/react-awesome-query-builder",
   "keywords": [
     "reactjs",

sandbox/package.json

@@ -23,7 +23,7 @@
     "@types/lodash": "^4.6",
     "antd": ">=4.0.0 <4.5.0",
     "react": "^16.4.1",
-    "react-awesome-query-builder": "^2.1.14",
+    "react-awesome-query-builder": "^2.1.16",
     "react-dom": "^16.4.1",
     "react-scripts": "3.0.1",
     "typescript": "3.4.5",

sandbox_simple/package.json

@@ -18,7 +18,7 @@
   "homepage": "https://ukrbublik.github.io/react-awesome-query-builder/",
   "dependencies": {
     "react": "^16.4.1",
-    "react-awesome-query-builder": "^2.1.14",
+    "react-awesome-query-builder": "^2.1.16",
     "react-dom": "^16.4.1",
     "react-scripts": "3.0.1",
     "lodash": "^4.6"