collabvm/collabvm-auth-admin-panel
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add pagination buttons to users

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/css/style.css
View file

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

12
src/html/index.html
View file

@ -90,18 +90,22 @@
<tbody id="usersTableBody"></tbody> <tbody id="usersTableBody"></tbody>
</table> </table>
<div class="row"> <div class="row">
<div class="col-3"> <div class="col-3" id="userPageControl">
<div class="input-group"> <span class="input-group me-2">
<span class="input-group-text">Page</span> <span class="input-group-text">Page</span>
<input type="number" class="form-control" id="usersPage" name="page" value="1" min="1" max="1" required/> <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> <span class="input-group-text">of&nbsp;<span id="usersPageCount">1</span></span>
<button type="submit" class="btn btn-primary">Go</button> <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>
<div class="col-7"><!-- yeah this is lazy whatever --></div> <div class="col-7"><!-- yeah this is lazy whatever --></div>
<div class="col-2"> <div class="col-2">
<div class="input-group"> <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> <span class="input-group-text">Per Page</span>
</div> </div>
</div> </div>

17
src/ts/main.ts
View file

@ -25,6 +25,8 @@ const elements = {
usersPage: document.getElementById('usersPage') as HTMLInputElement, usersPage: document.getElementById('usersPage') as HTMLInputElement,
usersPerPage: document.getElementById('usersPerPage') as HTMLInputElement, usersPerPage: document.getElementById('usersPerPage') as HTMLInputElement,
usersPageCount: document.getElementById('usersPageCount') as HTMLSpanElement, usersPageCount: document.getElementById('usersPageCount') as HTMLSpanElement,
usersPrevPage: document.getElementById('usersPrevPage') as HTMLButtonElement,
usersNextPage: document.getElementById('usersNextPage') as HTMLButtonElement,
usersTableBody: document.getElementById('usersTableBody') as HTMLTableSectionElement, usersTableBody: document.getElementById('usersTableBody') as HTMLTableSectionElement,
usersNavLink: document.getElementById('usersNavLink') as HTMLAnchorElement, usersNavLink: document.getElementById('usersNavLink') as HTMLAnchorElement,
@ -105,6 +107,10 @@ elements.searchUsersForm.addEventListener('submit', async e => {
elements.usersTableBody.innerHTML = ""; elements.usersTableBody.innerHTML = "";
elements.usersPageCount.innerText = data.totalPageCount!.toString(10); elements.usersPageCount.innerText = data.totalPageCount!.toString(10);
elements.usersPage.max = 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 => { data.users?.forEach(user => {
var row = elements.usersTableBody.insertRow(); var row = elements.usersTableBody.insertRow();
var cell = row.insertCell(); var cell = row.insertCell();
@ -162,6 +168,16 @@ elements.searchUsersForm.addEventListener('submit', async e => {
}); });
return false; 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 => { elements.searchBotsForm.addEventListener('submit', async e => {
e.preventDefault(); e.preventDefault();
@ -288,6 +304,7 @@ function loadLoginForm() {
} }
function loadUsersView() { function loadUsersView() {
elements.usersPage.value = "1";
elements.searchUsersForm.requestSubmit(); elements.searchUsersForm.requestSubmit();
elements.usersNavLink.classList.add('active'); elements.usersNavLink.classList.add('active');
elements.botsNavLink.classList.remove('active'); elements.botsNavLink.classList.remove('active');