From eb4eb1d1a4484c291ee3d1e7bb88598d72064a32 Mon Sep 17 00:00:00 2001 From: Heng Sin Low Date: Tue, 24 Oct 2017 07:41:45 +0800 Subject: [PATCH] IDEMPIERE-3518 Improvement For Mobile Compatibility. Implement mobile UI alternative for moving of selected tree item (dnd not working well on mobile devices). --- .../oracle/201710240900_IDEMPIERE-3518.sql | 11 ++++ .../201710240900_IDEMPIERE-3518.sql | 8 +++ .../webui/component/SimpleTreeModel.java | 18 +++--- .../webui/panel/TreeSearchPanel.java | 63 ++++++++++++++++++- 4 files changed, 90 insertions(+), 10 deletions(-) create mode 100644 migration/i4.1z/oracle/201710240900_IDEMPIERE-3518.sql create mode 100644 migration/i4.1z/postgresql/201710240900_IDEMPIERE-3518.sql diff --git a/migration/i4.1z/oracle/201710240900_IDEMPIERE-3518.sql b/migration/i4.1z/oracle/201710240900_IDEMPIERE-3518.sql new file mode 100644 index 0000000000..49b1e57eb1 --- /dev/null +++ b/migration/i4.1z/oracle/201710240900_IDEMPIERE-3518.sql @@ -0,0 +1,11 @@ +SET SQLBLANKLINES ON +SET DEFINE OFF + +-- IDEMPIERE-3518 Improvement For Mobile Compatibility +-- Oct 24, 2017 7:34:07 AM GMT+08:00 +INSERT INTO AD_Message (MsgType,MsgText,AD_Client_ID,AD_Org_ID,IsActive,Created,CreatedBy,Updated,UpdatedBy,AD_Message_ID,Value,EntityType,AD_Message_UU) VALUES ('I','Select location to move selected item to',0,0,'Y',TO_DATE('2017-10-24 07:34:06','YYYY-MM-DD HH24:MI:SS'),100,TO_DATE('2017-10-24 07:34:06','YYYY-MM-DD HH24:MI:SS'),100,200437,'MoveSelectedTreeItem','D','95d7bb4b-c7af-4b17-b274-23916870a7fa') +; + +SELECT register_migration_script('201710240900_IDEMPIERE-3518.sql') FROM dual +; + diff --git a/migration/i4.1z/postgresql/201710240900_IDEMPIERE-3518.sql b/migration/i4.1z/postgresql/201710240900_IDEMPIERE-3518.sql new file mode 100644 index 0000000000..4afed1aa0a --- /dev/null +++ b/migration/i4.1z/postgresql/201710240900_IDEMPIERE-3518.sql @@ -0,0 +1,8 @@ +-- IDEMPIERE-3518 Improvement For Mobile Compatibility +-- Oct 24, 2017 7:34:07 AM GMT+08:00 +INSERT INTO AD_Message (MsgType,MsgText,AD_Client_ID,AD_Org_ID,IsActive,Created,CreatedBy,Updated,UpdatedBy,AD_Message_ID,Value,EntityType,AD_Message_UU) VALUES ('I','Select location to move selected item to',0,0,'Y',TO_TIMESTAMP('2017-10-24 07:34:06','YYYY-MM-DD HH24:MI:SS'),100,TO_TIMESTAMP('2017-10-24 07:34:06','YYYY-MM-DD HH24:MI:SS'),100,200437,'MoveSelectedTreeItem','D','95d7bb4b-c7af-4b17-b274-23916870a7fa') +; + +SELECT register_migration_script('201710240900_IDEMPIERE-3518.sql') FROM dual +; + diff --git a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/component/SimpleTreeModel.java b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/component/SimpleTreeModel.java index ae3cb8b2d0..a08de46680 100644 --- a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/component/SimpleTreeModel.java +++ b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/component/SimpleTreeModel.java @@ -19,6 +19,7 @@ import java.util.List; import java.util.logging.Level; import org.adempiere.webui.ClientInfo; +import org.adempiere.webui.panel.TreeSearchPanel; import org.compiere.model.MTree; import org.compiere.model.MTreeNode; import org.compiere.util.CLogger; @@ -161,16 +162,17 @@ public class SimpleTreeModel extends org.zkoss.zul.DefaultTreeModel impl if(ti.getTreerow()==null){ tr = new Treerow(); tr.setParent(ti); - //zk's dnd doesn't work well on touch device with vertical scroll enable - //need different approach - if (!ClientInfo.isMobile()) { - if (isItemDraggable()) { + if (isItemDraggable()) { + //use different approach on mobile, dnd not working well + if (ClientInfo.isMobile()) { + tr.setAttribute(TreeSearchPanel.TREE_ROW_MOVABLE, Boolean.TRUE); + } else { tr.setDraggable("true"); } - if (!onDropListners.isEmpty()) { - tr.setDroppable("true"); - tr.addEventListener(Events.ON_DROP, this); - } + } + if (!onDropListners.isEmpty()) { + tr.setDroppable("true"); + tr.addEventListener(Events.ON_DROP, this); } // Color diff --git a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/panel/TreeSearchPanel.java b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/panel/TreeSearchPanel.java index ee01d384a2..42fceb9059 100644 --- a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/panel/TreeSearchPanel.java +++ b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/panel/TreeSearchPanel.java @@ -21,10 +21,12 @@ import java.util.List; import java.util.Set; import java.util.TreeMap; +import org.adempiere.webui.ClientInfo; import org.adempiere.webui.apps.AEnv; import org.adempiere.webui.component.AutoComplete; import org.adempiere.webui.component.Label; import org.adempiere.webui.component.Panel; +import org.adempiere.webui.component.ToolBarButton; import org.adempiere.webui.theme.ThemeManager; import org.adempiere.webui.util.DocumentSearch; import org.adempiere.webui.util.TreeItemAction; @@ -39,6 +41,7 @@ import org.zkoss.zk.au.out.AuScript; import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.Executions; import org.zkoss.zk.ui.IdSpace; +import org.zkoss.zk.ui.event.DropEvent; import org.zkoss.zk.ui.event.Event; import org.zkoss.zk.ui.event.EventListener; import org.zkoss.zk.ui.event.Events; @@ -51,6 +54,7 @@ import org.zkoss.zul.Hlayout; import org.zkoss.zul.Tree; import org.zkoss.zul.Treechildren; import org.zkoss.zul.Treeitem; +import org.zkoss.zul.Treerow; import org.zkoss.zul.event.TreeDataEvent; import org.zkoss.zul.event.TreeDataListener; import org.zkoss.zul.impl.LabelElement; @@ -64,6 +68,8 @@ import org.zkoss.zul.impl.LabelImageElement; */ public class TreeSearchPanel extends Panel implements EventListener, TreeDataListener, IdSpace { + public static final String TREE_ROW_MOVABLE = "tree.row.movable"; + /** * */ @@ -91,6 +97,8 @@ public class TreeSearchPanel extends Panel implements EventListener, Tree private Treeitem selectedItem; protected Hlayout layout; + private Hlayout moveItemBox; + private static final String PREFIX_DOCUMENT_SEARCH = "/"; /** @@ -173,13 +181,64 @@ public class TreeSearchPanel extends Panel implements EventListener, Tree } layout.appendChild(lblSearch); - layout.appendChild(cmbSearch); + layout.appendChild(cmbSearch); + //move selected treeitem for mobile, alternative to dnd + if (ClientInfo.isMobile()) + { + ToolBarButton btn = new ToolBarButton(); + btn.setIconSclass("z-icon-arrows-alt"); + layout.appendChild(btn); + btn.addEventListener(Events.ON_CLICK, evt -> onMoveBtnClicked()); + } this.appendChild(layout); addEventListener(ON_POST_FIRE_TREE_EVENT, this); + + if (ClientInfo.isMobile()) { + tree.addEventListener(Events.ON_SELECT, evt -> onSelect(evt)); + } } - protected void addTreeItem(Treeitem treeItem) + private void onSelect(Event evt) { + if (moveItemBox != null) { + Treeitem selected = tree.getSelectedItem(); + Treerow selectedRow = selected.getTreerow(); + Component dragged = (Component) moveItemBox.getAttribute("draggedComponent"); + DropEvent event = new DropEvent(Events.ON_DROP, selectedRow, dragged, 0, 0, 0, 0, 0); + moveItemBox.detach(); + moveItemBox = null; + Events.postEvent(event); + } + } + + private void onMoveBtnClicked() { + Treeitem ti = tree.getSelectedItem(); + if (ti == null) return; + Treerow tr = ti.getTreerow(); + if (tr == null) return; + if (tr.getAttribute(TREE_ROW_MOVABLE) == null) return; + moveItemBox = new Hlayout(); + Label l = new Label(Msg.getMsg(Env.getCtx(), "MoveSelectedTreeItem")); + l.setStyle("font-weight: 600"); + moveItemBox.appendChild(l); + moveItemBox.setValign("middle"); + ToolBarButton btn = new ToolBarButton(); + btn.setIconSclass("z-icon-remove"); + moveItemBox.appendChild(btn); + moveItemBox.setAttribute("draggedComponent", tr); + btn.addEventListener(Events.ON_CLICK, e -> { + moveItemBox.detach(); + moveItemBox = null; + }); + this.insertBefore(moveItemBox, layout); + String script = "var w=zk.Widget.$('#" + moveItemBox.getUuid() + "'); "; + script += "var e=jq('#" + layout.getUuid() + "'); "; + script += "w.setWidth(e.css('width')); "; + script += "w.setHeight(e.css('height')); "; + Clients.response(new AuScript(script)); + } + + protected void addTreeItem(Treeitem treeItem) { StringBuilder key = new StringBuilder(getLabel(treeItem)).append(".").append(treeItem.getAttribute("menu.type")); treeNodeItemMap.put(key.toString(), treeItem);