Examples with ComponentRenderer com.vaadin.flow.data.renderer.ComponentRenderer used on opensource projects

Example 21 with ComponentRenderer

use of com.vaadin.flow.data.renderer.ComponentRenderer in project docs by vaadin.

the class SelectCustomRendererLabel method createPersonRenderer.

private static ComponentRenderer<FlexLayout, Person> createPersonRenderer() {
    return new ComponentRenderer<>(person -> {
        FlexLayout wrapper = new FlexLayout();
        wrapper.setAlignItems(FlexComponent.Alignment.CENTER);
        // NOTE
        // We are using inline styles here to keep the example simple.
        // We recommend placing CSS in a separate style sheet and to
        // encapsulating the styling in a new component.
        Image image = new Image();
        image.setSrc(person.getPictureUrl());
        image.setAlt("Portrait of " + person.getFirstName() + " " + person.getLastName());
        image.setWidth("var(--lumo-size-m)");
        image.getStyle().set("margin-right", "var(--lumo-space-s)");
        Div info = new Div();
        info.setText(person.getFirstName() + " " + person.getLastName());
        Div profession = new Div();
        profession.setText(person.getProfession());
        profession.getStyle().set("font-size", "var(--lumo-font-size-s)");
        profession.getStyle().set("color", "var(--lumo-secondary-text-color)");
        info.add(profession);
        wrapper.add(image, info);
        return wrapper;
    });
}

Example 22 with ComponentRenderer

use of com.vaadin.flow.data.renderer.ComponentRenderer in project komunumo-server by komunumo.

the class MembersView method configureGrid.

private void configureGrid() {
    final var sponsorDomains = databaseService.getActiveSponsorDomains();
    grid.setSelectionMode(Grid.SelectionMode.NONE);
    grid.addThemeVariants(GridVariant.LUMO_NO_BORDER, GridVariant.LUMO_ROW_STRIPES);
    grid.addColumn(LitRenderer.<Member>of("<span style=\"font-weight: bold;\">${item.fullName}</span><br/><span>${item.company}</span>").withProperty("fullName", Member::getFullName).withProperty("company", Member::getCompany)).setHeader("Name").setAutoWidth(true).setFlexGrow(1);
    grid.addColumn(LitRenderer.<Member>of("<a href=\"mailto:${item.email}\" target=\"_blank\">${item.email}</a>").withProperty("email", Member::getEmail)).setHeader("Email").setAutoWidth(true).setKey("email").setFlexGrow(0);
    grid.addColumn(new ComponentRenderer<>(member -> new Text(getMembershipText(member, sponsorDomains)))).setHeader("Membership").setAutoWidth(true).setFlexGrow(0);
    grid.addColumn(new ComponentRenderer<>(member -> new Icon(member.getAdmin() ? VaadinIcon.CHECK : VaadinIcon.MINUS))).setHeader("Admin").setAutoWidth(true).setTextAlign(ColumnTextAlign.CENTER).setFlexGrow(0);
    grid.addColumn(new ComponentRenderer<>(member -> {
        final var icon = new Icon(member.getAccountBlocked() ? VaadinIcon.BAN : VaadinIcon.MINUS);
        icon.getElement().setAttribute("title", member.getAccountBlockedReason());
        return icon;
    })).setHeader("Blocked").setAutoWidth(true).setTextAlign(ColumnTextAlign.CENTER).setFlexGrow(0);
    grid.addColumn(new ComponentRenderer<>(member -> {
        final var editButton = new EnhancedButton(new Icon(VaadinIcon.EDIT), clickEvent -> showMemberDialog(member));
        editButton.setTitle("Edit this member");
        final var deleteButton = new EnhancedButton(new Icon(VaadinIcon.TRASH), clickEvent -> deleteMember(member));
        deleteButton.setTitle("Delete this member");
        return new HorizontalLayout(editButton, deleteButton);
    })).setHeader("Actions").setAutoWidth(true).setFlexGrow(0);
    grid.setHeightFull();
}

Example 23 with ComponentRenderer

use of com.vaadin.flow.data.renderer.ComponentRenderer in project komunumo-server by komunumo.

the class NewsView method configureGrid.

