X-Git-Url: http://git.onelab.eu/?a=blobdiff_plain;f=portal%2Ftemplates%2Fslice-tab-users-view.html;h=22fd93ed2a0e923117bdab6962726a2ceba1b6ac;hb=521881b3230b0d3ea545d95f9aef7a65a0e557db;hp=50806ac64f93a3b426c548cf2dafddf48ce83392;hpb=29cb037c0e09b225261a3b9c53b19d9b4d1c9e87;p=myslice.git

diff --git a/portal/templates/slice-tab-users-view.html b/portal/templates/slice-tab-users-view.html
index 50806ac6..22fd93ed 100644
--- a/portal/templates/slice-tab-users-view.html
+++ b/portal/templates/slice-tab-users-view.html
@@ -1,104 +1,93 @@
-	<div class="col-md-2">
-		<div id="select-platform" class="list-group">
-		</div>
-			
-		<ul class="list-group">
-		  <li class="list-group-item">Authority:<b> {{user_details.parent_authority}}</b>
-			<!--<select id="auth_list">
-  				<option value="ple.upmc">UPMC</option>
-  				<option value="ple.inria">INRIA</option>
-  				<option value="ple.nitos">NITOS</option>
-  				<option value="ple.iminds">iMinds</option>
-			</select> -->
-		  </li>
-		  <li class="list-group-item">Filter: slice</li>
-		  <li class="list-group-item">...</li>
-		  <li class="list-group-item">...</li>
-		  <li class="list-group-item">...</li>
-		</ul>
-	
-	</div>
-	<div class="col-md-10">
-		<div class="row">
-		</div>
-        	<div id="user-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Useres" /></div>
-        	<div id="user-tab-loaded" style="display:none;">
-            	<table id="user-tab">
-                	<tr>
-                    	<th>+/-</th>
-                    	<th>Email</th>
-                    	<th>user_hrn</th>
-                    	<th>Enabled</th>
-                	</tr>
-            	</table>
-
-                <!-- XXX TODO: for the moment only PIs have access to Update but users that have slice credentials should also have access to that -->
-
-				{% if 'is_pi'  in pi %}
-				<button id="addusers" type="button" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span> Update users</button>
-				{%endif%}
-        	</div>
+<script type="text/javascript" src="{{STATIC_URL}}/js/jquery-ui.js"></script>
+<script type="text/javascript" src="{{STATIC_URL}}/js/jquery.qtip.min.js"></script>
+<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jquery.qtip.min.css">
+<link rel="stylesheet" href="{{ STATIC_URL }}css/jquery-ui.css">
 <script>
