Технологии которые требуется использовать: React, JS bootstrap5+, CSS, HTML, JSON
использовать
reactflow задача простая и всё есть по сути в ReactFlow
требуется Знать как работать с React Flow
ВВОДНЫЕ ДАННЫЕ:
1) с backend приходит json data по примеру пункта (E) ниже в описание либо приходит пустой JSON
Требуется:
используя react flow
открывается canvas на страничке как пример смотри вложенные "example canvas.png"
нужно создать:
- контейнер(главная нода) в котором есть child nodes
- от child nodes идет флоу до сл контейера
описание:
1) над canvas должна быть кнопка "add container"
2) главный контейнер должен иметь а) заголовок приходящий из JSON + Container ID б) в низу контейнера должна быть кнопка "add action" и кнопка "edit container"
между заголовком главного контейра и кнопкой "add action" должны быть:
3) child nodes - их может быть несколько либо вообще не быть; child node это мини контейнер который создержит: а) заголовок б) кнопка "edit action"
А) разработка добавления контейров:
когда наживаем на "add container" появляется справа менюшка которая содержит
- container name filed - text - обязательное поле
- order - int
- conection to container ID - int - но может быть пустым
- Action выподающий список: [text, button]
- кнопка "create container"
после нажатия создать контейнер - обновляется react flow и таким обзом у нас теперь два главных контейнера
Б) разработка добавления actions для определенного контейнера
при нажатие "add action" справа открыывется меню с названием "Adding Action to {container ID}":
- Action name - text field (обязательное поле)
- order action - int (не обязательное поле)
- action type: выпадающий список [text, button] (обязательное поле)
- element data: вписать название текста
- connection to container - int (не обязательное поле)
- кнопка "create acion" после нажатия кнопки обновляется контейнер в reactlow
С) также требуется уметь редактировать эти ноды
D) варианты соединений:
смотри загруженные документы
- "connection variant 1.png"
- "connection variant
2.png"
E) должны быть кнопка на канвасе "Save Flow"
при нажатие на данную кнопку должен сформироваться json типа
{
......{{container ID}}: {
............
"ContainerName": "{{Container Name}}",
............
"Order": "{{Order}}",
............
"ConectionToContainer":{{ConectionToContainer}},
............
"Actions":{
............
......"{{ActionID}}":{
......
.................."ActionName": {{"ActionName"}},
......
..................
"ActionOrder": {{"ActionOrder"}},
......
.................."ActionType": {{"ActionType"}},
......
..................
"ActionData": {{"ActionData"}},
......
..................
"ConectionToC": {{"ConteinerID"}},
...........
.......},
............
}
......}
}
и он должен быть отправлен на endpoint of flask project "/flow-update"
P.S. если сможете такое реализовать - то можно будет дальше поработать над улучшением дополнительных функций
перед началом работы прошу указать ваши примеры по работе с React / Reactflow
