Skip to content

Commit

Permalink
collapsible and datatabl #161
Browse files Browse the repository at this point in the history
  • Loading branch information
@vegegoku
vegegoku committed Jan 4, 2019
1 parent 16e02a6 commit 50cfca1
Show file tree
Hide file tree
Showing 12 changed files with 532 additions and 533 deletions.
48 changes: 24 additions & 24 deletions src/main/java/org/dominokit/domino/ui/datatable/DataTable.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,17 @@
import java.util.stream.Collectors;

import static java.util.Objects.nonNull;
import static org.dominokit.domino.ui.datatable.DataTableStyles.*;
import static org.jboss.gwt.elemento.core.Elements.*;

public class DataTable<T> extends BaseDominoElement<HTMLDivElement, DataTable<T>> implements HasSelectionSupport<TableRow<T>> {

public static final String ANY = "*";
public static final String DATA_TABLE_ROW_FILTERED = "data-table-row-filtered";

private final DataStore<T> dataStore;
private DominoElement<HTMLDivElement> element = DominoElement.of(div().css("table-responsive"));
private DominoElement<HTMLTableElement> tableElement = DominoElement.of(table().css("table", "table-hover", "table-striped"));
private DominoElement<HTMLDivElement> root = DominoElement.of(div().css(TABLE_RESPONSIVE));
private DominoElement<HTMLTableElement> tableElement = DominoElement.of(table().css(TABLE, TABLE_HOVER, TABLE_STRIPED));
private TableConfig<T> tableConfig;
private DominoElement<HTMLTableSectionElement> tbody = DominoElement.of(tbody());
private DominoElement<HTMLTableSectionElement> thead = DominoElement.of(thead());
Expand Down Expand Up @@ -71,18 +74,15 @@ private DataTable<T> init() {
tableConfig.onAfterHeaders(this);
tableElement.appendChild(tbody);
tableConfig.getPlugins().forEach(plugin -> plugin.onBodyAdded(DataTable.this));
element.appendChild(tableElement);
root.appendChild(tableElement);
tableConfig.getPlugins().forEach(plugin -> plugin.onAfterAddTable(DataTable.this));
if (!tableConfig.isLazyLoad()) {
this.dataStore.load();
}
if (tableConfig.isFixed()) {
element.style()
.setPosition("relative")
.setOverFlowY("hidden");
thead.style().setDisplay("block");
root.style().add(TABLE_FIXED);
tbody.style()
.add("tbody-fixed")
.add(TBODY_FIXED)
.setMaxHeight(tableConfig.getFixedBodyHeight());
}
super.init(this);
Expand Down Expand Up @@ -126,53 +126,53 @@ public Collection<T> getData() {
}

public DataTable<T> expand() {
tableElement.style().remove("table-condensed");
tableElement.style().remove(TABLE_CONDENSED);
this.condensed = false;
return this;
}

public DataTable<T> condense() {
expand();
tableElement.style().add("table-condensed");
tableElement.style().add(TABLE_CONDENSED);
this.condensed = true;
return this;
}

public DataTable<T> noHover() {
tableElement.style().remove("table-hover");
tableElement.style().remove(TABLE_HOVER);
this.hoverable = false;
return this;
}

public DataTable<T> hovered() {
noHover();
tableElement.style().add("table-hover");
tableElement.style().add(TABLE_HOVER);
this.hoverable = true;
return this;
}

public DataTable<T> noBorder() {
tableElement.style().remove("table-bordered");
tableElement.style().remove(TABLE_BORDERED);
this.bordered = false;
return this;
}

public DataTable<T> bordered() {
noBorder();
tableElement.style().add("table-bordered");
tableElement.style().add(TABLE_BORDERED);
this.bordered = true;
return this;
}

public DataTable<T> noStripes() {
tableElement.style().remove("table-striped");
tableElement.style().remove(TABLE_STRIPED);
this.striped = false;
return this;
}

public DataTable<T> striped() {
noStripes();
tableElement.style().add("table-striped");
tableElement.style().add(TABLE_STRIPED);
this.striped = true;
return this;
}
Expand Down Expand Up @@ -212,30 +212,30 @@ public boolean isBordered() {
public void filterRows(LocalRowFilter<T> rowFilter) {
tableRows.forEach(tableRow -> {
if (rowFilter.filter(tableRow)) {
tableRow.style().removeProperty("display");
tableRow.removeFlag("data-table-row-filtered");
tableRow.style().remove(TABLE_ROW_FILTERED);
tableRow.removeFlag(DATA_TABLE_ROW_FILTERED);
tableRow.fireUpdate();
} else {
tableRow.style().setDisplay("none");
tableRow.setFlag("data-table-row-filtered", "true");
tableRow.style().add(TABLE_ROW_FILTERED);
tableRow.setFlag(DATA_TABLE_ROW_FILTERED, "true");
tableRow.deselect();
tableRow.fireUpdate();
}
});
}

public void clearRowFilters() {
tableRows.stream().filter(tableRow -> nonNull(tableRow.getFlag("data-table-row-filtered")))
tableRows.stream().filter(tableRow -> nonNull(tableRow.getFlag(DATA_TABLE_ROW_FILTERED)))
.forEach(tableRow -> {
tableRow.style().removeProperty("display");
tableRow.removeFlag("data-table-row-filtered");
tableRow.style().remove(TABLE_ROW_FILTERED);
tableRow.removeFlag(DATA_TABLE_ROW_FILTERED);
tableRow.fireUpdate();
});
}

@Override
public HTMLDivElement asElement() {
return element.asElement();
return root.asElement();
}

@Override
Expand Down
20 changes: 20 additions & 0 deletions src/main/java/org/dominokit/domino/ui/datatable/DataTableStyles.java
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
package org.dominokit.domino.ui.datatable;

public class DataTableStyles {
public static final String TABLE_RESPONSIVE = "table-responsive";
public static final String TABLE = "table";
public static final String TABLE_HOVER = "table-hover";
public static final String TABLE_STRIPED = "table-striped";
public static final String TABLE_CONDENSED = "table-condensed";
public static final String TABLE_BORDERED = "table-bordered";
public static final String TABLE_ROW_FILTERED = "table-row-filtered";
public static final String TABLE_FIXED = "table-fixed";
public static final String TBODY_FIXED = "tbody-fixed";
public static final String TABLE_CM_HEADER = "table-cm-header";
public static final String FIXED_WIDTH = "fixed-width";
public static final String HEADER = "table-header";
public static final String RECORD_DETAILS_BUTTON = "record-details-button";
public static final String DETAILS_TD = "details-td";
public static final String DETAILS_TR = "details-tr";
public static final String SELECT_CHECKBOX = "select-checkbox";
}
18 changes: 10 additions & 8 deletions src/main/java/org/dominokit/domino/ui/datatable/TableConfig.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,16 @@ public void drawHeaders(DataTable<T> dataTable, DominoElement<HTMLTableSectionEl
thead.appendChild(tr.asElement());

columns.forEach(columnConfig -> {
//TODO replace with FlexLayout
Node element = columnConfig.getHeaderElement().asElement(columnConfig.getTitle());
columnConfig.contextMenu = div().style("width: 15px; display: none;").asElement();
HtmlContentBuilder<HTMLDivElement> add = div().style("display: flex;")
.add(div().style("width:100%").add(element))
HtmlContentBuilder<HTMLDivElement> headerContent = div()
.style("display: flex;")
.add(div()
.style("width:100%")
.add(element))
.add(columnConfig.contextMenu);
HtmlContentBuilder<HTMLTableCellElement> th = th().css("table-cm-header").add(add.asElement());
HtmlContentBuilder<HTMLTableCellElement> th = th().css(DataTableStyles.TABLE_CM_HEADER).add(headerContent.asElement());
tr.add(th);
columnConfig.setHeadElement(th.asElement());
if (dataTable.getTableConfig().isFixed() || columnConfig.isFixed()) {
Expand All @@ -61,9 +65,7 @@ private void fixElementWidth(ColumnConfig<T> column, HTMLElement element) {
.setWidth(fixedWidth)
.setMinWidth(fixedWidth)
.setMaxWidth(fixedWidth)
.setProperty("overflow", "hidden")
.setProperty("text-overflow", "ellipsis")
.setProperty("white-space", "nowrap");
.add(DataTableStyles.FIXED_WIDTH);

}

Expand Down Expand Up @@ -173,7 +175,7 @@ public void setMultiSelect(boolean multiSelect) {
}

public void setRowAppender(RowAppender<T> rowAppender) {
if(nonNull(rowAppender)) {
if (nonNull(rowAppender)) {
this.rowAppender = rowAppender;
}
}
Expand All @@ -199,7 +201,7 @@ public DataTable<T> getDataTable() {
}

@FunctionalInterface
public interface RowAppender<T>{
public interface RowAppender<T> {
void appendRow(DataTable<T> dataTable, TableRow<T> tableRow);
}
}
2 changes: 1 addition & 1 deletion src/main/java/org/dominokit/domino/ui/datatable/TableRow.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ public TableRow(T record, int index) {

@Override
public T select() {
if (!hasFalg("data-table-row-filtered")) {
if (!hasFalg(DataTable.DATA_TABLE_ROW_FILTERED)) {
this.selected = true;
selectionHandlers.forEach(selectionHandler -> selectionHandler.onSelectionChanged(TableRow.this));
}
Expand Down
7 changes: 3 additions & 4 deletions src/main/java/org/dominokit/domino/ui/datatable/plugins/ColumnHeaderFilterPlugin.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import elemental2.dom.HTMLTableSectionElement;
import org.dominokit.domino.ui.datatable.ColumnConfig;
import org.dominokit.domino.ui.datatable.DataTable;
import org.dominokit.domino.ui.datatable.DataTableStyles;
import org.dominokit.domino.ui.datatable.TableConfig;
import org.dominokit.domino.ui.datatable.events.SearchClearedEvent;
import org.dominokit.domino.ui.datatable.events.TableEvent;
Expand Down Expand Up @@ -41,7 +42,7 @@ public void onAfterAddHeaders(DataTable<T> dataTable) {

columns.forEach(columnConfig -> {

HtmlContentBuilder<HTMLTableCellElement> th = th().css("table-cm-filter");
HtmlContentBuilder<HTMLTableCellElement> th = th().css(DataTableStyles.TABLE_CM_HEADER);
columnConfig.getHeaderStyler()
.styleCell(th.asElement());
tr.add(th);
Expand All @@ -64,9 +65,7 @@ private void fixElementWidth(ColumnConfig<T> column, HTMLElement element) {
.setWidth(fixedWidth)
.setMinWidth(fixedWidth)
.setMaxWidth(fixedWidth)
.setProperty("overflow", "hidden")
.setProperty("text-overflow", "ellipsis")
.setProperty("white-space", "nowrap");
.add(DataTableStyles.FIXED_WIDTH);

}

Expand Down
8 changes: 4 additions & 4 deletions src/main/java/org/dominokit/domino/ui/datatable/plugins/HeaderBarPlugin.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

import elemental2.dom.*;
import jsinterop.base.Js;
import org.dominokit.domino.ui.button.Button;
import org.dominokit.domino.ui.datatable.DataTable;
import org.dominokit.domino.ui.datatable.DataTableStyles;
import org.dominokit.domino.ui.datatable.events.SearchClearedEvent;
import org.dominokit.domino.ui.datatable.events.TableEvent;
import org.dominokit.domino.ui.datatable.model.Category;
Expand All @@ -18,7 +18,6 @@
import org.dominokit.domino.ui.icons.Icon;
import org.dominokit.domino.ui.icons.Icons;
import org.dominokit.domino.ui.icons.MdiIcon;
import org.dominokit.domino.ui.popover.Tooltip;
import org.dominokit.domino.ui.style.Style;
import org.dominokit.domino.ui.style.Styles;
import org.dominokit.domino.ui.utils.ElementUtil;
Expand All @@ -36,7 +35,8 @@ public class HeaderBarPlugin<T> implements DataTablePlugin<T> {
private Column titleColumn = Column.span6();
private Column actionsBarColumn = Column.span6();

private HTMLHeadingElement title = Style.of(h(2)).setMarginBottom("0px").asElement();
private HTMLHeadingElement title = Style.of(h(2))
.setMarginBottom("0px").asElement();
private FlexLayout actionsBar = FlexLayout.create()
.setJustifyContent(FlexJustifyContent.END);

Expand All @@ -45,7 +45,7 @@ public class HeaderBarPlugin<T> implements DataTablePlugin<T> {
.appendChild(titleColumn.appendChild(title))
.appendChild(actionsBarColumn.appendChild(actionsBar))
.asElement())
.css("header")
.css(DataTableStyles.HEADER)
.style("padding-bottom: 5px;")
.asElement();

Expand Down
17 changes: 7 additions & 10 deletions src/main/java/org/dominokit/domino/ui/datatable/plugins/RecordDetailsPlugin.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@
import elemental2.dom.HTMLTableCellElement;
import elemental2.dom.HTMLTableRowElement;
import org.dominokit.domino.ui.button.Button;
import org.dominokit.domino.ui.datatable.CellRenderer;
import org.dominokit.domino.ui.datatable.ColumnConfig;
import org.dominokit.domino.ui.datatable.DataTable;
import org.dominokit.domino.ui.datatable.TableRow;
import org.dominokit.domino.ui.datatable.*;
import org.dominokit.domino.ui.datatable.events.ExpandRecordEvent;
import org.dominokit.domino.ui.datatable.events.TableEvent;
import org.dominokit.domino.ui.icons.BaseIcon;
Expand All @@ -21,12 +18,12 @@

public class RecordDetailsPlugin<T> implements DataTablePlugin<T> {

public static final String RECORD_DETAILS_BUTTON = "record-details-button";
public static final String DATA_TABLE_DETAILS_CM = "data-table-details-cm";
private final BaseIcon<?> collapseIcon;
private final BaseIcon<?> expandIcon;
private HTMLDivElement element = div().asElement();
private HTMLTableCellElement td = td().css("details-td").add(element).asElement();
private HTMLTableRowElement tr = tr().css("details-tr").add(td).asElement();
private HTMLTableCellElement td = td().css(DataTableStyles.DETAILS_TD).add(element).asElement();
private HTMLTableRowElement tr = tr().css(DataTableStyles.DETAILS_TR).add(td).asElement();

private final CellRenderer<T> cellRenderer;
private DetailsButtonElement buttonElement;
Expand All @@ -46,7 +43,7 @@ public RecordDetailsPlugin(CellRenderer<T> cellRenderer, BaseIcon<?> collapseIco
@Override
public void onBeforeAddHeaders(DataTable<T> dataTable) {
this.dataTable = dataTable;
ColumnConfig<T> column = ColumnConfig.<T>create("data-table-details-cm")
ColumnConfig<T> column = ColumnConfig.<T>create(DATA_TABLE_DETAILS_CM)
.setSortable(false)
.setWidth("60px")
.setFixed(true)
Expand Down Expand Up @@ -79,7 +76,7 @@ public void handleEvent(TableEvent event) {
}

private void expandRow(ExpandRecordEvent<T> event) {
DetailsButtonElement<T> detailsButtonElement = event.getTableRow().getMetaObject(RECORD_DETAILS_BUTTON);
DetailsButtonElement<T> detailsButtonElement = event.getTableRow().getMetaObject(DataTableStyles.RECORD_DETAILS_BUTTON);
setExpanded(detailsButtonElement);
}

Expand Down Expand Up @@ -153,7 +150,7 @@ public HTMLElement asElement() {

@Override
public String getKey() {
return RECORD_DETAILS_BUTTON;
return DataTableStyles.RECORD_DETAILS_BUTTON;
}
}

Expand Down
7 changes: 2 additions & 5 deletions src/main/java/org/dominokit/domino/ui/datatable/plugins/SelectionPlugin.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@
import elemental2.dom.HTMLElement;
import elemental2.dom.Node;
import jsinterop.base.Js;
import org.dominokit.domino.ui.datatable.CellRenderer;
import org.dominokit.domino.ui.datatable.ColumnConfig;
import org.dominokit.domino.ui.datatable.DataTable;
import org.dominokit.domino.ui.datatable.TableRow;
import org.dominokit.domino.ui.datatable.*;
import org.dominokit.domino.ui.forms.CheckBox;
import org.dominokit.domino.ui.icons.BaseIcon;
import org.dominokit.domino.ui.icons.Icons;
Expand Down Expand Up @@ -158,7 +155,7 @@ private CheckBox createCheckBox() {
if (nonNull(colorScheme)) {
checkBox.setColor(colorScheme.color());
}
Style.of(checkBox).add("select-checkbox");
Style.of(checkBox).add(DataTableStyles.SELECT_CHECKBOX);
return checkBox;
}

Expand Down
Loading

0 comments on commit 50cfca1

Please sign in to comment.