TowerDefence/Administration
6
0
Fork 0
Code Issues Pull requests 1 Releases 3 Packages 1 Activity Actions

TD-4: Filter funktioniert
All checks were successful
Quality Check / Linting (push) Successful in 25s
Details

Browse source
This commit is contained in:
Dorian Nemec 2025-03-12 14:26:29 +01:00
parent 73a72c14da
commit e311d8c181
2 changed files with 30 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app/views/dashboard/dashboard.component.html
View file

@ -6,11 +6,11 @@
<input matInput placeholder="" #searchbar> <input matInput placeholder="" #searchbar>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Banned</mat-label> <mat-label>Filter</mat-label>
<mat-select> <mat-select #filter (selectionChange)="applyFilter(filter.value)">
<mat-option>Reset</mat-option> <mat-option value="all">All</mat-option>
<mat-option>Banned</mat-option> <mat-option value="banned">Banned</mat-option>
<mat-option>Not Banned</mat-option> <mat-option value="notBanned">Not Banned</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<button mat-fab class="shadowless" (click)="onSearch(searchbar)"> <button mat-fab class="shadowless" (click)="onSearch(searchbar)">
@ -21,7 +21,7 @@
</button> </button>
</div> </div>
<mat-table [dataSource]="usersDataSource" class="dashboard__table"> <mat-table [dataSource]="filteredUsersDataSource" class="dashboard__table">
<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>

31
src/app/views/dashboard/dashboard.component.ts
View file

@ -29,7 +29,9 @@ import {AdministratablePlayer, AdminService, PlayerFilter} from '@core/server';
}) })
export class DashboardComponent implements OnInit { export class DashboardComponent implements OnInit {
displayedColumns: Array<string> = ['username', 'actions', 'banned']; displayedColumns: Array<string> = ['username', 'actions', 'banned'];
usersDataSource: MatTableDataSource<AdministratablePlayer> = new MatTableDataSource<AdministratablePlayer>([]); selectedFilter: string = 'all';
originalUsersDataSource: MatTableDataSource<AdministratablePlayer> = new MatTableDataSource<AdministratablePlayer>([]);
filteredUsersDataSource: MatTableDataSource<AdministratablePlayer> = new MatTableDataSource<AdministratablePlayer>([]);
constructor(private adminService: AdminService, protected authService: AuthService, private cdr: ChangeDetectorRef) { constructor(private adminService: AdminService, protected authService: AuthService, private cdr: ChangeDetectorRef) {
} }
@ -42,18 +44,19 @@ export class DashboardComponent implements OnInit {
}); });
} }
fetchPlayers(querry: string): void { fetchPlayers(query: string): void {
const filter: PlayerFilter = { const filter: PlayerFilter = {
page: 0, page: 0,
pageSize: 32, pageSize: 32,
order: PlayerFilter.OrderEnum.Ascending, order: PlayerFilter.OrderEnum.Ascending,
username: querry, username: query,
sortBy: 'username' sortBy: 'username'
}; };
this.adminService.getAllPlayers(filter).subscribe( this.adminService.getAllPlayers(filter).subscribe(
(players) => { (players) => {
this.usersDataSource = new MatTableDataSource<AdministratablePlayer>(players); this.originalUsersDataSource.data = players; // Store original data
this.filteredUsersDataSource.data = [...players]; // Apply initial filter
}, },
(error) => { (error) => {
console.error('Error fetching players:', error); console.error('Error fetching players:', error);
@ -64,18 +67,19 @@ export class DashboardComponent implements OnInit {
banPlayer(user: UserData): void { banPlayer(user: UserData): void {
this.adminService.banPlayer(user.id).subscribe(() => { this.adminService.banPlayer(user.id).subscribe(() => {
user.banned = true; user.banned = true;
this.usersDataSource.data = [...this.usersDataSource.data]; this.originalUsersDataSource.data = [...this.originalUsersDataSource.data];
this.applyFilter(this.selectedFilter);
}); });
} }
unbanPlayer(user: UserData): void { unbanPlayer(user: UserData): void {
this.adminService.unbanPlayer(user.id).subscribe(() => { this.adminService.unbanPlayer(user.id).subscribe(() => {
user.banned = false; user.banned = false;
this.usersDataSource.data = [...this.usersDataSource.data]; this.originalUsersDataSource.data = [...this.originalUsersDataSource.data];
this.applyFilter(this.selectedFilter);
}); });
} }
onSearch(searchbar: HTMLInputElement): void { onSearch(searchbar: HTMLInputElement): void {
this.fetchPlayers(searchbar.value); this.fetchPlayers(searchbar.value);
} }
@ -84,4 +88,17 @@ export class DashboardComponent implements OnInit {
searchbar.value = ''; searchbar.value = '';
this.fetchPlayers(''); this.fetchPlayers('');
} }
applyFilter(filter: string): void {
this.selectedFilter = filter; // Store filter selection
let filteredUsers = this.originalUsersDataSource.data;
if (filter === 'banned') {
filteredUsers = filteredUsers.filter(user => user.banned);
} else if (filter === 'notBanned') {
filteredUsers = filteredUsers.filter(user => !user.banned);
}
this.filteredUsersDataSource.data = [...filteredUsers];
}
} }