private void configureGrid() {
    grid.setSelectionMode(Grid.SelectionMode.NONE);
    grid.addThemeVariants(GridVariant.LUMO_NO_BORDER, GridVariant.LUMO_ROW_STRIPES);
    grid.addColumn(TemplateRenderer.<NewsEntity>of("<span style=\"font-weight: bold;\">[[item.title]]</span><br/><span>[[item.subtitle]]</span>").withProperty("title", NewsEntity::title).withProperty("subtitle", NewsEntity::subtitle)).setHeader("Title").setAutoWidth(true).setFlexGrow(1);
    grid.addColumn(newsEntity -> formatDateTime(newsEntity.showFrom())).setHeader("Show from").setAutoWidth(true).setFlexGrow(0).setKey("showFrom");
    grid.addColumn(newsEntity -> formatDateTime(newsEntity.showTo())).setHeader("Show to").setAutoWidth(true).setFlexGrow(0).setKey("showTo");
    grid.addColumn(new ComponentRenderer<>(newsEntity -> {
        final var editButton = new EnhancedButton(new Icon(VaadinIcon.EDIT), clickEvent -> showNewsDialog(newsEntity));
        editButton.setTitle("Edit news");
        final var deleteButton = new EnhancedButton(new Icon(VaadinIcon.TRASH), clickEvent -> deleteNews(newsEntity));
        deleteButton.setTitle("Delete news");
        return new HorizontalLayout(editButton, deleteButton);
    })).setHeader("Actions").setAutoWidth(true).setFlexGrow(0);
    grid.setHeightFull();
}

Example 24 with ComponentRenderer

use of com.vaadin.flow.data.renderer.ComponentRenderer in project komunumo-server by komunumo.

the class LocationColorSetting method configureGrid.

private void configureGrid() {
    grid.setSelectionMode(Grid.SelectionMode.NONE);
    grid.addThemeVariants(GridVariant.LUMO_NO_BORDER, GridVariant.LUMO_ROW_STRIPES);
    grid.addColumn(LocationColorRecord::getLocation).setHeader("Location").setAutoWidth(true).setFlexGrow(0);
    grid.addColumn(new ComponentRenderer<>(locationColorRecord -> {
        final var icon = new Icon(VaadinIcon.CIRCLE);
        icon.setSize("16px");
        icon.setColor(locationColorRecord.getColor());
        icon.getElement().setAttribute("title", locationColorRecord.getColor());
        return icon;
    })).setHeader("Color").setAutoWidth(true).setTextAlign(ColumnTextAlign.CENTER).setFlexGrow(0);
    grid.addColumn(new ComponentRenderer<>(locationColorRecord -> {
        final var editButton = new EnhancedButton(new Icon(VaadinIcon.EDIT), clickEvent -> showLocationColorDialog(locationColorRecord));
        editButton.setTitle("Edit this location color setting");
        final var deleteButton = new EnhancedButton(new Icon(VaadinIcon.TRASH), clickEvent -> deleteLocationColor(locationColorRecord));
        deleteButton.setTitle("Delete this location color setting");
        return new HorizontalLayout(editButton, deleteButton);
    })).setHeader("Actions").setAutoWidth(true).setFlexGrow(0);
    grid.setHeightFull();
}

Example 25 with ComponentRenderer

use of com.vaadin.flow.data.renderer.ComponentRenderer in project komunumo-server by komunumo.

the class FeedbackView method configureGrid.

private void configureGrid() {
    grid.setSelectionMode(Grid.SelectionMode.NONE);
    grid.addThemeVariants(GridVariant.LUMO_NO_BORDER, GridVariant.LUMO_ROW_STRIPES);
    grid.addColumn(feedbackRecord -> formatDateTime(feedbackRecord.getReceived())).setHeader("Received").setAutoWidth(true).setFlexGrow(0);
    grid.addColumn(feedbackRecord -> "%s %s".formatted(feedbackRecord.getFirstName(), feedbackRecord.getLastName())).setHeader("Name").setAutoWidth(true).setFlexGrow(1);
    grid.addColumn(FeedbackRecord::getEmail).setHeader("Email").setAutoWidth(true).setFlexGrow(1);
    grid.addColumn(new ComponentRenderer<>(feedbackRecord -> {
        final var showButton = new EnhancedButton(new Icon(VaadinIcon.EYE), clickEvent -> showEditDialog(feedbackRecord));
        showButton.setTitle("Show this entry");
        final var deleteButton = new EnhancedButton(new Icon(VaadinIcon.TRASH), clickEvent -> deleteEntry(feedbackRecord));
        deleteButton.setTitle("Delete this entry");
        return new HorizontalLayout(showButton, deleteButton);
    })).setHeader("Actions").setAutoWidth(true).setFlexGrow(0);
    grid.setHeightFull();
}