Support frozen columns in Grid editor (#16727)

Change-Id: Iff797c3bf90a6021099a3ed4082cfca3a6fb3540

WebContent/VAADIN/themes/base/grid/grid.scss

@@ -199,6 +199,12 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
       border-left: none;
     }
   }
+  
+  .#{$primaryStyleName}-editor-cells.frozen > div {
+    @include box-shadow(1px 0 2px rgba(0,0,0,.1));
+    border-right: $v-grid-cell-vertical-border;
+    border-left: none;
+  }
 
   .#{$primaryStyleName}-row-stripe > td {
     background-color: $v-grid-row-stripe-background-color;
@@ -342,6 +348,10 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
   .#{$primaryStyleName}-editor-cells {
     position: relative;
     white-space: nowrap;
+    
+    &.frozen {
+      z-index: 2;
+    }
 
     > div {
       display: inline-block;

client/src/com/vaadin/client/widgets/Grid.java

@@ -1135,6 +1135,8 @@ public class Grid<T> extends ResizeComposite implements
 
         private DivElement editorOverlay = DivElement.as(DOM.createDiv());
         private DivElement cellWrapper = DivElement.as(DOM.createDiv());
+        private DivElement frozenCellWrapper = DivElement.as(DOM.createDiv());
+
         private DivElement messageAndButtonsWrapper = DivElement.as(DOM
                 .createDiv());
 
@@ -1530,15 +1532,31 @@ public class Grid<T> extends ResizeComposite implements
             });
 
             gridElement.appendChild(editorOverlay);
+            editorOverlay.appendChild(frozenCellWrapper);
             editorOverlay.appendChild(cellWrapper);
             editorOverlay.appendChild(messageAndButtonsWrapper);
 
+            int frozenColumns = grid.getVisibleFrozenColumnCount();
+            double frozenColumnsWidth = 0;
+            double cellHeight = 0;
+
             for (int i = 0; i < tr.getCells().getLength(); i++) {
                 Element cell = createCell(tr.getCells().getItem(i));
-
-                cellWrapper.appendChild(cell);
+                cellHeight = Math.max(cellHeight, WidgetUtil
+                        .getRequiredHeightBoundingClientRectDouble(tr
+                                .getCells().getItem(i)));
 
                 Column<?, T> column = grid.getVisibleColumn(i);
+
+                if (i < frozenColumns) {
+                    frozenCellWrapper.appendChild(cell);
+                    frozenColumnsWidth += WidgetUtil
+                            .getRequiredWidthBoundingClientRectDouble(tr
+                                    .getCells().getItem(i));
+                } else {
+                    cellWrapper.appendChild(cell);
+                }
+
                 if (column.isEditable()) {
                     Widget editor = getHandler().getWidget(column);
 
@@ -1560,6 +1578,10 @@ public class Grid<T> extends ResizeComposite implements
                 }
             }
 
