Slicetabusers: autocomplete with sorted list
[unfold.git] / portal / templates / slice-tab-users-view.html
1 <script type="text/javascript" src="{{STATIC_URL}}/js/jquery-ui.js"></script>
2 <script type="text/javascript" src="{{STATIC_URL}}/js/jquery.qtip.min.js"></script>
3 <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jquery.qtip.min.css">
4 <link rel="stylesheet" href="{{ STATIC_URL }}css/jquery-ui.css">
5 <script>
6     function get_users_in_slice(authority_hrn){
7         console.log(authority_hrn);
8         $("table#user-tab").html("<tr><th>+/-</th><th>Email</th><th>User hrn</th></tr>");
9         var slice_users = [];
10         $.post("/rest/user/",{'filters':{'parent_authority': authority_hrn}}, function( data ) {
11                 var list_users = [];
12                 var table_users = [];
13                 /* Available fields
14                 user_gid, user_enabled, slices, pi_authorities, keys, parent_authority, user_first_name,
15             user_urn, user_last_name, user_phone, user_hrn, user_email, user_type
16                 */
17                 $.each( data, function( key, val ) {
18                 list_users.push( "<li><a href=\"portal/user/"+val.user_email+"\">" + val.user_email + "</a></li>" );
19                 user_row = "<tr>";
20                         // checking the box for the users that belong to the selected slice
21                         var flag_checkbox = 0;
22                         for(var data in val.slices) {
23                                 var element = val.slices[data];
24                                 if (element == "{{slice}}"){
25                                         //console.log("the slice is: "+ element);       
26                                         flag_checkbox = 1;
27                                         slice_users.push (val.user_hrn)
28                                         user_row += "<td><input type='checkbox' checked='True' class='user'></td>";
29                                 }
30                         }
31                         if(flag_checkbox != 1){
32                         user_row += "<td><input type='checkbox' class='user'></td>";
33                         }
34                 user_row += "<td>"+val.user_email+"</td>";
35                 user_row += "<td>"+val.user_hrn+"</td>";
36                         //user_row += "<td>"+val.user_enabled+"</td>";
37                 user_row += "</tr>";
38                 table_users.push(user_row);
39             
40                 });
41                 $("table#user-tab tr:first").after(table_users.join( "" ));
42                 $("div#user-tab-loaded").css("display","block");
43                 $("div#user-tab-loading").css("display","none");
44             $("input:checkbox.user").click(function() {
45                 user_hrn = $(this).closest('tr').find('td:eq(2)').html();
46                 if(this.checked){
47                     var record_id = this.id;
48                     slice_users.push (user_hrn);
49                 }else{
50                     console.log(slice_users);
51                 }
52             });
53         }); // post rest/user
54     }
55
56     $(document).ready(function() {
57             // TODO: Add a filter based on the list of authorities
58                 $.post("/rest/authority/",{'fields':['authority_hrn']}, function( data ) {
59                 var list_authorities = [];
60                 $.each( data, function( key, val ) {
61                     auth_hrn = val.authority_hrn;
62                     // Keep only the sub authorities, remove root auth
63                     if(auth_hrn.indexOf(".") > -1){
64                         list_authorities.push(auth_hrn);
65                                                 list_authorities.sort();
66                         if(auth_hrn=="{{user_details.parent_authority}}"){
67                                                         $('#auth_list').val(auth_hrn);
68                                                 }
69                     }
70                 });
71                                 $( "#auth_list" ).autocomplete({
72                                 source: list_authorities,
73                                 minLength: 0,
74                                 change: function (event, ui) {
75                                                 get_users_in_slice(this.value); 
76                                         if(!ui.item){
77                                 //http://api.jqueryui.com/autocomplete/#event-change -
78                                 //The item selected from the menu, if any. Otherwise the property is null
79                                 //so clear the item for force selection
80                                         jQuery("#auth_list").val("");
81                                         }
82                                 }
83                                 //select: function( event, ui ) {console.log(jQuery(this))}
84                         });
85             }); // post rest/authority
86
87             get_users_in_slice("{{user_details.parent_authority}}");
88
89                 $('button#addusers').click(function() {
90                 $.post("/update/slice/",{'filters':{'slice_hrn':'{{slice}}'},'params':{'users':slice_users}}, function(data) {
91                         if(data.success){
92                         // TODO: highlight row after success
93                         //$('tr[id="'+record_id+'"]').highlight();
94                         mysliceAlert('Success: slice updated','success', true);
95                         }else{
96                         mysliceAlert('Rest Error for: '+data.error,'warning', true);
97                         }
98                 }); // post update slice
99             
100                 // TODO: refresh table
101                 //window.location="/portal/institution#slices";
102
103             }); // button#addusers click
104         $('[title!=""]').qtip();
105     }); // document ready
106 </script>
107
108         <div class="col-md-2">
109                 <div id="select-platform" class="list-group">
110                 </div>
111                         
112                 <ul class="list-group">
113                   <li class="list-group-item">Authority</li>
114                   <li class="list-group-item" style="padding-left:5px;">
115                         <input type="text" id="auth_list"  style ="min-width:190px;" 
116                         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.
117                                  Use the arrow keys to scroll through the list; type part of the name to narrow down the list."/>
118           </li>
119                 </ul>
120         
121         </div>
122         <div class="col-md-10">
123                 <div class="row">
124                 </div>
125                 <div id="user-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Useres" /></div>
126                 <div id="user-tab-loaded" style="display:none;">
127                 <table id="user-tab" class="table">
128                 </table>
129
130                 <!-- XXX TODO: for the moment only PIs have access to Update but users that have slice credentials should also have access to that -->
131
132                                 {% if 'is_pi'  in pi %}
133                                 <button id="addusers" type="button" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span> Update users</button>
134                                 {%endif%}
135                 </div>
136