feat: integrate ConfirmDialogComponent into TaskOverlayComponent to confirm task deletion

src/app/components/contacts/contact-detail/contact-detail.component.ts

@@ -31,9 +31,7 @@ export class ContactDetailComponent {
   isLoading: boolean = false;
   selectedUser: User | null = null;
   isMobileNavbarOpen: boolean = false;
-
   showConfirmDialog = false;
-  userToDeleteId: string | null = null;
 
   constructor(
     private overlayService: OverlayService,

src/app/shared/components/overlay/task-overlay/task-overlay.component.html

@@ -129,7 +129,7 @@
   </div>
   @if(task.creator === currentUserId) {
   <div class="btns">
-    <div class="btn btn-delete" (click)="deleteTask(overlayData)">
+    <div class="btn btn-delete" (click)="toggleConfirmDialog()">
       <img src="./../../../../../assets/img/contact/delete.svg" alt="" />
       <p>{{ "addTask.delete" | translate }}</p>
     </div>
@@ -145,3 +145,9 @@
   </div>
   }
 </section>
+<app-confirm-dialog
+  *ngIf="showConfirmDialog"
+  [message]="'confirmDialogComponent.deleteTask' | translate"
+  (onConfirm)="deleteTask(overlayData)"
+  (onCancel)="toggleConfirmDialog()"
+></app-confirm-dialog>

src/app/shared/components/overlay/task-overlay/task-overlay.component.ts

@@ -12,11 +12,18 @@ import { map } from 'rxjs';
 import { ApiService } from '../../../../services/api.service';
 import { UpdateNotifierService } from '../../../../services/update-notifier.service';
 import { ToastNotificationService } from '../../../../services/toast-notification.servic';
+import { ConfirmDialogComponent } from '../../confirm-dialog/confirm-dialog.component';
 
 @Component({
   selector: 'app-task-overlay',
   standalone: true,
-  imports: [BtnCloseComponent, CommonModule, BtnBackComponent, TranslateModule],
+  imports: [
+    BtnCloseComponent,
+    CommonModule,
+    BtnBackComponent,
+    TranslateModule,
+    ConfirmDialogComponent,
+  ],
   templateUrl: './task-overlay.component.html',
   styleUrl: './task-overlay.component.scss',
 })
@@ -27,6 +34,7 @@ export class TaskOverlayComponent implements OnInit {
   task: Task | null = null;
   overlayMobile: boolean = false;
   currentUserId: string = '';
+  showConfirmDialog = false;
 
   constructor(
     private overlayService: OverlayService,
@@ -159,4 +167,8 @@ export class TaskOverlayComponent implements OnInit {
   capitalizeFirstLetter(data: string) {
     return data.charAt(0).toUpperCase() + data.slice(1);
   }
+
+  toggleConfirmDialog() {
+    this.showConfirmDialog = !this.showConfirmDialog;
+  }
 }

src/assets/i18n/de.json

@@ -92,7 +92,8 @@
     "phone": "Telefon"
   },
   "confirmDialogComponent": {
-    "deleteContact": "Möchten Sie den Kontakt wirklich löschen?",
+    "deleteContact": "Willst du den Kontakt wirklich löschen?",
+    "deleteTask": "Willst du den Task wirklich löschen?",
     "btnCancel": "Abbrechen",
     "btnConfirm": "Bestätigen"
   },

src/assets/i18n/en.json

@@ -93,6 +93,7 @@
   },
   "confirmDialogComponent": {
     "deleteContact": "Do you really want to delete the contact?",
+    "deleteTask": "Do you really want to delete the task?",
     "btnCancel": "Cancel",
     "btnConfirm": "Confirm"
   },
@@ -158,7 +159,7 @@
   "contacts": {
     "headline": "Contacts",
     "headlineDescription": "Better with a team",
-    "notice": "Notice: Click in the circle to change the colour.",
+    "notice": "Notice: Click in the circle to change the color.",
     "btnNew": "Add new contact",
     "btnEdit0": "edit",
     "btnEdit1": "Edit",