Skip to content

Commit

Permalink
Merge pull request #15 from jcgueriaud1/feature/doc-for-group
Browse files Browse the repository at this point in the history
Add group documentation and a full example
  • Loading branch information
jcgueriaud1 authored Aug 29, 2021
2 parents ba97060 + 5ddf54d commit cf5ef3b
Show file tree
Hide file tree
Showing 14 changed files with 414 additions and 530 deletions.
10 changes: 5 additions & 5 deletions pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<groupId>org.vaadin.jchristophe</groupId>
<artifactId>sortable-layout-root</artifactId>
<version>1.1.3</version>
<version>1.1.4</version>
<packaging>pom</packaging>
<modules>
<module>sortable-layout</module>
Expand All @@ -13,7 +13,7 @@
<description>Drag and drop ordered layout. Vaadin wrapper for sortable js</description>

<properties>
<vaadin.version>14.6.0</vaadin.version>
<vaadin.version>14.6.8</vaadin.version>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
Expand Down Expand Up @@ -44,12 +44,12 @@
<repositories>
<repository>
<id>Vaadin Directory</id>
<url>http://maven.vaadin.com/vaadin-addons</url>
<url>https://maven.vaadin.com/vaadin-addons</url>
</repository>
<!-- Repository needed for prerelease versions of Vaadin -->
<repository>
<id>Vaadin prereleases</id>
<url>http://maven.vaadin.com/vaadin-prereleases</url>
<url>https://maven.vaadin.com/vaadin-prereleases</url>
</repository>
<!-- Repository needed for the snapshot versions of Vaadin -->
<repository>
Expand All @@ -62,7 +62,7 @@
<!-- Repository needed for prerelease versions of Vaadin -->
<pluginRepository>
<id>Vaadin prereleases</id>
<url>http://maven.vaadin.com/vaadin-prereleases</url>
<url>https://maven.vaadin.com/vaadin-prereleases</url>
</pluginRepository>
<pluginRepository>
<id>vaadin-snapshots</id>
Expand Down
21 changes: 17 additions & 4 deletions sortable-layout-demo/pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<groupId>org.vaadin.jchristophe</groupId>
<artifactId>sortable-layout-demo</artifactId>
<version>1.1.3</version>
<version>1.1.4</version>

<name>Sortable Demo</name>
<packaging>war</packaging>
Expand All @@ -16,7 +16,7 @@
</organization>

<properties>
<vaadin.version>14.6.0</vaadin.version>
<vaadin.version>14.6.8</vaadin.version>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
Expand Down Expand Up @@ -106,23 +106,36 @@
<groupId>org.webjars.bowergithub.webcomponents</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.npm</groupId>
<artifactId>*</artifactId>
</exclusion>
</exclusions>
</dependency>

<dependency>
<groupId>com.github.appreciated</groupId>
<artifactId>card</artifactId>
<version>2.0.0</version>
<exclusions>
<exclusion>
<groupId>org.webjars.npm</groupId>
<artifactId>*</artifactId>
</exclusion></exclusions>
</dependency>
<dependency>
<groupId>com.github.appreciated</groupId>
<artifactId>vaadin-css-grid</artifactId>
<version>2.0.0.beta3</version>
<version>2.0.0.beta3</version> <exclusions>
<exclusion>
<groupId>org.webjars.npm</groupId>
<artifactId>*</artifactId>
</exclusion></exclusions>
</dependency>
<dependency>
<groupId>org.vaadin.jchristophe</groupId>
<artifactId>sortable-layout</artifactId>
<version>1.1.3</version>
<version>1.1.4</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.vaadin/flow-component-demo-helpers -->
<dependency>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
package org.vaadin.jchristophe;

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import org.vaadin.jchristophe.layouteditor.LayoutEditor;
import org.vaadin.jchristophe.layouteditor.LayoutEditorRow;

import java.util.Arrays;

