Use Bootstrap's pagination for user accounts page

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
This commit is contained in:
Maurício Meneghini Fauth 2020-12-29 17:59:59 -03:00
parent 1b50930ac2
commit 4ad6e2ea4e
No known key found for this signature in database
GPG Key ID: 6A16FD38AFC89CC8
12 changed files with 88 additions and 132 deletions

View File

@ -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')) {

View File

@ -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,
]);
}

View File

@ -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>

View File

@ -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&amp;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&amp;initial=-'
. '&amp;lang=en">-</a>',
$actual
);
$this->assertStringContainsString(
'<a class="ajax" href="index.php?route=/server/privileges&amp;initial=%22'
. '&amp;lang=en">"</a>',
'<a class="page-link" href="index.php?route=/server/privileges&amp;initial=%22'
. '&amp;lang=en">&quot;</a>',
$actual
);
$this->assertStringContainsString('Show all', $actual);

View File

@ -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;

View File

@ -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;
}

View File

@ -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;

View File

@ -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;

View File

@ -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;

View 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;
}
}

View File

@ -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;

View File

@ -18,6 +18,7 @@
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "alert";
@import "list-group";
@import "modal";