+    function get_users_in_slice(authority_hrn){
+        console.log(authority_hrn);
+        $("table#user-tab").html("<tr><th>+/-</th><th>Email</th><th>User hrn</th></tr>");
+    	var slice_users = [];
+    	$.post("/rest/user/",{'filters':{'parent_authority': authority_hrn}}, function( data ) {
+        	var list_users = [];
+        	var table_users = [];
+    		/* Available fields
+    		user_gid, user_enabled, slices, pi_authorities, keys, parent_authority, user_first_name,
+    	    user_urn, user_last_name, user_phone, user_hrn, user_email, user_type
+    		*/
+        	$.each( data, function( key, val ) {
+            	list_users.push( "<li><a href=\"portal/user/"+val.user_email+"\">" + val.user_email + "</a></li>" );
+            	user_row = "<tr>";
+    			// checking the box for the users that belong to the selected slice
+    			var flag_checkbox = 0;
+    			for(var data in val.slices) {
+    				var element = val.slices[data];
+    				if (element == "{{slice}}"){
+    					//console.log("the slice is: "+ element);	
+    					flag_checkbox = 1;
+    					slice_users.push (val.user_hrn)
+    					user_row += "<td><input type='checkbox' checked='True' class='user'></td>";
+    				}
+    			}
+    			if(flag_checkbox != 1){
+            		user_row += "<td><input type='checkbox' class='user'></td>";
+    			}
+            	user_row += "<td>"+val.user_email+"</td>";
+            	user_row += "<td>"+val.user_hrn+"</td>";
+    			//user_row += "<td>"+val.user_enabled+"</td>";
+            	user_row += "</tr>";
+            	table_users.push(user_row);
+            
+        	});
+    		$("table#user-tab tr:first").after(table_users.join( "" ));
+        	$("div#user-tab-loaded").css("display","block");
+        	$("div#user-tab-loading").css("display","none");
+            $("input:checkbox.user").click(function() {
+                user_hrn = $(this).closest('tr').find('td:eq(2)').html();
+                if(this.checked){
+                    var record_id = this.id;
+                    slice_users.push (user_hrn);
+                }else{
+                    console.log(slice_users);
+                }
+            });
+     	}); // post rest/user
+    }
+
     $(document).ready(function() {
-			var slice_users = [];
-        	$.post("/rest/user/",{'filters':{'parent_authority': "{{user_details.parent_authority}}"}}, function( data ) {
-            	var list_users = [];
-            	var table_users = [];
-				/* Available fields
-				user_gid, user_enabled, slices, pi_authorities, keys, parent_authority, user_first_name,
-			    user_urn, user_last_name, user_phone, user_hrn, user_email, user_type
-				*/
-            	$.each( data, function( key, val ) {
-                	list_users.push( "<li><a href=\"portal/user/"+val.user_email+"\">" + val.user_email + "</a></li>" );
-                	user_row = "<tr>";
-					// checking the box for the users that belong to the selected slice
-					var flag_checkbox = 0;
-					for(var data in val.slices) {
-    					var element = val.slices[data];
-						if (element == "{{slice}}"){
-							//console.log("the slice is: "+ element);	
-							flag_checkbox = 1;
-							slice_users.push (val.user_hrn)
-							user_row += "<td><input type='checkbox' checked='True' class='user'></td>";
+            // TODO: Add a filter based on the list of authorities
+        	$.post("/rest/authority/",{'fields':['authority_hrn']}, function( data ) {
+                var list_authorities = [];
+                $.each( data, function( key, val ) {
+                    auth_hrn = val.authority_hrn;
+                    // Keep only the sub authorities, remove root auth
+                    if(auth_hrn.indexOf(".") > -1){
+                        list_authorities.push(auth_hrn);
+						list_authorities.sort();
+                        if(auth_hrn=="{{user_details.parent_authority}}"){
+							$('#auth_list').val(auth_hrn);
 						}
-					}
-					if(flag_checkbox != 1){
-                		user_row += "<td><input type='checkbox' class='user'></td>";
-					}
-                	user_row += "<td>"+val.user_email+"</td>";
-                	user_row += "<td>"+val.user_hrn+"</td>";
-					user_row += "<td>"+val.user_enabled+"</td>";
-                	user_row += "</tr>";
-                	table_users.push(user_row);
-                
-            	});
-				 console.log("slice users before");
-				 console.log(slice_users);
-            
-				$("table#user-tab tr:last").after(table_users.join( "" ));
-            	$("div#user-tab-loaded").css("display","block");
-            	$("div#user-tab-loading").css("display","none");
-                $("input:checkbox.user").click(function() {
-                    console.log("user_hrn");
-                    user_hrn = $(this).closest('tr').find('td:eq(2)').html();
-                    console.log(user_hrn);
-                    console.log(this.checked);
-                    if(this.checked){
-                        var record_id = this.id;
-                        slice_users.push (user_hrn);
-                    }else{
-                        console.log("not checked");
-                        slice_users = $.grep(slice_users, function( user, i ) {
-                            return user != user_hrn;
-                        });
                     }
-                    console.log(slice_users);
                 });
-           
-         	}); // post rest/user
+				$( "#auth_list" ).autocomplete({
+      				source: list_authorities,
+      				minLength: 0,
+      				change: function (event, ui) {
+		  				get_users_in_slice(this.value);	
+          				if(!ui.item){
+              			//http://api.jqueryui.com/autocomplete/#event-change -
+              			//The item selected from the menu, if any. Otherwise the property is null
+              			//so clear the item for force selection
+              				jQuery("#auth_list").val("");
+          				}
+      				}
+      				//select: function( event, ui ) {console.log(jQuery(this))}
+    			});
+            }); // post rest/authority
+
+            get_users_in_slice("{{user_details.parent_authority}}");
+
 	        $('button#addusers').click(function() {
                 $.post("/update/slice/",{'filters':{'slice_hrn':'{{slice}}'},'params':{'users':slice_users}}, function(data) {
-                    console.log(data);
                 	if(data.success){
                     	// TODO: highlight row after success
                     	//$('tr[id="'+record_id+'"]').highlight();
@@ -112,7 +101,36 @@
             	//window.location="/portal/institution#slices";
 
             }); // button#addusers click
-
+	$('[title!=""]').qtip();
     }); // document ready
 </script>
 
+	<div class="col-md-2">
+		<div id="select-platform" class="list-group">
+		</div>
+			
+		<ul class="list-group">
+		  <li class="list-group-item">Authority</li>
+		  <li class="list-group-item" style="padding-left:5px;">
+			<input type="text" id="auth_list"  style ="min-width:190px;" 
+			title="This is the authority that you belong to. You can view users of other authorities (organization) from the list that apears when you click in the field and start to type.
+				 Use the arrow keys to scroll through the list; type part of the name to narrow down the list."/>
+          </li>
+		</ul>
+	
+	</div>
+	<div class="col-md-10">
+		<div class="row">
+		</div>
+        	<div id="user-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Useres" /></div>
+        	<div id="user-tab-loaded" style="display:none;">
+            	<table id="user-tab" class="table">
+            	</table>
+
+                <!-- XXX TODO: for the moment only PIs have access to Update but users that have slice credentials should also have access to that -->
+
+				{% if 'is_pi'  in pi %}
+				<button id="addusers" type="button" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span> Update users</button>
+				{%endif%}
+        	</div>
+