dashboard

idp_client/src/app/dashboard/dashboard.component.ts

@@ -2,11 +2,19 @@ import { Component, inject, OnInit } from '@angular/core';
 import { UserService } from '../auth/user.service';
 import { Router } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
+import { CardComponent } from './components/card/card.component';
+import { Client } from '../model/client.interface';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { CreateClientComponent } from './components/create-client/create-client.component';
+import { CreateHotToastRef, HotToastService } from '@ngxpert/hot-toast';
+import {MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef} from '@angular/material/bottom-sheet';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [],
+  imports: [CardComponent, MatButtonModule, MatIconModule, MatDialogModule, MatBottomSheetModule],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss'
 })
@@ -15,12 +23,15 @@ export class DashboardComponent implements OnInit {
   private userService: UserService = inject(UserService);
   private router: Router = inject(Router);
   private http: HttpClient = inject(HttpClient);
+  private dialog: MatDialog = inject(MatDialog);
+  private toast: HotToastService = inject(HotToastService);
+  private bottomSheet = inject(MatBottomSheet);
+
+  clients: Client[] = [];
 
 
   ngOnInit(): void {
-    console.log("ONINIT")
     if (!this.userService.user) {
-      console.log("REDIRECT")
       this.router.navigateByUrl("/login");
       return;
     }
@@ -29,11 +40,93 @@ export class DashboardComponent implements OnInit {
   }
 
   load() {
-    this.http.get('api/app/user/clients').subscribe(res => {
-      console.log(res)
+    this.http.get<Client[]>('api/app/user/clients').subscribe(res => {
+      this.clients = res;
     })
   }
 
- 
+  get userName(): string {
+    return this.userService.user?.firstName + ' ' + this.userService.user?.lastName
+  }
+
+  createClient() {
+    this.dialog.open(CreateClientComponent, {
+      panelClass: 'create-client__dialog'
+    })
+  }
+
+  openDeleteDialog(client: Client) {
+    const toast = this.toast.loading(`Lösche Client ${client.clientName} ...`, { autoClose: false});
+    this.bottomSheet.open(DeleteClientConfirmation).afterDismissed()
+    .subscribe({
+      next: data => {
+        if (data) {
+          this.deleteClient(client, toast)
+        } else {
+          toast.updateMessage('Löschen abgebrochen');
+          toast.updateToast({
+            type: 'error',
+            dismissible: true,
+          })
+        }
+      }
+    })
+  }
+
+  deleteClient(client: Client, toast: CreateHotToastRef<unknown>) {
+    
+    this.http.delete('api/app/user/client/' + client.id)
+    .subscribe({
+      next: () => {
+
+        toast.updateMessage(`Client ${client.clientName} gelöscht`);
+        toast.updateToast({
+          type: 'success',
+          dismissible: true,
+
+        });
+        this.load();
+        setTimeout(() => {
+          toast.close();
+        }, 3000);
+      },
+
+      error: () => {
+        toast.updateMessage(`Client ${client.clientName} konnte nicht gelöscht werden`);
+        toast.updateToast({
+          type: 'error',
+          dismissible: true,
+
+        })
+      }
+    })
+  }
+  
 
 }
+
+
+@Component({
+  selector: 'bottom-sheet-overview-example-sheet',
+  template: `
+  <h3>Soll der Client wirklich gelöscht werden?</h3>
+  <h5>Danach kann sich niemand mehr einloggen und alle Daten werden gelöscht.</h5>
+  <div class="flex-row" style="justify-content: space-between">
+  <button mat-flat-button color="warn" (click)="delete()">Löschen</button>
+  <button mat-flat-button (click)="cancel()">Abbrechen</button>
+  </div>
+  `,
+  standalone: true,
+  imports: [MatButtonModule],
+})
+export class DeleteClientConfirmation {
+  private _bottomSheetRef =
+    inject<MatBottomSheetRef<DeleteClientConfirmation>>(MatBottomSheetRef);
+
+  delete() {
+    this._bottomSheetRef.dismiss(true)
+  }
+  cancel() {
+    this._bottomSheetRef.dismiss(false)
+  }
+}