Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: use components to set items on the client side #6610

Merged
merged 1 commit into from
Sep 5, 2024
Merged

feat: use components to set items on the client side #6610

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 32 additions & 48 deletions ...nt/vaadin-dashboard-flow/src/main/java/com/vaadin/flow/component/dashboard/Dashboard.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,19 @@
import java.util.Collections;
import java.util.List;
import java.util.Objects;
import java.util.concurrent.atomic.AtomicInteger;
import java.util.stream.Collectors;
import java.util.stream.Stream;

import org.slf4j.LoggerFactory;

import com.vaadin.flow.component.AttachEvent;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.dom.Element;

import elemental.json.Json;
import elemental.json.JsonArray;
import elemental.json.JsonObject;

/**
* @author Vaadin Ltd
*/
Expand Down Expand Up @@ -266,7 +263,6 @@ public Stream<Component> getChildren() {
@Override
protected void onAttach(AttachEvent attachEvent) {
super.onAttach(attachEvent);
attachRenderer();
doUpdateClient();
}

Expand All @@ -284,55 +280,43 @@ void updateClient() {

private void doUpdateClient() {
childDetachHandler.refreshListeners();
getElement().setPropertyJson("items", createItemsJsonArray());
}

private void attachRenderer() {
getElement().executeJs(
"Vaadin.FlowComponentHost.patchVirtualContainer(this);");
String appId = UI.getCurrent().getInternals().getAppId();
getElement().executeJs(
"this.renderer = (root, _, model) => Vaadin.FlowComponentHost.setChildNodes($0, [model.item.nodeid], root);",
appId);
updateClientItems();
}

private JsonArray createItemsJsonArray() {
JsonArray jsonItems = Json.createArray();
private void updateClientItems() {
final AtomicInteger itemIndex = new AtomicInteger();
List<String> itemRepresentations = new ArrayList<>();
List<Component> flatOrderedComponents = new ArrayList<>();
for (Component component : childrenComponents) {
JsonObject jsonItem;
flatOrderedComponents.add(component);
String itemRepresentation;
if (component instanceof DashboardSection section) {
jsonItem = getSectionJsonItem(section);
flatOrderedComponents.addAll(section.getWidgets());
List<DashboardWidget> sectionWidgets = section.getWidgets();
int sectionIndex = itemIndex.getAndIncrement();
String sectionWidgetsRepresentation = sectionWidgets.stream()
.map(widget -> getWidgetRepresentation(widget,
itemIndex.getAndIncrement()))
.collect(Collectors.joining(","));
itemRepresentation = "{ component: $%d, items: [ %s ] }"
.formatted(sectionIndex, sectionWidgetsRepresentation);
} else {
jsonItem = getWidgetJsonItem((DashboardWidget) component);
itemRepresentation = getWidgetRepresentation(
(DashboardWidget) component,
itemIndex.getAndIncrement());
}
jsonItems.set(jsonItems.length(), jsonItem);
itemRepresentations.add(itemRepresentation);
}
return jsonItems;
}

private JsonObject getSectionJsonItem(DashboardSection section) {
JsonObject sectionJsonItem = Json.createObject();
if (section.getTitle() != null) {
sectionJsonItem.put("title", section.getTitle());
}
JsonArray sectionItems = Json.createArray();
section.getWidgets().forEach(widget -> {
JsonObject sectionItem = getWidgetJsonItem(widget);
sectionItems.set(sectionItems.length(), sectionItem);
});
sectionJsonItem.put("items", sectionItems);
return sectionJsonItem;
}

private JsonObject getWidgetJsonItem(DashboardWidget widget) {
JsonObject widgetJsonItem = Json.createObject();
widgetJsonItem.put("nodeid", getComponentNodeId(widget));
widgetJsonItem.put("colspan", widget.getColspan());
return widgetJsonItem;
String updateItemsSnippet = "this.items = [ %s ];"
.formatted(String.join(",", itemRepresentations));
getElement().executeJs(updateItemsSnippet,
flatOrderedComponents.toArray(Component[]::new));
}

private int getComponentNodeId(Component component) {
return component.getElement().getNode().getId();
private static String getWidgetRepresentation(DashboardWidget widget,
int itemIndex) {
return "{ component: $%d, colspan: %d }".formatted(itemIndex,
widget.getColspan());
}

private void doRemoveAll() {
Expand Down Expand Up @@ -361,12 +345,12 @@ private void doAddWidget(DashboardWidget widget) {
}

private void doAddSection(DashboardSection section) {
getElement().appendVirtualChild(section.getElement());
getElement().appendChild(section.getElement());
childrenComponents.add(section);
}

private void doRemoveSection(DashboardSection section) {
getElement().removeVirtualChild(section.getElement());
getElement().removeChild(section.getElement());
childrenComponents.remove(section);
}

Expand Down
7 changes: 2 additions & 5 deletions ...in-dashboard-flow/src/main/java/com/vaadin/flow/component/dashboard/DashboardSection.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,6 @@ public class DashboardSection extends Component implements HasWidgets {

private final DashboardChildDetachHandler childDetachHandler;

private String title;

/**
* Creates an empty section.
*/
Expand All @@ -64,7 +62,7 @@ public DashboardSection(String title) {
* @return the {@code sectionTitle} property from the web component
*/
public String getTitle() {
return title;
return getElement().getProperty("sectionTitle");
}

/**
Expand All @@ -74,8 +72,7 @@ public String getTitle() {
* the title to set
*/
public void setTitle(String title) {
this.title = title;
updateClient();
getElement().setProperty("sectionTitle", title);
}

@Override
Expand Down
64 changes: 2 additions & 62 deletions ...dashboard-flow/src/test/java/com/vaadin/flow/component/dashboard/tests/DashboardTest.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.stream.Stream;

import org.junit.After;
import org.junit.Assert;
Expand All @@ -25,12 +24,8 @@
import com.vaadin.flow.component.dashboard.DashboardSection;
import com.vaadin.flow.component.dashboard.DashboardWidget;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.internal.JsonUtils;
import com.vaadin.flow.server.VaadinSession;

import elemental.json.JsonArray;
import elemental.json.JsonObject;

public class DashboardTest {
private final UI ui = new UI();
private Dashboard dashboard;
Expand Down Expand Up @@ -773,57 +768,8 @@ private static void assertChildComponents(Dashboard dashboard,
List<DashboardWidget> expectedWidgets = getExpectedWidgets(
expectedChildren);
Assert.assertEquals(expectedWidgets, dashboard.getWidgets());

List<JsonObject> dashboardItems = getItemsStream(dashboard).toList();
assertDashboardItems(dashboardItems, expectedChildren);
}

private static void assertDashboardItems(List<JsonObject> dashboardItems,
Component... expectedChildren) {
Assert.assertEquals(expectedChildren.length, dashboardItems.size());
for (int i = 0; i < expectedChildren.length; i++) {
JsonObject actualChild = dashboardItems.get(i);
Component expectedChild = expectedChildren[i];
if (expectedChild instanceof DashboardSection section) {
assertSectionItem(section, actualChild);
} else if (expectedChild instanceof DashboardWidget widget) {
assertWidgetItem(widget, actualChild);
} else {
throw new IllegalArgumentException(
"A dashboard can only contain widgets or sections.");
}
}
}

private static void assertSectionItem(DashboardSection expectedSection,
JsonObject actualSection) {
if (expectedSection.getTitle() == null) {
Assert.assertNull(actualSection.get("title"));
} else {
Assert.assertEquals(expectedSection.getTitle(),
actualSection.getString("title"));
}
JsonArray sectionItems = actualSection.getArray("items");
List<DashboardWidget> expectedSectionWidgets = expectedSection
.getWidgets();
Assert.assertEquals(expectedSectionWidgets.size(),
sectionItems.length());
for (int i = 0; i < expectedSectionWidgets.size(); i++) {
DashboardWidget expectedWidget = expectedSectionWidgets.get(i);
JsonObject actualWidget = sectionItems.getObject(i);
assertWidgetItem(expectedWidget, actualWidget);
}
}

private static void assertWidgetItem(DashboardWidget expectedWidget,
JsonObject actualWidget) {
int expectedNodeId = expectedWidget.getElement().getNode().getId();
int actualNodeId = (int) actualWidget.getNumber("nodeid");
Assert.assertEquals(expectedNodeId, actualNodeId);

int expectedColspan = expectedWidget.getColspan();
int actualColspan = (int) actualWidget.getNumber("colspan");
Assert.assertEquals(expectedColspan, actualColspan);
Assert.assertEquals(Arrays.asList(expectedChildren),
dashboard.getChildren().toList());
}

private static List<DashboardWidget> getExpectedWidgets(
Expand All @@ -842,12 +788,6 @@ private static List<DashboardWidget> getExpectedWidgets(
return expectedWidgets;
}

private static Stream<JsonObject> getItemsStream(Dashboard dashboard) {
JsonArray jsonArrayOfIds = (JsonArray) dashboard.getElement()
.getPropertyRaw("items");
return JsonUtils.objectStream(jsonArrayOfIds);
}

private static void assertSectionWidgets(DashboardSection section,
DashboardWidget... expectedWidgets) {
Assert.assertEquals(Arrays.asList(expectedWidgets),
Expand Down