+            setBounds(frozenCellWrapper, 0, 0, frozenColumnsWidth, 0);
+            setBounds(cellWrapper, frozenColumnsWidth, 0, tr.getOffsetWidth()
+                    - frozenColumnsWidth, cellHeight);
+
             // Only add these elements once
             if (!messageAndButtonsWrapper.isOrHasChild(messageWrapper)) {
                 messageAndButtonsWrapper.appendChild(messageWrapper);
@@ -1624,6 +1646,7 @@ public class Grid<T> extends ResizeComposite implements
 
             editorOverlay.removeAllChildren();
             cellWrapper.removeAllChildren();
+            frozenCellWrapper.removeAllChildren();
             editorOverlay.removeFromParent();
 
             scrollHandler.removeHandler();
@@ -1636,6 +1659,7 @@ public class Grid<T> extends ResizeComposite implements
                 editorOverlay.removeClassName(styleName);
 
                 cellWrapper.removeClassName(styleName + "-cells");
+                frozenCellWrapper.removeClassName(styleName + "-cells");
                 messageAndButtonsWrapper.removeClassName(styleName + "-footer");
 
                 messageWrapper.removeClassName(styleName + "-message");
@@ -1648,6 +1672,7 @@ public class Grid<T> extends ResizeComposite implements
             editorOverlay.setClassName(styleName);
 
             cellWrapper.setClassName(styleName + "-cells");
+            frozenCellWrapper.setClassName(styleName + "-cells frozen");
             messageAndButtonsWrapper.setClassName(styleName + "-footer");
 
             messageWrapper.setClassName(styleName + "-message");
@@ -1698,7 +1723,8 @@ public class Grid<T> extends ResizeComposite implements
 
         private void updateHorizontalScrollPosition() {
             double scrollLeft = grid.getScrollLeft();
-            cellWrapper.getStyle().setLeft(-scrollLeft, Unit.PX);
+            cellWrapper.getStyle().setLeft(
+                    frozenCellWrapper.getOffsetWidth() - scrollLeft, Unit.PX);
         }
 
         protected void setGridEnabled(boolean enabled) {
@@ -6051,7 +6077,12 @@ public class Grid<T> extends ResizeComposite implements
     }
 
     private void updateFrozenColumns() {
-        int numberOfColumns = frozenColumnCount;
+        escalator.getColumnConfiguration().setFrozenColumnCount(
+                getVisibleFrozenColumnCount());
+    }
+
+    private int getVisibleFrozenColumnCount() {
+        int numberOfColumns = getFrozenColumnCount();
 
         // for the escalator the hidden columns are not in the frozen column
         // count, but for grid they are. thus need to convert the index
@@ -6066,9 +6097,7 @@ public class Grid<T> extends ResizeComposite implements
         } else if (selectionColumn != null) {
             numberOfColumns++;
         }
-
-        escalator.getColumnConfiguration()
-                .setFrozenColumnCount(numberOfColumns);
+        return numberOfColumns;
     }
 
     /**

uitest/src/com/vaadin/tests/components/grid/GridEditorFrozenColumnsUI.java

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.components.grid;
+
+import com.vaadin.tests.util.PersonContainer;
+import com.vaadin.ui.Grid;
+
+public class GridEditorFrozenColumnsUI extends GridEditorUI {
+
+    @Override
+    protected Grid createGrid(PersonContainer container) {
+        Grid grid = super.createGrid(container);
+
+        grid.setFrozenColumnCount(2);
+
+        grid.setWidth("600px");
+
+        return grid;
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 16727;
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Frozen columns should also freeze cells in editor.";
+    }
+}

uitest/src/com/vaadin/tests/components/grid/GridEditorFrozenColumnsUITest.java

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.components.grid;
+
+import java.io.IOException;
+
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.JavascriptExecutor;
+import org.openqa.selenium.WebDriver;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.interactions.Actions;
+
+import com.vaadin.testbench.elements.GridElement;
+import com.vaadin.testbench.elements.GridElement.GridCellElement;
+import com.vaadin.testbench.parallel.TestCategory;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+@TestCategory("grid")
+public class GridEditorFrozenColumnsUITest extends MultiBrowserTest {
+
+    @Test
+    public void testEditorWithFrozenColumns() throws IOException {
+        openTestURL();
+
+        openEditor(10);
+
+        compareScreen("noscroll");
+
+        scrollGridHorizontallyTo(100);
+
+        compareScreen("scrolled");
+    }
+
+    private void openEditor(int rowIndex) {
+        GridElement grid = $(GridElement.class).first();
+
+        GridCellElement cell = grid.getCell(rowIndex, 1);
+
+        new Actions(driver).moveToElement(cell).doubleClick().build().perform();
+    }
+
+    private void scrollGridHorizontallyTo(double px) {
+        executeScript("arguments[0].scrollLeft = " + px,
+                getGridHorizontalScrollbar());
+    }
+
+    private Object executeScript(String script, WebElement element) {
+        final WebDriver driver = getDriver();
+        if (driver instanceof JavascriptExecutor) {
+            final JavascriptExecutor je = (JavascriptExecutor) driver;
+            return je.executeScript(script, element);
+        } else {
+            throw new IllegalStateException("current driver "
+                    + getDriver().getClass().getName() + " is not a "
+                    + JavascriptExecutor.class.getSimpleName());
+        }
+    }
+
+    private WebElement getGridHorizontalScrollbar() {
+        return getDriver()
+                .findElement(
+                        By.xpath("//div[contains(@class, \"v-grid-scroller-horizontal\")]"));
+    }
+}

uitest/src/com/vaadin/tests/components/grid/GridEditorUI.java

@@ -28,6 +28,10 @@ public class GridEditorUI extends AbstractTestUI {
     protected void setup(VaadinRequest request) {
         PersonContainer container = PersonContainer.createWithTestData();
 
+        addComponent(createGrid(container));
+    }
+
+    protected Grid createGrid(PersonContainer container) {
         Grid grid = new Grid(container);
 
         // Don't use address since there's no converter
@@ -43,7 +47,7 @@ public class GridEditorUI extends AbstractTestUI {
 
         grid.getColumn("phoneNumber").getEditorField().setReadOnly(true);
 
-        addComponent(grid);
+        return grid;
     }
 
 }

uitest/src/com/vaadin/tests/components/grid/GridEditorUITest.java

@@ -45,7 +45,7 @@ public class GridEditorUITest extends MultiBrowserTest {
 
         openEditor(10);
 
-        assertTrue("Edtor should be opened with a password field",
+        assertTrue("Editor should be opened with a password field",
                 isElementPresent(PasswordFieldElement.class));
 
         assertFalse("Notification was present",

uitest/src/com/vaadin/tests/components/grid/basicfeatures/client/GridEditorClientTest.java

@@ -134,10 +134,12 @@ public class GridEditorClientTest extends GridBasicClientFeaturesTest {
     @Test
     public void testWithSelectionColumn() throws Exception {
         selectMenuPath("Component", "State", "Selection mode", "multi");
+        selectMenuPath("Component", "State", "Frozen column count",
+                "-1 columns");
         selectMenuPath(EDIT_ROW_5);
 
-        WebElement editorCells = findElement(By
-                .className("v-grid-editor-cells"));
+        WebElement editorCells = findElements(
+                By.className("v-grid-editor-cells")).get(1);
         List<WebElement> selectorDivs = editorCells.findElements(By
                 .cssSelector("div"));
 

uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridEditorTest.java

@@ -361,7 +361,7 @@ public class GridEditorTest extends GridBasicFeaturesTest {
         assertEquals(
                 "Not editable cell did not contain correct classname",
                 "not-editable",
-                editor.findElement(By.className("v-grid-editor-cells"))
+                editor.findElements(By.className("v-grid-editor-cells")).get(1)
                         .findElements(By.xpath("./div")).get(3)
                         .getAttribute("class"));