TD-36: Implemented that only showing component and fetching player data if logged in

src/app/app.routes.ts

@@ -1,4 +1,8 @@
 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'}
+];
+
+

src/app/views/admin-overview/admin-overview.component.html

@@ -1,15 +1,30 @@
-<div class="table-container">
+@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>
+                <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> Ban </th>
+                <th mat-header-cell *matHeaderCellDef class="banColumn"> Ban</th>
                 <td mat-cell *matCellDef="let user">
-                <button mat-raised-button color="warn" (click)="banPlayer(user)">Ban</button>
+                    <button mat-mini-fab class="warn shadowless" (click)="banPlayer(user)">
+                        <mat-icon>block</mat-icon>
+                    </button>
                 </td>
             </ng-container>
 
@@ -20,4 +35,7 @@
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </tbody>
         </table>
-</div>
+    </div>
+} @else {
+    <p>Welcome to the Admin Page!</p>
+}

src/app/views/admin-overview/admin-overview.component.scss

@@ -0,0 +1,3 @@
+.banColumn{
+  padding-right: 0.8rem;
+}

src/app/views/admin-overview/admin-overview.component.ts

@@ -1,24 +1,36 @@
-import { Component, OnInit } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatTableModule } from '@angular/material/table';
+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 {MatInput} from '@angular/material/input';
+import {MatTableModule} from '@angular/material/table';
 import UserData from '@core/auth/UserData';
 import {AdministratablePlayer, AdminService, PlayerFilter} from '@core/server';
+import {AsyncPipe} from '@angular/common';
+import {AuthService} from '@core/auth/auth.service';
+import {MatIcon} from '@angular/material/icon';
 
 @Component({
     selector: 'app-admin-overview',
     templateUrl: './admin-overview.component.html',
     styleUrls: ['./admin-overview.component.scss'],
     standalone: true,
-    imports: [MatTableModule, MatButtonModule]
+    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) {}
+    constructor(private adminService: AdminService, protected authService: AuthService) {
+    }
 
     ngOnInit(): void {
-        this.fetchPlayers();
+        this.authService.$user.subscribe((user) => {
+            if (user != undefined) {
+                return this.fetchPlayers();
+            }
+        });
     }
 
     fetchPlayers(): void {
@@ -26,9 +38,10 @@ export class AdminOverviewComponent implements OnInit {
             page: 0,
             pageSize: 32,
             order: PlayerFilter.OrderEnum.Ascending,
-            username: '',
+            username: this.searchQuery,
             sortBy: 'username'
         };
+
         this.adminService.getAllPlayers(filter).subscribe(
             (players) => {
                 this.userList = players;
@@ -41,5 +54,15 @@ export class AdminOverviewComponent implements OnInit {
 
     banPlayer(user: UserData): void {
         console.log(`Banning user: ${user.username}`);
+        //implement banning logic
+    }
+
+    onSearch(): void {
+        this.fetchPlayers();
+    }
+
+    resetFilter(): void {
+        this.searchQuery = '';
+        this.fetchPlayers();
     }
 }