Use Bootstrap's pagination for user accounts page
Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
This commit is contained in:
parent
1b50930ac2
commit
4ad6e2ea4e
@ -54,7 +54,6 @@ AJAX.registerTeardown('server/privileges.js', function () {
|
||||
$(document).off('click', 'a.edit_user_group_anchor.ajax');
|
||||
$(document).off('click', 'button.mult_submit[value=export]');
|
||||
$(document).off('click', 'a.export_user_anchor.ajax');
|
||||
$(document).off('click', '#initials_table a.ajax');
|
||||
$('#dropUsersDbCheckbox').off('click');
|
||||
$(document).off('click', '.checkall_box');
|
||||
$(document).off('change', '#checkbox_SSL_priv');
|
||||
@ -166,9 +165,13 @@ AJAX.registerOnload('server/privileges.js', function () {
|
||||
var thisUserInitial = $(this).find('input:checkbox').val().charAt(0).toUpperCase();
|
||||
$(this).remove();
|
||||
|
||||
// If this is the last user with this_user_initial, remove the link from #initials_table
|
||||
// If this is the last user with thisUserInitial, remove the link from #userAccountsPagination
|
||||
if ($('#userRightsTable').find('input:checkbox[value^="' + thisUserInitial + '"], input:checkbox[value^="' + thisUserInitial.toLowerCase() + '"]').length === 0) {
|
||||
$('#initials_table').find('td > a:contains(' + thisUserInitial + ')').parent('td').html(thisUserInitial);
|
||||
$('#userAccountsPagination')
|
||||
.find('.page-item > .page-link:contains(' + thisUserInitial + ')')
|
||||
.parent('.page-item')
|
||||
.addClass('disabled')
|
||||
.html('<a class="page-link" href="#" tabindex="-1" aria-disabled="true">' + thisUserInitial + '</a>');
|
||||
}
|
||||
|
||||
// Re-check the classes of each row
|
||||
@ -339,40 +342,6 @@ AJAX.registerOnload('server/privileges.js', function () {
|
||||
}); // end $.get
|
||||
}); // end export privileges
|
||||
|
||||
/**
|
||||
* AJAX handler to Paginate the Users Table
|
||||
*
|
||||
* @see Functions.ajaxShowMessage()
|
||||
* @name paginate_users_table_click
|
||||
* @memberOf jQuery
|
||||
*/
|
||||
$(document).on('click', '#initials_table a.ajax', function (event) {
|
||||
event.preventDefault();
|
||||
var $msgbox = Functions.ajaxShowMessage();
|
||||
$.get($(this).attr('href'), { 'ajax_request' : true }, function (data) {
|
||||
if (typeof data !== 'undefined' && data.success === true) {
|
||||
Functions.ajaxRemoveMessage($msgbox);
|
||||
// This form is not on screen when first entering Privileges
|
||||
// if there are more than 50 users
|
||||
$('.alert-primary').remove();
|
||||
$('#usersForm').hide('medium').remove();
|
||||
$('#fieldset_add_user').hide('medium').remove();
|
||||
$('#initials_table')
|
||||
.prop('id', 'initials_table_old')
|
||||
.after(data.message).show('medium')
|
||||
.siblings('h2').not($('#initials_table')
|
||||
.prop('id', 'initials_table_old')
|
||||
.after(data.message).show('medium')
|
||||
.siblings('h2').first())
|
||||
.remove();
|
||||
// prevent double initials table
|
||||
$('#initials_table_old').remove();
|
||||
} else {
|
||||
Functions.ajaxShowMessage(data.error, false);
|
||||
}
|
||||
}); // end $.get
|
||||
}); // end of the paginate users table
|
||||
|
||||
$(document).on('change', 'input[name="ssl_type"]', function () {
|
||||
var $div = $('#specified_div');
|
||||
if ($('#ssl_type_SPECIFIED').is(':checked')) {
|
||||
|
||||
@ -2229,6 +2229,7 @@ class Privileges
|
||||
return $this->template->render('server/privileges/initials_row', [
|
||||
'array_initials' => $array_initials,
|
||||
'initial' => $_GET['initial'] ?? null,
|
||||
'viewing_mode' => $_GET['viewing_mode'] ?? null,
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@ -1,24 +1,20 @@
|
||||
<table class="pma-table" id="initials_table" cellspacing="5">
|
||||
<tr>
|
||||
{% for tmp_initial, initial_was_found in array_initials %}
|
||||
{% if tmp_initial is not same as(null) %}
|
||||
{% if initial_was_found %}
|
||||
<td>
|
||||
<a class="ajax
|
||||
{{- initial is defined and initial is same as(tmp_initial) ? ' active' -}}
|
||||
" href="{{ url('/server/privileges', {'initial': tmp_initial}) }}">
|
||||
{{- tmp_initial|raw -}}
|
||||
</a>
|
||||
</td>
|
||||
{% else %}
|
||||
<td>{{ tmp_initial|raw }}</td>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<td>
|
||||
<a href="{{ url('/server/privileges', {'showall': 1}) }}" class="text-nowrap">
|
||||
{% trans 'Show all' %}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<nav aria-label="{% trans 'Pagination of user accounts' %}">
|
||||
<ul id="userAccountsPagination" class="pagination">
|
||||
{% for tmp_initial, initial_was_found in array_initials %}
|
||||
{% if tmp_initial is not same as(null) %}
|
||||
{% if initial_was_found %}
|
||||
<li class="page-item{{ initial is same as(tmp_initial) ? ' active' }}"{{ initial is same as(tmp_initial) ? ' aria-current="page"' }}>
|
||||
<a class="page-link" href="{{ url('/server/privileges', {'viewing_mode': viewing_mode, 'initial': tmp_initial}) }}">{{ tmp_initial }}</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">{{ tmp_initial }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<li class="page-item">
|
||||
<a class="page-link text-nowrap" href="{{ url('/server/privileges', {'viewing_mode': viewing_mode, 'showall': true}) }}">{% trans 'Show all' %}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@ -1984,16 +1984,22 @@ class PrivilegesTest extends AbstractTestCase
|
||||
->will($this->onConsecutiveCalls(['-']));
|
||||
$this->serverPrivileges->dbi = $GLOBALS['dbi'];
|
||||
$actual = $this->serverPrivileges->getHtmlForInitials(['"' => true]);
|
||||
$this->assertStringContainsString('<td>A</td>', $actual);
|
||||
$this->assertStringContainsString('<td>Z</td>', $actual);
|
||||
$this->assertStringContainsString(
|
||||
'<a class="ajax" href="index.php?route=/server/privileges&initial=-'
|
||||
'<a class="page-link" href="#" tabindex="-1" aria-disabled="true">A</a>',
|
||||
$actual
|
||||
);
|
||||
$this->assertStringContainsString(
|
||||
'<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Z</a>',
|
||||
$actual
|
||||
);
|
||||
$this->assertStringContainsString(
|
||||
'<a class="page-link" href="index.php?route=/server/privileges&initial=-'
|
||||
. '&lang=en">-</a>',
|
||||
$actual
|
||||
);
|
||||
$this->assertStringContainsString(
|
||||
'<a class="ajax" href="index.php?route=/server/privileges&initial=%22'
|
||||
. '&lang=en">"</a>',
|
||||
'<a class="page-link" href="index.php?route=/server/privileges&initial=%22'
|
||||
. '&lang=en">"</a>',
|
||||
$actual
|
||||
);
|
||||
$this->assertStringContainsString('Show all', $actual);
|
||||
|
||||
@ -35,31 +35,6 @@ button.mult_submit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#initials_table {
|
||||
background: #f3f3f3;
|
||||
border: 1px solid #aaa;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
td {
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
a {
|
||||
border: 1px solid #aaa;
|
||||
background-color: #fff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 5px;
|
||||
background-image: linear-gradient(#fff, #e0e0e0);
|
||||
|
||||
&.active {
|
||||
border: 1px solid #666;
|
||||
box-shadow: 0 0 2px #999;
|
||||
background: linear-gradient(#bbb, #fff);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pma-table th {
|
||||
font-weight: bold;
|
||||
color: $th-color;
|
||||
|
||||
@ -184,22 +184,6 @@ button.mult_submit {
|
||||
color: #235a81;
|
||||
}
|
||||
|
||||
#initials_table {
|
||||
background: $th-background;
|
||||
border: 1px solid $border-color;
|
||||
margin-bottom: 10px;
|
||||
|
||||
td {
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
a {
|
||||
border: 1px solid $border-color;
|
||||
background: $body-bg;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
dfn:hover {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
@ -159,6 +159,10 @@ $link-decoration: none;
|
||||
$link-hover-color: $browse-pointer-color;
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
// Components
|
||||
|
||||
$border-radius: 0;
|
||||
|
||||
// Typography
|
||||
|
||||
$font-family-base: "Open Sans", "Segoe UI", sans-serif;
|
||||
@ -221,6 +225,15 @@ $navbar-light-hover-color: #333;
|
||||
$navbar-light-active-color: #666;
|
||||
$navbar-light-disabled-color: #666;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-bg: $th-background;
|
||||
$pagination-hover-bg: $browse-marker-background;
|
||||
$pagination-border-color: $border-color;
|
||||
$pagination-hover-border-color: $border-color;
|
||||
$pagination-active-border-color: $border-color;
|
||||
$pagination-disabled-border-color: $border-color;
|
||||
|
||||
// Card
|
||||
|
||||
$card-border-radius: 0;
|
||||
|
||||
@ -63,6 +63,10 @@ $link-decoration: none;
|
||||
$link-hover-color: #f00;
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
// Components
|
||||
|
||||
$border-radius: 0;
|
||||
|
||||
// Typography
|
||||
|
||||
$font-family-base: sans-serif;
|
||||
@ -107,6 +111,13 @@ $navbar-light-hover-color: #f00;
|
||||
$navbar-light-active-color: #00f;
|
||||
$navbar-light-disabled-color: #00f;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-border-color: $main-color;
|
||||
$pagination-hover-border-color: $main-color;
|
||||
$pagination-active-border-color: $main-color;
|
||||
$pagination-disabled-border-color: $main-color;
|
||||
|
||||
// Card
|
||||
|
||||
$card-border-radius: 0;
|
||||
|
||||
@ -42,31 +42,6 @@ button.mult_submit {
|
||||
color: #235a81;
|
||||
}
|
||||
|
||||
#initials_table {
|
||||
background: #f3f3f3;
|
||||
border: 1px solid #aaa;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
td {
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
a {
|
||||
border: 1px solid #aaa;
|
||||
background-color: #fff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 5px;
|
||||
background-image: linear-gradient(#fff, #e0e0e0);
|
||||
|
||||
&.active {
|
||||
border: 1px solid #666;
|
||||
box-shadow: 0 0 2px #999;
|
||||
background: linear-gradient(#bbb, #fff);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: normal;
|
||||
|
||||
|
||||
17
themes/pmahomme/scss/_pagination.scss
Normal file
17
themes/pmahomme/scss/_pagination.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.page-link {
|
||||
background-image: linear-gradient(#fff, #e0e0e0);
|
||||
|
||||
&:hover {
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&.active .page-link {
|
||||
background-image: linear-gradient(#bbb, #fff);
|
||||
}
|
||||
|
||||
&.disabled .page-link {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
@ -117,6 +117,14 @@ $navbar-light-hover-color: #235a81;
|
||||
$navbar-light-active-color: #235a81;
|
||||
$navbar-light-disabled-color: #235a81;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-active-color: #235a81;
|
||||
$pagination-border-color: #aaa;
|
||||
$pagination-hover-border-color: #aaa;
|
||||
$pagination-active-border-color: #aaa;
|
||||
$pagination-disabled-border-color: #aaa;
|
||||
|
||||
// Card
|
||||
|
||||
$card-border-color: #aaa;
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
@import "navbar";
|
||||
@import "card";
|
||||
@import "breadcrumb";
|
||||
@import "pagination";
|
||||
@import "alert";
|
||||
@import "list-group";
|
||||
@import "modal";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user