simple-ui: close the details panel when filtering (#2485)

This commit is contained in:
Mohamed Zenadi
2025-06-23 08:07:49 +02:00
committed by GitHub
parent 8262fc05c6
commit 838e3e06f5

View File

@@ -45,7 +45,7 @@ public class TableView<T, ID> extends Div implements Constants {
private final VerticalLayout gridLayout; private final VerticalLayout gridLayout;
protected final HorizontalLayout controlsLayout; protected final HorizontalLayout controlsLayout;
private final SplitLayout splitLayout; private final SplitLayout splitLayout;
private final Div detailsPanel = new Div(); private final Div detailsPanel;
private Button currentSelectionButton; private Button currentSelectionButton;
public TableView( public TableView(
@@ -66,8 +66,6 @@ public class TableView<T, ID> extends Div implements Constants {
final Function<T, Component> detailsButtonHandler) { final Function<T, Component> detailsButtonHandler) {
selectionGrid = new SelectionGrid<>(entityRepresentation, queryFn); selectionGrid = new SelectionGrid<>(entityRepresentation, queryFn);
selectionGrid.setSizeFull(); selectionGrid.setSizeFull();
filter = new Filter(selectionGrid::setRsqlFilter, rsql, alternativeRsql);
setSizeFull(); setSizeFull();
splitLayout = new SplitLayout(); splitLayout = new SplitLayout();
@@ -76,12 +74,19 @@ public class TableView<T, ID> extends Div implements Constants {
splitLayout.addThemeVariants(SplitLayoutVariant.LUMO_SMALL); splitLayout.addThemeVariants(SplitLayoutVariant.LUMO_SMALL);
splitLayout.setSplitterPosition(100); splitLayout.setSplitterPosition(100);
splitLayout.addToPrimary(selectionGrid); splitLayout.addToPrimary(selectionGrid);
detailsPanel = new Div();
if (detailsButtonHandler != null) { if (detailsButtonHandler != null) {
ComponentRenderer<Button, T> renderer = new ComponentRenderer<>(renderDetailsButton(detailsButtonHandler)); ComponentRenderer<Button, T> renderer = new ComponentRenderer<>(renderDetailsButton(detailsButtonHandler));
selectionGrid.addColumn(renderer).setHeader("Details").setAutoWidth(true).setFlexGrow(0); selectionGrid.addColumn(renderer).setHeader("Details").setAutoWidth(true).setFlexGrow(0);
} }
filter = new Filter(
(rsqlFilter) -> {
selectionGrid.setRsqlFilter(rsqlFilter);
closeDetailsPanel();
}, rsql, alternativeRsql
);
gridLayout = new VerticalLayout(filter, splitLayout); gridLayout = new VerticalLayout(filter, splitLayout);
gridLayout.setSizeFull(); gridLayout.setSizeFull();
gridLayout.setPadding(false); gridLayout.setPadding(false);
@@ -91,13 +96,23 @@ public class TableView<T, ID> extends Div implements Constants {
} else { } else {
controlsLayout = new HorizontalLayout(); controlsLayout = new HorizontalLayout();
controlsLayout.setWidthFull(); controlsLayout.setWidthFull();
controlsLayout.addClassNames(LumoUtility.Padding.Horizontal.XLARGE, LumoUtility.Padding.Vertical.SMALL, LumoUtility.BoxSizing.BORDER); controlsLayout.addClassNames(
LumoUtility.Padding.Horizontal.XLARGE, LumoUtility.Padding.Vertical.SMALL, LumoUtility.BoxSizing.BORDER);
controlsLayout.setAlignItems(FlexComponent.Alignment.BASELINE); controlsLayout.setAlignItems(FlexComponent.Alignment.BASELINE);
} }
gridLayout.add(controlsLayout); gridLayout.add(controlsLayout);
add(gridLayout); add(gridLayout);
} }
private void closeDetailsPanel() {
detailsPanel.removeAll();
if (splitLayout.getSecondaryComponent() != null) {
splitLayout.remove(detailsPanel);
}
splitLayout.setSplitterPosition(100);
currentSelectionButton = null;
}
private SerializableFunction<T, Button> renderDetailsButton(final Function<T, Component> selectionHandler) { private SerializableFunction<T, Button> renderDetailsButton(final Function<T, Component> selectionHandler) {
return selectedItem -> { return selectedItem -> {
final Button button = new Button(VaadinIcon.EYE.create()); final Button button = new Button(VaadinIcon.EYE.create());
@@ -110,10 +125,7 @@ public class TableView<T, ID> extends Div implements Constants {
if (button == currentSelectionButton) { if (button == currentSelectionButton) {
button.setIcon(eyeIcon); button.setIcon(eyeIcon);
button.getStyle().set(COLOR, VAR_LUMO_SECONDARY_TEXT_COLOR); button.getStyle().set(COLOR, VAR_LUMO_SECONDARY_TEXT_COLOR);
detailsPanel.removeAll(); closeDetailsPanel();
splitLayout.remove(detailsPanel);
splitLayout.setSplitterPosition(100);
currentSelectionButton = null;
} else { } else {
button.setIcon(closeIcon); button.setIcon(closeIcon);
button.getStyle().set(COLOR, VAR_LUMO_PRIMARY_COLOR); button.getStyle().set(COLOR, VAR_LUMO_PRIMARY_COLOR);