diff options
Diffstat (limited to 'admin/themes/default')
| -rw-r--r-- | admin/themes/default/js/common.js | 50 | ||||
| -rw-r--r-- | admin/themes/default/template/user_list.tpl | 583 |
2 files changed, 394 insertions, 239 deletions
diff --git a/admin/themes/default/js/common.js b/admin/themes/default/js/common.js new file mode 100644 index 000000000..d0e460bd8 --- /dev/null +++ b/admin/themes/default/js/common.js @@ -0,0 +1,50 @@ +function array_delete(arr, item) { + var i = arr.indexOf(item); + if (i != -1) arr.splice(i, 1); +} + +function sprintf() { + var i = 0, a, f = arguments[i++], o = [], m, p, c, x, s = ''; + while (f) { + if (m = /^[^\x25]+/.exec(f)) { + o.push(m[0]); + } + else if (m = /^\x25{2}/.exec(f)) { + o.push('%'); + } + else if (m = /^\x25(?:(\d+)\$)?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-fosuxX])/.exec(f)) { + if (((a = arguments[m[1] || i++]) == null) || (a == undefined)) { + throw('Too few arguments.'); + } + if (/[^s]/.test(m[7]) && (typeof(a) != 'number')) { + throw('Expecting number but found ' + typeof(a)); + } + + switch (m[7]) { + case 'b': a = a.toString(2); break; + case 'c': a = String.fromCharCode(a); break; + case 'd': a = parseInt(a); break; + case 'e': a = m[6] ? a.toExponential(m[6]) : a.toExponential(); break; + case 'f': a = m[6] ? parseFloat(a).toFixed(m[6]) : parseFloat(a); break; + case 'o': a = a.toString(8); break; + case 's': a = ((a = String(a)) && m[6] ? a.substring(0, m[6]) : a); break; + case 'u': a = Math.abs(a); break; + case 'x': a = a.toString(16); break; + case 'X': a = a.toString(16).toUpperCase(); break; + } + + a = (/[def]/.test(m[7]) && m[2] && a >= 0 ? '+'+ a : a); + c = m[3] ? m[3] == '0' ? '0' : m[3].charAt(1) : ' '; + x = m[5] - String(a).length - s.length; + p = m[5] ? str_repeat(c, x) : ''; + o.push(s + (m[4] ? a + p : p + a)); + } + else { + throw('Huh ?!'); + } + + f = f.substring(m[0].length); + } + + return o.join(''); +}
\ No newline at end of file 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> - - <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> </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">✔ 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> |