Table editing GUI suggestions

SVN: 21470

openbis/source/java/ch/systemsx/cisd/openbis/generic/client/web/client/application/IGenericImageBundle.java

@@ -52,5 +52,8 @@ public interface IGenericImageBundle extends ClientBundle
      */
     @Source("home.png")
     public ImageResource getHomeIcon();
+    
+    @Source("editable.gif")
+    public ImageResource getEditableIcon();
 
 }

openbis/source/java/ch/systemsx/cisd/openbis/generic/client/web/client/application/ui/grid/AbstractBrowserGrid.java

@@ -40,6 +40,7 @@ import com.extjs.gxt.ui.client.event.ButtonEvent;
 import com.extjs.gxt.ui.client.event.Events;
 import com.extjs.gxt.ui.client.event.GridEvent;
 import com.extjs.gxt.ui.client.event.Listener;
+import com.extjs.gxt.ui.client.event.MenuEvent;
 import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
 import com.extjs.gxt.ui.client.event.SelectionListener;
 import com.extjs.gxt.ui.client.store.ListStore;
@@ -63,6 +64,7 @@ import com.extjs.gxt.ui.client.widget.layout.FitLayout;
 import com.extjs.gxt.ui.client.widget.layout.RowData;
 import com.extjs.gxt.ui.client.widget.layout.RowLayout;
 import com.extjs.gxt.ui.client.widget.menu.Menu;
+import com.extjs.gxt.ui.client.widget.menu.MenuItem;
 import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
 import com.extjs.gxt.ui.client.widget.toolbar.SeparatorToolItem;
 import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
@@ -289,6 +291,25 @@ public abstract class AbstractBrowserGrid<T/* Entity */, M extends BaseEntityMod
                     {
                         menu.remove(menu.getItem(2));
                     }
+                    final int columnIndex = ge.getColIndex();
+                    ColumnConfig column = ge.getGrid().getColumnModel().getColumn(columnIndex);
+                    final String dataIndex = column.getDataIndex();
+                    if (column.getEditor() != null)
+                    {
+                        MenuItem item = new MenuItem("edit");
+                        item.addSelectionListener(new SelectionListener<MenuEvent>()
+                            {
+                                @Override
+                                public void componentSelected(MenuEvent ce)
+                                {
+                                    List<M> selectedItems =
+                                            grid.getSelectionModel().getSelectedItems();
+                                    MessageBox.info("edit", "edit column '" + dataIndex + "' "
+                                            + columnIndex + "\n" + selectedItems, null);
+                                }
+                            });
+                        menu.add(item);
+                    }
                 }
             });
         if (viewContext.getModel().isEmbeddedMode())

openbis/source/java/ch/systemsx/cisd/openbis/generic/client/web/client/application/ui/grid/ColumnDefsAndConfigs.java

@@ -22,11 +22,24 @@ import java.util.List;
 import java.util.Set;
 
 import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
+import com.extjs.gxt.ui.client.event.ButtonEvent;
+import com.extjs.gxt.ui.client.event.SelectionListener;
+import com.extjs.gxt.ui.client.util.Margins;
+import com.extjs.gxt.ui.client.widget.Label;
+import com.extjs.gxt.ui.client.widget.LayoutContainer;
+import com.extjs.gxt.ui.client.widget.MessageBox;
+import com.extjs.gxt.ui.client.widget.button.Button;
 import com.extjs.gxt.ui.client.widget.form.TextField;
 import com.extjs.gxt.ui.client.widget.grid.CellEditor;
 import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
 import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;
+import com.extjs.gxt.ui.client.widget.layout.HBoxLayout;
+import com.extjs.gxt.ui.client.widget.layout.HBoxLayout.HBoxLayoutAlign;
+import com.extjs.gxt.ui.client.widget.layout.HBoxLayoutData;
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.user.client.ui.AbstractImagePrototype;
 
+import ch.systemsx.cisd.openbis.generic.client.web.client.application.IGenericImageBundle;
 import ch.systemsx.cisd.openbis.generic.client.web.client.application.model.BaseEntityModel;
 import ch.systemsx.cisd.openbis.generic.client.web.client.application.renderer.LinkRenderer;
 import ch.systemsx.cisd.openbis.generic.client.web.client.application.ui.columns.framework.IColumnDefinitionUI;
@@ -38,6 +51,8 @@ import ch.systemsx.cisd.openbis.generic.shared.basic.IColumnDefinition;
  */
 public class ColumnDefsAndConfigs<T>
 {
+    private static final IGenericImageBundle IMAGE_BUNDLE = GWT.<IGenericImageBundle> create(IGenericImageBundle.class);
+
     private final List<ColumnConfig> columnConfigs;
 
     private final Set<IColumnDefinition<T>> columnDefs;
@@ -102,7 +117,8 @@ public class ColumnDefsAndConfigs<T>
         final ColumnConfig columnConfig = new ColumnConfig();
         columnConfig.setSortable(true);
         columnConfig.setId(column.getIdentifier());
-        columnConfig.setHeader(column.getHeader());
+        final String headerTitle = column.getHeader();
+        columnConfig.setHeader(headerTitle);
         if (column.isNumeric())
         {
             columnConfig.setAlignment(HorizontalAlignment.RIGHT);
@@ -113,8 +129,11 @@ public class ColumnDefsAndConfigs<T>
         }
         columnConfig.setWidth(column.getWidth());
         columnConfig.setHidden(column.isHidden());
+        String toolTip = "[Click] to sort, [SHIFT+Click] to adjust the width, "
+            + "[Drag & Drop] to change order.";
         if (column.isEditable())
         {
+            toolTip += " This is an editibale column. Just double-click on a cell or on the header icon.";
             CellEditor editor = new CellEditor(new TextField<String>()
                 {
                     @Override
@@ -124,7 +143,26 @@ public class ColumnDefsAndConfigs<T>
                     }
                 });
             columnConfig.setEditor(editor);
+            LayoutContainer header = new LayoutContainer();
+            HBoxLayout layout = new HBoxLayout();  
+            layout.setHBoxLayoutAlign(HBoxLayoutAlign.TOP);  
+            header.setLayout(layout);  
+            AbstractImagePrototype editIcon =
+                AbstractImagePrototype.create(IMAGE_BUNDLE.getEditableIcon());
+            Button editButton = new Button("", editIcon);
+            editButton.addSelectionListener(new SelectionListener<ButtonEvent>()
+                {
+                    @Override
+                    public void componentSelected(ButtonEvent ce)
+                    {
+                        MessageBox.info("Edit", "Editing for column " + headerTitle + " not yet implemented.", null);
+                    }
+                });
+            header.add(new Label(headerTitle), new HBoxLayoutData(new Margins(0, 0, 0, 0)));
+            header.add(editButton, new HBoxLayoutData(new Margins(0, 0, 0, 3)));
+            columnConfig.setWidget(header, headerTitle);
         }
+        columnConfig.setToolTip(toolTip);
         return columnConfig;
     }
 

openbis/source/java/ch/systemsx/cisd/openbis/generic/client/web/client/application/ui/grid/ExtendedGridView.java

@@ -67,8 +67,6 @@ class ExtendedGridView extends GridView
             };
         header.setSplitterWidth(splitterWidth);
         header.setMinColumnWidth(grid.getMinColumnWidth());
-        header.setTitle("[Click] to sort, [SHIFT+Click] to adjust the width, "
-                + "[Drag & Drop] to change order");
         return header;
     }