Add pagination controls with proper state handling in BansComponent

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.

frontend/src/app/bans/bans.component.html

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

frontend/src/app/bans/bans.component.ts

@@ -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.floor(this.historyCount.bans / this.PAGE_SIZE) - 1;
-        return Math.ceil(this.historyCount.bans / 10);
       case 'mute':
-        // @ts-ignore
+        return Math.floor(this.historyCount.mutes / this.PAGE_SIZE) - 1;
-        return Math.ceil(this.historyCount.mutes / 10);
       case 'kick':
-        // @ts-ignore
+        return Math.floor(this.historyCount.kicks / this.PAGE_SIZE) - 1;
-        return Math.ceil(this.historyCount.kicks / 10);
       case 'warn':
-        // @ts-ignore
+        return Math.floor(this.historyCount.warnings / this.PAGE_SIZE) - 1;
-        return Math.ceil(this.historyCount.warnings / 10);
       default:
         return 0;
     }
   }
+
+  public buttonActive(compare: number): boolean {
+    return this.page !== compare;
+
+  }
 }