feat: updated dialogue editor

editor/src/main/java/ru/dragonestia/editor/component/DialogEditor.java

@@ -1,16 +1,32 @@
 package ru.dragonestia.editor.component;
 
 import com.vaadin.flow.component.Unit;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.button.ButtonVariant;
 import com.vaadin.flow.component.details.Details;
 import com.vaadin.flow.component.html.H2;
+import com.vaadin.flow.component.html.H3;
 import com.vaadin.flow.component.html.Hr;
+import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.textfield.Autocomplete;
 import com.vaadin.flow.component.textfield.TextArea;
+import com.vaadin.flow.component.textfield.TextField;
 import ru.dragonestia.editor.model.DialogueContext;
 
+import java.util.ArrayList;
+import java.util.UUID;
+import java.util.function.Consumer;
+
 public class DialogEditor extends VerticalLayout {
 
     private final DialogueContext ctx;
+    private final TextArea fieldComment;
+    private final TextArea fieldText;
+    private final Button buttonNewAnswer;
+    private final VerticalLayout layoutAnswers;
+    private final ArrayList<AnswerComponent> answers = new ArrayList<>();
 
     public DialogEditor(DialogueContext ctx) {
         this.ctx = ctx;
@@ -19,17 +35,25 @@ public class DialogEditor extends VerticalLayout {
 
         var commentDetail = new Details("Комментарий");
         commentDetail.setWidth("100%");
-        commentDetail.add(createFieldComment());
+        commentDetail.add(fieldComment = createFieldComment());
         commentDetail.setOpened(!(ctx.getComment() == null || ctx.getComment().isEmpty()));
         add(commentDetail);
 
         add(new Hr());
 
-        add(createFieldText());
+        add(fieldText = createFieldText());
+
+        add(new H3("Ответы диалога"));
+        add(buttonNewAnswer = createButtonNewAnswer());
+        add(layoutAnswers = new VerticalLayout());
+        layoutAnswers.getStyle().set("border", "2px solid #1C6EA4");
+        layoutAnswers.getStyle().set("border-radius", "26px");
+        updateAnswers();
     }
 
     private TextArea createFieldComment() {
         var field = new TextArea("Комментарий");
+        field.setAutocomplete(Autocomplete.OFF);
         field.setWidth(100, Unit.PERCENTAGE);
         field.setMinHeight(10, Unit.REM);
         field.setHelperText("Здесь можно описать какой-нибудь комментарий по поводу диалога. Эта информация имеет роль заметки для разработчиков");
@@ -40,10 +64,71 @@ public class DialogEditor extends VerticalLayout {
 
     private TextArea createFieldText() {
         var field = new TextArea("Текст диалога");
-        field.setRequired(true);
+        field.setAutocomplete(Autocomplete.OFF);
         field.setWidth(100, Unit.PERCENTAGE);
         field.setMinHeight(10, Unit.REM);
         if (ctx.getText() != null) field.setValue(ctx.getText());
         return field;
     }
+
+    private Button createButtonNewAnswer() {
+        var button = new Button("Добавить новый ответ", e -> {
+            if (answers.size() >= 4) {
+                Notification.show("Ответов у диалога не может быть больше 4");
+                return;
+            }
+
+            answers.add(new AnswerComponent());
+            updateAnswers();
+        });
+        button.addThemeVariants(ButtonVariant.LUMO_SUCCESS, ButtonVariant.LUMO_PRIMARY);
+        button.setPrefixComponent(VaadinIcon.PLUS.create());
+        button.setWidth(100, Unit.PERCENTAGE);
+        return button;
+    }
+
+    private void updateAnswers() {
+        layoutAnswers.removeAll();
+        for (var component: answers) {
+            layoutAnswers.add(component);
+        }
+    }
+
+    private static class AnswerComponent extends VerticalLayout {
+
+        private final UUID uuid = UUID.randomUUID();
+        private final TextField fieldText;
+        private final TextArea fieldComment;
+
+        private Consumer<AnswerComponent> onDelete;
+
+        private AnswerComponent() {
+            add(fieldText = createFieldText());
+
+            var commentDetail = new Details("Комментарий");
+            commentDetail.setWidth("100%");
+            commentDetail.add(fieldComment = createFieldComment());
+            add(commentDetail);
+
+            getStyle().set("background-color", "#EEEEEE");
+            getStyle().set("border-radius", "26px");
+        }
+
+        private TextField createFieldText() {
+            var field = new TextField("Текст");
+            field.setAutocomplete(Autocomplete.OFF);
+            field.setWidth(100, Unit.PERCENTAGE);
+            return field;
+        }
+
+        private TextArea createFieldComment() {
+            var field = new TextArea("Комментарий");
+            field.setAutocomplete(Autocomplete.OFF);
+            field.setWidth(100, Unit.PERCENTAGE);
+            field.setMinHeight(10, Unit.REM);
+            field.setHelperText("Здесь можно описать какой-нибудь комментарий по поводу ответа диалога. Эта информация имеет роль заметки для разработчиков");
+            field.setPlaceholder("Какая-то заметка для разработчика");
+            return field;
+        }
+    }
 }

editor/src/main/java/ru/dragonestia/editor/page/TestPage.java

@@ -1,14 +1,15 @@
 package ru.dragonestia.editor.page;
 
 import com.vaadin.flow.router.Route;
+import jakarta.annotation.PostConstruct;
 import ru.dragonestia.editor.component.DialogEditor;
 import ru.dragonestia.editor.model.DialogueContext;
 
 @Route("/")
 public class TestPage extends Page {
 
-    @Override
+    @PostConstruct
-    protected void init(QueryParams params) {
+    void init() {
         var ctx = new DialogueContext();
         add(new DialogEditor(ctx));
     }