Какие существуют способы создания пользовательского интерфейса в Vaadin для двух или более сущностей в одном представлении? - PullRequest
Новая
       49

Какие существуют способы создания пользовательского интерфейса в Vaadin для двух или более сущностей в одном представлении?

0 голосов
/ 30 сентября 2019

У меня есть следующая таблица Excel, напечатанная на бумаге, которая представляет список посещаемости за один месяц, который я должен вывести онлайн.

enter image description here

В первом столбцевсе имена участников. Остальные столбцы будут проверены, присутствовал ли человек в день, или пустыми, если нет. В качестве заголовка столбца будет указываться день месяца.

Бэкэнд создается с помощью Spring Data / JPA

Какие существуют варианты создания пользовательского интерфейса в Vaadin?

Первым импульсом для меня была сетка Ваадина, но если вы посмотрите точно, это невозможно, поскольку в сетке возможна только одна сущность на сетку.

Второй возможностью будет Polymer 3 с TemplateModel

У вас есть другая идея, как это сделать?

Большое спасибо.

1 Ответ

1 голос
/ 01 октября 2019

Вы можете просто создать Grid типа персона / пользователь и добавить столбцы для каждого события, пример кода ниже. Ваши занятия, вероятно, отличаются, но, надеюсь, вы поняли идею. Обратите внимание, что код для фактического создания сетки состоит всего из 8 строк.

Вы также можете инкапсулировать все данные в классе режима просмотра, как предложил Саймон Мартинелли, например, EventGridModel, который содержит участников, события, людей ивозможно некоторые служебные функции. 

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