pitfriedrich/chart-app
1
1
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: make dashboard widgets closable (#14)
CI / build-and-test (pull_request) Successful in 1m27s
Details

Browse Source 
Every GridStackItem now renders a close button next to its drag grip,
mirroring the grip's hover affordance. Closing detaches the item
server-side; grid-stack.ts already unregisters widgets via its
MutationObserver, so the layout is persisted without an extra protocol.

Closable is on by default and can be turned off per item with
setClosable(false); GridStackItem.CloseEvent lets views react.

The GridStackView "remove last" toolbar button is dropped — per-widget
close replaces it, so the view no longer tracks a widget stack. Its
counter now only grows, keeping a closed widget's id from being handed
to a new widget (which would inherit the saved position).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ue9ZtWUBQF4SuSHpzZ3zwq
This commit is contained in:
Pit Friedrich
2026-07-26 20:17:05 +02:00
parent 2e2c9aec3b
commit 7d23eef81b
8 changed files with 185 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/java/com/example/views/GridStackView.java
+9 -22
View File
@@ -18,14 +18,13 @@ import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.HasDynamicTitle;
import com.vaadin.flow.router.Route;
import java.util.ArrayDeque;
import java.util.Deque;
import java.util.List;
/**
* Showcase for {@link GridStackLayout}: a dashboard of draggable/resizable
* cards whose layout is persisted per browser, plus controls to add, remove
* and reset widgets at runtime.
* cards whose layout is persisted per browser, plus controls to add widgets and
* reset the layout at runtime. Widgets are removed by their own close button
* (see {@link GridStackItem#setClosable(boolean)}), not from the toolbar.
*/
@Route("gridstack")
public class GridStackView extends VerticalLayout implements HasDynamicTitle {
@@ -33,7 +32,6 @@ public class GridStackView extends VerticalLayout implements HasDynamicTitle {
private static final String STORAGE_KEY = "gridstack-demo";
private final GridStackLayout grid = new GridStackLayout();
private final Deque<GridStackItem> extraWidgets = new ArrayDeque<>();
private final Span status = new Span();
private int extraWidgetCount;
@@ -67,13 +65,10 @@ public class GridStackView extends VerticalLayout implements HasDynamicTitle {
e -> addWidget());
add.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
Button remove = new Button(getTranslation("gridstack.removeWidget"), Fa.REMOVE.create(),
e -> removeWidget());
Button reset = new Button(getTranslation("gridstack.reset"), Fa.RESET.create(),
e -> grid.resetLayout());
HorizontalLayout toolbar = new HorizontalLayout(add, remove, reset, status);
HorizontalLayout toolbar = new HorizontalLayout(add, reset, status);
toolbar.setPadding(false);
toolbar.setWidthFull();
toolbar.setAlignItems(Alignment.CENTER);
@@ -83,21 +78,13 @@ public class GridStackView extends VerticalLayout implements HasDynamicTitle {
private void addWidget() {
// The id must stay stable across reloads for the saved layout to match
// it again, so it is derived from a counter rather than a random UUID.
// The counter only ever grows: closing a widget must not hand its id to
// the next one, or the new widget would inherit the closed one's saved
// position.
extraWidgetCount++;
String title = getTranslation("gridstack.widget", extraWidgetCount);
GridStackItem item = new GridStackItem("extra-" + extraWidgetCount, 0, 0, 4, 2,
new Card(title, new Paragraph(getTranslation("gridstack.widgetText"))));
extraWidgets.push(item);
grid.add(item);
}
private void removeWidget() {
GridStackItem item = extraWidgets.poll();
if (item == null) {
return;
}
grid.remove(item);
extraWidgetCount--;
grid.add(new GridStackItem("extra-" + extraWidgetCount, 0, 0, 4, 2,
new Card(title, new Paragraph(getTranslation("gridstack.widgetText")))));
}
private Component lineChart() {