Add confirm dialog before delete principal relation

apps/frontend/src/app/staff-list/main-data/main-data.component.html

@@ -14,7 +14,7 @@
     <tr *ngIf="appService.authData.isPersonalAdmin"><td>Vorgesetze/r</td><td>
       <mat-chip-list #chipListPrincipal>
         <mat-chip *ngFor="let relation of mainData.principals"
-                  removable="true" (removed)="deletePrincipalRelation(true, relation.id)">
+                  removable="true" (removed)="deletePrincipalRelation(true, relation)">
           {{relation.name}}, {{relation.firstName}}
           <mat-icon matChipRemove>cancel</mat-icon>
         </mat-chip>
@@ -36,7 +36,7 @@
     <tr *ngIf="appService.authData.isPersonalAdmin"><td>Ist Vorgesetze/r von</td><td>
       <mat-chip-list #chipListPrincipal>
         <mat-chip *ngFor="let relation of mainData.subs"
-                  removable="true" (removed)="deletePrincipalRelation(false, relation.id)">
+                  removable="true" (removed)="deletePrincipalRelation(false, relation)">
           {{relation.name}}, {{relation.firstName}}
           <mat-icon matChipRemove>cancel</mat-icon>
         </mat-chip>

apps/frontend/src/app/staff-list/main-data/main-data.component.ts

@@ -6,11 +6,12 @@ import {AppService} from "../../app.service";
 import {StaffMember} from "../staff-list.classes";
 import {MatDialog} from "@angular/material/dialog";
 import {FormControl, FormGroup} from "@angular/forms";
-import {StaffMemberInListDto, StaffMemberMainDto} from "@lib/dto";
+import {PrincipalRelationDto, StaffMemberInListDto, StaffMemberMainDto} from "@lib/dto";
 import {ChangeMainDataComponent} from "./change-main-data.component";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {MatChipInputEvent} from "@angular/material/chips";
 import {map} from "rxjs/operators";
+import {ConfirmDialogComponent, ConfirmDialogData} from "@lib/iqb-components";
 
 @Component({
   templateUrl: './main-data.component.html',
@@ -29,6 +30,7 @@ export class MainDataComponent implements OnInit, OnDestroy {
     public staffListService: StaffListService,
     private backendService: BackendService,
     private changeMainDataDialog: MatDialog,
+    private deleteConfirmDialog: MatDialog,
     private snackBar: MatSnackBar,
     private elRef: ElementRef
   ) {}
@@ -140,14 +142,29 @@ export class MainDataComponent implements OnInit, OnDestroy {
       (option.id !== this.mainData?.id) && (option.name + option.firstName).toLowerCase().includes(filterValue));
   }
 
-  deletePrincipalRelation(isPrincipal: boolean, relationId: number) {
+  deletePrincipalRelation(isPrincipal: boolean, relation: PrincipalRelationDto) {
     if (this.mainData) {
-      this.appService.dataLoading = true;
-      this.backendService.deletePrincipalRelation(
-        isPrincipal ? relationId : this.mainData.id,
-        isPrincipal ? this.mainData.id : relationId
-      ).subscribe(() => {
-        this.updateStaffMemberData()
+      let prompt = `Soll ${relation.name}, ${relation.firstName} als ${isPrincipal ? 'Vorgesetzte/r' : 'Mitarbeiter:in'} entfernt werden?`;
+      const dialogRef = this.deleteConfirmDialog.open(ConfirmDialogComponent, {
+        width: '400px',
+        data: <ConfirmDialogData>{
+          title: 'Löschen Vorgesetzte/r',
+          content: prompt,
+          confirmbuttonlabel: 'Löschen',
+          showcancel: true
+        }
+      });
+
+      dialogRef.afterClosed().subscribe(result => {
+        if (result === true && this.mainData) {
+          this.appService.dataLoading = true;
+          this.backendService.deletePrincipalRelation(
+            isPrincipal ? relation.id : this.mainData.id,
+            isPrincipal ? this.mainData.id : relation.id
+          ).subscribe(() => {
+            this.updateStaffMemberData()
+          })
+        }
       })
     }
   }