Skip to content

Commit 5c81ff6

Browse files
TatuLundTatuLund
authored
Merge pull request #4 from paodb/enhanced-grid-flow-filter-fixes
Fix column header buttons display
2 parents 5b19e3b + 50385b6 commit 5c81ff6

File tree

6 files changed

+159
-16
lines changed

6 files changed

+159
-16
lines changed

‎enhanced-grid-flow-demo/pom.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<groupId>com.vaadin.componentfactory</groupId>
88
<artifactId>enhanced-grid-flow-demo</artifactId>
9-
<version>0.5.0</version>
9+
<version>0.6.0</version>
1010

1111
<name>Enhanced Grid Demo</name>
1212
<packaging>war</packaging>
@@ -106,7 +106,7 @@
106106
<dependency>
107107
<groupId>com.vaadin.componentfactory</groupId>
108108
<artifactId>enhanced-grid-flow</artifactId>
109-
<version>0.5.0</version>
109+
<version>0.6.0</version>
110110
</dependency>
111111

112112
<dependency>

‎enhanced-grid-flow/pom.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<groupId>com.vaadin.componentfactory</groupId>
88
<artifactId>enhanced-grid-flow</artifactId>
9-
<version>0.5.0</version>
9+
<version>0.6.0</version>
1010
<packaging>jar</packaging>
1111

1212
<name>Enhanced Grid</name>
@@ -104,7 +104,7 @@
104104
<dependency>
105105
<groupId>com.vaadin.componentfactory</groupId>
106106
<artifactId>popup</artifactId>
107-
<version>2.2.2</version>
107+
<version>2.2.3</version>
108108
</dependency>
109109

110110
</dependencies>

