Support groups inside rule-group (#1111)

* icon types: addRuleGroup -> addSubRuleSimple, addRuleGroupExt -> addSubRule, + addSubGroup

* wip

* apply defaultField inside rule-group

* ui fix 1

* 6.6.4-alpha.0

* --no-git-checks

* extend css vars

* fix d-n-d

* fix

* defaultConjunction, defaultGroupConjunction

* fix d-n-d - respect empty group for maxNesting

* maxNumberOfRules

* lev, parentFieldPathSize

* fix drag icon

* respect maxNesting in rule-group during d-n-d

* fix showNot

* support canRegroup and canReorder inside rule-group

* fix

* fix

* fix

Author: ukrbublik

.github/workflows/npm-publish.yml

@@ -27,8 +27,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: master
       - uses: pnpm/action-setup@v4
         with:
           version: 8
@@ -38,6 +36,6 @@ jobs:
           #cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
       - run: pnpm i --frozen-lockfile
-      - run: pnpm -r publish --access public
+      - run: pnpm -r publish --access public --no-git-checks
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

CHANGELOG.md

@@ -1,4 +1,6 @@
 # Changelog
+- 6.6.4-alpha.0
+  - Support groups inside rule-group (PR #1111) (issue #1108)
 - 6.6.3
   - Fixed `Utils.isValidTree` for prod build.
     Removed `checkTree`, `isValidTree` from `Utils.Import` and `getTreeBadFields` from `Utils.TreeUtils`. (PR #1091) (issue #1075)

CONFIG.adoc

@@ -321,7 +321,7 @@ Behaviour settings:
 |showNot |true |Show `NOT` together with `AND`/`OR`?
 |forceShowConj |false |Show conjuction for 1 rule in group?
 |maxNumberOfRules | |Maximum number of rules which can be added to the query builder
-|maxNesting | |Max nesting for rule groups. +
+|maxNesting | |Max nesting for groups. +
   Set `1` if you don't want to use groups at all. This will remove also `Add group` button.
 |maxNumberOfCases | |For ternary mode - maximum number of cases
 |canLeaveEmptyGroup |true |True - leave empty group after deletion of rules, false - automatically remove empty groups + add 1 empty rule to empty root
@@ -455,6 +455,7 @@ Localization:
 |addGroupLabel |Add group
 |addRuleLabel |Add rule
 |addSubRuleLabel |Add sub rule
+|addSubGroupLabel |Add sub group
 |notLabel |Not
 |fieldSourcesPopupTitle |Select source
 |valueSourcesPopupTitle |Select value source

lerna.json

@@ -4,5 +4,5 @@
     "./packages/*"
   ],
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "6.6.3"
+  "version": "6.6.4-alpha.0"
 }

packages/antd/modules/widgets/core/Button.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Button } from "antd";
 
 const hideLabelsFor = {
-  "addRuleGroup": true,
+  "addSubRuleSimple": true,
   "delGroup": true,
   "delRuleGroup": true,
   "delRule": true,
@@ -14,7 +14,9 @@ const typeToClass = {
   "delRule": "action action--DELETE",
   "delGroup": "action action--DELETE",
   "delRuleGroup": "action action--DELETE",
-  "addRuleGroup": "action action--ADD-RULE",
+  "addSubRuleSimple": "action action--ADD-RULE",
+  "addSubRule": "action action--ADD-RULE",
+  "addSubGroup": "action action--ADD-GROUP",
 };
 
 const typeToType = {

packages/antd/modules/widgets/core/Icon.jsx

@@ -9,8 +9,9 @@ const typeToIcon = {
   "delRule": <DeleteFilled />,
   "delGroup": <DeleteFilled />,
   "delRuleGroup": <DeleteFilled />,
-  "addRuleGroup": <PlusOutlined />,
-  "addRuleGroupExt": <PlusOutlined />,
+  "addSubRuleSimple": <PlusOutlined />,
+  "addSubRule": <PlusOutlined />,
+  "addSubGroup": <PlusCircleOutlined />,
   "drag": <HolderOutlined />,
 };
 

packages/antd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-awesome-query-builder/antd",
-  "version": "6.6.3",
+  "version": "6.6.4-alpha.0",
   "description": "User-friendly query builder for React. AntDesign widgets",
   "keywords": [
     "query-builder",

packages/bootstrap/modules/widgets/core/BootstrapButton.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Button } from "reactstrap";
 
 const hideLabelsFor = {
-  "addRuleGroup": true,
+  "addSubRuleSimple": true,
   "delRuleGroup": true,
   "delRule": true,
 };

packages/bootstrap/modules/widgets/core/BootstrapIcon.jsx

@@ -8,8 +8,9 @@ const typeToIcon = {
   delGroup: faTrashAlt,
   delRuleGroup: faTrashAlt,
   delRule: faTrashAlt,
-  addRuleGroup: faPlus,
-  addRuleGroupExt: faPlus,
+  addSubRuleSimple: faPlus,
+  addSubRule: faPlus,
+  addSubGroup: faPlus,
   addRule: faPlus,
   addGroup: faPlus,
   drag: faUpDown,

packages/bootstrap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-awesome-query-builder/bootstrap",
-  "version": "6.6.3",
+  "version": "6.6.4-alpha.0",
   "description": "User-friendly query builder for React. Bootstrap widgets",
   "keywords": [
     "query-builder",

packages/core/modules/actions/tree.js

@@ -20,14 +20,17 @@ export const setTree = (config, tree) => ({
  * @param {Immutable.List} path
  * @param {Immutable.Map} properties
  */
-export const addRule = (config, path, properties, ruleType = "rule", children = null, parentRuleGroupPath = null) => ({
+export const addRule = (config, path, properties, ruleType = "rule", children = null, parentRuleGroupField = null) => ({
   type: constants.ADD_RULE,
   ruleType: ruleType,
   children: children,
   path: toImmutableList(path),
   id: uuid(),
-  properties: defaultRuleProperties(config, parentRuleGroupPath).merge(fromJS(properties) || {}),
-  config: config
+  properties: defaultRuleProperties(config, parentRuleGroupField).merge(fromJS(properties) || {}),
+  config: config,
+  meta: {
+    parentRuleGroupField,
+  },
 });
 
 /**
@@ -76,13 +79,16 @@ export const addCaseGroup = (config, path, properties, children = null) => ({
  * @param {Immutable.List} path
  * @param {Immutable.Map} properties
  */
-export const addGroup = (config, path, properties, children = null) => ({
+export const addGroup = (config, path, properties, children = null, parentRuleGroupField = null) => ({
   type: constants.ADD_GROUP,
   path: toImmutableList(path),
   children: children,
   id: uuid(),
-  properties: defaultGroupProperties(config).merge(fromJS(properties) || {}),
-  config: config
+  properties: defaultGroupProperties(config, parentRuleGroupField).merge(fromJS(properties) || {}),
+  config: config,
+  meta: {
+    parentRuleGroupField,
+  },
 });
 
 /**

packages/core/modules/config/default.js

@@ -33,6 +33,8 @@ export const settings = {
   setOpOnChangeField: ["keep", "default"], // 'default' (default if present), 'keep' (keep prev from last field), 'first', 'none'
   groupOperators: ["some", "all", "none"],
 
+  defaultConjunction: "AND",
+  // todo: deprecated, remove this in favour of defaultConjunction
   defaultGroupConjunction: "AND",
 
   // localization
@@ -56,6 +58,7 @@ export const settings = {
   defaultCaseLabel: "Default:",
   addRuleLabel: "Add rule",
   addSubRuleLabel: "Add sub rule",
+  addSubGroupLabel: "Add sub group",
   delGroupLabel: "Delete",
   notLabel: "Not",
   fieldSourcesPopupTitle: "Select source",

packages/core/modules/export/jsonLogic.js

@@ -91,7 +91,7 @@ const formatGroup = (item, config, meta, _not = false, isRoot = false, parentFie
   if (!conjunction)
     conjunction = defaultConjunction(config);
   const conjunctionDefinition = config.conjunctions[conjunction];
-  const conj = conjunctionDefinition.jsonLogicConj || conjunction.toLowerCase();
+  const conj = conjunctionDefinition?.jsonLogicConj || conjunction.toLowerCase();
   const origNot = !!properties.get("not");
 
   const isRuleGroup = (type === "rule_group" && !isRoot);

packages/core/modules/import/jsonLogic.js

@@ -3,7 +3,7 @@ import {getOpCardinality, isJsonLogic, shallowEqual, logger} from "../utils/stuf
 import {getFieldConfig, extendConfig, normalizeField, getFuncConfig, iterateFuncs, getFieldParts} from "../utils/configUtils";
 import {getWidgetForFieldOp} from "../utils/ruleUtils";
 import {loadTree} from "./tree";
-import {defaultConjunction, defaultGroupConjunction} from "../utils/defaultUtils";
+import {defaultGroupConjunction} from "../utils/defaultUtils";
 
 import moment from "moment";
 
@@ -669,16 +669,16 @@ const convertConj = (op, vals, conv, config, not, meta, parentField = null, isRu
 //   return arr;
 // };
 
-const wrapInDefaultConjRuleGroup = (rule, parentField, parentFieldConfig, config, conj = undefined, not = false) => {
+const wrapInDefaultConjRuleGroup = (rule, groupField, groupFieldConfig, config, conj = undefined, not = false) => {
   if (!rule) return undefined;
   return {
     type: "rule_group",
     id: uuid(),
     children1: { [rule.id]: rule },
     properties: {
-      conjunction: conj || defaultGroupConjunction(config, parentFieldConfig),
+      conjunction: conj || defaultGroupConjunction(config, groupFieldConfig),
       not: not,
-      field: parentField,
+      field: groupField,
     }
   };
 };
@@ -689,7 +689,7 @@ const wrapInDefaultConj = (rule, config, not = false) => {
     id: uuid(),
     children1: { [rule.id]: rule },
     properties: {
-      conjunction: defaultConjunction(config),
+      conjunction: defaultGroupConjunction(config),
       not: not
     }
   };

packages/core/modules/import/spel.js

@@ -3,7 +3,7 @@ import uuid from "../utils/uuid";
 import {getFieldConfig, getFuncConfig, extendConfig, normalizeField, iterateFuncs} from "../utils/configUtils";
 import {getWidgetForFieldOp} from "../utils/ruleUtils";
 import {loadTree} from "./tree";
-import {defaultConjunction, defaultGroupConjunction} from "../utils/defaultUtils";
+import {defaultGroupConjunction} from "../utils/defaultUtils";
 import {getOpCardinality, logger, isJsonCompatible} from "../utils/stuff";
 import moment from "moment";
 import {compareToSign} from "../export/spel";
@@ -1302,16 +1302,16 @@ const buildCaseValProperties = (config, meta, conv, val, spel = null) => {
   return valProperties;
 };
 
-// const wrapInDefaultConjRuleGroup = (rule, parentField, parentFieldConfig, config, conj) => {
+// const wrapInDefaultConjRuleGroup = (rule, groupField, groupFieldConfig, config, conj) => {
 //   if (!rule) return undefined;
 //   return {
 //     type: "rule_group",
 //     id: uuid(),
 //     children1: { [rule.id]: rule },
 //     properties: {
-//       conjunction: conj || defaultGroupConjunction(config, parentFieldConfig),
+//       conjunction: conj || defaultGroupConjunction(config, groupFieldConfig),
 //       not: false,
-//       field: parentField,
+//       field: groupField,
 //     }
 //   };
 // };
@@ -1322,7 +1322,7 @@ const wrapInDefaultConj = (rule, config, not = false) => {
     id: uuid(),
     children1: { [rule.id]: rule },
     properties: {
-      conjunction: defaultConjunction(config),
+      conjunction: defaultGroupConjunction(config),
       not: not || false
     }
   };

packages/core/modules/index.d.ts

@@ -543,18 +543,21 @@ interface ConfigUtils {
   applyJsonLogic(logic: any, data?: any): any;
 }
 interface DefaultUtils {
-  getDefaultField(config: Config, canGetFirst?: boolean, parentRuleGroupPath?: IdPath): FieldValueI | null;
-  getDefaultSubField(config: Config, parentRuleGroupPath?: IdPath): FieldValueI | null;
+  getDefaultField(config: Config, canGetFirst?: boolean, parentRuleGroupField?: string): FieldValueI | null;
+  getDefaultSubField(config: Config, parentRuleGroupField?: string): FieldValueI | null;
   getDefaultFieldSrc(config: Config, canGetFirst?: boolean): string;
   getDefaultOperator(config: Config, field: Field, canGetFirst?: boolean): string;
   defaultRule(id: string, config: Config): Record<string, ImmutableRule>;
   defaultRoot(config: Config, canAddDefaultRule?: boolean): ImmutableGroup;
   defaultItemProperties(config: Config, item: JsonItem): ImmutableItemProperties;
-  defaultGroupProperties(config: Config, fieldConfig?: FieldValueOrConfig): ImmutableGroupProperties;
-  defaultRuleProperties(config: Config, parentRuleGroupPath?: IdPath, item?: JsonItem, canUseDefaultFieldAndOp?: boolean, canGetFirst?: boolean): ImmutableRuleProperties;
+  defaultGroupProperties(config: Config, groupFieldConfig?: FieldValueOrConfig): ImmutableGroupProperties;
+  defaultRuleProperties(config: Config, parentRuleGroupField?: string, item?: JsonItem, canUseDefaultFieldAndOp?: boolean, canGetFirst?: boolean): ImmutableRuleProperties;
+  /**
+   * @deprecated Use defaultGroupConjunction() instead
+   */
   defaultConjunction(config: Config): string;
   defaultOperatorOptions(config: Config, operator: string, field: Field): OperatorOptionsI | null;
-  defaultGroupConjunction(config: Config, fieldConfig?: FieldValueOrConfig): string;
+  defaultGroupConjunction(config: Config, groupFieldConfig?: FieldValueOrConfig): string;
 
   // createListWithOneElement<TItem>(el: TItem): ImmutableList<TItem>;
   // createListFromArray<TItem>(array: TItem[]): ImmutableList<TItem>;
@@ -590,7 +593,7 @@ interface TreeUtils {
   expandTreeSubpath(path: ImmutablePath, ...suffix: string[]): ImmutablePath;
   fixEmptyGroupsInTree(tree: ImmutableTree): ImmutableTree;
   fixPathsInTree(tree: ImmutableTree): ImmutableTree;
-  getFlatTree(tree: ImmutableTree): FlatTree;
+  getFlatTree(tree: ImmutableTree, config?: Config): FlatTree;
   getTotalReordableNodesCountInTree(tree: ImmutableTree): number;
   getTotalRulesCountInTree(tree: ImmutableTree): number;
   isEmptyTree(tree: ImmutableTree): boolean;
@@ -1269,6 +1272,11 @@ interface FieldGroupExt<FS = NumberFieldSettings<number>> extends BaseField {
   initialEmptyWhere?: boolean;
   showNot?: boolean;
   conjunctions?: Array<string>;
+  defaultConjunction?: string;
+  maxNesting?: number;
+  maxNumberOfRules?: number;
+  canRegroup?: boolean;
+  canReorder?: boolean;
   isSpelArray?: boolean;
   isSpelItemMap?: boolean;
 }
@@ -1339,6 +1347,7 @@ export interface LocaleSettings {
   defaultCaseLabel?: string;
   addRuleLabel?: string;
   addSubRuleLabel?: string;
+  addSubGroupLabel?: string;
   delGroupLabel?: string;
   notLabel?: string;
   fieldSourcesPopupTitle?: string;
@@ -1363,6 +1372,7 @@ export interface BehaviourSettings {
   canShortMongoQuery?: boolean;
   defaultField?: AnyFieldValue;
   defaultOperator?: string;
+  defaultConjunction?: string;
   fieldSources?: Array<FieldSource>;
   valueSourcesInfo?: ValueSourcesInfo;
   canCompareFieldWithField?: CanCompareFieldWithField | SerializedFunction;

packages/core/modules/stores/tree.js

@@ -1,6 +1,6 @@
 import Immutable, { fromJS } from "immutable";
 import {
-  expandTreePath, expandTreeSubpath, getItemByPath, fixPathsInTree, 
+  expandTreePath, expandTreeSubpath, getItemByPath, getAncestorRuleGroups, fixPathsInTree,
   getTotalRulesCountInTree, fixEmptyGroupsInTree, isEmptyTree, hasChildren, removeIsLockedInTree
 } from "../utils/treeUtils";
 import {
@@ -50,7 +50,7 @@ const addNewGroup = (state, path, type, generatedId, properties, config, childre
 
       // Add one empty rule into new group
       if (canAddNewRule) {
-        state = addItem(state, groupPath, "rule", uuid(), defaultRuleProperties(config), config);
+        state = addItem(state, groupPath, "rule", uuid(), defaultRuleProperties(config, meta?.parentRuleGroupField), config);
       }
     }
 
@@ -226,13 +226,30 @@ const addItem = (state, path, type, generatedId, properties, config, children =
     currentNumber = targetChildrenSize;
     maxNumber = maxNumberOfCases;
   } else if (type === "group") {
-    currentNumber = path.size;
-    maxNumber = maxNesting;
-  } else if (targetItem?.get("type") === "rule_group") {
-    // don't restrict
-  } else {
-    currentNumber = isTernary ? getTotalRulesCountInTree(caseGroup) : getTotalRulesCountInTree(state);
-    maxNumber = maxNumberOfRules;
+    const ruleGroups = getAncestorRuleGroups(state, path);
+    if (ruleGroups.length) {
+      // closest rule-group
+      const { path: ruleGroupPath, field: ruleGroupField } = ruleGroups[0];
+      const ruleGroupFieldConfig = getFieldConfig(config, ruleGroupField);
+      currentNumber = path.size - ruleGroupPath.length;
+      maxNumber = ruleGroupFieldConfig?.maxNesting;
+    } else {
+      currentNumber = path.size;
+      maxNumber = maxNesting;
+    }
+  } else { // rule or rule_group
+    const ruleGroups = getAncestorRuleGroups(state, path);
+    if (ruleGroups.length) {
+      // closest rule-group
+      const { path: ruleGroupPath, field: ruleGroupField } = ruleGroups[0];
+      const ruleGroupFieldConfig = getFieldConfig(config, ruleGroupField);
+      const ruleGroupItem = getItemByPath(state, ruleGroupPath);
+      maxNumber = ruleGroupFieldConfig?.maxNumberOfRules;
+      currentNumber = getTotalRulesCountInTree(ruleGroupItem);
+    } else {
+      currentNumber = isTernary ? getTotalRulesCountInTree(caseGroup) : getTotalRulesCountInTree(state);
+      maxNumber = maxNumberOfRules;
+    }
   }
   const canAdd = maxNumber && currentNumber ? (currentNumber < maxNumber) : true;
 
@@ -573,7 +590,7 @@ const setField = (state, path, newField, config, asyncListValues, _meta = {}) =>
     const {canReuseValue, newValue, newValueSrc, newValueType, operatorCardinality} = getNewValueForFieldOp(
       config, config, currentProperties, newField, newOperator, "field", canFix, isEndValue, canDropArgs
     );
-    let groupProperties = defaultGroupProperties(config, newFieldConfig).merge({
+    let groupProperties = defaultGroupProperties(config, newFieldConfig, newField).merge({
       field: newField,
       fieldSrc: "field",
       mode: newFieldConfig.mode,