Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Add pagination controls with proper state handling in BansComponent

Browse Source 
Introduced "First", "Previous", "Next", and "Last page" buttons with state-dependent activations for improved navigation. Refactored pagination logic to utilize a constant PAGE_SIZE and adjusted calculations for max page determination. Ensured page transitions and state updates are accurate and consistent.
This commit is contained in:
Teriuihi 2025-04-12 17:41:44 +02:00
parent 81807b107c
commit 3ed5fcfc0f
2 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/app/bans/bans.component.html
View File

@ -50,6 +50,24 @@
<app-history [userType]="userType" [punishmentType]="punishmentType"
[page]="page" [searchTerm]="finalSearchTerm"></app-history>
</div>
<div>
<button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
(click)="setPage(0)">
First page
</button>
<button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
(click)="previousPage()">
Previous page
</button>
<button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())"
(click)="nextPage()">
Next page
</button>
<button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())"
(click)="setPage(getMaxPage())">
Last page
</button>
</div>
</div>
</section>
</main>

28
frontend/src/app/bans/bans.component.ts
View File

@ -20,6 +20,7 @@ import {FormsModule} from '@angular/forms';
})
export class BansComponent implements OnInit {
private PAGE_SIZE: number = 10;
public getCurrentButtonId(options: 'all' | 'ban' | 'mute' | 'kick' | 'warn') {
if (options == this.punishmentType) {
@ -97,20 +98,21 @@ export class BansComponent implements OnInit {
public changeHistoryPunishment(type: 'all' | 'ban' | 'mute' | 'kick' | 'warn') {
this.pushState();
this.punishmentType = type;
this.page = 0;
}
public nextPage() {
if (this.page === this.getMaxPage() - 1) {
if (this.page === this.getMaxPage()) {
return;
}
this.setPage(this.page++)
this.setPage(++this.page)
}
public previousPage() {
if (this.page === 0) {
return;
}
this.setPage(this.page--)
this.setPage(--this.page)
}
public setPage(page: number) {
@ -131,25 +133,25 @@ export class BansComponent implements OnInit {
}
public getMaxPage() {
// @ts-ignore
const all = this.historyCount.bans + this.historyCount.mutes + this.historyCount.warnings;
switch (this.punishmentType) {
case 'all':
return Math.ceil(all / 10);
return Math.floor(all / this.PAGE_SIZE) - 1;
case 'ban':
// @ts-ignore
return Math.ceil(this.historyCount.bans / 10);
return Math.floor(this.historyCount.bans / this.PAGE_SIZE) - 1;
case 'mute':
// @ts-ignore
return Math.ceil(this.historyCount.mutes / 10);
return Math.floor(this.historyCount.mutes / this.PAGE_SIZE) - 1;
case 'kick':
// @ts-ignore
return Math.ceil(this.historyCount.kicks / 10);
return Math.floor(this.historyCount.kicks / this.PAGE_SIZE) - 1;
case 'warn':
// @ts-ignore
return Math.ceil(this.historyCount.warnings / 10);
return Math.floor(this.historyCount.warnings / this.PAGE_SIZE) - 1;
default:
return 0;
}
}
public buttonActive(compare: number): boolean {
return this.page !== compare;
}
}