feat: updated dialogue editor

This commit is contained in:
Andrey Terentev 2025-01-15 13:46:23 +07:00
parent 795b9bb640
commit 726904e939
2 changed files with 91 additions and 5 deletions

View File

@ -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;
}
}
}

View File

@ -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));
}