/**
* @author Martin Israelsen
*/
@Route(value = "layout-editor", layout = MainLayout.class)
public class LayoutEditorView extends VerticalLayout {

private LayoutEditor<String> editor = new LayoutEditor<>();

public LayoutEditorView() {

editor.setListOfFields(
Arrays.asList("First name", "Last Name", "Address", "City", "Postal Code", "Phone", "Email", "DOB"));
LayoutEditorRow<String> row = editor.addRow();
row.addField("First Name");
row.addField("Last Name");

row = editor.addRow();
row.addField("Address");
row.addField("City");
row.addField("Postal Code");

add(editor);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ public MainLayout() {
final RouterLink multiDragLayout = new RouterLink("Multiple drag", MultiDragTwoLayoutsView.class);
final RouterLink trello = new RouterLink("Trello-like", TrelloLayoutView.class);
final RouterLink card = new RouterLink("Card", CardSortableLayoutView.class);
final VerticalLayout menuLayout = new VerticalLayout(twoLayout, multiDragLayout, simple, trello, card, chosenEventsLayout);
final RouterLink layoutEditor = new RouterLink("Layout Editor", LayoutEditorView.class);
final VerticalLayout menuLayout = new VerticalLayout(twoLayout, multiDragLayout, simple, trello, card, layoutEditor, chosenEventsLayout);
addToDrawer(menuLayout);
addToNavbar(drawerToggle);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
package org.vaadin.jchristophe.layouteditor;

import com.vaadin.flow.component.Composite;
import com.vaadin.flow.component.ItemLabelGenerator;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.H4;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.select.Select;
import org.vaadin.jchristophe.SortableConfig;
import org.vaadin.jchristophe.SortableGroupStore;
import org.vaadin.jchristophe.SortableLayout;

import java.util.Collection;

/**
* @author Martin Israelsen
*/
public class LayoutEditor<FIELD> extends Composite<VerticalLayout> {

/**
*
*/
private static final long serialVersionUID = 2433957024124431023L;

private Button btnAddRow = new Button("Add Row");

private ItemLabelGenerator<FIELD> itemLabelGenerator;

private Collection<FIELD> listOfFields = null;

private SortableConfig rowsSortableConfig = new SortableConfig();
private SortableGroupStore rowsSortableGroupStore = new SortableGroupStore();

private SortableConfig columnsSortableConfig = new SortableConfig();
private SortableGroupStore columnsSortableGroupStore = new SortableGroupStore();

private VerticalLayout rows = new VerticalLayout();

public LayoutEditor() {

VerticalLayout content = getContent();

rows.setMargin(false);
rows.setPadding(false);
rows.setSpacing(false);

rowsSortableConfig.setGroupName("rows-dragdrop");
//rowsSortableConfig.allowDragIn(true);
rowsSortableConfig.addDragInGroupName("rows-dragdrop");
rowsSortableConfig.allowDragOut(true);
rowsSortableConfig.setAnimation(150);

columnsSortableConfig.setGroupName("columns-dragdrop");
//columnsSortableConfig.allowDragIn(true);
columnsSortableConfig.addDragInGroupName("columns-dragdrop");
columnsSortableConfig.allowDragOut(true);
columnsSortableConfig.setAnimation(150);

rows.setWidthFull();
rows.getStyle().set("background", "yellow");
SortableLayout rowsSortableLayout = new SortableLayout(rows, rowsSortableConfig, rowsSortableGroupStore);
rowsSortableLayout.setWidthFull();
rowsSortableLayout.setHandle("row-handle");
content.add(rowsSortableLayout);

btnAddRow.addClickListener(e -> addRow());

content.add(btnAddRow);
}

public void setListOfFields(Collection<FIELD> listOfFields) {
this.listOfFields = listOfFields;
}

public LayoutEditorRow<FIELD> addRow() {
LayoutEditorRow<FIELD> row = new LayoutEditorRow<>(columnsSortableConfig, columnsSortableGroupStore);

row.addAddFieldClickListener(e -> addFieldClicked(row));
row.addRemoveRowClickListener(e -> removeRowClicked(row));

rows.add(row);
return row;
}

private void addFieldClicked(LayoutEditorRow<FIELD> row) {
Dialog dialog = new Dialog();

Select<FIELD> select = new Select<>();

if (this.itemLabelGenerator != null)
select.setTextRenderer(itemLabelGenerator);

select.setItems(listOfFields);

dialog.add(new H4("Select Field"));
dialog.add(select);

Button btnOk = new Button("OK", e -> {
row.addField(select.getValue());
dialog.close();
});

btnOk.setEnabled(false);
Button btnCancel = new Button("Cancel", e -> dialog.close());

select.addValueChangeListener(e -> {
btnOk.setEnabled(true);
});

HorizontalLayout buttons = new HorizontalLayout(btnOk, btnCancel);
dialog.add(buttons);

dialog.open();

}

private void removeRowClicked(LayoutEditorRow<FIELD> row) {
rows.remove(row);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
package org.vaadin.jchristophe.layouteditor;

import com.vaadin.flow.component.Composite;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.dom.Style;

/**
* @author Martin Israelsen
*/
public class LayoutEditorField<FIELD> extends Composite<HorizontalLayout> {

/**
*
*/
private static final long serialVersionUID = 3817064579517262436L;
private FIELD field;

public LayoutEditorField(String name, FIELD field) {

this.field = field;

HorizontalLayout layout = getContent();
layout.setAlignItems(Alignment.CENTER);
Style s = layout.getStyle();
s.set("background-color", "#dddddd");
s.set("margin", "var(--lumo-space-s)");
s.set("padding", "var(--lumo-space-s)");
s.set("border-radius", "var(--lumo-border-radius)");

Span fieldname = new Span(name);
fieldname.addClassName("field-handle");

layout.add(fieldname);

Icon edit = VaadinIcon.ELLIPSIS_DOTS_H.create();
edit.getStyle().set("color", "#777777");
edit.setSize("1em");
edit.addClickListener(e -> {
Notification.show("Field clicked");
});
layout.add(edit);
}

public FIELD getField() {
return field;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
package org.vaadin.jchristophe.layouteditor;

import com.vaadin.flow.component.ClickEvent;
import com.vaadin.flow.component.ComponentEventListener;
import com.vaadin.flow.component.Composite;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.dom.Style;
import com.vaadin.flow.shared.Registration;
import org.vaadin.jchristophe.SortableConfig;
import org.vaadin.jchristophe.SortableGroupStore;
import org.vaadin.jchristophe.SortableLayout;

/**
* @author Martin Israelsen
*/
public class LayoutEditorRow<FIELD> extends Composite<HorizontalLayout> {

/**
*
*/
private static final long serialVersionUID = 4400265825834628717L;

private final HorizontalLayout fields = new HorizontalLayout();

private SortableLayout sortableLayout;

private Icon moveIcon;
private Icon addIcon;
private Icon removeIcon;

public LayoutEditorRow(SortableConfig sortableConfig, SortableGroupStore sortableGroupStore) {
HorizontalLayout layout = getContent();
layout.setAlignItems(Alignment.CENTER);

Style s = layout.getStyle();
s.set("background-color", "#eeeeee");
s.set("padding", "var(--lumo-space-s)");
s.set("border-radius", "var(--lumo-border-radius)");
s.set("min-height", "40px");
s.set("width", "100%");

moveIcon = VaadinIcon.MENU.create();
moveIcon.getStyle().set("color", "#dddddd");
moveIcon.setClassName("row-handle");

layout.add(moveIcon);

sortableLayout = new SortableLayout(fields, sortableConfig, sortableGroupStore);
sortableLayout.setHandle("field-handle");
sortableLayout.setMinWidth("100px");

layout.add(sortableLayout);

addIcon = VaadinIcon.PLUS_CIRCLE.create();
addIcon.getStyle().set("color", "#dddddd");
layout.add(addIcon);

removeIcon = VaadinIcon.MINUS_CIRCLE.create();
removeIcon.getStyle().set("color", "#dddddd");
layout.add(removeIcon);
}

public Registration addRemoveRowClickListener(ComponentEventListener<ClickEvent<Icon>> listener) {
return removeIcon.addClickListener(listener);
}

public Registration addAddFieldClickListener(ComponentEventListener<ClickEvent<Icon>> listener) {
return addIcon.addClickListener(listener);
}

public void addField(FIELD field) {
String label = String.valueOf(field);
this.fields.add(new LayoutEditorField<>(label, field));
}

}
Loading

0 comments on commit cf5ef3b

Please sign in to comment.