feat: updated dialogue editor
This commit is contained in:
parent
795b9bb640
commit
726904e939
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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));
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user