add pagination buttons to users

This commit is contained in:
Elijah R 2024-04-09 20:10:38 -04:00
parent 7d3cbad609
commit 7a84482747
3 changed files with 29 additions and 4 deletions

View file

@ -1,3 +1,7 @@
#adminView, #adminLoginForm, #navbarNav {
display: none;
}
#userPageControl {
display: flex;
}

View file

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

View file

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