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

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"
     }

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'}];
+
+

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>
+}

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

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

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();
+    }
+}

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>

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'
 })