‎enhanced-grid-flow/src/main/java/com/vaadin/componentfactory/enhancedgrid/EnhancedColumn.java

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
import com.vaadin.flow.component.grid.FilterFieldDto;
3232
import com.vaadin.flow.component.grid.Grid;
3333
import com.vaadin.flow.component.grid.Grid.Column;
34+
import com.vaadin.flow.component.grid.GridSorterFilterComponentRenderer;
3435
import com.vaadin.flow.component.grid.SortOrderProvider;
3536
import com.vaadin.flow.component.html.Div;
3637
import com.vaadin.flow.component.icon.Icon;
@@ -45,6 +46,7 @@
4546
*
4647
*/
4748
@CssImport(value = "./styles/enhanced-column.css")
49+
@CssImport(value = "./styles/enhanced-column-sorter.css", themeFor = "vaadin-grid-sorter")
4850
public class EnhancedColumn<T> extends Grid.Column<T> {
4951

5052
private HasValueAndElement<?, ? extends FilterFieldDto> filter;
@@ -73,8 +75,8 @@ public EnhancedColumn<T> setHeader(String labelText, HasValueAndElement<?, ? ext
7375
if(filter != null) {
7476
Component headerComponent = new Div();
7577
headerComponent.getElement().setText(labelText);
76-
addFilterButtonToHeader(headerComponent, filter);
77-
return setHeader(headerComponent);
78+
addFilterButtonToHeader(headerComponent, filter);
79+
return setHeader(headerComponent);
7880
}
7981
return setHeader(labelText);
8082
}
@@ -85,7 +87,7 @@ public EnhancedColumn<T> setHeader(Component headerComponent, HasValueAndElement
8587
}
8688
return setHeader(headerComponent);
8789
}
88-
90+
8991
/**
9092
* @see Column#setHeader(Component)
9193
*
@@ -111,7 +113,10 @@ private void addFilterButtonToHeader(Component headerComponent, HasValueAndEleme
111113
filterButton = new Button(new Icon(VaadinIcon.FILTER));
112114
filterButton.setId("filter-button");
113115
filterButton.addClassName("filter-not-selected");
114-
116+
filterButton.getElement().addEventListener("click", click -> {
117+
//do nothing
118+
}).addEventData("event.stopPropagation()");
119+
115120
// add filter field popup and set filter as it's filter component
116121
filterField = new FilterField();
117122
filterField.setFor(filterButton.getId().get());
@@ -127,17 +132,14 @@ private void addFilterButtonToHeader(Component headerComponent, HasValueAndEleme
127132
}
128133
}
129134
});
130-
131-
// this is needed to avoid issues when adding popup
135+
132136
headerComponent.getElement().appendChild(filterButton.getElement());
137+
// this is needed to avoid js issues when adding popup
133138
headerComponent.getElement().executeJs("return").then(ignore -> {
134139
headerComponent.getElement().appendChild(filterField.getElement());
135-
if(this.isSortable()) {
136-
headerComponent.getElement().executeJs("this.parentElement.parentElement.root.querySelector('[part=indicators]').style.marginLeft='-50px'");
137-
}
138-
});
140+
});
139141
}
140-
142+
141143
HasValueAndElement<?, ? extends FilterFieldDto> getFilter() {
142144
return filter;
143145
}
@@ -228,4 +230,9 @@ public EnhancedColumn<T> setComparator(Comparator<T> comparator) {
228230
return (EnhancedColumn<T>)super.setComparator(comparator);
229231
}
230232

233+
@Override
234+
protected void setHeaderComponent(Component component) {
235+
super.setHeaderRenderer(new GridSorterFilterComponentRenderer<>(this, component));
236+
}
237+
231238
}

‎enhanced-grid-flow/src/main/java/com/vaadin/flow/component/grid/GridSorterFilterComponentRenderer.java

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
package com.vaadin.flow.component.grid;
2+
3+
/*-
4+
* #%L
5+
* Enhanced Grid
6+
* %%
7+
* Copyright (C) 2020 - 2021 Vaadin Ltd
8+
* %%
9+
* Licensed under the Apache License, Version 2.0 (the "License");
10+
* you may not use this file except in compliance with the License.
11+
* You may obtain a copy of the License at
12+
*
13+
* http://www.apache.org/licenses/LICENSE-2.0
14+
*
15+
* Unless required by applicable law or agreed to in writing, software
16+
* distributed under the License is distributed on an "AS IS" BASIS,
17+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
18+
* See the License for the specific language governing permissions and
19+
* limitations under the License.
20+
* #L%
21+
*/
22+
23+
import java.util.Optional;
24+
25+
import com.vaadin.componentfactory.enhancedgrid.EnhancedColumn;
26+
import com.vaadin.flow.component.Component;
27+
import com.vaadin.flow.component.UI;
28+
import com.vaadin.flow.data.provider.ComponentDataGenerator;
29+
import com.vaadin.flow.data.provider.DataGenerator;
30+
import com.vaadin.flow.data.provider.DataKeyMapper;
31+
import com.vaadin.flow.data.renderer.ComponentRenderer;
32+
import com.vaadin.flow.data.renderer.Rendering;
33+
import com.vaadin.flow.dom.Element;
34+
35+
/**
36+
* Internal component renderer for sortable headers inside Grid.
37+
*
38+
*/
39+
public class GridSorterFilterComponentRenderer <SOURCE>
40+
extends ComponentRenderer<Component, SOURCE>{
41+
42+
private final EnhancedColumn<?> column;
43+
private final Component component;
44+
45+
/**
46+
* Creates a new renderer for a specific column, using the defined
47+
* component.
48+
*
49+
* @param column
50+
* The column which header should be rendered
51+
* @param component
52+
* The component to be used by the renderer
53+
*/
54+
public GridSorterFilterComponentRenderer(EnhancedColumn<?> column,
55+
Component component) {
56+
this.column = column;
57+
this.component = component;
58+
}
59+
60+
@Override
61+
public Rendering<SOURCE> render(Element container,
62+
DataKeyMapper<SOURCE> keyMapper, Element contentTemplate) {
63+
64+
GridSorterFilterComponentRendering rendering = new GridSorterFilterComponentRendering(
65+
contentTemplate);
66+
67+
container.getNode()
68+
.runWhenAttached(ui -> ui.getInternals().getStateTree()
69+
.beforeClientResponse(container.getNode(),
70+
context -> setupTemplateWhenAttached(
71+
context.getUI(), container, rendering,
72+
keyMapper)));
73+
return rendering;
74+
}
75+
76+
private void setupTemplateWhenAttached(UI ui, Element owner,
77+
GridSorterFilterComponentRendering rendering,
78+
DataKeyMapper<SOURCE> keyMapper) {
79+
String appId = ui.getInternals().getAppId();
80+
Element templateElement = rendering.getTemplateElement();
81+
owner.appendChild(templateElement);
82+
83+
Element container = new Element("div");
84+
owner.appendVirtualChild(container);
85+
rendering.setContainer(container);
86+
String templateInnerHtml;
87+
88+
if (component != null) {
89+
container.appendChild(component.getElement());
90+
91+
templateInnerHtml = String.format(
92+
"<flow-component-renderer appid=\"%s\" nodeid=\"%s\"></flow-component-renderer>",
93+
appId, component.getElement().getNode().getId());
94+
} else {
95+
templateInnerHtml = "";
96+
}
97+
98+
/*
99+
* The renderer must set the base header template back to the column, so
100+
* if/when the sortable state is changed by the developer, the column
101+
* knows how to add or remove the grid sorter.
102+
*/
103+
column.setBaseHeaderTemplate(templateInnerHtml);
104+
if (column.hasSortingIndicators()) {
105+
templateInnerHtml = column.addGridSorter(templateInnerHtml)
106+
.replace("<vaadin-grid-sorter", "<vaadin-grid-sorter class='enhanced-grid-sorter'");
107+
}
108+
109+
templateElement.setProperty("innerHTML", templateInnerHtml);
110+
}
111+
112+
private class GridSorterFilterComponentRendering extends
113+
ComponentDataGenerator<SOURCE> implements Rendering<SOURCE> {
114+
115+
private Element templateElement;
116+
117+
public GridSorterFilterComponentRendering(Element templateElement) {
118+
super(GridSorterFilterComponentRenderer.this, null);
119+
this.templateElement = templateElement;
120+
}
121+
122+
@Override
123+
public Element getTemplateElement() {
124+
return templateElement;
125+
}
126+
127+
@Override
128+
public Optional<DataGenerator<SOURCE>> getDataGenerator() {
129+
return Optional.of(this);
130+
}
131+
}
132+
133+
}

‎enhanced-grid-flow/src/main/resources/META-INF/resources/frontend/styles/enhanced-column-sorter.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host(.enhanced-grid-sorter) [part=indicators] {
2+
margin-left: -50px;
3+
}

‎pom.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<groupId>com.vaadin.componentfactory</groupId>
55
<artifactId>enhanced-grid-flow-root</artifactId>
6-
<version>0.5.0</version>
6+
<version>0.6.0</version>
77
<packaging>pom</packaging>
88
<modules>
99
<module>enhanced-grid-flow</module>

0 commit comments

Comments
 (0)