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

This commit is contained in:
mehdiboudjoudi 2025-03-05 13:02:51 +01:00
parent b502b1f66c
commit 9f70eb3533
4 changed files with 76 additions and 28 deletions

View file

@ -1,4 +1,8 @@
import { Routes } from '@angular/router'; import { Routes } from '@angular/router';
import { DashboardComponent } from '@app/views/dashboard/dashboard.component'; 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'}
];

View file

@ -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"> <table mat-table [dataSource]="userList" class="mat-elevation-z8">
<ng-container matColumnDef="username"> <ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> Username </th> <th mat-header-cell *matHeaderCellDef> Username</th>
<td mat-cell *matCellDef="let user"> {{ user.username }} </td> <td mat-cell *matCellDef="let user"> {{ user.username }}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="ban"> <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"> <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> </td>
</ng-container> </ng-container>
@ -20,4 +35,7 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
} @else {
<p>Welcome to the Admin Page!</p>
}

View file

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

View file

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