Which ways exist to do the UI in Vaadin for two or more Entitys in the same view?

Question

I have the following excel table printed on paper which represents an attendance list for one month which I should bring online.

In first column are all participant names. The others columns will be will be checked if the person was present on the day or empty if not. As column header will be the day of the month.

Backend is made with Spring Data/JPA

What options exist to do the UI in Vaadin?

The first impulse was for me the Vaadin grid, but if you look exactly is not possible because in grid is posible only one entity per grid.

As second possibility would be Polymer 3 with TemplateModel

Do you have other idea in which way to do that?

Thank you very much.

Answer 1

You can just create a Grid of type person/user, and add columns for each event, example code below. Your classes probably differ, but hopefully you get the idea. Note that the code for actually creating the grid is only 8 lines.

You could also encapsulate all the data in a view mode class as Simon Martinelli suggested, e.g. EventGridModel that contains attendees, events, persons, and maybe some utility functions.

@Route
public class MainView extends VerticalLayout {

    public MainView() {
        Person[] persons = new Person[]{
                new Person(0, "Foo", "Bar"),
                new Person(1, "John", "Doe"),
                new Person(2, "Scala", "JVM"),
                new Person(3, "Jeht-Phuel", "Steelbeam"),
                new Person(4, "Ilike", "Turtles")
        };
        Event[] events = new Event[] {
                new Event(0, Arrays.asList(persons[0], persons[1], persons[2], persons[4]), LocalDate.of(2019, 9, 5)),
                new Event(0, Arrays.asList(persons[0], persons[1], persons[2], persons[3]), LocalDate.of(2019, 9, 5)),
                new Event(0, Arrays.asList(persons[1], persons[2], persons[3]), LocalDate.of(2019, 9, 5)),
                new Event(0, Arrays.asList(persons[0], persons[2], persons[3]), LocalDate.of(2019, 9, 5)),
                new Event(0, Arrays.asList(persons[1], persons[2], persons[3], persons[4]), LocalDate.of(2019, 9, 5)),
        };

        Grid<Person> grid = new Grid<>();
        grid.addColumn(person -> person.getFirstName() + " " + person.getLastName()).setHeader("Name");
        for (Event event: events) {
            grid.addColumn(person -> event.getAttendees().contains(person) ? "X" : "")
                    .setHeader(event.getDate().toString());
        }
        grid.setItems(persons);
        add(grid);
    }

    class Person {
        private final Integer id;
        private final String firstName;
        private final String lastName;

        Person(Integer id, String firstName, String lastName)  {
            this.id = id;
            this.firstName = firstName;
            this.lastName = lastName;
        }

        public Integer getId() {
            return id;
        }

        public String getFirstName() {
            return firstName;
        }

        public String getLastName() {
            return lastName;
        }

        @Override
        public boolean equals(Object other) {
            return other instanceof Person && Objects.equals(((Person) other).getId(), id);
        }
    }

    class Event {
        private final Integer id;
        private final List<Person> attendees;
        private final LocalDate date;

        Event(Integer id, List<Person> attendees, LocalDate date) {
            this.id = id;
            this.attendees = attendees;
            this.date = date;
        }

        public Integer getId() {
            return id;
        }

        public List<Person> getAttendees() {
            return attendees;
        }

        public LocalDate getDate() {
            return date;
        }

        @Override
        public boolean equals(Object other) {
            return other instanceof Event && Objects.equals(((Event) other).getId(), id);
        }
    }
}