TD-36: Implemented that only showing component and fetching player data if logged in
This commit is contained in:
parent
b502b1f66c
commit
9f70eb3533
4 changed files with 76 additions and 28 deletions
|
@ -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'}
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
.banColumn{
|
||||||
|
padding-right: 0.8rem;
|
||||||
|
}
|
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue