From 332acff57bbe4e0726a7b1741c86c65d7cac60a5 Mon Sep 17 00:00:00 2001
From: Rajbir Singh <rajbir.singh@hmmh.de>
Date: Wed, 5 Mar 2025 23:20:05 +0100
Subject: [PATCH] TD-36: Implement Administration player filter options

---
 package.json                                  |  2 +-
 src/app/app.routes.ts                         |  4 +-
 .../admin-overview.component.html             | 41 +++++++++++
 .../admin-overview.component.scss             |  3 +
 .../admin-overview.component.ts               | 68 +++++++++++++++++++
 .../views/dashboard/dashboard.component.html  |  2 +-
 .../views/dashboard/dashboard.component.ts    |  3 +-
 7 files changed, 119 insertions(+), 4 deletions(-)
 create mode 100644 src/app/views/admin-overview/admin-overview.component.html
 create mode 100644 src/app/views/admin-overview/admin-overview.component.scss
 create mode 100644 src/app/views/admin-overview/admin-overview.component.ts

diff --git a/package.json b/package.json
index c19abd4..476a6d0 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
         "stylelint-scss": "^6.11.0",
         "typescript": "~5.6.2"
     },
-    "api_version": "v0.0.0-rc.2",
+    "api_version": "v0.0.0-rc6",
     "volta": {
         "node": "22.13.1"
     }
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index df958e6..10343ca 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,4 +1,6 @@
 import { Routes } from '@angular/router';
 import { DashboardComponent } from '@app/views/dashboard/dashboard.component';
 
-export const routes: Routes = [{ path: '', component: DashboardComponent, title: 'Home' }];
+export const routes: Routes = [{ path: '', component: DashboardComponent, title: 'Player Overview'}];
+
+
diff --git a/src/app/views/admin-overview/admin-overview.component.html b/src/app/views/admin-overview/admin-overview.component.html
new file mode 100644
index 0000000..2f427c7
--- /dev/null
+++ b/src/app/views/admin-overview/admin-overview.component.html
@@ -0,0 +1,41 @@
+@if (authService.$user|async; as user) {
+
+    <div class="search-container" style="display: flex; align-items: center; gap: 8px;">
+        <mat-form-field appearance="fill" floatLabel="always" style="flex: 1;">
+            <mat-label>Search</mat-label>
+            <input matInput [(ngModel)]="searchQuery" placeholder="Username"/>
+        </mat-form-field>
+
+        <button mat-raised-button color="primary" (click)="onSearch()">Search</button>
+
+        <button mat-raised-button color="warn" (click)="resetFilter()">Reset</button>
+    </div>
+
+    <div class="table-container">
+        <table mat-table [dataSource]="userList" class="mat-elevation-z8">
+
+            <ng-container matColumnDef="username">
+                <th mat-header-cell *matHeaderCellDef> Username</th>
+                <td mat-cell *matCellDef="let user"> {{ user.username }}</td>
+            </ng-container>
+
+            <ng-container matColumnDef="ban">
+                <th mat-header-cell *matHeaderCellDef class="ban-column"> Ban</th>
+                <td mat-cell *matCellDef="let user">
+                    <button mat-mini-fab class="warn shadowless" (click)="banPlayer(user)">
+                        <mat-icon>block</mat-icon>
+                    </button>
+                </td>
+            </ng-container>
+
+            <thead>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            </thead>
+            <tbody>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </tbody>
+        </table>
+    </div>
+} @else {
+    <p>Welcome to the Admin Page!</p>
+}
diff --git a/src/app/views/admin-overview/admin-overview.component.scss b/src/app/views/admin-overview/admin-overview.component.scss
new file mode 100644
index 0000000..1e967d1
--- /dev/null
+++ b/src/app/views/admin-overview/admin-overview.component.scss
@@ -0,0 +1,3 @@
+.ban-column{
+  padding-right: 0.8rem;
+}
\ No newline at end of file
diff --git a/src/app/views/admin-overview/admin-overview.component.ts b/src/app/views/admin-overview/admin-overview.component.ts
new file mode 100644
index 0000000..0598ac3
--- /dev/null
+++ b/src/app/views/admin-overview/admin-overview.component.ts
@@ -0,0 +1,68 @@
+import {AsyncPipe} from '@angular/common';
+import {Component, OnInit} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatIcon} from '@angular/material/icon';
+import {MatInput} from '@angular/material/input';
+import {MatTableModule} from '@angular/material/table';
+import {AuthService} from '@core/auth/auth.service';
+import UserData from '@core/auth/UserData';
+import {AdministratablePlayer, AdminService, PlayerFilter} from '@core/server';
+
+@Component({
+    selector: 'app-admin-overview',
+    templateUrl: './admin-overview.component.html',
+    styleUrls: ['./admin-overview.component.scss'],
+    standalone: true,
+    imports: [MatTableModule, MatButtonModule, MatLabel, MatInput, FormsModule, MatFormField, AsyncPipe, MatIcon]
+})
+export class AdminOverviewComponent implements OnInit {
+    displayedColumns: Array<string> = ['username', 'ban'];
+    userList: Array<AdministratablePlayer> = [];
+    searchQuery: string = '';
+
+    constructor(private adminService: AdminService, protected authService: AuthService) {
+    }
+
+    ngOnInit(): void {
+        this.authService.$user.subscribe((user) => {
+            if (user != undefined) {
+                return this.fetchPlayers();
+            }
+        });
+    }
+
+    fetchPlayers(): void {
+        const filter: PlayerFilter = {
+            page: 0,
+            pageSize: 32,
+            order: PlayerFilter.OrderEnum.Ascending,
+            username: this.searchQuery,
+            sortBy: 'username'
+        };
+
+        this.adminService.getAllPlayers(filter).subscribe(
+            (players) => {
+                this.userList = players;
+            },
+            (error) => {
+                console.error('Error fetching players:', error);
+            }
+        );
+    }
+
+    banPlayer(user: UserData): void {
+        console.log(`Banning user: ${user.username}`);
+        //implement banning logic
+    }
+
+    onSearch(): void {
+        this.fetchPlayers();
+    }
+
+    resetFilter(): void {
+        this.searchQuery = '';
+        this.fetchPlayers();
+    }
+}
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index e0c966a..126ec50 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -1,3 +1,3 @@
 <div class="dashboard">
-    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere illo animi quidem repellat perspiciatis, excepturi amet corrupti ipsa sit consequuntur placeat ratione saepe velit asperiores suscipit esse quod minima exercitationem minus, alias laudantium inventore! Beatae cum nobis error suscipit cupiditate, praesentium itaque ut ipsa iusto in doloribus unde quisquam consequuntur.</p>
+    <app-admin-overview></app-admin-overview>
 </div>
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index 4653ae7..1638432 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
+import {AdminOverviewComponent} from '@app/views/admin-overview/admin-overview.component';
 
 @Component({
     selector: 'app-dashboard',
-    imports: [],
+    imports: [AdminOverviewComponent],
     templateUrl: './dashboard.component.html',
     styleUrl: './dashboard.component.scss'
 })