← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 3708: added paging to add/update usergroup

 

------------------------------------------------------------
revno: 3708
committer: Morten Olav Hansen <mortenoh@xxxxxxxxx>
branch nick: dhis2
timestamp: Mon 2011-05-23 15:05:25 +0200
message:
  added paging to add/update usergroup
modified:
  dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/ajax/jsonUsers.vm
  dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/jquery.dhisPaging.js
  dhis-2/dhis-web/dhis-web-commons/src/main/java/org/hisp/dhis/commons/action/GetUserGroupsAction.java
  dhis-2/dhis-web/dhis-web-commons/src/main/java/org/hisp/dhis/commons/action/GetUsersAction.java
  dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-dataset/src/main/webapp/dhis-web-maintenance-dataset/javascript/dataSet.js
  dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/java/org/hisp/dhis/user/action/AddUserGroupAction.java
  dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/java/org/hisp/dhis/user/action/UpdateUserGroupAction.java
  dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/addUserGroupForm.vm
  dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/javascript/addUserGroupForm.js
  dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/javascript/updateUserGroupForm.js
  dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/updateUserGroupForm.vm


--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk

Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/ajax/jsonUsers.vm'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/ajax/jsonUsers.vm	2011-05-23 10:33:52 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/ajax/jsonUsers.vm	2011-05-23 13:05:25 +0000
@@ -2,7 +2,7 @@
 { "users": [
 #foreach( $user in $users )
   {
-    "id": $!{user.id},
+    "id": ${user.id},
     "surname": "$!encoder.jsonEncode( ${user.surname} )",
     "firstname": "$!encoder.jsonEncode( ${user.firstname} )",
     "email": "$!encoder.jsonEncode( ${user.email} )",

=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/jquery.dhisPaging.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/jquery.dhisPaging.js	2011-05-22 19:35:32 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/jquery.dhisPaging.js	2011-05-23 13:05:25 +0000
@@ -29,6 +29,26 @@
  * @author mortenoh
  */
 
+// -----------------------------------------------
+// Support functions
+// -----------------------------------------------
+
+function dhisPaging_moveAllSelected(sourceId)
+{
+    jQuery("#" + sourceId).dblclick();
+}
+
+function dhisPaging_moveAll(sourceId)
+{
+    var jqSource = jQuery("#" + sourceId);
+    jqSource.find("option").attr("selected", "selected");
+    jqSource.dblclick();
+}
+
+// -----------------------------------------------
+// Plugin
+// -----------------------------------------------
+
 (function($) {
   var templates = {
     wrapper: "<div id='${id}' style='padding: 0; margin: 0; background-color: #eee; border: 1px solid #666;' />",

=== modified file 'dhis-2/dhis-web/dhis-web-commons/src/main/java/org/hisp/dhis/commons/action/GetUserGroupsAction.java'
--- dhis-2/dhis-web/dhis-web-commons/src/main/java/org/hisp/dhis/commons/action/GetUserGroupsAction.java	2011-05-23 10:33:52 +0000
+++ dhis-2/dhis-web/dhis-web-commons/src/main/java/org/hisp/dhis/commons/action/GetUserGroupsAction.java	2011-05-23 13:05:25 +0000
@@ -64,6 +64,10 @@
         return userGroups;
     }
 
+    // -------------------------------------------------------------------------
+    // Action Implementation
+    // -------------------------------------------------------------------------
+    
     @Override
     public String execute()
         throws Exception

=== modified file 'dhis-2/dhis-web/dhis-web-commons/src/main/java/org/hisp/dhis/commons/action/GetUsersAction.java'
--- dhis-2/dhis-web/dhis-web-commons/src/main/java/org/hisp/dhis/commons/action/GetUsersAction.java	2011-05-23 10:33:52 +0000
+++ dhis-2/dhis-web/dhis-web-commons/src/main/java/org/hisp/dhis/commons/action/GetUsersAction.java	2011-05-23 13:05:25 +0000
@@ -28,6 +28,7 @@
  */
 
 import java.util.ArrayList;
+import java.util.Arrays;
 import java.util.Collections;
 import java.util.List;
 
@@ -71,12 +72,39 @@
         return users;
     }
 
+    private List<Integer> removeUsers = new ArrayList<Integer>();
+
+    public void setRemoveUsers( String removeUsers )
+    {
+        if ( removeUsers.length() > 0 )
+        {
+            List<String> stringList = Arrays.asList( removeUsers.split( "," ) );
+
+            for ( String s : stringList )
+            {
+                this.removeUsers.add( Integer.parseInt( s ) );
+            }
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Action Implementation
+    // -------------------------------------------------------------------------
+    
     @Override
     public String execute()
         throws Exception
     {
         users = new ArrayList<User>( userService.getAllUsers() );
 
+        if ( removeUsers.size() > 0 )
+        {
+            for ( Integer id : removeUsers )
+            {
+                users.remove( userService.getUser( id ) );
+            }
+        }
+
         Collections.sort( users, new UserComparator() );
 
         if ( usePaging )

=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-dataset/src/main/webapp/dhis-web-maintenance-dataset/javascript/dataSet.js'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-dataset/src/main/webapp/dhis-web-maintenance-dataset/javascript/dataSet.js	2011-05-20 11:01:54 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-dataset/src/main/webapp/dhis-web-maintenance-dataset/javascript/dataSet.js	2011-05-23 13:05:25 +0000
@@ -4,16 +4,6 @@
 // --------------------------------------------------------------------------------------------------------------------
 var jqDataElementsSelectedList, jqIndicatorsSelectedList;
 
-function dhisPaging_moveAllSelected(sourceId)
-{
-    jQuery("#" + sourceId).dblclick();
-}
-
-function dhisPaging_moveAll(sourceId)
-{
-    jQuery("#" + sourceId).find("option").attr("selected", "selected").dblclick();
-}
-
 function dataElementsSelectedList_dblclick(e) {
     var settings = jQuery("#availableDataElementsList").data("settings");
 

=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/java/org/hisp/dhis/user/action/AddUserGroupAction.java'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/java/org/hisp/dhis/user/action/AddUserGroupAction.java	2010-12-30 09:13:41 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/java/org/hisp/dhis/user/action/AddUserGroupAction.java	2011-05-23 13:05:25 +0000
@@ -38,7 +38,7 @@
 
 import com.opensymphony.xwork2.Action;
 
-public class AddUserGroupAction 
+public class AddUserGroupAction
     implements Action
 {
     // -------------------------------------------------------------------------
@@ -46,7 +46,7 @@
     // -------------------------------------------------------------------------
 
     private UserService userService;
-    
+
     public void setUserService( UserService userService )
     {
         this.userService = userService;
@@ -63,38 +63,39 @@
     // Parameters
     // -------------------------------------------------------------------------
 
-    private List<Integer> groupMembers;
-    
-    public void setGroupMembers( List<Integer> groupMembers )
+    private List<Integer> groupMembersList;
+
+    public void setGroupMembersList( List<Integer> groupMembersList )
     {
-        this.groupMembers = groupMembers;
+        this.groupMembersList = groupMembersList;
     }
-    
+
     private String name;
-    
+
     public void setName( String name )
     {
         this.name = name;
     }
-    
+
     // -------------------------------------------------------------------------
     // Action Implementation
     // -------------------------------------------------------------------------
 
-    public String execute() throws Exception
+    public String execute()
+        throws Exception
     {
         Set<User> userList = new HashSet<User>();
-        
-        for( Integer groupMember : groupMembers )
+
+        for ( Integer groupMember : groupMembersList )
         {
             User user = userService.getUser( groupMember );
-            userList.add( user ); 
+            userList.add( user );
         }
-        
+
         UserGroup userGroup = new UserGroup( name, userList );
-        
+
         userGroupService.addUserGroup( userGroup );
-        
+
         return SUCCESS;
     }
 }

=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/java/org/hisp/dhis/user/action/UpdateUserGroupAction.java'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/java/org/hisp/dhis/user/action/UpdateUserGroupAction.java	2010-12-30 09:13:41 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/java/org/hisp/dhis/user/action/UpdateUserGroupAction.java	2011-05-23 13:05:25 +0000
@@ -58,11 +58,11 @@
     // Parameters
     // -------------------------------------------------------------------------
 
-    private List<Integer> groupMembers;
+    private List<Integer> groupMembersList;
 
-    public void setGroupMembers( List<Integer> groupMembers )
+    public void setGroupMembersList( List<Integer> groupMembersList )
     {
-        this.groupMembers = groupMembers;
+        this.groupMembersList = groupMembersList;
     }
 
     private String name;
@@ -88,7 +88,7 @@
     {
         Set<User> userList = new HashSet<User>();
 
-        for ( Integer groupMember : groupMembers )
+        for ( Integer groupMember : groupMembersList )
         {
             User user = userService.getUser( groupMember );
             userList.add( user );

=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/addUserGroupForm.vm'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/addUserGroupForm.vm	2011-03-14 21:10:15 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/addUserGroupForm.vm	2011-05-23 13:05:25 +0000
@@ -1,4 +1,74 @@
 <script type="text/javascript" src="javascript/addUserGroupForm.js"></script>
+<script type="text/javascript">
+	function groupMembersList_dblclick(e) {
+	    var settings = jQuery("#availableUsersList").data("settings");
+
+	    jQuery(this).find(":selected").each(function(i) {
+	        var jqThis = jQuery(this);
+	        var option_id = +jqThis.attr("value");
+	        jqThis.remove();
+
+	        if( jQuery.isArray(settings.removeUsers) )
+	        {
+	            var remove_idx = jQuery.inArray(option_id, settings.removeUsers);
+	            settings.removeUsers.splice(remove_idx, remove_idx+1);
+	        }
+	    });
+
+	    if(settings.removeUsers && settings.removeUsers.length > 0) {
+	        settings.params.removeUsers = settings.removeUsers.join(",");
+	    } else {
+	        delete settings.removeUsers;
+	        delete settings.params.removeUsers;
+	    }
+
+	    jQuery("#availableUsersList").dhisPaging("load", "availableUsersList");
+	}
+
+	function availableUsersList_dblclick(e) {
+		var jqGroupMembersList = jQuery("#groupMembersList");
+	    var settings = jQuery("#availableUsersList").data("settings");
+
+	    jQuery("#availableUsersList").find(":selected").each(function(i) {
+	        var jqThis = jQuery(this);
+	        var option_id = +jqThis.attr("value");
+
+	        jqGroupMembersList.append( this );
+
+	        if( jQuery.isArray(settings.Users) ) {
+	            settings.removeUsers.push(option_id);
+	        } else {
+	            settings.removeUsers = [option_id];
+	        }
+	    });
+
+	    if(settings.removeUsers && settings.removeUsers.length > 0) {
+	        settings.params.removeUsers = settings.removeUsers.join(",");
+	    } else {
+	        delete settings.removeUsers;
+	        delete settings.params.removeUsers;
+	    }
+	
+	    jQuery("#availableUsersList").dhisPaging("load", "availableUsersList");
+	}
+
+	jQuery(function() {
+		jQuery("#availableUsersList").dblclick(availableUsersList_dblclick);
+		jQuery("#groupMembersList").dblclick(groupMembersList_dblclick);
+	
+		jQuery("#availableUsersList").dhisPaging({
+			source: "../dhis-web-commons-ajax-json/getUsers.action",
+			iterator: "users",
+			handler: function(item) {
+				var option = jQuery("<option />");
+				option.text( item.surname + ", " + item.firstname );
+				option.attr( "value", item.id );
+
+				return option;
+			}
+		});
+	});
+</script>
 
 <h3>$i18n.getString( "add_user_group" )</h3>
 
@@ -20,45 +90,41 @@
 	<tr><td colspan="2" style="height:15px"></td></tr>
 	</tbody>
 </table>
+
 <table>
+    <col style="width: 450px"/>
+    <col/>
+    <col/>
+
     <tr>
-        <th>$i18n.getString( "available_users" )</th><td></td>
+        <th>$i18n.getString( "available_users" )</th>
+		<th></th>
         <th>$i18n.getString( "group_members" )
             <select id="memberValidator" multiple="multiple" style="display:none"/>
         </th>
     </tr>
-    <tr>        
-        <td><input type="text" id="availableUsersFilter" onkeyup="filterList( this.value, 'availableUsers' )" style="width:25em"/></td>
-        <td style="text-align:center">&lt; $i18n.getString( "filters" ) &gt;</td>
-        <td><input type="text" id="groupMembersFilter" onkeyup="filterList( this.value, 'groupMembers' )" style="width:25em"/></td>
-    </tr>
-    <tr>
-        <td>
-            <select id="availableUsers" size="2" multiple="multiple" style="min-width:25em; height:25em" ondblclick="moveSelectedById( 'availableUsers', 'groupMembers' )">
-                #foreach( $user in $availableUsers )
-                    <option value="$user.id">$encoder.htmlEncode( $user.name )</option>
-                #end
-            </select>
-        </td>
-        
-        <td style="text-align:center">          
-            <input type="button" value="&gt;" title="$i18n.getString('move_selected')" style="width:50px" onclick="moveSelectedById( 'availableUsers', 'groupMembers' )"/><br/>
-            <input type="button" value="&lt;" title="$i18n.getString('remove_selected')" style="width:50px" onclick="moveSelectedById( 'groupMembers', 'availableUsers' )"/><br/>
-            <input type="button" value="&gt;&gt;" title="$i18n.getString('move_all')" style="width:50px" onclick="moveAllById( 'availableUsers', 'groupMembers' )"/><br/>
-            <input type="button" value="&lt;&lt;" title="$i18n.getString('remove_all')" style="width:50px" onclick="moveAllById( 'groupMembers', 'availableUsers' )"/>
-        </td>
-    
-        <td>
-            <select id="groupMembers" name="groupMembers" size="2" multiple="multiple" style="min-width:25em; height:25em" ondblclick="moveSelectedById( 'groupMembers', 'availableUsers' )" />
-        </td>
-    </tr>
-    <tr>
-        <td></td>
-        <td></td>
-        <td></td>
+
+    <tr>
+        <td>
+            <select id="availableUsersList" name="availableUsersList" multiple="multiple" style="height: 200px; width: 100%;"></select>
+        </td>
+
+        <td style="text-align:center">
+        	<input type="button" value="&gt;" title="$i18n.getString( 'move_selected' )" style="width:50px" onclick="dhisPaging_moveAllSelected( 'availableUsersList' );"/><br/>
+            <input type="button" value="&lt;" title="$i18n.getString( 'remove_selected' )" style="width:50px" onclick="dhisPaging_moveAllSelected( 'groupMembersList' );"/><br/>
+			<input type="button" value="&gt;&gt;" title="$i18n.getString('move_all')" style="width:50px" onclick="dhisPaging_moveAll( 'availableUsersList' );"/><br/>
+			<input type="button" value="&lt;&lt;" title="$i18n.getString('remove_all')" style="width:50px" onclick="dhisPaging_moveAll( 'groupMembersList' );"/>
+        </td>
+
+        <td>
+            <select id="groupMembersList" name="groupMembersList" size="2" multiple="multiple" style="height: 100%; width: 100%;"></select>
+        </td>
     </tr>
 </table>
 
-<p><input type="submit" value="$i18n.getString( 'add' )" style="width:10em"/><input type="button" value="$i18n.getString( 'cancel' )" onclick="window.location.href='getAllUserGroups.action'" style="width:10em"/></p>
+<p>
+	<input type="submit" value="$i18n.getString( 'add' )" style="width:10em"/>
+	<input type="button" value="$i18n.getString( 'cancel' )" onclick="window.location.href='getAllUserGroups.action'" style="width:10em"/>
+</p>
 
 </form>

=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/javascript/addUserGroupForm.js'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/javascript/addUserGroupForm.js	2011-04-11 11:16:51 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/javascript/addUserGroupForm.js	2011-05-23 13:05:25 +0000
@@ -6,7 +6,7 @@
 	}, {
 		'beforeValidateHandler' : function()
 		{
-			listValidator( 'memberValidator', 'groupMembers' );
+			listValidator( 'memberValidator', 'groupMembersList' );
 		},
 		'rules' : getValidationRules("userGroup")
 	} );

=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/javascript/updateUserGroupForm.js'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/javascript/updateUserGroupForm.js	2011-04-11 11:16:51 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/javascript/updateUserGroupForm.js	2011-05-23 13:05:25 +0000
@@ -6,7 +6,7 @@
 	}, {
 		'beforeValidateHandler' : function()
 		{
-			listValidator( 'memberValidator', 'groupMembers' );
+			listValidator( 'memberValidator', 'groupMembersList' );
 		},
 		'rules' : getValidationRules("userGroup")
 	} );

=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/updateUserGroupForm.vm'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/updateUserGroupForm.vm	2011-03-14 21:10:15 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-user/src/main/webapp/dhis-web-maintenance-user/updateUserGroupForm.vm	2011-05-23 13:05:25 +0000
@@ -1,11 +1,93 @@
 <script type="text/javascript" src="javascript/updateUserGroupForm.js"></script>
 <script type="text/javascript">
-jQuery(document).ready(function() {
-	/* remote validation */
-	checkValueIsExist( "name", "validateUserGroup.action", {
-		id : $group.id
-	} );
-});
+	function getRemoveUsersList() {
+		var list = [
+			#foreach( $user in $groupMembers )
+				$!{user.id},
+			#end
+		];
+
+		return list;
+	}
+
+	function groupMembersList_dblclick(e) {
+	    var settings = jQuery("#availableUsersList").data("settings");
+
+	    jQuery(this).find(":selected").each(function(i) {
+	        var jqThis = jQuery(this);
+	        var option_id = +jqThis.attr("value");
+	        jqThis.remove();
+
+	        if( jQuery.isArray(settings.removeUsers) )
+	        {
+	            var remove_idx = jQuery.inArray(option_id, settings.removeUsers);
+	            settings.removeUsers.splice(remove_idx, remove_idx+1);
+	        }
+	    });
+
+	    if(settings.removeUsers && settings.removeUsers.length > 0) {
+	        settings.params.removeUsers = settings.removeUsers.join(",");
+	    } else {
+	        delete settings.removeUsers;
+	        delete settings.params.removeUsers;
+	    }
+
+	    jQuery("#availableUsersList").dhisPaging("load", "availableUsersList");
+	}
+
+	function availableUsersList_dblclick(e) {
+		var jqGroupMembersList = jQuery("#groupMembersList");
+	    var settings = jQuery("#availableUsersList").data("settings");
+
+	    jQuery("#availableUsersList").find(":selected").each(function(i) {
+	        var jqThis = jQuery(this);
+	        var option_id = +jqThis.attr("value");
+
+	        jqGroupMembersList.append( this );
+
+	        if( jQuery.isArray(settings.Users) ) {
+	            settings.removeUsers.push(option_id);
+	        } else {
+	            settings.removeUsers = [option_id];
+	        }
+	    });
+
+	    if(settings.removeUsers && settings.removeUsers.length > 0) {
+	        settings.params.removeUsers = settings.removeUsers.join(",");
+	    } else {
+	        delete settings.removeUsers;
+	        delete settings.params.removeUsers;
+	    }
+	
+	    jQuery("#availableUsersList").dhisPaging("load", "availableUsersList");
+	}
+
+	jQuery(document).ready(function() {
+		var removeUsersList = getRemoveUsersList(); 
+		jQuery("#availableUsersList").dblclick(availableUsersList_dblclick);
+		jQuery("#groupMembersList").dblclick(groupMembersList_dblclick);
+
+		jQuery("#availableUsersList").dhisPaging({
+			source: "../dhis-web-commons-ajax-json/getUsers.action",
+			iterator: "users",
+			handler: function(item) {
+				var option = jQuery("<option />");
+				option.text( item.surname + ", " + item.firstname );
+				option.attr( "value", item.id );
+
+				return option;
+			},
+			removeUsers: removeUsersList,
+			params: {
+				removeUsers: removeUsersList.join(",")
+			}
+		});
+
+		/* remote validation */
+		checkValueIsExist( "name", "validateUserGroup.action", {
+			id : $group.id
+		} );
+	});
 </script>
 
 <h3>$i18n.getString( "edit_user_group" )</h3>
@@ -29,50 +111,45 @@
 	<tr><td colspan="2" style="height:15px"></td></tr>
     </tbody>
 </table>
+
 <table>
+    <col style="width: 450px"/>
+    <col/>
+    <col/>
+
     <tr>
-        <th>$i18n.getString( "available_users" )</th><td></td>
+        <th>$i18n.getString( "available_users" )</th>
+		<th></th>
         <th>$i18n.getString( "group_members" )
             <select id="memberValidator" multiple="multiple" style="display:none"/>
         </th>
     </tr>
-    <tr>        
-        <td><input type="text" id="availableUsersFilter" onkeyup="filterList( this.value, 'availableUsers' )" style="width:25em"/></td>
-        <td style="text-align:center">&lt; $i18n.getString( "filters" ) &gt;</td>
-        <td><input type="text" id="groupMembersFilter" onkeyup="filterList( this.value, 'groupMembers' )" style="width:25em"/></td>
-    </tr>
+
     <tr>
         <td>
-            <select id="availableUsers" size="2" multiple="multiple" style="min-width:25em; height:25em" ondblclick="moveSelectedById( 'availableUsers', 'groupMembers' )">
-                #foreach( $user in $availableUsers )
-                    <option value="$user.id">$encoder.htmlEncode( $user.name )</option>
-                #end
-            </select>
+            <select id="availableUsersList" name="availableUsersList" multiple="multiple" style="height: 200px; width: 100%;"></select>
         </td>
-        
+
         <td style="text-align:center">          
-            <input type="button" value="&gt;" title="$i18n.getString('move_selected')" style="width:50px" onclick="moveSelectedById( 'availableUsers', 'groupMembers' )"/><br/>
-            <input type="button" value="&lt;" title="$i18n.getString('remove_selected')" style="width:50px" onclick="moveSelectedById( 'groupMembers', 'availableUsers' )"/><br/>
-            <input type="button" value="&gt;&gt;" title="$i18n.getString('move_all')" style="width:50px" onclick="moveAllById( 'availableUsers', 'groupMembers' )"/><br/>
-            <input type="button" value="&lt;&lt;" title="$i18n.getString('remove_all')" style="width:50px" onclick="moveAllById( 'groupMembers', 'availableUsers' )"/>
+        	<input type="button" value="&gt;" title="$i18n.getString( 'move_selected' )" style="width:50px" onclick="dhisPaging_moveAllSelected( 'availableUsersList' );"/><br/>
+            <input type="button" value="&lt;" title="$i18n.getString( 'remove_selected' )" style="width:50px" onclick="dhisPaging_moveAllSelected( 'groupMembersList' );"/><br/>
+			<input type="button" value="&gt;&gt;" title="$i18n.getString('move_all')" style="width:50px" onclick="dhisPaging_moveAll( 'availableUsersList' );"/><br/>
+			<input type="button" value="&lt;&lt;" title="$i18n.getString('remove_all')" style="width:50px" onclick="dhisPaging_moveAll( 'groupMembersList' );"/>
         </td>
-    
+
         <td>
-            <select id="groupMembers" name="groupMembers" size="2"value = "$group.name" multiple="multiple" style="min-width:25em; height:25em" ondblclick="moveSelectedById( 'groupMembers', 'availableUsers' )">
-             #foreach( $user in $groupMembers )
-             	<option value="$user.id">$encoder.htmlEncode( $user.name )</option>
-             #end
-             </select>
+        	<select id="groupMembersList" name="groupMembersList" multiple="multiple" style="height: 100%; width: 100%;">
+				#foreach( $user in $groupMembers )
+					<option value="$user.id">$encoder.htmlEncode( $user.surname ), $!encoder.htmlEncode( $user.firstname )</option>
+				#end
+        	</select>
         </td>
-       
-    </tr>
-    <tr>
-        <td></td>
-        <td></td>
-        <td></td>
     </tr>
 </table>
 
-<p><input type="submit" value="$i18n.getString( 'save' )" style="width:10em"/><input type="button" value="$i18n.getString( 'cancel' )" onclick="window.location.href='getAllUserGroups.action'" style="width:10em"/></p>
+<p>
+	<input type="submit" value="$i18n.getString( 'save' )" style="width:10em" />
+	<input type="button" value="$i18n.getString( 'cancel' )" onclick="window.location.href='getAllUserGroups.action'" style="width:10em" />
+</p>
 
 </form>