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>
</mat-form-field>
<mat-form-field>
<mat-label>Banned</mat-label>
<mat-select>
<mat-option>Reset</mat-option>
<mat-option>Banned</mat-option>
<mat-option>Not Banned</mat-option>
<mat-label>Filter</mat-label>
<mat-select #filter (selectionChange)="applyFilter(filter.value)">
<mat-option value="all">All</mat-option>
<mat-option value="banned">Banned</mat-option>
<mat-option value="notBanned">Not Banned</mat-option>
</mat-select>
</mat-form-field>
<button mat-fab class="shadowless" (click)="onSearch(searchbar)">
@ -21,7 +21,7 @@
</button>
</div>
<mat-table [dataSource]="usersDataSource" class="dashboard__table">
<mat-table [dataSource]="filteredUsersDataSource" class="dashboard__table">
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef>Username</th>
<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 {
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) {
}
@ -42,18 +44,19 @@ export class DashboardComponent implements OnInit {
});
}
fetchPlayers(querry: string): void {
fetchPlayers(query: string): void {
const filter: PlayerFilter = {
page: 0,
pageSize: 32,
order: PlayerFilter.OrderEnum.Ascending,
username: querry,
username: query,
sortBy: 'username'
};
this.adminService.getAllPlayers(filter).subscribe(
(players) => {
this.usersDataSource = new MatTableDataSource<AdministratablePlayer>(players);
this.originalUsersDataSource.data = players; // Store original data
this.filteredUsersDataSource.data = [...players]; // Apply initial filter
},
(error) => {
console.error('Error fetching players:', error);
@ -64,18 +67,19 @@ export class DashboardComponent implements OnInit {
banPlayer(user: UserData): void {
this.adminService.banPlayer(user.id).subscribe(() => {
user.banned = true;
this.usersDataSource.data = [...this.usersDataSource.data];
this.originalUsersDataSource.data = [...this.originalUsersDataSource.data];
this.applyFilter(this.selectedFilter);
});
}
unbanPlayer(user: UserData): void {
this.adminService.unbanPlayer(user.id).subscribe(() => {
user.banned = false;
this.usersDataSource.data = [...this.usersDataSource.data];
this.originalUsersDataSource.data = [...this.originalUsersDataSource.data];
this.applyFilter(this.selectedFilter);
});
}
onSearch(searchbar: HTMLInputElement): void {
this.fetchPlayers(searchbar.value);
}
@ -84,4 +88,17 @@ export class DashboardComponent implements OnInit {
searchbar.value = '';
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];
}
}