From 726904e9394f57f1ac36bba83149a61ab568728a Mon Sep 17 00:00:00 2001 From: ScarletRedMan Date: Wed, 15 Jan 2025 13:46:23 +0700 Subject: [PATCH] feat: updated dialogue editor --- .../editor/component/DialogEditor.java | 91 ++++++++++++++++++- .../ru/dragonestia/editor/page/TestPage.java | 5 +- 2 files changed, 91 insertions(+), 5 deletions(-) diff --git a/editor/src/main/java/ru/dragonestia/editor/component/DialogEditor.java b/editor/src/main/java/ru/dragonestia/editor/component/DialogEditor.java index e52b223..76b711b 100644 --- a/editor/src/main/java/ru/dragonestia/editor/component/DialogEditor.java +++ b/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 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 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; + } + } } diff --git a/editor/src/main/java/ru/dragonestia/editor/page/TestPage.java b/editor/src/main/java/ru/dragonestia/editor/page/TestPage.java index 445e825..de91809 100644 --- a/editor/src/main/java/ru/dragonestia/editor/page/TestPage.java +++ b/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 - protected void init(QueryParams params) { + @PostConstruct + void init() { var ctx = new DialogueContext(); add(new DialogEditor(ctx)); }