Clone Buttons for Rules and Groups

[ghost]

Is your feature request related to a problem? Please describe. In our project, we often need to create similar rules or groups with only slight modifications. Right now, manually recreating these rules can be time-consuming, especially in large queries with multiple nested groups.

Describe the solution you'd like It would be incredibly helpful to have clone buttons for both individual rules and entire groups. The clone button could duplicate a rule or group, including all its configurations, and place the copy directly below the original.

Proposed Functionality:

• Clone Rules: A button next to each rule to instantly duplicate it
• Clone Groups: A similar button for groups that would replicate the entire group, including all nested rules and subgroups
• Customization: Provide options to modify the clone button’s component and behavior, just like in the delete and group action buttons.

Benefits:

• Saves time by avoiding the need to manually recreate similar rules and groups.
• Reduces errors when duplicating complex configurations.
• Allows developers to tailor the UI to their needs by customizing the clone button.

Additional context For example:

[ukrbublik]

Duplicate of https://github.com/ukrbublik/react-awesome-query-builder/issues/940

[ukrbublik]

Implementation notes

1. To add new button take a "Lock" button as an example. https://github.com/search?q=repo%3Aukrbublik%2Freact-awesome-query-builder+setLock&type=code Note that its presence is controlled by config.settings.showLock https://github.com/search?q=repo%3Aukrbublik%2Freact-awesome-query-builder%20showLock&type=code Same should be done for "Clone" button - add setting like showClone. "Clone" button should be present for all items - rules, groups, rulegroups, rules in rulegroup.

2. The reducer should be added at stores/tree.js Note that state is Immutable so copying should be easy.

If an object is immutable, it can be "copied" simply by making another reference to it instead of copying the entire object.

The only exception could be the value of multiselect type (like "Colors" in demo app). Please check and make a JS copy of properties.value only if it is a JS array and not Immutable object. As new cloned item should be added right after source item, you can take a look on the logic of reordering items with PLACEMENT_AFTER as an example.

[EmmanuelIbiyemi]

hello and good day , With Experience i have with react i think making use of mmkv storage or some quick to use database like mongoDB which easy for me to use and integrate cause it's like json format you can just write the to the database and the anytime their seem to be a new rule you will just update the database And any time you need to send a new rule you can send it with the one click on the button which will fetch the updated rule from the database PS. Thank You