Update the crud example

This commit is contained in:
Marcus Hellberg 2024-04-01 15:36:34 -07:00
parent 58335b163a
commit 9d258aa505
5 changed files with 160 additions and 134 deletions

View File

@ -4,7 +4,7 @@ import com.baeldung.introduction.PushView;
import com.baeldung.introduction.basics.VaadinFlowBasics;
import com.baeldung.introduction.FormView;
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.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
@ -20,6 +20,6 @@ public class IndexView extends VerticalLayout {
add(new RouterLink("Grid", GridView.class));
add(new RouterLink("Form", FormView.class));
add(new RouterLink("Push", PushView.class));
add(new RouterLink("CRUD", CrudView.class));
add(new RouterLink("CRUD", EmployeesView.class));
}
}

View File

@ -4,6 +4,7 @@ package com.baeldung.data;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.Id;
import jakarta.validation.constraints.Size;
@Entity
public class Employee {
@ -12,11 +13,13 @@ public class Employee {
@GeneratedValue
private Long id;
@Size(min = 2, message = "First name must have at least 2 characters")
private String firstName;
@Size(min = 2, message = "Last name must have at least 2 characters")
private String lastName;
protected Employee() {
public Employee() {
}
public Employee(String firstName, String lastName) {
@ -28,6 +31,10 @@ public class Employee {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getFirstName() {
return firstName;
}

View File

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

View File

@ -1,92 +1,85 @@
package com.baeldung.spring;
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.KeyNotifier;
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.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
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
@UIScope
public class EmployeeEditor extends VerticalLayout implements KeyNotifier {
public class EmployeeEditor extends Composite<VerticalLayout> {
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;
TextField firstName = new TextField("First name");
TextField lastName = new TextField("Last name");
private SaveListener saveListener;
private DeleteListener deleteListener;
private CancelListener cancelListener;
Button save = new Button("Save", VaadinIcon.CHECK.create());
Button cancel = new Button("Cancel");
Button delete = new Button("Delete", VaadinIcon.TRASH.create());
HorizontalLayout actions = new HorizontalLayout(save, cancel, delete);
private final Binder<Employee> binder = new Binder<>(Employee.class);
Binder<Employee> binder = new Binder<>(Employee.class);
private ChangeHandler changeHandler;
public EmployeeEditor() {
var firstName = new TextField("First name");
var lastName = new TextField("Last name");
@Autowired
public EmployeeEditor(EmployeeRepository repository) {
this.repository = repository;
var save = new Button("Save", VaadinIcon.CHECK.create());
var cancel = new Button("Cancel");
var delete = new Button("Delete", VaadinIcon.TRASH.create());
add(firstName, lastName, actions);
binder.bindInstanceFields(this);
setSpacing(true);
save.getElement().getThemeList().add("primary");
delete.getElement().getThemeList().add("error");
addKeyPressListener(Key.ENTER, e -> save());
binder.forField(firstName).bind(Employee::getFirstName, Employee::setFirstName);
binder.forField(lastName).bind(Employee::getLastName, Employee::setLastName);
save.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
save.addClickListener(e -> save());
delete.addClickListener(e -> delete());
cancel.addClickListener(e -> editEmployee(employee));
setVisible(false);
save.addClickShortcut(Key.ENTER);
delete.addThemeVariants(ButtonVariant.LUMO_ERROR);
delete.addClickListener(e -> deleteListener.onDelete(employee));
cancel.addClickListener(e -> cancelListener.onCancel());
getContent().add(firstName, lastName, new HorizontalLayout(save, cancel, delete));
}
private void save() {
// Save the form into a new instance of Employee
var updated = new Employee();
updated.setId(employee.getId());
if (binder.writeBeanIfValid(updated)) {
saveListener.onSave(updated);
}
}
void delete() {
repository.delete(employee);
changeHandler.onChange();
public void setEmployee(Employee employee) {
this.employee = employee;
binder.readBean(employee);
}
void save() {
repository.save(employee);
changeHandler.onChange();
public void setSaveListener(SaveListener saveListener) {
this.saveListener = saveListener;
}
public interface ChangeHandler {
void onChange();
public void setDeleteListener(DeleteListener deleteListener) {
this.deleteListener = deleteListener;
}
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) {
changeHandler = h;
public void setCancelListener(CancelListener cancelListener) {
this.cancelListener = cancelListener;
}
}

View File

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