IDEMPIERE-3518 Improvement For Mobile Compatibility. Implement mobile UI alternative for moving of selected tree item (dnd not working well on mobile devices).

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
+;
+

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
+;
+

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<Object> 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
+			if (isItemDraggable()) {
-			//need different approach
+				//use different approach on mobile, dnd not working well
-			if (!ClientInfo.isMobile()) {
+				if (ClientInfo.isMobile()) {
-				if (isItemDraggable()) {
+					tr.setAttribute(TreeSearchPanel.TREE_ROW_MOVABLE, Boolean.TRUE);
+				} else {
 					tr.setDraggable("true");
 				}
-				if (!onDropListners.isEmpty()) {
+			}
-					tr.setDroppable("true");
+			if (!onDropListners.isEmpty()) {
-					tr.addEventListener(Events.ON_DROP, this);
+				tr.setDroppable("true");
-				}
+				tr.addEventListener(Events.ON_DROP, this);
 			}
 
 			// Color

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<Event>, TreeDataListener, IdSpace
 {
+	public static final String TREE_ROW_MOVABLE = "tree.row.movable";
+
 	/**
 	 * 
 	 */
@@ -91,6 +97,8 @@ public class TreeSearchPanel extends Panel implements EventListener<Event>, Tree
 	private Treeitem selectedItem;
 	protected Hlayout layout;
 
+	private Hlayout moveItemBox;
+
 	private static final String PREFIX_DOCUMENT_SEARCH = "/";
 
 	/**
@@ -174,12 +182,63 @@ public class TreeSearchPanel extends Panel implements EventListener<Event>, Tree
 
         layout.appendChild(lblSearch);
         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);