-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #15 from jcgueriaud1/feature/doc-for-group
Add group documentation and a full example
- Loading branch information
Showing
14 changed files
with
414 additions
and
530 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
sortable-layout-demo/src/main/java/org/vaadin/jchristophe/LayoutEditorView.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
122 changes: 122 additions & 0 deletions
122
sortable-layout-demo/src/main/java/org/vaadin/jchristophe/layouteditor/LayoutEditor.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} | ||
} |
52 changes: 52 additions & 0 deletions
52
...able-layout-demo/src/main/java/org/vaadin/jchristophe/layouteditor/LayoutEditorField.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
79 changes: 79 additions & 0 deletions
79
sortable-layout-demo/src/main/java/org/vaadin/jchristophe/layouteditor/LayoutEditorRow.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)); | ||
} | ||
|
||
} |
Oops, something went wrong.