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.
2025-04-12 00:54:58 +02:00
parent 02c69b318a
commit c83f95a3de
3 changed files with 73 additions and 4 deletions
@@ -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">