Change form for group creation / update
authorverrierj
Mon, 05 Dec 2011 14:25:21 +0100
changeset 267 e00779f0dcba
parent 266 a35924820af7
child 268 c0c161736794
Change form for group creation / update
src/ldt/ldt/ldt_utils/forms.py
src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/create_group.html
src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/userslist.html
src/ldt/ldt/ldt_utils/views.py
src/ldt/ldt/static/ldt/js/projectscontents.js
--- a/src/ldt/ldt/ldt_utils/forms.py	Fri Dec 02 10:50:35 2011 +0100
+++ b/src/ldt/ldt/ldt_utils/forms.py	Mon Dec 05 14:25:21 2011 +0100
@@ -1,10 +1,13 @@
 from django import forms
 from django.utils.translation import ugettext_lazy as _
 from django.contrib.auth.models import User, Group
+from django.forms.widgets import MultipleHiddenInput
+from django.contrib.admin.widgets import FilteredSelectMultiple
 from ldt.forms import widgets as ldt_widgets
 from models import Project, Content, Media
 from utils import generate_uuid
 
+
 class LdtImportForm(forms.Form):
     importFile = forms.FileField()
     videoPath = forms.CharField(required=False)
@@ -94,8 +97,8 @@
         
 class GroupAddForm(forms.ModelForm):
     name = forms.CharField(required=True)
-    members_list = forms.ModelMultipleChoiceField(User.objects.all(), required=False)
-    admin_list = forms.ModelMultipleChoiceField(User.objects.all(), required=False)
+    members_list = forms.ModelMultipleChoiceField(User.objects.all(), required=False, widget=MultipleHiddenInput())
+    admin_list = forms.ModelMultipleChoiceField(User.objects.all(), required=False, widget=MultipleHiddenInput())
     
     class Meta:
         model = Group
--- a/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/create_group.html	Fri Dec 02 10:50:35 2011 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/create_group.html	Mon Dec 05 14:25:21 2011 +0100
@@ -17,31 +17,80 @@
 	<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/ldt.css" />
 	<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/ldtform.css" />
 	<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/workspace.css" />
+	<style type="text/css">
+	  #userslist, #selecteduserslist {
+	    width: 200px;
+	    height: 200px;
+	    margin: 5px;
+	  }
+	  
+	  #userslistcontainer,  #memberslistcontainer, #selectors {
+	  	float: left;
+	  }
+	  
+	  #memberslistcontainer {
+	  	margin-top: 35px;
+	  }
+	  
+	  #selecteduserslistfooter, #userslistfooter {
+	  	text-align: center;
+	  }
+	  
+	  #selectors {	  
+	  	margin-top: 125px;
+	  }
+	  	   
+	</style>
 {% endblock %}
 
 {% block js_declaration %}
 	{{ block.super }}
 	<script type="text/javascript">
 	
