source: trunk/admin/themes/default/template/user_list.tpl @ 25237

Last change on this file since 25237 was 25237, checked in by plg, 10 years ago

feature 1668, user manager redesign: ability to add a new user (call to pwg.users.add through AJAX)

Move the "send connection settings" code to function register_user (avoid code duplication).
  • Property svn:eol-style set to LF
File size: 15.9 KB
Line 
1{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
2
3{combine_script id='jquery.dataTables' load='footer' path='themes/default/js/plugins/jquery.dataTables.js'}
4{combine_css path="themes/default/js/plugins/datatables/css/jquery.dataTables.css"}
5
6{footer_script}
7var selectedMessage_pattern = "{'%d of %d photos selected'|@translate}";
8var selectedMessage_none = "{'No photo selected, %d photos in current set'|@translate}";
9var selectedMessage_all = "{'All %d photos are selected'|@translate}";
10var applyOnDetails_pattern = "{'on the %d selected users'|@translate}";
11var newUser_pattern = "✔ {'User %s added'|translate}";
12var missingConfirm = "{'You need to confirm deletion'|translate}";
13var missingUsername = "{'Please, enter a login'|translate}";
14
15var allUsers = [{$all_users}];
16var selection = [{$selection}];
17{/footer_script}
18
19{footer_script}{literal}
20jQuery(document).ready(function() {
21  /**
22   * Add user
23   */
24  jQuery("#addUser").click(function() {
25    jQuery("#addUserForm").toggle();
26    jQuery("#showAddUser .infos").hide();
27    jQuery("input[name=username]").focus();
28    return false;
29  });
30
31  jQuery("#addUserClose").click(function() {
32    jQuery("#addUserForm").hide();
33    return false;
34  });
35
36  jQuery("#addUserForm").submit(function() {
37    jQuery.ajax({
38      url: "ws.php?format=json&method=pwg.users.add",
39      type:"POST",
40      data: jQuery(this).serialize(),
41      beforeSend: function() {
42        jQuery("#addUserForm .errors").hide();
43
44        if (jQuery("input[name=username]").val() == "") {
45          jQuery("#addUserForm .errors").html('✘ '+missingUsername).show();
46          return false;
47        }
48
49        jQuery("#addUserForm .loading").show();
50      },
51      success:function(data) {
52        oTable.fnDraw();
53        jQuery("#addUserForm .loading").hide();
54
55        var data = jQuery.parseJSON(data);
56        if (data.stat == 'ok') {
57          jQuery("#addUserForm input[type=text], #addUserForm input[type=password]").val("");
58
59          var new_user = data.result.users[0];
60          allUsers.push(parseInt(new_user.id));
61          jQuery("#showAddUser .infos").html(sprintf(newUser_pattern, new_user.username)).show();
62          checkSelection();
63
64          jQuery("#addUserForm").hide();
65        }
66        else {
67          jQuery("#addUserForm .errors").html('✘ '+data.message).show();
68        }
69      },
70      error:function(XMLHttpRequest, textStatus, errorThrows) {
71        jQuery("#addUserForm .loading").hide();
72      }
73    });
74
75    return false;
76  });
77
78  /**
79   * Table with users
80   */
81
82  /* first column must be prefixed with the open/close icon */
83  var aoColumns = [
84    {
85      'bVisible':false
86    },
87    {
88      "mRender": function(data, type, full) {
89        return '<label><input type="checkbox" data-user_id="'+full[0]+'"> '+data+'</label>';
90      }
91    }
92  ];
93
94  for (i=2; i<jQuery("#userList thead tr th").length; i++) {
95    aoColumns.push(null);
96  }
97
98  var oTable = jQuery('#userList').dataTable({
99    "iDisplayLength": 10,
100    "bDeferRender": true,
101    "bProcessing": true,
102    "bServerSide": true,
103    "sAjaxSource": "admin/user_list_backend.php",
104    "fnDrawCallback": function( oSettings ) {
105      jQuery("#userList input[type=checkbox]").each(function() {
106        var user_id = jQuery(this).data("user_id");
107        jQuery(this).prop('checked', (selection.indexOf(user_id) != -1));
108      });
109    },
110    "aoColumns": aoColumns
111  });
112
113  /**
114   * Selection management
115   */
116  function checkSelection() {
117    if (selection.length > 0) {
118      jQuery("#forbidAction").hide();
119      jQuery("#permitAction").show();
120
121      jQuery("#applyOnDetails").text(
122        sprintf(
123          applyOnDetails_pattern,
124          selection.length
125        )
126      );
127
128      if (selection.length == allUsers.length) {
129        jQuery("#selectedMessage").text(
130          sprintf(
131            selectedMessage_all,
132            allUsers.length
133          )
134        );
135      }
136      else {
137        jQuery("#selectedMessage").text(
138          sprintf(
139            selectedMessage_pattern,
140            selection.length,
141            allUsers.length
142          )
143        );
144      }
145    }
146    else {
147      jQuery("#forbidAction").show();
148      jQuery("#permitAction").hide();
149
150      jQuery("#selectedMessage").text(
151        sprintf(
152          selectedMessage_none,
153          allUsers.length
154        )
155      );
156    }
157
158    jQuery("#applyActionBlock .infos").hide();
159  }
160
161  jQuery(document).on('change', '#userList input[type=checkbox]',  function() {
162    var user_id = jQuery(this).data("user_id");
163
164    array_delete(selection, user_id);
165
166    if (jQuery(this).is(":checked")) {
167      selection.push(user_id);
168    }
169
170    checkSelection();
171  });
172
173  jQuery("#selectAll").click(function () {
174    selection = allUsers;
175    jQuery("#userList input[type=checkbox]").prop('checked', true);
176    checkSelection();
177    return false;
178  });
179
180  jQuery("#selectNone").click(function () {
181    selection = [];
182    jQuery("#userList input[type=checkbox]").prop('checked', false);
183    checkSelection();
184    return false;
185  });
186
187  jQuery("#selectInvert").click(function () {
188    var newSelection = [];
189    for(var i in allUsers)
190    {
191      if (selection.indexOf(allUsers[i]) == -1) {
192        newSelection.push(allUsers[i]);
193      }
194    }
195    selection = newSelection;
196
197    jQuery("#userList input[type=checkbox]").each(function() {
198      var user_id = jQuery(this).data("user_id");
199      jQuery(this).prop('checked', (selection.indexOf(user_id) != -1));
200    });
201
202    checkSelection();
203    return false;
204  });
205
206  /**
207   * Action management
208   */
209  jQuery("[id^=action_]").hide();
210 
211  jQuery("select[name=selectAction]").change(function () {
212    jQuery("#applyActionBlock .infos").hide();
213
214    jQuery("[id^=action_]").hide();
215
216    jQuery("#action_"+$(this).prop("value")).show();
217 
218    if (jQuery(this).val() != -1) {
219      jQuery("#applyActionBlock").show();
220    }
221    else {
222      jQuery("#applyActionBlock").hide();
223    }
224  });
225
226  jQuery("#permitAction input, #permitAction select").click(function() {
227    jQuery("#applyActionBlock .infos").hide();
228  });
229
230  jQuery("#applyAction").click(function() {
231    var action = jQuery("select[name=selectAction]").prop("value");
232    var method = 'pwg.users.setInfo';
233    var data = {
234      user_id: selection
235    };
236
237    switch (action) {
238      case 'delete':
239        if (!jQuery("input[name=confirm_deletion]").is(':checked')) {
240          alert(missingConfirm);
241          return false;
242        }
243        method = 'pwg.users.delete';
244        break;
245      case 'group_associate':
246        method = 'pwg.groups.addUser';
247        data.group_id = jQuery("select[name=associate]").prop("value");
248        break;
249      case 'group_dissociate':
250        method = 'pwg.groups.deleteUser';
251        data.group_id = jQuery("select[name=dissociate]").prop("value");
252        break;
253      case 'status':
254        data.status = jQuery("select[name=status]").prop("value");
255        break;
256      case 'enabled_high':
257        data.enabled_high = jQuery("input[name=enabled_high]:checked").val();
258        break;
259      case 'level':
260        data.level = jQuery("select[name=level]").val();
261        break;
262      case 'nb_image_page':
263        data.nb_image_page = jQuery("input[name=nb_image_page]").val();
264        break;
265      case 'theme':
266        data.theme = jQuery("select[name=theme]").val();
267        break;
268      case 'language':
269        data.language = jQuery("select[name=language]").val();
270        break;
271      case 'recent_period':
272        data.recent_period = jQuery("input[name=recent_period]").val();
273        break;
274      case 'expand':
275        data.expand = jQuery("input[name=expand]:checked").val();
276        break;
277      case 'show_nb_comments':
278        data.show_nb_comments = jQuery("input[name=show_nb_comments]:checked").val();
279        break;
280      case 'show_nb_hits':
281        data.show_nb_hits = jQuery("input[name=show_nb_hits]:checked").val();
282        break;
283      default:
284        alert("Unexpected action");
285        return false;
286    }
287
288    jQuery.ajax({
289      url: "ws.php?format=json&method="+method,
290      type:"POST",
291      data: data,
292      beforeSend: function() {
293        jQuery("#applyActionLoading").show();
294      },
295      success:function(data) {
296        oTable.fnDraw();
297        jQuery("#applyActionLoading").hide();
298        jQuery("#applyActionBlock .infos").show();
299
300        if (action == 'delete') {
301          var allUsers_new = [];
302          for(var i in allUsers)
303          {
304            if (selection.indexOf(allUsers[i]) == -1) {
305              allUsers_new.push(allUsers[i]);
306            }
307          }
308          allUsers = allUsers_new;
309          console.log('allUsers_new.length = '+allUsers_new.length);
310          selection = [];
311          checkSelection();
312        }
313      },
314      error:function(XMLHttpRequest, textStatus, errorThrows) {
315        jQuery("#applyActionLoading").hide();
316      }
317    });
318
319    return false;
320  });
321
322});
323{/literal}{/footer_script}
324
325{literal}
326<style>
327.dataTables_wrapper, .dataTables_info {clear:none;}
328table.dataTable {clear:right;padding-top:10px;}
329.bulkAction {margin-top:10px;}
330#addUserForm p {margin-left:0;}
331#applyActionBlock .actionButtons {margin-left:0;}
332span.infos, span.errors {background-image:none; padding:2px 5px; margin:0;border-radius:5px;}
333</style>
334{/literal}
335
336<div class="titrePage">
337  <h2>{'User list'|@translate}</h2>
338</div>
339
340<p class="showCreateAlbum" id="showAddUser">
341  <a href="#" id="addUser">{'Add a user'|translate}</a>
342  <span class="infos" style="display:none"></span>
343</p>
344
345<form id="addUserForm" style="display:none" method="post" name="add_user" action="{$F_ADD_ACTION}">
346  <fieldset>
347    <legend>{'Add a user'|@translate}</legend>
348
349    <p>
350      <strong>{'Username'|translate}</strong><br>
351      <input type="text" name="username" maxlength="50" size="20">
352    </p>
353
354    <p>
355      <strong>{'Password'|translate}</strong><br>
356      <input type="{if $Double_Password}password{else}text{/if}" name="password">
357    </p>
358   
359{if $Double_Password}
360    <p>
361      <strong>{'Confirm Password'|@translate}</strong><br>
362      <input type="password" name="password_confirm">
363    </p>
364{/if}
365
366    <p>
367      <strong>{'Email address'|@translate}</strong><br>
368      <input type="text" name="email">
369    </p>
370
371    <p>
372      <label><input type="checkbox" name="send_password_by_mail"> <strong>{'Send connection settings by email'|@translate}</strong></label>
373    </p>
374
375    <p class="actionButtons">
376      <input class="submit" name="submit_add" type="submit" value="{'Submit'|@translate}">
377      <a href="#" id="addUserClose">{'Cancel'|@translate}</a>
378      <span class="loading" style="display:none"><img src="themes/default/images/ajax-loader-small.gif"></span>
379      <span class="errors" style="display:none"></span>
380    </p>
381  </fieldset>
382</form>
383
384<form method="post" name="preferences" action="">
385
386<table id="userList">
387  <thead>
388    <tr>
389      <th>id</th>
390      <th>{'Username'|@translate}</th>
391      <th>{'Status'|@translate}</th>
392      <th>{'Email address'|@translate}</th>
393    </tr>
394  </thead>
395</table>
396
397<div style="clear:right"></div>
398
399<p class="checkActions">
400  {'Select:'|@translate}
401  <a href="#" id="selectAll">{'All'|@translate}</a>,
402  <a href="#" id="selectNone">{'None'|@translate}</a>,
403  <a href="#" id="selectInvert">{'Invert'|@translate}</a>
404
405  <span id="selectedMessage"></span>
406</p>
407
408<fieldset id="action">
409  <legend>{'Action'|@translate}</legend>
410
411  <div id="forbidAction"{if count($selection) != 0} style="display:none"{/if}>{'No user selected, no action possible.'|@translate}</div>
412  <div id="permitAction"{if count($selection) == 0} style="display:none"{/if}>
413
414    <select name="selectAction">
415      <option value="-1">{'Choose an action'|@translate}</option>
416      <option disabled="disabled">------------------</option>
417      <option value="delete" class="icon-trash">{'Delete selected users'|@translate}</option>
418      <option value="status">{'Status'|@translate}</option>
419      <option value="group_associate">{'associate to group'|translate}</option>
420      <option value="group_dissociate">{'dissociate from group'|@translate}</option>
421      <option value="enabled_high">{'High definition enabled'|@translate}</option>
422      <option value="level">{'Privacy level'|@translate}</option>
423      <option value="nb_image_page">{'Number of photos per page'|@translate}</option>
424      <option value="theme">{'Interface theme'|@translate}</option>
425      <option value="language">{'Language'|@translate}</option>
426      <option value="recent_period">{'Recent period'|@translate}</option>
427      <option value="expand">{'Expand all albums'|@translate}</option>
428{if $ACTIVATE_COMMENTS}
429      <option value="show_nb_comments">{'Show number of comments'|@translate}</option>
430{/if}
431      <option value="show_nb_hits">{'Show number of hits'|@translate}</option>
432    </select>
433
434    {* delete *}
435    <div id="action_delete" class="bulkAction">
436      <p><label><input type="checkbox" name="confirm_deletion" value="1"> {'Are you sure?'|@translate}</label></p>
437    </div>
438
439    {* status *}
440    <div id="action_status" class="bulkAction">
441      <select name="status">
442        {html_options options=$pref_status_options selected=$pref_status_selected}
443      </select>
444    </div>
445
446    {* group_associate *}
447    <div id="action_group_associate" class="bulkAction">
448      {html_options name=associate options=$association_options selected=$associate_selected}
449    </div>
450
451    {* group_dissociate *}
452    <div id="action_group_dissociate" class="bulkAction">
453      {html_options name=dissociate options=$association_options selected=$dissociate_selected}
454    </div>
455
456    {* enabled_high *}
457    <div id="action_enabled_high" class="bulkAction">
458      <label><input type="radio" name="enabled_high" value="true">{'Yes'|@translate}</label>
459      <label><input type="radio" name="enabled_high" value="false" checked="checked">{'No'|@translate}</label>
460    </div>
461
462    {* level *}
463    <div id="action_level" class="bulkAction">
464      <select name="level" size="1">
465        {html_options options=$level_options selected=$level_selected}
466      </select>
467    </div>
468
469    {* nb_image_page *}
470    <div id="action_nb_image_page" class="bulkAction">
471      <input size="4" maxlength="3" type="text" name="nb_image_page" value="{$NB_IMAGE_PAGE}">
472    </div>
473
474    {* theme *}
475    <div id="action_theme" class="bulkAction">
476      <select name="theme" size="1">
477        {html_options options=$theme_options selected=$theme_selected}
478      </select>
479    </div>
480
481    {* language *}
482    <div id="action_language" class="bulkAction">
483      <select name="language" size="1">
484        {html_options options=$language_options selected=$language_selected}
485      </select>
486    </div>
487
488    {* recent_period *}
489    <div id="action_recent_period" class="bulkAction">
490      <input type="text" size="3" maxlength="2" name="recent_period" value="{$RECENT_PERIOD}">
491    </div>
492
493    {* expand *}
494    <div id="action_expand" class="bulkAction">
495      <label><input type="radio" name="expand" value="true">{'Yes'|@translate}</label>
496      <label><input type="radio" name="expand" value="false" checked="checked">{'No'|@translate}</label>
497    </div>
498
499    {* show_nb_comments *}
500    <div id="action_show_nb_comments" class="bulkAction">
501      <label><input type="radio" name="show_nb_comments" value="true">{'Yes'|@translate}</label>
502      <label><input type="radio" name="show_nb_comments" value="false" checked="checked">{'No'|@translate}</label>
503    </div>
504
505    {* show_nb_hits *}
506    <div id="action_show_nb_hits" class="bulkAction">
507      <label><input type="radio" name="show_nb_hits" value="true">{'Yes'|@translate}</label>
508      <label><input type="radio" name="show_nb_hits" value="false" checked="checked">{'No'|@translate}</label>
509    </div>
510
511    <p id="applyActionBlock" style="display:none" class="actionButtons">
512      <input id="applyAction" class="submit" type="submit" value="{'Apply action'|@translate}" name="submit"> <span id="applyOnDetails"></span>
513      <span id="applyActionLoading" style="display:none"><img src="themes/default/images/ajax-loader-small.gif"></span>
514      <span class="infos" style="display:none">&#x2714; Users modified</span>
515    </p>
516
517  </div> {* #permitAction *}
518</fieldset>
519
520</form>
Note: See TracBrowser for help on using the repository browser.