There is a task to create a condition builder on the front end. For example, there is a condition "if((action == true || action == true && val == 5) || (action == true && $val != 7) )" that needs to be replicated on the front end.
How it should be done.
Upon loading, a form appears that is divided into two blocks
1st block "Conditions"
1. Button to create a form
2. If this is the first element at its level, then it is empty; otherwise, a selector with && and || ("level_condition")
3. A selector that will choose a field from the available ones in the title and name array ("field_name")
[
{"name": "some_name", "title": "Some Name", "type": "select", "select_data": [{"name": 12, "value": 12}, {"name": 14, "value": 14}]},
{"name": "some_name_1", "title": "Some Name 1", "type": "boolean", "value": false},
{"name": "some_name_2", "title": "Some Name 2", "type": "integer", "value": 5},
{"name": "some_name_3", "title": "Some Name 3", "type": "string", "value": "string text"}
]4. Selector with logical operations != == etc. ("operation")
5. Field for manually specifying a value or, if it is a boolean select, to specify values from the array in item 3. ("value")
6. Button to add a sublevel that has the same logic as the block above.
7. Delete button (if the parent is deleted, everything below it is also erased)
Thus, we will be able to replicate the logic with infinite nesting.
2nd block "Actions"
Selector with options "", "Error", "Action".
After selecting "Error", a text area appears for entering text
After selecting "Action", a selector appears as in item 3 with the possibility of adding new ones (here without a level) and a delete button.
Save button.
In the form, the nesting needs to be done correctly. It is expected that when submitting for saving, the response structure will be as follows. If two conditions are selected at the 1st level. In the 1st condition, select 1 sub-level, and so on.
conditions[0][level_condition] = ""
conditions[0][field_name]
conditions[0][operation]
conditions[0][value]
conditions[0][0][level_condition] = ""
conditions[0][0][field_name]
conditions[0][0][operation]
conditions[0][0][value]
conditions[0][1][level_condition] = "||"
conditions[0][1][field_name]
conditions[0][1][operation]
conditions[0][1][value]
conditions[1][level_condition]= "&&"
conditions[1][field_name]
conditions[1][operation]
conditions[1][value]
action_selector[error] = error text
action_selector[0][action][field_name]= the field that was selected
action_selector[0][action][value] = the value for the selected field
Image with an example of the overall concept, only there are extra buttons
