Update the crud example
This commit is contained in:
parent
58335b163a
commit
9d258aa505
|
@ -4,7 +4,7 @@ import com.baeldung.introduction.PushView;
|
||||||
import com.baeldung.introduction.basics.VaadinFlowBasics;
|
import com.baeldung.introduction.basics.VaadinFlowBasics;
|
||||||
import com.baeldung.introduction.FormView;
|
import com.baeldung.introduction.FormView;
|
||||||
import com.baeldung.introduction.GridView;
|
import com.baeldung.introduction.GridView;
|
||||||
import com.baeldung.spring.CrudView;
|
import com.baeldung.spring.EmployeesView;
|
||||||
import com.vaadin.flow.component.html.H1;
|
import com.vaadin.flow.component.html.H1;
|
||||||
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
|
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
|
||||||
import com.vaadin.flow.router.Route;
|
import com.vaadin.flow.router.Route;
|
||||||
|
@ -20,6 +20,6 @@ public class IndexView extends VerticalLayout {
|
||||||
add(new RouterLink("Grid", GridView.class));
|
add(new RouterLink("Grid", GridView.class));
|
||||||
add(new RouterLink("Form", FormView.class));
|
add(new RouterLink("Form", FormView.class));
|
||||||
add(new RouterLink("Push", PushView.class));
|
add(new RouterLink("Push", PushView.class));
|
||||||
add(new RouterLink("CRUD", CrudView.class));
|
add(new RouterLink("CRUD", EmployeesView.class));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,7 @@ package com.baeldung.data;
|
||||||
import jakarta.persistence.Entity;
|
import jakarta.persistence.Entity;
|
||||||
import jakarta.persistence.GeneratedValue;
|
import jakarta.persistence.GeneratedValue;
|
||||||
import jakarta.persistence.Id;
|
import jakarta.persistence.Id;
|
||||||
|
import jakarta.validation.constraints.Size;
|
||||||
|
|
||||||
@Entity
|
@Entity
|
||||||
public class Employee {
|
public class Employee {
|
||||||
|
@ -12,11 +13,13 @@ public class Employee {
|
||||||
@GeneratedValue
|
@GeneratedValue
|
||||||
private Long id;
|
private Long id;
|
||||||
|
|
||||||
|
@Size(min = 2, message = "First name must have at least 2 characters")
|
||||||
private String firstName;
|
private String firstName;
|
||||||
|
|
||||||
|
@Size(min = 2, message = "Last name must have at least 2 characters")
|
||||||
private String lastName;
|
private String lastName;
|
||||||
|
|
||||||
protected Employee() {
|
public Employee() {
|
||||||
}
|
}
|
||||||
|
|
||||||
public Employee(String firstName, String lastName) {
|
public Employee(String firstName, String lastName) {
|
||||||
|
@ -28,6 +31,10 @@ public class Employee {
|
||||||
return id;
|
return id;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public void setId(Long id) {
|
||||||
|
this.id = id;
|
||||||
|
}
|
||||||
|
|
||||||
public String getFirstName() {
|
public String getFirstName() {
|
||||||
return firstName;
|
return firstName;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,69 +0,0 @@
|
||||||
package com.baeldung.spring;
|
|
||||||
|
|
||||||
import com.baeldung.data.Employee;
|
|
||||||
import com.baeldung.data.EmployeeRepository;
|
|
||||||
import org.springframework.util.StringUtils;
|
|
||||||
|
|
||||||
import com.vaadin.flow.component.button.Button;
|
|
||||||
import com.vaadin.flow.component.grid.Grid;
|
|
||||||
import com.vaadin.flow.component.icon.VaadinIcon;
|
|
||||||
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
|
|
||||||
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
|
|
||||||
import com.vaadin.flow.component.textfield.TextField;
|
|
||||||
import com.vaadin.flow.data.value.ValueChangeMode;
|
|
||||||
import com.vaadin.flow.router.Route;
|
|
||||||
|
|
||||||
@Route("crud")
|
|
||||||
public class CrudView extends VerticalLayout {
|
|
||||||
|
|
||||||
private final EmployeeRepository employeeRepository;
|
|
||||||
|
|
||||||
private final EmployeeEditor editor;
|
|
||||||
|
|
||||||
final Grid<Employee> grid;
|
|
||||||
|
|
||||||
final TextField filter;
|
|
||||||
|
|
||||||
private final Button addNewBtn;
|
|
||||||
|
|
||||||
public CrudView(EmployeeRepository repo, EmployeeEditor editor) {
|
|
||||||
this.employeeRepository = repo;
|
|
||||||
this.editor = editor;
|
|
||||||
this.grid = new Grid<>(Employee.class);
|
|
||||||
this.filter = new TextField();
|
|
||||||
this.addNewBtn = new Button("New employee", VaadinIcon.PLUS.create());
|
|
||||||
|
|
||||||
HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn);
|
|
||||||
add(actions, grid, editor);
|
|
||||||
|
|
||||||
grid.setHeight("200px");
|
|
||||||
grid.setColumns("id", "firstName", "lastName");
|
|
||||||
grid.getColumnByKey("id").setWidth("50px").setFlexGrow(0);
|
|
||||||
|
|
||||||
filter.setPlaceholder("Filter by last name");
|
|
||||||
|
|
||||||
filter.setValueChangeMode(ValueChangeMode.EAGER);
|
|
||||||
filter.addValueChangeListener(e -> listEmployees(e.getValue()));
|
|
||||||
|
|
||||||
grid.asSingleSelect().addValueChangeListener(e -> {
|
|
||||||
editor.editEmployee(e.getValue());
|
|
||||||
});
|
|
||||||
|
|
||||||
addNewBtn.addClickListener(e -> editor.editEmployee(new Employee("", "")));
|
|
||||||
|
|
||||||
editor.setChangeHandler(() -> {
|
|
||||||
editor.setVisible(false);
|
|
||||||
listEmployees(filter.getValue());
|
|
||||||
});
|
|
||||||
|
|
||||||
listEmployees(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
void listEmployees(String filterText) {
|
|
||||||
if (StringUtils.isEmpty(filterText)) {
|
|
||||||
grid.setItems(employeeRepository.findAll());
|
|
||||||
} else {
|
|
||||||
grid.setItems(employeeRepository.findByLastNameStartsWithIgnoreCase(filterText));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,92 +1,85 @@
|
||||||
package com.baeldung.spring;
|
package com.baeldung.spring;
|
||||||
|
|
||||||
import com.baeldung.data.Employee;
|
import com.baeldung.data.Employee;
|
||||||
import com.baeldung.data.EmployeeRepository;
|
import com.vaadin.flow.component.Composite;
|
||||||
import com.vaadin.flow.component.Key;
|
import com.vaadin.flow.component.Key;
|
||||||
import com.vaadin.flow.component.KeyNotifier;
|
|
||||||
import com.vaadin.flow.component.button.Button;
|
import com.vaadin.flow.component.button.Button;
|
||||||
|
import com.vaadin.flow.component.button.ButtonVariant;
|
||||||
import com.vaadin.flow.component.icon.VaadinIcon;
|
import com.vaadin.flow.component.icon.VaadinIcon;
|
||||||
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
|
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
|
||||||
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
|
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
|
||||||
import com.vaadin.flow.component.textfield.TextField;
|
import com.vaadin.flow.component.textfield.TextField;
|
||||||
import com.vaadin.flow.data.binder.Binder;
|
import com.vaadin.flow.data.binder.Binder;
|
||||||
import com.vaadin.flow.spring.annotation.SpringComponent;
|
|
||||||
import com.vaadin.flow.spring.annotation.UIScope;
|
|
||||||
import org.springframework.beans.factory.annotation.Autowired;
|
|
||||||
|
|
||||||
@SpringComponent
|
public class EmployeeEditor extends Composite<VerticalLayout> {
|
||||||
@UIScope
|
|
||||||
public class EmployeeEditor extends VerticalLayout implements KeyNotifier {
|
|
||||||
|
|
||||||
private final EmployeeRepository repository;
|
public interface SaveListener {
|
||||||
|
void onSave(Employee employee);
|
||||||
|
}
|
||||||
|
|
||||||
|
public interface DeleteListener {
|
||||||
|
void onDelete(Employee employee);
|
||||||
|
}
|
||||||
|
|
||||||
|
public interface CancelListener {
|
||||||
|
void onCancel();
|
||||||
|
}
|
||||||
|
|
||||||
private Employee employee;
|
private Employee employee;
|
||||||
|
|
||||||
TextField firstName = new TextField("First name");
|
private SaveListener saveListener;
|
||||||
TextField lastName = new TextField("Last name");
|
private DeleteListener deleteListener;
|
||||||
|
private CancelListener cancelListener;
|
||||||
|
|
||||||
Button save = new Button("Save", VaadinIcon.CHECK.create());
|
private final Binder<Employee> binder = new Binder<>(Employee.class);
|
||||||
Button cancel = new Button("Cancel");
|
|
||||||
Button delete = new Button("Delete", VaadinIcon.TRASH.create());
|
|
||||||
HorizontalLayout actions = new HorizontalLayout(save, cancel, delete);
|
|
||||||
|
|
||||||
Binder<Employee> binder = new Binder<>(Employee.class);
|
public EmployeeEditor() {
|
||||||
private ChangeHandler changeHandler;
|
var firstName = new TextField("First name");
|
||||||
|
var lastName = new TextField("Last name");
|
||||||
|
|
||||||
@Autowired
|
var save = new Button("Save", VaadinIcon.CHECK.create());
|
||||||
public EmployeeEditor(EmployeeRepository repository) {
|
var cancel = new Button("Cancel");
|
||||||
this.repository = repository;
|
var delete = new Button("Delete", VaadinIcon.TRASH.create());
|
||||||
|
|
||||||
add(firstName, lastName, actions);
|
binder.forField(firstName).bind(Employee::getFirstName, Employee::setFirstName);
|
||||||
|
binder.forField(lastName).bind(Employee::getLastName, Employee::setLastName);
|
||||||
|
|
||||||
binder.bindInstanceFields(this);
|
save.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
|
||||||
|
save.addClickListener(e -> save());
|
||||||
|
save.addClickShortcut(Key.ENTER);
|
||||||
|
|
||||||
setSpacing(true);
|
delete.addThemeVariants(ButtonVariant.LUMO_ERROR);
|
||||||
|
delete.addClickListener(e -> deleteListener.onDelete(employee));
|
||||||
|
|
||||||
save.getElement().getThemeList().add("primary");
|
cancel.addClickListener(e -> cancelListener.onCancel());
|
||||||
delete.getElement().getThemeList().add("error");
|
|
||||||
|
|
||||||
addKeyPressListener(Key.ENTER, e -> save());
|
getContent().add(firstName, lastName, new HorizontalLayout(save, cancel, delete));
|
||||||
|
}
|
||||||
|
|
||||||
save.addClickListener(e -> save());
|
private void save() {
|
||||||
delete.addClickListener(e -> delete());
|
// Save the form into a new instance of Employee
|
||||||
cancel.addClickListener(e -> editEmployee(employee));
|
var updated = new Employee();
|
||||||
setVisible(false);
|
updated.setId(employee.getId());
|
||||||
}
|
|
||||||
|
|
||||||
void delete() {
|
if (binder.writeBeanIfValid(updated)) {
|
||||||
repository.delete(employee);
|
saveListener.onSave(updated);
|
||||||
changeHandler.onChange();
|
|
||||||
}
|
|
||||||
|
|
||||||
void save() {
|
|
||||||
repository.save(employee);
|
|
||||||
changeHandler.onChange();
|
|
||||||
}
|
|
||||||
|
|
||||||
public interface ChangeHandler {
|
|
||||||
void onChange();
|
|
||||||
}
|
|
||||||
|
|
||||||
public final void editEmployee(Employee c) {
|
|
||||||
if (c == null) {
|
|
||||||
setVisible(false);
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
final boolean persisted = c.getId() != null;
|
|
||||||
if (persisted) {
|
|
||||||
employee = repository.findById(c.getId()).get();
|
|
||||||
} else {
|
|
||||||
employee = c;
|
|
||||||
}
|
|
||||||
|
|
||||||
cancel.setVisible(persisted);
|
|
||||||
binder.setBean(employee);
|
|
||||||
setVisible(true);
|
|
||||||
firstName.focus();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public void setChangeHandler(ChangeHandler h) {
|
public void setEmployee(Employee employee) {
|
||||||
changeHandler = h;
|
this.employee = employee;
|
||||||
|
binder.readBean(employee);
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setSaveListener(SaveListener saveListener) {
|
||||||
|
this.saveListener = saveListener;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setDeleteListener(DeleteListener deleteListener) {
|
||||||
|
this.deleteListener = deleteListener;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setCancelListener(CancelListener cancelListener) {
|
||||||
|
this.cancelListener = cancelListener;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,95 @@
|
||||||
|
package com.baeldung.spring;
|
||||||
|
|
||||||
|
import com.baeldung.data.Employee;
|
||||||
|
import com.baeldung.data.EmployeeRepository;
|
||||||
|
|
||||||
|
import com.vaadin.flow.component.button.Button;
|
||||||
|
import com.vaadin.flow.component.grid.Grid;
|
||||||
|
import com.vaadin.flow.component.icon.VaadinIcon;
|
||||||
|
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
|
||||||
|
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
|
||||||
|
import com.vaadin.flow.component.textfield.TextField;
|
||||||
|
import com.vaadin.flow.data.value.ValueChangeMode;
|
||||||
|
import com.vaadin.flow.router.Route;
|
||||||
|
|
||||||
|
@Route("employees")
|
||||||
|
public class EmployeesView extends VerticalLayout {
|
||||||
|
|
||||||
|
private final EmployeeRepository employeeRepository;
|
||||||
|
|
||||||
|
private final TextField filter;
|
||||||
|
private final Grid<Employee> grid;
|
||||||
|
private final EmployeeEditor editor;
|
||||||
|
|
||||||
|
|
||||||
|
public EmployeesView(EmployeeRepository repo) {
|
||||||
|
employeeRepository = repo;
|
||||||
|
|
||||||
|
// Create components
|
||||||
|
var addButton = new Button("New employee", VaadinIcon.PLUS.create());
|
||||||
|
filter = new TextField();
|
||||||
|
grid = new Grid<>(Employee.class);
|
||||||
|
editor = new EmployeeEditor();
|
||||||
|
|
||||||
|
// Configure components
|
||||||
|
configureEditor();
|
||||||
|
|
||||||
|
addButton.addClickListener(e -> editEmployee(new Employee()));
|
||||||
|
|
||||||
|
filter.setPlaceholder("Filter by last name");
|
||||||
|
filter.setValueChangeMode(ValueChangeMode.EAGER);
|
||||||
|
filter.addValueChangeListener(e -> updateEmployees(e.getValue()));
|
||||||
|
|
||||||
|
grid.setHeight("200px");
|
||||||
|
grid.asSingleSelect().addValueChangeListener(e -> editEmployee(e.getValue()));
|
||||||
|
|
||||||
|
// Compose layout
|
||||||
|
var actionsLayout = new HorizontalLayout(filter, addButton);
|
||||||
|
add(actionsLayout, grid, editor);
|
||||||
|
|
||||||
|
// List customers
|
||||||
|
updateEmployees("");
|
||||||
|
}
|
||||||
|
|
||||||
|
private void configureEditor() {
|
||||||
|
editor.setVisible(false);
|
||||||
|
|
||||||
|
editor.setSaveListener(employee -> {
|
||||||
|
var saved = employeeRepository.save(employee);
|
||||||
|
updateEmployees(filter.getValue());
|
||||||
|
editor.setEmployee(null);
|
||||||
|
grid.asSingleSelect().setValue(saved);
|
||||||
|
});
|
||||||
|
|
||||||
|
editor.setDeleteListener(employee -> {
|
||||||
|
employeeRepository.delete(employee);
|
||||||
|
updateEmployees(filter.getValue());
|
||||||
|
editEmployee(null);
|
||||||
|
});
|
||||||
|
|
||||||
|
editor.setCancelListener(() -> {
|
||||||
|
editEmployee(null);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private void editEmployee(Employee employee) {
|
||||||
|
editor.setEmployee(employee);
|
||||||
|
|
||||||
|
if (employee != null) {
|
||||||
|
editor.setVisible(true);
|
||||||
|
} else {
|
||||||
|
// Deselect grid
|
||||||
|
grid.asSingleSelect().setValue(null);
|
||||||
|
editor.setVisible(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
private void updateEmployees(String filterText) {
|
||||||
|
if (filterText.isEmpty()) {
|
||||||
|
grid.setItems(employeeRepository.findAll());
|
||||||
|
} else {
|
||||||
|
grid.setItems(employeeRepository.findByLastNameStartsWithIgnoreCase(filterText));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue