completed enhancement to share panel usability

https://issue.imarine.research-infrastructures.eu/ticket/2798

git-svn-id: http://svn.d4science-ii.research-infrastructures.eu/gcube/trunk/portlets/user/workspace-tree-widget@98216 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Francesco Mangiacrapa 2014-07-01 13:47:51 +00:00
parent ac4423bd13
commit 93555f7411
1 changed files with 224 additions and 43 deletions

View File

@ -7,6 +7,7 @@ import org.gcube.portlets.user.workspace.client.ConstantsExplorer;
import org.gcube.portlets.user.workspace.client.model.ExtendedInfoContactModel;
import org.gcube.portlets.user.workspace.client.model.InfoContactModel;
import org.gcube.portlets.user.workspace.client.resources.Resources;
import org.gcube.portlets.user.workspace.client.view.windows.MessageBoxConfirm;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.Orientation;
@ -15,7 +16,11 @@ import com.extjs.gxt.ui.client.Style.SortDir;
import com.extjs.gxt.ui.client.Style.VerticalAlignment;
import com.extjs.gxt.ui.client.dnd.GridDragSource;
import com.extjs.gxt.ui.client.dnd.GridDropTarget;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.MessageBoxEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.Store;
@ -25,6 +30,7 @@ import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.HorizontalPanel;
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.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
@ -35,6 +41,7 @@ import com.extjs.gxt.ui.client.widget.grid.ColumnData;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;
import com.extjs.gxt.ui.client.widget.layout.CenterLayout;
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;
@ -43,19 +50,37 @@ import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
public class MultiDragContact extends Dialog {
private GridDropTarget dropSource;
private GridDropTarget dropTarget;
private ListStore<ExtendedInfoContactModel> storeSource = new ListStore<ExtendedInfoContactModel>();
private ListStore<ExtendedInfoContactModel> storeTarget = new ListStore<ExtendedInfoContactModel>();
private TextArea textAreaAlreadyShared;
private Grid<ExtendedInfoContactModel> gridAllContacts;
private Grid<ExtendedInfoContactModel> gridShareWith;
private ColumnConfig columnConfigDisplayName;
/**
*
*/
// protected static final int _247 = 247;
private static final int WIDTH_CP = 597;
private static final int HEIGHT_DIALOG = 542;
private static final int WIDTH_DIALOG = 625;
private static final int HEIGHT_GRID = 310;
// private static final int WIDTH_GRID = 250;
private GridDropTarget dropSource;
private GridDropTarget dropTarget;
private ListStore<ExtendedInfoContactModel> storeSource = new ListStore<ExtendedInfoContactModel>();
private ListStore<ExtendedInfoContactModel> storeTarget = new ListStore<ExtendedInfoContactModel>();
private TextArea textAreaAlreadyShared;
private Grid<ExtendedInfoContactModel> gridAllContacts;
private Grid<ExtendedInfoContactModel> gridShareWith;
private ColumnConfig columnConfigDisplayName;
private Button buttonSelectedLeft;
private Button buttonSelectedRight;
private Button buttonAllRight;
private Button buttonAllLeft;
public MultiDragContact() {
setStyleAttribute("margin", "10px");
setSize(563, 542);
setSize(WIDTH_DIALOG, HEIGHT_DIALOG);
setHeading("Group dragging contacts");
setResizable(false);
setMaximizable(false);
setIcon(Resources.getIconUsers());
setModal(true);
setScrollMode(Scroll.AUTOY);
@ -69,7 +94,7 @@ public class MultiDragContact extends Dialog {
ContentPanel cpAlreadyShared = new ContentPanel();
cpAlreadyShared.setSize(530, 60);
cpAlreadyShared.setSize(WIDTH_CP, 60);
cpAlreadyShared.setHeaderVisible(false);
cpAlreadyShared.setLayout(new FitLayout());
@ -85,7 +110,7 @@ public class MultiDragContact extends Dialog {
textAreaAlreadyShared = new TextArea();
// textField.setFieldLabel("Already shared with");
// textField.setHeight(30);
textAreaAlreadyShared.setWidth(401);
textAreaAlreadyShared.setWidth(501);
textAreaAlreadyShared.setHeight(43);
cpAlreadyShared.setStyleAttribute("padding-bottom", "5px");
textAreaAlreadyShared.setReadOnly(true);
@ -101,8 +126,8 @@ public class MultiDragContact extends Dialog {
add(cpAlreadyShared);
ContentPanel cp = new ContentPanel();
cp.setSize(530, 370);
final ContentPanel cp = new ContentPanel();
cp.setSize(WIDTH_CP, 370);
cp.setHeaderVisible(false);
cp.setLayout(new RowLayout(Orientation.HORIZONTAL));
@ -122,9 +147,9 @@ public class MultiDragContact extends Dialog {
toolBar.add(buttonHelp);
setTopComponent(toolBar);
VerticalPanel vp = new VerticalPanel();
vp.setHorizontalAlign(HorizontalAlignment.CENTER);
vp.add(new Label("All Contacts"));
final VerticalPanel vpAllContacts = new VerticalPanel();
vpAllContacts.setHorizontalAlign(HorizontalAlignment.CENTER);
vpAllContacts.add(new Label("All Contacts"));
gridAllContacts = new Grid<ExtendedInfoContactModel>(storeSource, createColumnModel());
@ -153,7 +178,7 @@ public class MultiDragContact extends Dialog {
storeTarget.sort(InfoContactModel.FULLNAME, SortDir.ASC);
StoreFilterField<ExtendedInfoContactModel> filter = new StoreFilterField<ExtendedInfoContactModel>() {
final StoreFilterField<ExtendedInfoContactModel> filter = new StoreFilterField<ExtendedInfoContactModel>() {
@Override
protected boolean doSelect(Store<ExtendedInfoContactModel> store,
@ -170,8 +195,6 @@ public class MultiDragContact extends Dialog {
};
// filter.setFieldLabel("Filter Contacts");
filter.setWidth(247);
filter.setEmptyText("Filter All Contacts");
HorizontalPanel hp = new HorizontalPanel();
hp.setStyleAttribute("padding-top", "5px");
@ -179,27 +202,32 @@ public class MultiDragContact extends Dialog {
hp.add(filter);
filter.bind(storeSource);
gridAllContacts.setSize(250,310);
gridAllContacts.setHeight(HEIGHT_GRID);
gridAllContacts.setBorders(false);
gridAllContacts.getView().setAutoFill(true);
// gridAllContacts.setAutoExpandColumn(InfoContactModel.FULLNAME);
gridAllContacts.setBorders(true);
vp.add(hp);
vp.add(gridAllContacts);
vpAllContacts.add(hp);
vpAllContacts.add(gridAllContacts);
RowData rowData = new RowData(.5, 1);
RowData rowData = new RowData(.4, 1);
rowData.setMargins(new Margins(6));
cp.add(vp, rowData);
cp.add(vpAllContacts, rowData);
vp = new VerticalPanel();
vp.setHorizontalAlign(HorizontalAlignment.CENTER);
vp.add(new Label("Share with..."));
rowData = new RowData(.2, 1);
rowData.setMargins(new Margins(6));
LayoutContainer lc = createMoveContactsContainer();
cp.add(lc, rowData);
rowData = new RowData(.4, 1);
rowData.setMargins(new Margins(6, 6, 6, 0));
final VerticalPanel vpShareWith = new VerticalPanel();
vpShareWith.setHorizontalAlign(HorizontalAlignment.CENTER);
vpShareWith.add(new Label("Share with..."));
gridShareWith = new Grid<ExtendedInfoContactModel>(storeTarget, createColumnModel());
StoreFilterField<ExtendedInfoContactModel> filter2 = new StoreFilterField<ExtendedInfoContactModel>() {
final StoreFilterField<ExtendedInfoContactModel> filter2 = new StoreFilterField<ExtendedInfoContactModel>() {
@Override
protected boolean doSelect(Store<ExtendedInfoContactModel> store,
@ -216,8 +244,6 @@ public class MultiDragContact extends Dialog {
};
// filter.setFieldLabel("Filter Contacts");
filter2.setWidth(247);
filter2.setEmptyText("Filter Share with");
hp = new HorizontalPanel();
@ -226,18 +252,15 @@ public class MultiDragContact extends Dialog {
hp.add(filter2);
filter2.bind(storeTarget);
gridShareWith.setSize(250, 310);
gridShareWith.setHeight(HEIGHT_GRID);
gridShareWith.setBorders(false);
gridShareWith.getView().setAutoFill(true);
// gridShareWith.setAutoExpandColumn(InfoContactModel.FULLNAME);
gridShareWith.setBorders(true);
vp.add(hp);
vp.add(gridShareWith);
vpShareWith.add(hp);
vpShareWith.add(gridShareWith);
rowData = new RowData(.5, 1);
rowData.setMargins(new Margins(6, 6, 6, 0));
cp.add(vp, rowData);
cp.add(vpShareWith, rowData);
new GridDragSource(gridAllContacts);
new GridDragSource(gridShareWith);
@ -263,15 +286,171 @@ public class MultiDragContact extends Dialog {
@Override
public void componentSelected(ButtonEvent ce) {
List<ExtendedInfoContactModel> shareContacts = storeTarget.getModels();
if(shareContacts==null || shareContacts.isEmpty()){
MessageBoxConfirm mbc = new MessageBoxConfirm("Confirm exit?", "You have not selected any contact to share, confirm exit?");
mbc.getMessageBoxConfirm().addCallback(new Listener<MessageBoxEvent>() {
@Override
public void handleEvent(MessageBoxEvent be) {
String clickedButton = be.getButtonClicked().getItemId();
if(clickedButton.equals(Dialog.YES)){
hide();
}
}
});
}else
hide();
}
});
// needed to enable quicktips (qtitle for the heading and qtip for the
// content) that are setup in the change GridCellRenderer
cp.addListener(Events.Render, new Listener<BaseEvent>() {
@Override
public void handleEvent(BaseEvent be) {
int width = gridAllContacts.getWidth();
filter.setWidth(width-2);
filter2.setWidth(width-2);
gridShareWith.setWidth(width+5);
vpShareWith.setWidth(width+15);
gridAllContacts.setWidth(width+5);
vpAllContacts.setWidth(width+15);
vpShareWith.layout();
vpAllContacts.layout();
cp.layout();
}
});
new QuickTip(gridAllContacts);
}
private LayoutContainer createMoveContactsContainer() {
LayoutContainer lc = new LayoutContainer();
lc.setLayout(new CenterLayout());
VerticalPanel vp1 = new VerticalPanel();
vp1.setHorizontalAlign(HorizontalAlignment.CENTER);
vp1.setVerticalAlign(VerticalAlignment.MIDDLE);
buttonSelectedLeft = new Button();
buttonSelectedLeft.setIcon(Resources.getSelectedLeft());
buttonSelectedLeft
.setToolTip("Move selected contact/s from 'All Contact' to 'Share with'");
buttonSelectedLeft
.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
List<ExtendedInfoContactModel> selectedItems = gridAllContacts
.getSelectionModel().getSelectedItems();
if (selectedItems != null && selectedItems.size() > 0) {
for (ExtendedInfoContactModel extendedInfoContactModel : selectedItems) {
storeTarget.add(extendedInfoContactModel);
storeSource.remove(extendedInfoContactModel);
}
}
}
});
buttonSelectedRight = new Button();
buttonSelectedRight.setIcon(Resources.getSelectedRight());
buttonSelectedRight
.setToolTip("Move selected contact/s from 'Share with' to 'All Contact'");
buttonSelectedRight
.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
List<ExtendedInfoContactModel> selectedItems = gridShareWith
.getSelectionModel().getSelectedItems();
if (selectedItems != null && selectedItems.size() > 0) {
for (ExtendedInfoContactModel extendedInfoContactModel : selectedItems) {
storeSource.add(extendedInfoContactModel);
storeTarget.remove(extendedInfoContactModel);
}
}
}
});
buttonAllLeft = new Button();
buttonAllLeft.setIcon(Resources.getAllLeft());
buttonAllLeft
.setToolTip("Move all contact/s from 'All Contact' to 'Share with'");
buttonAllLeft
.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
if (storeSource != null && storeSource.getCount() > 0) {
for (ExtendedInfoContactModel extendedInfoContactModel : storeSource
.getModels()) {
storeTarget.add(extendedInfoContactModel);
storeSource.remove(extendedInfoContactModel);
}
}
}
});
buttonAllRight = new Button();
buttonAllRight.setIcon(Resources.getAllRight());
buttonAllRight
.setToolTip("Move all contact/s from 'Share with' to 'All Contact'");
buttonAllRight
.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
if (storeTarget != null && storeTarget.getCount() > 0) {
for (ExtendedInfoContactModel extendedInfoContactModel : storeTarget
.getModels()) {
storeSource.add(extendedInfoContactModel);
storeTarget.remove(extendedInfoContactModel);
}
}
}
});
vp1.add(buttonSelectedLeft);
vp1.add(buttonAllLeft);
vp1.add(buttonSelectedRight);
vp1.add(buttonAllRight);
lc.add(vp1);
vp1.addListener(Events.Render, new Listener<BaseEvent>() {
@Override
public void handleEvent(BaseEvent be) {
buttonSelectedLeft.el().setStyleAttribute("margin-top", "40px");
buttonAllLeft.el().setStyleAttribute("margin-top", "5px");
buttonSelectedRight.el().setStyleAttribute("margin-top", "20px");
buttonAllRight.el().setStyleAttribute("margin", "5px");
}
});
return lc;
}
private ColumnModel createColumnModel() {
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
@ -320,7 +499,9 @@ public class MultiDragContact extends Dialog {
storeSource.add(listExtended);
}
gridAllContacts.unmask();
gridAllContacts.repaint();
}
public void addAlreadySharedContacts(List<InfoContactModel> listContact){