feature 1668, in progress: redesign user manager (jQuery datatables, AJAX calls)

git-svn-id: http://piwigo.org/svn/trunk@25194 68402e56-0260-453c-a942-63ccdbb3a9ee

1 files changed, 344 insertions, 239 deletions

diff --git a/admin/themes/default/template/user_list.tpl b/admin/themes/default/template/user_list.tpl
index 5bb3f18ed..911bfc978 100644
--- a/admin/themes/default/template/user_list.tpl
+++ b/admin/themes/default/template/user_list.tpl
@@ -1,8 +1,246 @@
+{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
+
+{combine_script id='jquery.dataTables' load='footer' path='themes/default/js/plugins/jquery.dataTables.js'}
+{combine_css path="themes/default/js/plugins/datatables/css/jquery.dataTables.css"}
+
+{footer_script}
+var selectedMessage_pattern = "{'%d of %d photos selected'|@translate}";
+var selectedMessage_none = "{'No photo selected, %d photos in current set'|@translate}";
+var selectedMessage_all = "{'All %d photos are selected'|@translate}";
+var applyOnDetails_pattern = "{'on the %d selected users'|@translate}";
+var missingConfirm = "{'You need to confirm deletion'|translate}";
+
+var allUsers = [{$all_users}];
+var selection = [{$selection}];
+{/footer_script}
+
+{footer_script}{literal}
+jQuery(document).ready(function() {
+  /* first column must be prefixed with the open/close icon */
+  var aoColumns = [
+    {
+      'bVisible':false
+    },
+    {
+      "mRender": function(data, type, full) {
+        return '<label><input type="checkbox" data-user_id="'+full[0]+'"> '+data+'</label>';
+      }
+    }
+  ];
+
+  for (i=2; i<jQuery("#userList thead tr th").length; i++) {
+    aoColumns.push(null);
+  }
+
+  var oTable = jQuery('#userList').dataTable({
+    "iDisplayLength": 10,
+    "bDeferRender": true,
+    "bProcessing": true,
+    "bServerSide": true,
+    "sAjaxSource": "admin/user_list_backend.php",
+    "fnDrawCallback": function( oSettings ) {
+      jQuery("#userList input[type=checkbox]").each(function() {
+        var user_id = jQuery(this).data("user_id");
+        jQuery(this).prop('checked', (selection.indexOf(user_id) != -1));
+      });
+    },
+    "aoColumns": aoColumns
+  });
+
+  /**
+   * Selection management
+   */
+  function checkSelection() {
+    if (selection.length > 0) {
+      jQuery("#forbidAction").hide();
+      jQuery("#permitAction").show();
+
+      jQuery("#applyOnDetails").text(
+        sprintf(
+          applyOnDetails_pattern,
+          selection.length
+        )
+      );
+
+      if (selection.length == allUsers.length) {
+        jQuery("#selectedMessage").text(
+          sprintf(
+            selectedMessage_all,
+            allUsers.length
+          )
+        );
+      }
+      else {
+        jQuery("#selectedMessage").text(
+          sprintf(
+            selectedMessage_pattern,
+            selection.length,
+            allUsers.length
+          )
+        );
+      }
+    }
+    else {
+      jQuery("#forbidAction").show();
+      jQuery("#permitAction").hide();
+
+      jQuery("#selectedMessage").text(
+        sprintf(
+          selectedMessage_none,
+          allUsers.length
+        )
+      );
+    }
+
+    jQuery("#applyActionBlock .infos").hide();
+  }
+
+  jQuery(document).on('change', '#userList input[type=checkbox]',  function() {
+    var user_id = jQuery(this).data("user_id");
+
+    array_delete(selection, user_id);
+
+    if (jQuery(this).is(":checked")) {
+      selection.push(user_id);
+    }
+
+    checkSelection();
+  });
+
+  jQuery("#selectAll").click(function () {
+    selection = allUsers;
+    jQuery("#userList input[type=checkbox]").prop('checked', true);
+    checkSelection();
+    return false;
+  });
+
+  jQuery("#selectNone").click(function () {
+    selection = [];
+    jQuery("#userList input[type=checkbox]").prop('checked', false);
+    checkSelection();
+    return false;
+  });
+
+  jQuery("#selectInvert").click(function () {
+    var newSelection = [];
+    for(var i in allUsers)
+    {
+      if (selection.indexOf(allUsers[i]) == -1) {
+        newSelection.push(allUsers[i]);
+      }
+    }
+    selection = newSelection;
+
+    jQuery("#userList input[type=checkbox]").each(function() {
+      var user_id = jQuery(this).data("user_id");
+      jQuery(this).prop('checked', (selection.indexOf(user_id) != -1));
+    });
+
+    checkSelection();
+    return false;
+  });
+
+  /**
+   * Action management
+   */
+  jQuery("[id^=action_]").hide();
+  
+  jQuery("select[name=selectAction]").change(function () {
+    jQuery("#applyActionBlock .infos").hide();
+
+    jQuery("[id^=action_]").hide();
+
+    jQuery("#action_"+$(this).prop("value")).show();
+  
+    if (jQuery(this).val() != -1) {
+      jQuery("#applyActionBlock").show();
+    }
+    else {
+      jQuery("#applyActionBlock").hide();
+    }
+  });
+
+  jQuery("#permitAction input, #permitAction select").click(function() {
+    jQuery("#applyActionBlock .infos").hide();
+  });
+
+  jQuery("#applyAction").click(function() {
+    var action = jQuery("select[name=selectAction]").prop("value");
+    var method = null;
+    var data = {
+      user_id: selection
+    };
+
+    switch (action) {
+      case 'delete':
+        if (!jQuery("input[name=confirm_deletion]").is(':checked')) {
+          alert(missingConfirm);
+          return false;
+        }
+        method = 'pwg.users.delete';
+        break;
+      case 'group_associate':
+        method = 'pwg.groups.addUser';
+        data.group_id = jQuery("select[name=associate]").prop("value");
+        break;
+      case 'group_dissociate':
+        method = 'pwg.groups.deleteUser';
+        data.group_id = jQuery("select[name=dissociate]").prop("value");
+        break;
+    }
+
+    jQuery.ajax({
+      url: "ws.php?format=json&method="+method,
+      type:"POST",
+      data: data,
+      beforeSend: function() {
+        jQuery("#applyActionLoading").show();
+      },
+      success:function(data) {
+        oTable.fnDraw();
+        jQuery("#applyActionLoading").hide();
+        jQuery("#applyActionBlock .infos").show();
+
+        if (action == 'delete') {
+          var allUsers_new = [];
+          for(var i in allUsers)
+          {
+            if (selection.indexOf(allUsers[i]) == -1) {
+              allUsers_new.push(allUsers[i]);
+            }
+          }
+          allUsers = allUsers_new;
+          console.log('allUsers_new.length = '+allUsers_new.length);
+          selection = [];
+          checkSelection();
+        }
+      },
+      error:function(XMLHttpRequest, textStatus, errorThrows) {
+        jQuery("#applyActionLoading").hide();
+      }
+    });
+
+    return false;
+  });
+
+});
+{/literal}{/footer_script}
+
+{literal}
+<style>
+.dataTables_wrapper, .dataTables_info {clear:none;}
+table.dataTable {clear:right;padding-top:10px;}
+.bulkAction {margin-top:10px;}
+.actionButtons {margin-left:0;}
+#applyActionBlock .infos {background-image:none; padding:2px 5px; margin:0;border-radius:5px;}
+</style>
+{/literal}
+
 <div class="titrePage">
   <h2>{'User list'|@translate}</h2>
 </div>
 
-<form class="filter" method="post" name="add_user" action="{$F_ADD_ACTION}">
+<form style="display:none" class="filter" method="post" name="add_user" action="{$F_ADD_ACTION}">
   <fieldset>
     <legend>{'Add a user'|@translate}</legend>
     <label>{'Username'|@translate} <input type="text" name="login" maxlength="50" size="20"></label>
@@ -18,273 +256,140 @@
   </fieldset>
 </form>
 
-<form class="filter" method="get" name="filter" action="{$F_FILTER_ACTION}">
-<fieldset>
-  <legend>{'Filter'|@translate}</legend>
-  <input type="hidden" name="page" value="user_list">
-
-  <label>{'Username'|@translate} <input type="text" name="username" value="{$F_USERNAME}"></label>
-
-  <label>
-  {'status'|@translate}
-  {html_options name=status options=$status_options selected=$status_selected}
-  </label>
-
-  <label>
-  {'Group'|@translate}
-  {html_options name=group options=$group_options selected=$group_selected}
-  </label>
-
-  <label>
-  {'Sort by'|@translate}
-  {html_options name=order_by options=$order_options selected=$order_selected}
-  </label>
-
-  <label>
-  {'Sort order'|@translate}
-  {html_options name=direction options=$direction_options selected=$direction_selected}
-  </label>
-
-  <label>
-  &nbsp;
-  <input class="submit" type="submit" value="{'Submit'|@translate}">
-  </label>
-
-</fieldset>
-
-</form>
-
 <form method="post" name="preferences" action="">
 
-{if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
-
-<table class="table2" width="97%">
+<table id="userList">
   <thead>
-    <tr class="throw">
-      <td>&nbsp;</td>
-      <td>{'Username'|@translate}</td>
-      <td>{'User status'|@translate}</td>
-      <td>{'Email address'|@translate}</td>
-      <td>{'Groups'|@translate}</td>
-      <td>{'Properties'|@translate}</td>
-      {if not empty($plugin_user_list_column_titles)}
-      {foreach from=$plugin_user_list_column_titles item=title}
-      <td>{$title}</td>
-      {/foreach}
-      {/if}
-      <td>{'Actions'|@translate}</td>
+    <tr>
+      <th>id</th>
+      <th>{'Username'|@translate}</th>
+      <th>{'Status'|@translate}</th>
+      <th>{'Email address'|@translate}</th>
     </tr>
   </thead>
-
-  {foreach from=$users item=user name=users_loop}
-  <tr class="{if $smarty.foreach.users_loop.index is odd}row1{else}row2{/if}">
-    <td><input type="checkbox" name="selection[]" value="{$user.ID}" {$user.CHECKED} id="selection-{$user.ID}"></td>
-    <td><label for="selection-{$user.ID}">{$user.USERNAME}</label></td>
-    <td>{$user.STATUS}</td>
-    <td>{$user.EMAIL}</td>
-    <td>{$user.GROUPS}</td>
-    <td>{$user.PROPERTIES}</td>
-    {foreach from=$user.plugin_columns item=data}
-    <td>{$data}</td>
-    {/foreach}
-    <td style="text-align:center;">
-      <a href="{$user.U_PERM}"><img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/permissions.png" style="border:none" alt="{'Permissions'|@translate}" title="{'Permissions'|@translate}"></a>
-      <a href="{$user.U_PROFILE}"><img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/edit_s.png" style="border:none" alt="{'Profile'|@translate}" title="{'Profile'|@translate}"></a>
-      {foreach from=$user.plugin_actions item=data}
-      {$data}
-      {/foreach}
-      </td>
-  </tr>
-  {/foreach}
 </table>
 
-{if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
-
-{* delete the selected users ? *}
-<fieldset>
-  <legend>{'Deletions'|@translate}</legend>
-  <label><input type="checkbox" name="confirm_deletion" value="1"> {'confirm'|@translate}</label>
-  <input class="submit" type="submit" value="{'Delete selected users'|@translate}" name="delete">
-</fieldset>
+<div style="clear:right"></div>
 
-<fieldset>
-  <legend>{'Status'|@translate}</legend>
+<p class="checkActions">
+  {'Select:'|@translate}
+  <a href="#" id="selectAll">{'All'|@translate}</a>,
+  <a href="#" id="selectNone">{'None'|@translate}</a>,
+  <a href="#" id="selectInvert">{'Invert'|@translate}</a>
 
-  <table>
-    <tr>
-      <td>{'Status'|@translate}</td>
-      <td>
-        <label><input type="radio" name="status_action" value="leave" checked="checked"> {'leave'|@translate}</label>
-        <label><input type="radio" name="status_action" value="set" id="status_action_set"> {'set to'|@translate}</label>
-        <select onchange="document.getElementById('status_action_set').checked = true;" name="status" size="1">
-          {html_options options=$pref_status_options selected=$pref_status_selected}
-        </select>
-      </td>
-    </tr>
-  </table>
-</fieldset>
-
-{* form to set properties for many users at once *}
-<fieldset>
-  <legend>{'Groups'|@translate}</legend>
+  <span id="selectedMessage"></span>
+</p>
 
-<table>
+<fieldset id="action">
+  <legend>{'Action'|@translate}</legend>
+
+  <div id="forbidAction"{if count($selection) != 0} style="display:none"{/if}>{'No user selected, no action possible.'|@translate}</div>
+  <div id="permitAction"{if count($selection) == 0} style="display:none"{/if}>
+
+    <select name="selectAction">
+      <option value="-1">{'Choose an action'|@translate}</option>
+      <option disabled="disabled">------------------</option>
+      <option value="delete" class="icon-trash">{'Delete selected users'|@translate}</option>
+      <option value="status">{'Status'|@translate}</option>
+      <option value="group_associate">{'associate to group'|translate}</option>
+      <option value="group_dissociate">{'dissociate from group'|@translate}</option>
+      <option value="enabled_high">{'High definition enabled'|@translate}</option>
+      <option value="level">{'Privacy level'|@translate}</option>
+      <option value="nb_image_page">{'Number of photos per page'|@translate}</option>
+      <option value="theme">{'Interface theme'|@translate}</option>
+      <option value="language">{'Language'|@translate}</option>
+      <option value="recent_period">{'Recent period'|@translate}</option>
+      <option value="expand">{'Expand all albums'|@translate}</option>
+{if $ACTIVATE_COMMENTS}
+      <option value="show_nb_comments">{'Show number of comments'|@translate}</option>
+{/if}
+      <option value="show_nb_hits">{'Show number of hits'|@translate}</option>
+    </select>
+
+    {* delete *}
+    <div id="action_delete" class="bulkAction">
+      <p><label><input type="checkbox" name="confirm_deletion" value="1"> {'Are you sure?'|@translate}</label></p>
+    </div>
+
+    {* status *}
+    <div id="action_status" class="bulkAction">
+      <select name="status">
+        {html_options options=$pref_status_options selected=$pref_status_selected}
+      </select>
+    </div>
 
-  <tr>
-    <td>{'associate to group'|@translate}</td>
-    <td>
+    {* group_associate *}
+    <div id="action_group_associate" class="bulkAction">
       {html_options name=associate options=$association_options selected=$associate_selected}
-    </td>
-  </tr>
+    </div>
 
-  <tr>
-    <td>{'dissociate from group'|@translate}</td>
-    <td>
+    {* group_dissociate *}
+    <div id="action_group_dissociate" class="bulkAction">
       {html_options name=dissociate options=$association_options selected=$dissociate_selected}
-    </td>
-  </tr>
-
-</table>
-
-</fieldset>
-
-{* Properties *}
-<fieldset>
-  <legend>{'Properties'|@translate}</legend>
-
-  <table>
-
-    <tr>
-      <td>{'High definition enabled'|@translate}</td>
-      <td>
-        <label><input type="radio" name="enabled_high" value="leave" checked="checked"> {'leave'|@translate}</label>
-        / {'set to'|@translate}
-        <label><input type="radio" name="enabled_high" value="true">{'Yes'|@translate}</label>
-        <label><input type="radio" name="enabled_high" value="false">{'No'|@translate}</label>
-      </td>
-    </tr>
-
-    <tr>
-      <td>{'Privacy level'|@translate}</td>
-      <td>
-	<label><input type="radio" name="level_action" value="leave" checked="checked">{'leave'|@translate}</label>
-	<label><input type="radio" name="level_action" value="set" id="level_action_set">{'set to'|@translate}</label>
-	<select onchange="document.getElementById('level_action_set').checked = true;" name="level" size="1">
-	  {html_options options=$level_options selected=$level_selected}
-	</select>
-      </td>
-    </tr>
-  </table>
+    </div>
+
+    {* enabled_high *}
+    <div id="action_enabled_high" class="bulkAction">
+      <label><input type="radio" name="enabled_high" value="true">{'Yes'|@translate}</label>
+      <label><input type="radio" name="enabled_high" value="false">{'No'|@translate}</label>
+    </div>
+
+    {* level *}
+    <div id="action_level" class="bulkAction">
+      <select name="level" size="1">
+        {html_options options=$level_options selected=$level_selected}
+      </select>
+    </div>
 
-</fieldset>
+    {* nb_image_page *}
+    <div id="action_nb_image_page" class="bulkAction">
+      <input size="4" maxlength="3" type="text" name="nb_image_page" value="{$NB_IMAGE_PAGE}">
+    </div>
 
-{* preference *}
-<fieldset>
-  <legend>{'Preferences'|@translate}</legend>
-
-<table>
-  <tr>
-    <td>{'Number of photos per page'|@translate}</td>
-    <td>
-      <label><input type="radio" name="nb_image_page_action" value="leave" checked="checked"> {'leave'|@translate}</label>
-      <label><input type="radio" name="nb_image_page_action" value="set" id="nb_image_page_action_set"> {'set to'|@translate}</label>
-      <input onmousedown="document.getElementById('nb_image_page_action_set').checked = true;"
-             size="4" maxlength="3" type="text" name="nb_image_page" value="{$NB_IMAGE_PAGE}">
-    </td>
-  </tr>
-
-  <tr>
-    <td>{'Interface theme'|@translate}</td>
-    <td>
-      <label><input type="radio" name="theme_action" value="leave" checked="checked"> {'leave'|@translate}</label>
-      <label><input type="radio" name="theme_action" value="set" id="theme_action_set"> {'set to'|@translate}</label>
-      <select onchange="document.getElementById('theme_action_set').checked = true;" name="theme" size="1">
+    {* theme *}
+    <div id="action_theme" class="bulkAction">
+      <select name="theme" size="1">
         {html_options options=$theme_options selected=$theme_selected}
       </select>
-    </td>
-  </tr>
-
-  <tr>
-    <td>{'Language'|@translate}</td>
-    <td>
-      <label><input type="radio" name="language_action" value="leave" checked="checked"> {'leave'|@translate}</label>
-      <label><input type="radio" name="language_action" value="set" id="language_action_set"> {'set to'|@translate}</label>
-      <select onchange="document.getElementById('language_action_set').checked = true;" name="language" size="1">
+    </div>
+
+    {* language *}
+    <div id="action_language" class="bulkAction">
+      <select name="language" size="1">
         {html_options options=$language_options selected=$language_selected}
       </select>
-    </td>
-  </tr>
-
-  <tr>
-    <td>{'Recent period'|@translate}</td>
-    <td>
-      <label><input type="radio" name="recent_period_action" value="leave" checked="checked"> {'leave'|@translate}</label>
-      <label><input type="radio" name="recent_period_action" value="set" id="recent_period_action_set"> {'set to'|@translate}</label>
-      <input onmousedown="document.getElementById('recent_period_action_set').checked = true;"
-             type="text" size="3" maxlength="2" name="recent_period" value="{$RECENT_PERIOD}">
-    </td>
-  </tr>
-
-  <tr>
-    <td>{'Expand all albums'|@translate}</td>
-    <td>
-      <label><input type="radio" name="expand" value="leave" checked="checked"> {'leave'|@translate}</label>
-      / {'set to'|@translate}
+    </div>
+
+    {* recent_period *}
+    <div id="action_recent_period" class="bulkAction">
+      <input type="text" size="3" maxlength="2" name="recent_period" value="{$RECENT_PERIOD}">
+    </div>
+
+    {* expand *}
+    <div id="action_expand" class="bulkAction">
       <label><input type="radio" name="expand" value="true">{'Yes'|@translate}</label>
       <label><input type="radio" name="expand" value="false">{'No'|@translate}</label>
-    </td>
-  </tr>
+    </div>
 
-{if $ACTIVATE_COMMENTS}
-  <tr>
-    <td>{'Show number of comments'|@translate}</td>
-    <td>
-      <label><input type="radio" name="show_nb_comments" value="leave" checked="checked"> {'leave'|@translate}</label>
-      / {'set to'|@translate}
+    {* show_nb_comments *}
+    <div id="action_show_nb_comments" class="bulkAction">
       <label><input type="radio" name="show_nb_comments" value="true">{'Yes'|@translate}</label>
       <label><input type="radio" name="show_nb_comments" value="false">{'No'|@translate}</label>
-    </td>
-  </tr>
-{/if}
+    </div>
 
-  <tr>
-    <td>{'Show number of hits'|@translate}</td>
-    <td>
-      <label><input type="radio" name="show_nb_hits" value="leave" checked="checked"> {'leave'|@translate}</label>
-      / {'set to'|@translate}
+    {* show_nb_hits *}
+    <div id="action_show_nb_hits" class="bulkAction">
       <label><input type="radio" name="show_nb_hits" value="true">{'Yes'|@translate}</label>
       <label><input type="radio" name="show_nb_hits" value="false">{'No'|@translate}</label>
-    </td>
-  </tr>
+    </div>
 
-</table>
+    <p id="applyActionBlock" style="display:none" class="actionButtons">
+      <input id="applyAction" class="submit" type="submit" value="{'Apply action'|@translate}" name="submit"> <span id="applyOnDetails"></span>
+      <span id="applyActionLoading" style="display:none"><img src="themes/default/images/ajax-loader-small.gif"></span>
+      <span class="infos" style="display:none">&#x2714; Users modified</span>
+    </p>
 
+  </div> {* #permitAction *}
 </fieldset>
 
-<p>
-  {'target'|@translate}
-  <label><input type="radio" name="target" value="all"> {'all'|@translate}</label>
-  <label><input type="radio" name="target" value="selection" checked="checked"> {'selection'|@translate}</label>
-</p>
-
-<p>
-  <input class="submit" type="submit" value="{'Submit'|@translate}" name="pref_submit">
-  <input class="submit" type="reset" value="{'Reset'|@translate}" name="pref_reset">
-</p>
-
-</form>
-
-<script type="text/javascript">// <![CDATA[{literal}
-jQuery("form:last").submit( function() {
-	if ( jQuery("input[name=target][value=selection]:checked", this).length > 0 )
-	if ( jQuery("input[name='selection[]']:checked", this).length == 0)
-	{
-		alert( {/literal}"{'Select at least one user'|@translate|escape:javascript}"{literal} );
-		return false;
-	}
-	return true;
-}
-);{/literal}
-// ]]>
-</script>
- 
+</form>