add pagination buttons to users
This commit is contained in:
parent
7d3cbad609
commit
7a84482747
3 changed files with 29 additions and 4 deletions
|
@ -1,3 +1,7 @@
|
|||
#adminView, #adminLoginForm, #navbarNav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#userPageControl {
|
||||
display: flex;
|
||||
}
|
|
@ -90,18 +90,22 @@
|
|||
<tbody id="usersTableBody"></tbody>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<div class="input-group">
|
||||
<div class="col-3" id="userPageControl">
|
||||
<span class="input-group me-2">
|
||||
<span class="input-group-text">Page</span>
|
||||
<input type="number" class="form-control" id="usersPage" name="page" value="1" min="1" max="1" required/>
|
||||
<span class="input-group-text">of <span id="usersPageCount">1</span></span>
|
||||
<button type="submit" class="btn btn-primary">Go</button>
|
||||
</div>
|
||||
</span>
|
||||
<span class="input-group">
|
||||
<button type="button" class="btn btn-primary" id="usersPrevPage">Previous</button>
|
||||
<button type="button" class="btn btn-primary" id="usersNextPage">Next</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-7"><!-- yeah this is lazy whatever --></div>
|
||||
<div class="col-2">
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="usersPerPage" name="perPage" value="10" min="1" max="100" required/>
|
||||
<input type="number" class="form-control" id="usersPerPage" name="perPage" value="10" min="1" required/>
|
||||
<span class="input-group-text">Per Page</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -25,6 +25,8 @@ const elements = {
|
|||
usersPage: document.getElementById('usersPage') as HTMLInputElement,
|
||||
usersPerPage: document.getElementById('usersPerPage') as HTMLInputElement,
|
||||
usersPageCount: document.getElementById('usersPageCount') as HTMLSpanElement,
|
||||
usersPrevPage: document.getElementById('usersPrevPage') as HTMLButtonElement,
|
||||
usersNextPage: document.getElementById('usersNextPage') as HTMLButtonElement,
|
||||
usersTableBody: document.getElementById('usersTableBody') as HTMLTableSectionElement,
|
||||
|
||||
usersNavLink: document.getElementById('usersNavLink') as HTMLAnchorElement,
|
||||
|
@ -105,6 +107,10 @@ elements.searchUsersForm.addEventListener('submit', async e => {
|
|||
elements.usersTableBody.innerHTML = "";
|
||||
elements.usersPageCount.innerText = data.totalPageCount!.toString(10);
|
||||
elements.usersPage.max = data.totalPageCount!.toString(10);
|
||||
if (page == data.totalPageCount) elements.usersNextPage.disabled = true;
|
||||
else elements.usersNextPage.disabled = false;
|
||||
if (page == 1) elements.usersPrevPage.disabled = true;
|
||||
else elements.usersPrevPage.disabled = false;
|
||||
data.users?.forEach(user => {
|
||||
var row = elements.usersTableBody.insertRow();
|
||||
var cell = row.insertCell();
|
||||
|
@ -162,6 +168,16 @@ elements.searchUsersForm.addEventListener('submit', async e => {
|
|||
});
|
||||
return false;
|
||||
});
|
||||
elements.usersNextPage.addEventListener('click', async e => {
|
||||
if (parseInt(elements.usersPage.value) >= parseInt(elements.usersPage.max)) return false;
|
||||
elements.usersPage.value = (parseInt(elements.usersPage.value) + 1).toString(10);
|
||||
elements.searchUsersForm.requestSubmit();
|
||||
});
|
||||
elements.usersPrevPage.addEventListener('click', async e => {
|
||||
if (parseInt(elements.usersPage.value) <= 1) return false;
|
||||
elements.usersPage.value = (parseInt(elements.usersPage.value) - 1).toString(10);
|
||||
elements.searchUsersForm.requestSubmit();
|
||||
});
|
||||
|
||||
elements.searchBotsForm.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
|
@ -288,6 +304,7 @@ function loadLoginForm() {
|
|||
}
|
||||
|
||||
function loadUsersView() {
|
||||
elements.usersPage.value = "1";
|
||||
elements.searchUsersForm.requestSubmit();
|
||||
elements.usersNavLink.classList.add('active');
|
||||
elements.botsNavLink.classList.remove('active');
|
||||
|
|
Loading…
Reference in a new issue