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:
parent
ac4423bd13
commit
93555f7411
|
|
@ -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;
|
||||
|
|
@ -42,20 +49,38 @@ import com.extjs.gxt.ui.client.widget.tips.QuickTip;
|
|||
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);
|
||||
|
||||
|
||||
|
||||
RowData rowData = new RowData(.5, 1);
|
||||
vpAllContacts.add(hp);
|
||||
vpAllContacts.add(gridAllContacts);
|
||||
|
||||
RowData rowData = new RowData(.4, 1);
|
||||
rowData.setMargins(new Margins(6));
|
||||
cp.add(vp, rowData);
|
||||
|
||||
vp = new VerticalPanel();
|
||||
vp.setHorizontalAlign(HorizontalAlignment.CENTER);
|
||||
vp.add(new Label("Share with..."));
|
||||
cp.add(vpAllContacts, rowData);
|
||||
|
||||
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){
|
||||
|
|
|
|||
Loading…
Reference in New Issue