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

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

feature 1668, in progress: redesign user manager (jQuery datatables, AJAX calls)
  • Property svn:eol-style set to LF
File size: 12.4 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 missingConfirm = "{'You need to confirm deletion'|translate}";
12
13var allUsers = [{$all_users}];
14var selection = [{$selection}];
15{/footer_script}
16
17{footer_script}{literal}
18jQuery(document).ready(function() {
19  /* first column must be prefixed with the open/close icon */
20  var aoColumns = [
21    {
22      'bVisible':false
23    },
24    {
25      "mRender": function(data, type, full) {
26        return '<label><input type="checkbox" data-user_id="'+full[0]+'"> '+data+'</label>';
27      }
28    }
29  ];
30
31  for (i=2; i<jQuery("#userList thead tr th").length; i++) {
32    aoColumns.push(null);
33  }
34
35  var oTable = jQuery('#userList').dataTable({
36    "iDisplayLength": 10,
37    "bDeferRender": true,
38    "bProcessing": true,
39    "bServerSide": true,
40    "sAjaxSource": "admin/user_list_backend.php",
41    "fnDrawCallback": function( oSettings ) {
42      jQuery("#userList input[type=checkbox]").each(function() {
43        var user_id = jQuery(this).data("user_id");
44        jQuery(this).prop('checked', (selection.indexOf(user_id) != -1));
45      });
46    },
47    "aoColumns": aoColumns
48  });
49
50  /**
51   * Selection management
52   */
53  function checkSelection() {
54    if (selection.length > 0) {
55      jQuery("#forbidAction").hide();
56      jQuery("#permitAction").show();
57
58      jQuery("#applyOnDetails").text(
59        sprintf(
60          applyOnDetails_pattern,
61          selection.length
62        )
63      );
64
65      if (selection.length == allUsers.length) {
66        jQuery("#selectedMessage").text(
67          sprintf(
68            selectedMessage_all,
69            allUsers.length
70          )
71        );
72      }
73      else {
74        jQuery("#selectedMessage").text(
75          sprintf(
76            selectedMessage_pattern,
77            selection.length,
78            allUsers.length
79          )
80        );
81      }
82    }
83    else {
84      jQuery("#forbidAction").show();
85      jQuery("#permitAction").hide();
86
87      jQuery("#selectedMessage").text(
88        sprintf(
89          selectedMessage_none,
90          allUsers.length
91        )
92      );
93    }
94
95    jQuery("#applyActionBlock .infos").hide();
96  }
97
98  jQuery(document).on('change', '#userList input[type=checkbox]',  function() {
99    var user_id = jQuery(this).data("user_id");
100
101    array_delete(selection, user_id);
102
103    if (jQuery(this).is(":checked")) {
104      selection.push(user_id);
105    }
106
107    checkSelection();
108  });
109
110  jQuery("#selectAll").click(function () {
111    selection = allUsers;
112    jQuery("#userList input[type=checkbox]").prop('checked', true);
113    checkSelection();
114    return false;
115  });
116
117  jQuery("#selectNone").click(function () {
118    selection = [];
119    jQuery("#userList input[type=checkbox]").prop('checked', false);
120    checkSelection();
121    return false;
122  });
123
124  jQuery("#selectInvert").click(function () {
125    var newSelection = [];
126    for(var i in allUsers)
127    {
128      if (selection.indexOf(allUsers[i]) == -1) {
129        newSelection.push(allUsers[i]);
130      }
131    }
132    selection = newSelection;
133
134    jQuery("#userList input[type=checkbox]").each(function() {
135      var user_id = jQuery(this).data("user_id");
136      jQuery(this).prop('checked', (selection.indexOf(user_id) != -1));
137    });
138
139    checkSelection();
140    return false;
141  });
142
143  /**
144   * Action management
145   */
146  jQuery("[id^=action_]").hide();
147 
148  jQuery("select[name=selectAction]").change(function () {
149    jQuery("#applyActionBlock .infos").hide();
150
151    jQuery("[id^=action_]").hide();
152
153    jQuery("#action_"+$(this).prop("value")).show();
154 
155    if (jQuery(this).val() != -1) {
156      jQuery("#applyActionBlock").show();
157    }
158    else {
159      jQuery("#applyActionBlock").hide();
160    }
161  });
162
163  jQuery("#permitAction input, #permitAction select").click(function() {
164    jQuery("#applyActionBlock .infos").hide();
165  });
166
167  jQuery("#applyAction").click(function() {
168    var action = jQuery("select[name=selectAction]").prop("value");
169    var method = null;
170    var data = {
171      user_id: selection
172    };
173
174    switch (action) {
175      case 'delete':
176        if (!jQuery("input[name=confirm_deletion]").is(':checked')) {
177          alert(missingConfirm);
178          return false;
179        }
180        method = 'pwg.users.delete';
181        break;
182      case 'group_associate':
183        method = 'pwg.groups.addUser';
184        data.group_id = jQuery("select[name=associate]").prop("value");
185        break;
186      case 'group_dissociate':
187        method = 'pwg.groups.deleteUser';
188        data.group_id = jQuery("select[name=dissociate]").prop("value");
189        break;
190    }
191
192    jQuery.ajax({
193      url: "ws.php?format=json&method="+method,
194      type:"POST",
195      data: data,
196      beforeSend: function() {
197        jQuery("#applyActionLoading").show();
198      },
199      success:function(data) {
200        oTable.fnDraw();
201        jQuery("#applyActionLoading").hide();
202        jQuery("#applyActionBlock .infos").show();
203
204        if (action == 'delete') {
205          var allUsers_new = [];
206          for(var i in allUsers)
207          {
208            if (selection.indexOf(allUsers[i]) == -1) {
209              allUsers_new.push(allUsers[i]);
210            }
211          }
212          allUsers = allUsers_new;
213          console.log('allUsers_new.length = '+allUsers_new.length);
214          selection = [];
215          checkSelection();
216        }
217      },
218      error:function(XMLHttpRequest, textStatus, errorThrows) {
219        jQuery("#applyActionLoading").hide();
220      }
221    });
222
223    return false;
224  });
225
226});
227{/literal}{/footer_script}
228
229{literal}
230<style>
231.dataTables_wrapper, .dataTables_info {clear:none;}
232table.dataTable {clear:right;padding-top:10px;}
233.bulkAction {margin-top:10px;}
234.actionButtons {margin-left:0;}
235#applyActionBlock .infos {background-image:none; padding:2px 5px; margin:0;border-radius:5px;}
236</style>
237{/literal}
238
239<div class="titrePage">
240  <h2>{'User list'|@translate}</h2>
241</div>
242
243<form style="display:none" class="filter" method="post" name="add_user" action="{$F_ADD_ACTION}">
244  <fieldset>
245    <legend>{'Add a user'|@translate}</legend>
246    <label>{'Username'|@translate} <input type="text" name="login" maxlength="50" size="20"></label>
247    {if $Double_Password}
248                <label>{'Password'|@translate} <input type="password" name="password"></label>
249                <label>{'Confirm Password'|@translate} <input type="password" name="password_conf" id="password_conf"></label>
250                {else}
251                <label>{'Password'|@translate} <input type="text" name="password"></label>
252                {/if}
253                <label>{'Email address'|@translate} <input type="text" name="email"></label>
254    <label>{'Send connection settings by email'|@translate} <input type="checkbox" name="send_password_by_mail" value="1" checked="checked"></label>
255    <label>&nbsp; <input class="submit" type="submit" name="submit_add" value="{'Submit'|@translate}"></label>
256  </fieldset>
257</form>
258
259<form method="post" name="preferences" action="">
260
261<table id="userList">
262  <thead>
263    <tr>
264      <th>id</th>
265      <th>{'Username'|@translate}</th>
266      <th>{'Status'|@translate}</th>
267      <th>{'Email address'|@translate}</th>
268    </tr>
269  </thead>
270</table>
271
272<div style="clear:right"></div>
273
274<p class="checkActions">
275  {'Select:'|@translate}
276  <a href="#" id="selectAll">{'All'|@translate}</a>,
277  <a href="#" id="selectNone">{'None'|@translate}</a>,
278  <a href="#" id="selectInvert">{'Invert'|@translate}</a>
279
280  <span id="selectedMessage"></span>
281</p>
282
283<fieldset id="action">
284  <legend>{'Action'|@translate}</legend>
285
286  <div id="forbidAction"{if count($selection) != 0} style="display:none"{/if}>{'No user selected, no action possible.'|@translate}</div>
287  <div id="permitAction"{if count($selection) == 0} style="display:none"{/if}>
288
289    <select name="selectAction">
290      <option value="-1">{'Choose an action'|@translate}</option>
291      <option disabled="disabled">------------------</option>
292      <option value="delete" class="icon-trash">{'Delete selected users'|@translate}</option>
293      <option value="status">{'Status'|@translate}</option>
294      <option value="group_associate">{'associate to group'|translate}</option>
295      <option value="group_dissociate">{'dissociate from group'|@translate}</option>
296      <option value="enabled_high">{'High definition enabled'|@translate}</option>
297      <option value="level">{'Privacy level'|@translate}</option>
298      <option value="nb_image_page">{'Number of photos per page'|@translate}</option>
299      <option value="theme">{'Interface theme'|@translate}</option>
300      <option value="language">{'Language'|@translate}</option>
301      <option value="recent_period">{'Recent period'|@translate}</option>
302      <option value="expand">{'Expand all albums'|@translate}</option>
303{if $ACTIVATE_COMMENTS}
304      <option value="show_nb_comments">{'Show number of comments'|@translate}</option>
305{/if}
306      <option value="show_nb_hits">{'Show number of hits'|@translate}</option>
307    </select>
308
309    {* delete *}
310    <div id="action_delete" class="bulkAction">
311      <p><label><input type="checkbox" name="confirm_deletion" value="1"> {'Are you sure?'|@translate}</label></p>
312    </div>
313
314    {* status *}
315    <div id="action_status" class="bulkAction">
316      <select name="status">
317        {html_options options=$pref_status_options selected=$pref_status_selected}
318      </select>
319    </div>
320
321    {* group_associate *}
322    <div id="action_group_associate" class="bulkAction">
323      {html_options name=associate options=$association_options selected=$associate_selected}
324    </div>
325
326    {* group_dissociate *}
327    <div id="action_group_dissociate" class="bulkAction">
328      {html_options name=dissociate options=$association_options selected=$dissociate_selected}
329    </div>
330
331    {* enabled_high *}
332    <div id="action_enabled_high" class="bulkAction">
333      <label><input type="radio" name="enabled_high" value="true">{'Yes'|@translate}</label>
334      <label><input type="radio" name="enabled_high" value="false">{'No'|@translate}</label>
335    </div>
336
337    {* level *}
338    <div id="action_level" class="bulkAction">
339      <select name="level" size="1">
340        {html_options options=$level_options selected=$level_selected}
341      </select>
342    </div>
343
344    {* nb_image_page *}
345    <div id="action_nb_image_page" class="bulkAction">
346      <input size="4" maxlength="3" type="text" name="nb_image_page" value="{$NB_IMAGE_PAGE}">
347    </div>
348
349    {* theme *}
350    <div id="action_theme" class="bulkAction">
351      <select name="theme" size="1">
352        {html_options options=$theme_options selected=$theme_selected}
353      </select>
354    </div>
355
356    {* language *}
357    <div id="action_language" class="bulkAction">
358      <select name="language" size="1">
359        {html_options options=$language_options selected=$language_selected}
360      </select>
361    </div>
362
363    {* recent_period *}
364    <div id="action_recent_period" class="bulkAction">
365      <input type="text" size="3" maxlength="2" name="recent_period" value="{$RECENT_PERIOD}">
366    </div>
367
368    {* expand *}
369    <div id="action_expand" class="bulkAction">
370      <label><input type="radio" name="expand" value="true">{'Yes'|@translate}</label>
371      <label><input type="radio" name="expand" value="false">{'No'|@translate}</label>
372    </div>
373
374    {* show_nb_comments *}
375    <div id="action_show_nb_comments" class="bulkAction">
376      <label><input type="radio" name="show_nb_comments" value="true">{'Yes'|@translate}</label>
377      <label><input type="radio" name="show_nb_comments" value="false">{'No'|@translate}</label>
378    </div>
379
380    {* show_nb_hits *}
381    <div id="action_show_nb_hits" class="bulkAction">
382      <label><input type="radio" name="show_nb_hits" value="true">{'Yes'|@translate}</label>
383      <label><input type="radio" name="show_nb_hits" value="false">{'No'|@translate}</label>
384    </div>
385
386    <p id="applyActionBlock" style="display:none" class="actionButtons">
387      <input id="applyAction" class="submit" type="submit" value="{'Apply action'|@translate}" name="submit"> <span id="applyOnDetails"></span>
388      <span id="applyActionLoading" style="display:none"><img src="themes/default/images/ajax-loader-small.gif"></span>
389      <span class="infos" style="display:none">&#x2714; Users modified</span>
390    </p>
391
392  </div> {* #permitAction *}
393</fieldset>
394
395</form>
Note: See TracBrowser for help on using the repository browser.