-	function init_events(container) {
-		$("input[name=admin_list]").bind("change", function () {
-			var line = $(this).closest('tr');
-			var is_member = $('input[name=members_list]', line)
-			
-			if ($(this).is(':checked') && !is_member.is(':checked')) {
-				is_member.prop('checked', 'checked');
-			}			
+	function move_users (from, to, users) {
+		var admins = $("#adminselection");		
+		for (var i=0; i < users.length; i++) {
+			var option = $("option[value=" + users[i] + "]", from);
+			option.css('color', 'black');
+			$("input[value=" + users[i]+ "]", admins).remove();
+			to.append(option);
+		}		
+	}
+	
+	function remove_from_form( form, user_list) {		
+		for (var i=0; i < user_list.length; i++) {
+			$("input[value=" + user_list[i] + "]", form).remove();
+		}
+	}
+	
+	function add_to_form(form, user_list, name) {		
+		for (var i=0; i < user_list.length; i++) {
+			form.append("<input type=\"hidden\" name=\"" + name + "\" value=\"" + user_list[i] + "\"/>");
+		}
+	}
+	
+	function get_all_options (select) {
+		var all = Array();
+		$("option", select).each(function()	{	
+			all.push($(this).val());
 		});
-		
-		$("input[name=members_list]").bind("change", function () {
-			var line = $(this).closest('tr');
-			var is_admin = $('input[name=admin_list]', line)
-
-			if (!$(this).is(':checked') && is_admin.is(':checked')) {
-				is_admin.prop('checked', false);
-			}	
-		});
-					
+		return all;
+	}	
+	
+	function init_events(container) {
+		filter_users();
+	}
+	
+	function filter_users() {
+		var members_list = get_all_options($("#selecteduserslist"));
+			
+		$("#userslist option").each(function () {
+			for (var i = 0; i < members_list.length; i++) {
+				if (members_list[i] == $(this).attr('value')) {
+					$(this).remove();
+				}
+			}		
+		});		
 	}
 	
 	$(document).ready(function() {	
@@ -50,34 +99,54 @@
 			parent.$.nmTop().close();
 		});
 		
-		var check_all = '{% trans "check all" %}';
-		var uncheck_all = '{% trans "uncheck all" %}';
+		$("#selectusers").click(function () {
+			var user_list = $("#userslist").val();
+			move_users($("#userslist"), $("#selecteduserslist"), user_list);
+			add_to_form($("#memberselection"), user_list, "members_list");
+		});
 		
-		$("#check_projects").attr('title', uncheck_all);
-		$("#check_projects").live("change", function () {
-			var members_checkboxes = $("input[name=members_list]");
-			
-			if ($("#check_projects").is(":checked")) {
-				members_checkboxes.attr('checked', 'true');
-				$("#check_projects").attr('title', uncheck_all );
-			} else {
-				members_checkboxes.removeAttr('checked');
-				$("#check_projects").attr('title', check_all);
-			}
-
-			members_checkboxes.trigger("change");		
+		$("#removeusers").click(function () {
+			var user_list = $("#selecteduserslist").val();
+			move_users($("#selecteduserslist"), $("#userslist"), user_list);
+			remove_from_form($("#memberselection"), user_list);
+		});
+		
+		$("#selectallusers").click(function () {
+			var user_list = get_all_options("#userslist");
+			move_users($("#userslist"), $("#selecteduserslist"), user_list);
+			add_to_form($("#memberselection"), user_list, "members_list");
+		});
+		
+		$("#removeallusers").click(function () {
+			var user_list = get_all_options("#selecteduserslist");
+			move_users($("#selecteduserslist"), $("#userslist"), get_all_options("#selecteduserslist"));
+			remove_from_form($("#memberselection"), user_list);
 		});
 		
-		var user_filter_url = "{% url ldt.ldt_utils.views.users_filter filter='__FILTER__' id_group='__ID_GROUP__'%}";
+		$("#chooseadmin").click(function () {
+			var users = $("#selecteduserslist").val();
+			
+			for (var i=0; i < users.length; i++) {
+				$("#selecteduserslist option[value=" + users[i] + "]").css('color', '#2181B1');
+				$("#adminselection").append("<input type=\"hidden\" name=\"admin_list\" value=\"" + users[i]+ "\" />");
+			}
+		});
 		
+		$("#removeadmin").click(function () {
+			var users = $("#selecteduserslist").val();
+			
+			for (var i=0; i < users.length; i++) {
+				$("#selecteduserslist option[value=" + users[i] + "]").css('color', 'black');
+				$("#adminselection input[value=" + users[i]+ "]").remove();
+			}
+		});
+			
+		var user_filter_url = "{% url ldt.ldt_utils.views.users_filter filter='__FILTER__' id_group='__ID_GROUP__'%}";
 		input_list_init = [
-			{'input_selector':"#searchusersinput", 'container_selector':"#userslistcontainer", 'url':user_filter_url}
+			{'input_selector':"#searchuserinput", 'container_selector':"#userslist", 'url':user_filter_url}
 		];	           	
-		searchFieldInit(input_list_init);	
-		
-		init_events(null);
-
-						
+		searchFieldInit(input_list_init);
+		filter_users();
 	});
 	</script>
 
@@ -88,27 +157,65 @@
 	<div id="add_group" class="span-12 last">
 	<div class="projectscontentstitle span-12 last">{% if group_id %}{% trans "Update a group" %}{% else %}{% trans "Create a group" %}{% endif %}</div>
 	
-	<div class="span-4 last searchfielddiv">
-		<div class="searchfield rounded"><input id="searchusersinput" class="searchfieldinput searchfieldinputbase" value="{% trans 'search' %}" type="text" /><img id="projectsajaxloader" class="searchajaxloader" src="{{LDT_MEDIA_PREFIX}}/img/ajax-loader-16x16.gif" alt="loader"/><img id="projecsclear" class="searchclear" src="{{LDT_MEDIA_PREFIX}}img/clear-left.png"/></div>
-	</div>
-	
 	<form action="{% if group_id %}{% url ldt.ldt_utils.views.update_group group_id %} {% else %}{% url ldt.ldt_utils.views.create_group %}{% endif %}" method="POST" {% if target_parent %}target="_parent"{% endif %}>
 	{% csrf_token %} 
 	<input type="hidden" name="form_status" value="{{form_status}}" id="project_form_status" />
-	<input type="hidden" name="id_group" value="{{ group_id }}" id="id_group"/>
-	<label for="name">{% trans "Name" %}:</label>
-	{{form.name}}
-	{% for error in form.errors.name %}
-	<span class="error">{{ error }}</span>
-	{% endfor %}
+	<input type="hidden" name="id_group" value="" id="id_group"/>
+	<div>
+		<label for="name">{% trans "Name" %}:</label>
+		{{form.name}}
+		{% for error in form.errors.name %}
+		<span class="error">{{ error }}</span>
+		{% endfor %}
+	</div>
+
+	<div id="userslistcontainer">
+		<div id="userslistheader">
+			{% trans "User list" %}<br />
+			<div class="searchfield rounded span-4"><input type="text" name="search" id="searchuserinput" class="searchfieldinput searchfieldinputbase" value="{% trans 'search' %}"/><img id="projectsajaxloader" class="searchajaxloader" src="{{LDT_MEDIA_PREFIX}}/img/ajax-loader-16x16.gif" alt="loader"/><img id="projecsclear" class="searchclear" src="{{LDT_MEDIA_PREFIX}}img/clear-left.png"/></div>
+		</div><br /><br />	
+		<select multiple="multiple" id="userslist">
+			{% include "ldt/ldt_utils/partial/userslist.html" %}
+		</select>
+		<div id="userslistfooter">
+			<a href="#" id="selectallusers" title="{% trans "select all users" %}">{% trans "select all" %}</a>
+		</div>
+	</div>
+	<div id="selectors">
+		<a href="#" id="selectusers"><img src="{{LDT_MEDIA_PREFIX}}img/to-right.gif" title="{% trans "select users" %}"></a><br />
+		<a href="#" id="removeusers"><img src="{{LDT_MEDIA_PREFIX}}img/to-left.gif" title="{% trans "remove users" %}"></a>
+	</div>
 	
+	<div id="memberslistcontainer">
+		<div id="selecteduserslistheader">
+			{% trans "Members list" %}
+		</div>				
+		<select multiple="multiple" id="selecteduserslist" >
+			{% for user in member_list %}
+				<option value="{{ user.id }}" {% if user.change %}style="color: #2181B1;"{% endif %}>{{ user.username }}</option>
+			{% endfor %}
+		</select>
+		<div id="selecteduserslistfooter" >
+			<a href="#" id="removeallusers" title="{% trans "select all users" %}">{% trans "remove all" %}</a>
+			| <a href="#" id="chooseadmin" title="{% trans "Decide whether a user user can change this group" %}">{% trans "is admin" %}</a>
+			| <a href="#" id="removeadmin">{% trans "is not admin" %}</a>
+		</div>	
+	</div>	
 	
-	<div id="userslistcontainer">
-		{% include "ldt/ldt_utils/partial/userslist.html" %}
+	<div id="adminselection">
+	{% for user in admin_list %}
+		<input name="admin_list" type="hidden" value="{{ user.id }}" />
+	{% endfor %}
 	</div>
-		
+	
+	<div id="memberselection">
+	{% for user in member_list %}
+		<input name="members_list" type="hidden" value="{{ user.id }}" />
+	{% endfor %}
+	</div>
+	
 	<div id="submitcontent-buttons" class="span-12 last">
-		<button type="button" id="close_button"  value="close">{% trans 'close_cancel' %}</button>
+		<button type="button" id="close_button"  value="close">{% trans "close_cancel" %}</button>
 		{% if group_id %}
 		<button class="button" id="ldt_submit" type="submit" value="update" name="submit_button">{% trans "update_group" %}</button>
 		<button class="button" id="ldt_submit" type="submit" value="delete" name="submit_button">{% trans "delete_group" %}</button>
--- a/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/userslist.html	Fri Dec 02 10:50:35 2011 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/userslist.html	Mon Dec 05 14:25:21 2011 +0100
@@ -1,33 +1,5 @@
 {% load i18n %}
 
-<label>{% trans "List of members" %}:</label>	
-<div class="span-12 last projectscontentsdiv" id="ldtcreatecontentslistcontainer">
-	<div class="span-12 last projectscontentstablediv">
-		<table class="projectscontentstable">
-		
-			<tr class="projectscontentsheader last" id="contentslistheader">
-				<td class="cellcheckbox">
-				{% if user_list|length > 1 %}
-					<input class="selectallprojects" id="check_projects" type="checkbox" />	 
-				{% endif %}
-				</td>				
-				<td class="projectcontentsheadertitle">{% trans "name" %}</td>
-				<td class="projectcontentsheadertitle">{% trans "admin" %}</td>
-			</tr>				
-		
-		    <tbody class="projectscontentsbody">
-			{% for user in user_list %}
-				    <td class="cellcheckbox"><input type="checkbox" name="members_list" value="{{ user.id }}" title="{% trans "Check to include this user in the group" %}" {% if user.member %}checked="checked"{% endif %}/></td>
-				    <td class="contenttitle">{{ user.username }}</td>
-				    <td class="cellcheckbox">
-				    {% if user.get_profile.is_regular %}
-				    	<input type="checkbox" name="admin_list" value="{{ user.id }}" title="{% trans "Check to give this user the right to change the group" %}" {% if user.admin %}checked="checked"{% endif %}/>
-				    {% endif %}				    
-				    </td>
-				 </tr>
-			{% endfor %} 			
-				
-			</tbody>
-		</table>			
-	</div>	
-</div>
+{% for user in user_list %}
+	<option value="{{ user.id }}">{{ user.username }}</option>
+{% endfor %}
\ No newline at end of file
--- a/src/ldt/ldt/ldt_utils/views.py	Fri Dec 02 10:50:35 2011 +0100
+++ b/src/ldt/ldt/ldt_utils/views.py	Mon Dec 05 14:25:21 2011 +0100
@@ -188,7 +188,7 @@
     
     query = Q(id=settings.ANONYMOUS_USER_ID) | Q(id=request.user.id) | Q(is_superuser=True)   
     filter_query = Q(username__icontains=filter) if filter else Q()    
-    user_list = User.objects.exclude(query).filter(filter_query)  
+    user_list = User.objects.exclude(query).filter(filter_query)[0:20]  
     
     if id_group:
         group = Group.objects.get(id=id_group)
@@ -1331,58 +1331,55 @@
 @login_required
 def create_group(request):
     if not request.user.is_regular:
-        return HttpResponseServerError('<h1>User can leave a group.</h1>')
+        return HttpResponseServerError('<h1>User can not leave a group.</h1>')
     query = Q(id=settings.ANONYMOUS_USER_ID) | Q(id=request.user.id) | Q(is_superuser=True)
-    user_list = User.objects.exclude(query)
+    user_list = User.objects.exclude(query)[0:20]
     form_status = ''
     
     if request.method == 'POST':
         form = GroupAddForm(request.POST)
         
-        if form.is_valid():            
+        if form.is_valid():          
             name = form.cleaned_data['name']
             members_list = form.cleaned_data['members_list']
-            admin_list = form.cleaned_data['admin_list']
+            admin_list = form.cleaned_data['admin_list']            
             
             group = Group.objects.create(name=name)
             group.save()
             assign('change_group', request.user, group)
-            user_list = User.objects.filter(id__in=members_list)
             
-            for user in user_list:
+            for user in members_list:
                 user.groups.add(group)
-                if user in admin_list and user.get_profile().is_regular:
+                if user in admin_list:
                     assign('change_group', user, group)
             request.user.groups.add(group)             
             form_status = 'saved' 
             
     else:
-        form = GroupAddForm()        
+        form = GroupAddForm()
+        form.fields['members_list'].queryset = user_list       
     
     return render_to_response("ldt/ldt_utils/create_group.html", {'form' : form, 'form_status' : form_status, 'user_list' : user_list, 'admin_list': user_list}, context_instance=RequestContext(request))
 
 @login_required
 def update_group(request, group_id):
     if not request.user.is_regular:
-        return HttpResponseServerError('<h1>User can not leave a group.</h1>')
+        return HttpResponseServerError('<h1>User can not update a group.</h1>')
     
-    group = get_object_or_404(Group, id=group_id)    
+    group = get_object_or_404(Group, id=group_id)
+    member_list = group.user_set.exclude(id=request.user.id)
     query = Q(id=settings.ANONYMOUS_USER_ID) | Q(id=request.user.id) | Q(is_superuser=True)
-    user_list = User.objects.exclude(query)
-    members_list = User.objects.filter(groups__id=group_id)
+    user_list = User.objects.exclude(query)[0:20]
+    admin_list = []
     form_status = ''    
     
     if not request.user.has_perm('change_group', group):
-        user_list = []
         form_status = 'saved'
-        form = GroupAddForm()
-        return render_to_response("ldt/ldt_utils/create_group.html", {'group_id' : group_id, 'form' : form, 'form_status' : form_status, 'user_list' : user_list}, context_instance=RequestContext(request))
+        return render_to_response("ldt/ldt_utils/create_group.html", {'form_status' : form_status}, context_instance=RequestContext(request))
 
-    for u in user_list:
-        if u in members_list:
-            u.member = True
+    for u in member_list:
         if u.has_perm('change_group', group):
-            u.admin = True
+            u.change = True
             
     if request.method == "POST":
         form = GroupAddForm(request.POST, instance=group)
@@ -1395,18 +1392,19 @@
         else:            
             if form.is_valid():
                 name = form.cleaned_data['name']
-                members_list = form.cleaned_data['members_list']
+                new_member_list = form.cleaned_data['members_list']
                 admin_list = form.cleaned_data['admin_list']
                 group.name = name
-                
-                for user in User.objects.all().exclude(username=request.user.username):
-                    if user in members_list:                        
-                        group.user_set.add(user)
-                        if user in admin_list and user.get_profile().is_regular:
-                            assign('change_group', user, group)
-                        else:
-                            remove_perm('change_group', user, group)
+                        
+                for user in new_member_list:                       
+                    group.user_set.add(user)
+                    if user in admin_list and user.get_profile().is_regular:
+                        assign('change_group', user, group)
                     else:
+                        remove_perm('change_group', user, group)
+                    
+                for user in member_list:
+                    if user not in new_member_list:
                         group.user_set.remove(user)
                         remove_perm('change_group', user, group)
                         
@@ -1414,9 +1412,11 @@
                 form_status = 'saved'       
                     
     else:
-        form = GroupAddForm(initial={'name':unicode(group.name), 'members_list':members_list})    
+        form = GroupAddForm(initial={'name':unicode(group.name), 'members_list':member_list})    
     
-    return render_to_response("ldt/ldt_utils/create_group.html", {'group_id' : group_id, 'form' : form, 'form_status' : form_status, 'user_list' : user_list}, context_instance=RequestContext(request))
+    return render_to_response("ldt/ldt_utils/create_group.html", {'group_id' : group_id, 'form' : form, 'form_status' : form_status,
+                                                                  'user_list' : user_list, 'member_list': member_list,
+                                                                  'admin_list' : admin_list}, context_instance=RequestContext(request))
 
 @login_required
 def leave_group(request, group_id, redirect=True):
--- a/src/ldt/ldt/static/ldt/js/projectscontents.js	Fri Dec 02 10:50:35 2011 +0100
+++ b/src/ldt/ldt/static/ldt/js/projectscontents.js	Mon Dec 05 14:25:21 2011 +0100
@@ -206,6 +206,7 @@
     $('.contenttitlelink').each(function(i){
         $(this).attr("target","_blank");
     });
+    
     $('.contenttitlelink').nyroModal({
         filters: ['iframe'],
         sizes: {
@@ -279,7 +280,7 @@
 function init_events_base_projects(base_node, embed_url, searchprojectfilterurl, publishprojecturl, unpublishprojecturl) {
 
     init_modal_window ('.ldt_link_open_ldt', 1035, 670, 1025, 660, base_node, searchprojectfilterurl);
-    init_modal_window ('.ldt_link_create_project', 950, 700, 940, 690, base_node, searchprojectfilterurl);
+    init_modal_window ('.ldt_link_create_project', 800, 700, 820, 690, base_node, searchprojectfilterurl);
     init_modal_window ('.ldt_link_copy_project', 500, 150, 500, 150, base_node, searchprojectfilterurl);
     
     $('.publishedproject', base_node).click(function(e) {
@@ -330,7 +331,7 @@
     $('.projecttitlelink').nyroModal({
         filters: ['iframe'],
         sizes: {
-            minW: '950',
+            minW: '800',
             minH: '710'
         },
         closeOnClick:false,
@@ -347,7 +348,7 @@
                     }
                   });
 
-                nm.store.iframe.width(940);
+                nm.store.iframe.width(820);
                 nm.store.iframe.height(700);
             }
         }
@@ -369,7 +370,7 @@
         filters: ['iriIframe'],
         sizes: {
             minW: '520',
-            minH: '530'
+            minH: '460'
         },
         showCloseButton: true,
         closeOnEscape:false,
@@ -385,7 +386,7 @@
                         
                 });  
                 nm.store.iframe.width(510);
-                nm.store.iframe.height(520);
+                nm.store.iframe.height(450);
             },
             afterClose: function(nm) {
             	searchCallback($("#searchprojectsinput"), $("#groupslistcontainer"), groupfilterurl, 0);