From 66d641b8251f5de5c15236b1a2100b1fbb1413c5 Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sat, 12 Apr 2025 01:35:40 +0200
Subject: [PATCH] Add search state persistence and pagination for bans history

Enhanced the bans component to retain search state using the History API. Updated the history component to support paginated and filtered data loading based on user input and search terms.
---
 frontend/src/app/bans/bans.component.html     |  5 ++-
 frontend/src/app/bans/bans.component.ts       | 37 ++++++++++++++++++-
 .../src/app/bans/history/history.component.ts | 27 +++++++++-----
 3 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/bans/bans.component.html b/frontend/src/app/bans/bans.component.html
index 1670f05..7e39d72 100644
--- a/frontend/src/app/bans/bans.component.html
+++ b/frontend/src/app/bans/bans.component.html
@@ -23,7 +23,7 @@
                    [(ngModel)]="searchTerm"
                    (input)="filterNames()"
             >
-            <button class="searchButton">Search</button>
+            <button class="searchButton" (click)="search()">Search</button>
             <div class="search-dropdown" *ngIf="filteredNames.length > 0 && searchTerm">
               <div
                 class="dropdown-item"
@@ -35,7 +35,8 @@
           </div>
         </div>
         <div class="historyTable">
-          <app-history [userType]="userType" [punishmentType]="punishmentType"></app-history>
+          <app-history [userType]="userType" [punishmentType]="punishmentType"
+                       [page]="page" [searchTerm]="finalSearchTerm"></app-history>
         </div>
       </div>
     </section>
diff --git a/frontend/src/app/bans/bans.component.ts b/frontend/src/app/bans/bans.component.ts
index 80fb23f..8ea0d8d 100644
--- a/frontend/src/app/bans/bans.component.ts
+++ b/frontend/src/app/bans/bans.component.ts
@@ -24,14 +24,36 @@ export class BansComponent implements OnInit {
 
   public userType: 'player' | 'staff' = "player";
   public punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = "all";
+  public page: number = 0;
   public names: string[] = [];
+  public finalSearchTerm: string = '';
   public searchTerm: string = '';
   public filteredNames: string[] = [];
 
   ngOnInit() {
     this.historyApi.getUserNames(this.userType, this.punishmentType).subscribe(names => {
       this.names = names;
-    })
+    });
+
+    const state = {
+      searchTerm: this.searchTerm,
+      page: this.page,
+      userType: this.userType,
+      punishmentType: this.punishmentType
+    };
+    const title = 'Altitude Bans';
+    const url = window.location.href;
+    window.history.pushState(state, title, url)
+
+    window.addEventListener('popstate', (event) => {
+      if (event.state && event.state.searchTerm !== undefined) {
+        this.searchTerm = event.state.searchTerm;
+        this.finalSearchTerm = event.state.searchTerm;
+        this.page = event.state.page;
+        this.userType = event.state.userType;
+        this.punishmentType = event.state.punishmentType;
+      }
+    });
   }
 
   public filterNames() {
@@ -49,4 +71,17 @@ export class BansComponent implements OnInit {
     this.searchTerm = name;
     this.filteredNames = [];
   }
+
+  public search() {
+    const state = {
+      searchTerm: this.searchTerm,
+      page: this.page,
+      userType: this.userType,
+      punishmentType: this.punishmentType
+    };
+    const title = 'Altitude Bans';
+    const url = window.location.href;
+    window.history.pushState(state, title, url);
+    this.finalSearchTerm = this.searchTerm;
+  }
 }
diff --git a/frontend/src/app/bans/history/history.component.ts b/frontend/src/app/bans/history/history.component.ts
index 171aece..a480cc3 100644
--- a/frontend/src/app/bans/history/history.component.ts
+++ b/frontend/src/app/bans/history/history.component.ts
@@ -1,6 +1,6 @@
 import {Component, Input, OnChanges, OnInit} from '@angular/core';
 import {BASE_PATH, HistoryService, PunishmentHistoryInner} from '../../../api';
-import {map, shareReplay} from 'rxjs';
+import {map, Observable, shareReplay} from 'rxjs';
 import {NgForOf, NgIf} from '@angular/common';
 import {CookieService} from 'ngx-cookie-service';
 
@@ -21,6 +21,10 @@ export class HistoryComponent implements OnInit, OnChanges {
 
   @Input() userType: 'player' | 'staff' = "player";
   @Input() punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = "all";
+  @Input() page: number = 0;
+  @Input() searchTerm: string = '';
+
+  private uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
 
   public history: PunishmentHistoryInner[] = []
 
@@ -36,16 +40,19 @@ export class HistoryComponent implements OnInit, OnChanges {
   }
 
   private reloadHistory(): void {
-    console.log('userType', this.userType);
-    console.log('punishmentType', this.punishmentType);
-    this.historyApi.getHistoryForAll(this.userType, this.punishmentType, 0).pipe(
+    let historyObservable: Observable<PunishmentHistoryInner[]>;
+    if (this.searchTerm.length === 0) {
+      historyObservable = this.historyApi.getHistoryForAll(this.userType, this.punishmentType, this.page);
+    } else {
+      if (this.uuidRegex.test(this.searchTerm)) {
+        historyObservable = this.historyApi.getHistoryForUuid(this.userType, this.punishmentType, this.searchTerm, this.page);
+      } else {
+        historyObservable = this.historyApi.getHistoryForUsers(this.userType, this.punishmentType, this.searchTerm, this.page)
+      }
+    }
+    historyObservable.pipe(
       map(history => {
         this.history = history;
-        console.log("HI");
-        console.log(history);
-        history.forEach(history => {
-          console.log(history);
-        });
       }),
       shareReplay(1)
     ).subscribe();
@@ -67,7 +74,7 @@ export class HistoryComponent implements OnInit, OnChanges {
     if (entry.expiryTime === 0) {
       return "Permanent " + entry.type.charAt(0).toUpperCase() + entry.type.slice(1);
     }
-    const date = new Date(entry.punishmentTime + entry.expiryTime);
+    const date = new Date(entry.expiryTime);
     return date.toLocaleString(navigator.language, {
       year: 'numeric',
       month: 'short',