TD-4: Unbannen

src/app/views/dashboard/dashboard.component.html

@@ -27,15 +27,21 @@
                 <td mat-cell *matCellDef="let user"> {{ user.username }}</td>
             </ng-container>
             <ng-container matColumnDef="banned">
-                <th mat-header-cell *matHeaderCellDef>Is banned</th>
-                <td mat-cell *matCellDef="let user"> {{ user.banned }}</td>
+                <th mat-header-cell *matHeaderCellDef>Banned</th>
+                <td mat-cell *matCellDef="let user"></td>
             </ng-container>
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef>Actions</th>
                 <td mat-cell *matCellDef="let user">
+                    @if (user.banned == false) {
                     <button mat-mini-fab class="warn shadowless" (click)="banPlayer(user)">
                         <mat-icon>block</mat-icon>
                     </button>
+                    } @else {
+                    <button mat-mini-fab class="unbanned shadowless" (click)="unbanPlayer(user)">
+                        <mat-icon>check</mat-icon>
+                    </button>
+                    }
                 </td>
             </ng-container>
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/views/dashboard/dashboard.component.scss

@@ -30,4 +30,8 @@
       padding: 0.25rem 0;
     }
   }
+}
+
+.unbanned {
+  color:green;
 }

src/app/views/dashboard/dashboard.component.ts

@@ -1,5 +1,5 @@
 import {AsyncPipe} from '@angular/common';
-import {Component, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import {MatFabButton, MatMiniFabButton} from '@angular/material/button';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIcon} from '@angular/material/icon';
@@ -31,7 +31,7 @@ export class DashboardComponent implements OnInit {
     displayedColumns: Array<string> = ['username', 'actions', 'banned'];
     usersDataSource: MatTableDataSource<AdministratablePlayer> = new MatTableDataSource<AdministratablePlayer>([]);
 
-    constructor(private adminService: AdminService, protected authService: AuthService) {
+    constructor(private adminService: AdminService, protected authService: AuthService, private cdr: ChangeDetectorRef) {
     }
 
     ngOnInit(): void {
@@ -62,11 +62,20 @@ export class DashboardComponent implements OnInit {
     }
 
     banPlayer(user: UserData): void {
-        console.log(`Banning user: ${user.username}`);
-        this.adminService.banPlayer(user.id).subscribe(()=>{});
-        this.fetchPlayers('');
+        this.adminService.banPlayer(user.id).subscribe(() => {
+            user.banned = true;
+            this.usersDataSource.data = [...this.usersDataSource.data];
+        });
     }
 
+    unbanPlayer(user: UserData): void {
+        this.adminService.unbanPlayer(user.id).subscribe(() => {
+            user.banned = false;
+            this.usersDataSource.data = [...this.usersDataSource.data];
+        });
+    }
+
+
     onSearch(searchbar: HTMLInputElement): void {
         this.fetchPlayers(searchbar.value);
     }
@@ -75,5 +84,4 @@ export class DashboardComponent implements OnInit {
         searchbar.value = '';
         this.fetchPlayers('');
     }
-
 }