From c83f95a3de0da94774695b70793c3950a604f13b Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sat, 12 Apr 2025 00:54:58 +0200
Subject: [PATCH] Enable user search and filtering in the bans component

Added support for searching and filtering user names using `HistoryService`. Implemented a dropdown for search suggestions with dynamic filtering and selection. Updated UI and styles to accommodate the new input functionality.
---
 frontend/src/app/bans/bans.component.html | 15 ++++++++-
 frontend/src/app/bans/bans.component.scss | 23 +++++++++++++
 frontend/src/app/bans/bans.component.ts   | 39 +++++++++++++++++++++--
 3 files changed, 73 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/bans/bans.component.html b/frontend/src/app/bans/bans.component.html
index 9dc2edd..3d26508 100644
--- a/frontend/src/app/bans/bans.component.html
+++ b/frontend/src/app/bans/bans.component.html
@@ -17,7 +17,20 @@
             <button class="button-outer" (click)="punishmentType = 'warn'">Warnings</button>
           </div>
           <div class="historySearchContainer">
-            <input class="historySearch" type="text" placeholder="Search..">
+            <input class="historySearch"
+                   type="text"
+                   placeholder="Search.."
+                   [(ngModel)]="searchTerm"
+                   (input)="filterNames()"
+            >
+            <div class="search-dropdown" *ngIf="filteredNames.length > 0 && searchTerm">
+              <div
+                class="dropdown-item"
+                *ngFor="let name of filteredNames"
+                (mousedown)="selectName(name)">
+                {{ name }}
+              </div>
+            </div>
           </div>
         </div>
         <div class="historyTable">
diff --git a/frontend/src/app/bans/bans.component.scss b/frontend/src/app/bans/bans.component.scss
index b427337..84656bc 100644
--- a/frontend/src/app/bans/bans.component.scss
+++ b/frontend/src/app/bans/bans.component.scss
@@ -34,3 +34,26 @@ main .container {
 .button-outer {
   margin-right: 15px;
 }
+
+.dropdown-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  background-color: white;
+  border: 1px solid #ddd;
+  border-top: none;
+  z-index: 1000;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.dropdown-item {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.dropdown-item:hover {
+  background-color: #f5f5f5;
+}
diff --git a/frontend/src/app/bans/bans.component.ts b/frontend/src/app/bans/bans.component.ts
index 7aa7d17..80fb23f 100644
--- a/frontend/src/app/bans/bans.component.ts
+++ b/frontend/src/app/bans/bans.component.ts
@@ -1,19 +1,52 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {HeaderComponent} from "../header/header.component";
 import {HistoryComponent} from './history/history.component';
+import {HistoryService} from '../../api';
+import {NgForOf, NgIf} from '@angular/common';
+import {FormsModule} from '@angular/forms';
 
 @Component({
   selector: 'app-bans',
   imports: [
     HeaderComponent,
-    HistoryComponent
+    HistoryComponent,
+    NgIf,
+    FormsModule,
+    NgForOf
   ],
   templateUrl: './bans.component.html',
   styleUrl: './bans.component.scss'
 })
-export class BansComponent {
+export class BansComponent implements OnInit {
+
+  constructor(public historyApi: HistoryService) {
+  }
 
   public userType: 'player' | 'staff' = "player";
   public punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = "all";
+  public names: string[] = [];
+  public searchTerm: string = '';
+  public filteredNames: string[] = [];
 
+  ngOnInit() {
+    this.historyApi.getUserNames(this.userType, this.punishmentType).subscribe(names => {
+      this.names = names;
+    })
+  }
+
+  public filterNames() {
+    if (!this.searchTerm) {
+      this.filteredNames = [];
+      return;
+    }
+
+    this.filteredNames = this.names.filter(name =>
+      name.toLowerCase().startsWith(this.searchTerm.toLowerCase())
+    ).slice(0, 10);
+  }
+
+  public selectName(name: string) {
+    this.searchTerm = name;
+    this.filteredNames = [];
+  }
 }