Task: retrieving data from Server and displaying it in the table
Some checks failed
Quality Check / Linting (push) Failing after 21s

This commit is contained in:
mehdiboudjoudi 2025-03-05 11:27:39 +01:00
parent 9d3c2d8a47
commit b502b1f66c
3 changed files with 61 additions and 9 deletions

View file

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

View file

@ -1 +1,23 @@
<body></body>
<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> Ban </th>
<td mat-cell *matCellDef="let user">
<button mat-raised-button color="warn" (click)="banPlayer(user)">Ban</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>

View file

@ -1,15 +1,45 @@
import {Component} from '@angular/core';
import {MatButton} from '@angular/material/button';
import {MatFormField} from '@angular/material/form-field';
import {MatHeaderCell, MatHeaderCellDef, MatTable} from '@angular/material/table';
import { Component, OnInit } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import UserData from '@core/auth/UserData';
import {AdministratablePlayer, AdminService, PlayerFilter} from '@core/server';
@Component({
selector: 'app-admin-overview',
imports: [MatFormField, MatButton, MatTable, MatHeaderCell, MatHeaderCellDef],
templateUrl: './admin-overview.component.html',
styleUrl: './admin-overview.component.scss'
styleUrls: ['./admin-overview.component.scss'],
standalone: true,
imports: [MatTableModule, MatButtonModule]
})
export class AdminOverviewComponent {
export class AdminOverviewComponent implements OnInit {
displayedColumns: Array<string> = ['username', 'ban'];
userList: Array<AdministratablePlayer> = [];
constructor(private adminService: AdminService) {}
ngOnInit(): void {
this.fetchPlayers();
}
fetchPlayers(): void {
const filter: PlayerFilter = {
page: 0,
pageSize: 32,
order: PlayerFilter.OrderEnum.Ascending,
username: '',
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}`);
}
}