feat: create, design, and integrate ConfirmDialogComponent

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

@@ -57,7 +57,7 @@
           </div>
           @if (selectedUser.isContactOnly || currentUser && selectedUser.id !==
           currentUser.id) {
-          <div class="btn btn-delete" (click)="deleteContact(selectedUserId)">
+          <div class="btn btn-delete" (click)="toggleConfirmDialog()">
             <img src="./../../../../assets/img/contact/delete.svg" alt="" />
             <p>
               {{ "contacts.btnDelete0" | translate }}
@@ -100,3 +100,9 @@
   <!-- TODO -->
   }
 </section>
+<app-confirm-dialog
+  *ngIf="showConfirmDialog"
+  [message]="'confirmDialogComponent.deleteContact' | translate"
+  (onConfirm)="deleteContact()"
+  (onCancel)="toggleConfirmDialog()"
+></app-confirm-dialog>

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

@@ -14,11 +14,12 @@ import { OverlayService } from '../../../services/overlay.service';
 import { ApiService } from '../../../services/api.service';
 import { ToastNotificationService } from '../../../services/toast-notification.servic';
 import { UpdateNotifierService } from '../../../services/update-notifier.service';
+import { ConfirmDialogComponent } from '../../../shared/components/confirm-dialog/confirm-dialog.component';
 
 @Component({
   selector: 'app-contact-detail',
   standalone: true,
-  imports: [CommonModule, TranslateModule],
+  imports: [CommonModule, TranslateModule, ConfirmDialogComponent],
   templateUrl: './contact-detail.component.html',
   styleUrl: './contact-detail.component.scss',
 })
@@ -31,6 +32,9 @@ export class ContactDetailComponent {
   selectedUser: User | null = null;
   isMobileNavbarOpen: boolean = false;
 
+  showConfirmDialog = false;
+  userToDeleteId: string | null = null;
+
   constructor(
     private overlayService: OverlayService,
     private userService: UserService,
@@ -97,9 +101,13 @@ export class ContactDetailComponent {
     this.isMobileNavbarOpen = false;
   }
 
-  async deleteContact(userId: string) {
+  toggleConfirmDialog() {
+    this.showConfirmDialog = !this.showConfirmDialog;
+  }
+
+  async deleteContact() {
     try {
-      await lastValueFrom(this.apiService.deleteUserById(userId));
+      await lastValueFrom(this.apiService.deleteUserById(this.selectedUserId!));
       this.toastNotificationService.deleteContactSuccessToast();
       this.updateNotifierService.notifyUpdate('contact');
       this.closeUserDetails();

src/app/components/main-layout/main-layout.component.scss

@@ -10,7 +10,6 @@ app-header {
   height: 96px;
   width: 100%;
   background-color: var(--white);
-  z-index: 2;
 }
 
 app-sidebar {
@@ -35,7 +34,6 @@ app-sidebar-mobile {
   padding: 64px;
   background-color: var(--bgContent);
   overflow-y: auto;
-  z-index: 1;
 }
 
 .blur-background {

src/app/shared/components/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,17 @@
+<section>
+  <div class="dialog">
+    <p>{{ message }}</p>
+    <div class="btns">
+      <div class="btn">
+        <div class="btn-cancel" (click)="cancel()">
+          {{ "confirmDialogComponent.btnCancel" | translate }}
+        </div>
+      </div>
+      <div class="btn">
+        <div class="btn-delete-contact" (click)="confirm()">
+          {{ "confirmDialogComponent.btnConfirm" | translate }}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

src/app/shared/components/confirm-dialog/confirm-dialog.component.scss

@@ -0,0 +1,112 @@
+section {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  backdrop-filter: blur(5px);
+  background-color: rgba($color: #000000, $alpha: 0.2);
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--white);
+  width: 600px;
+  height: 200px;
+  border-radius: 26px;
+  margin: 24px;
+  border: 2px solid rgba($color: #000000, $alpha: 0.1);
+  p {
+    text-align: center;
+    font-size: 27px;
+    font-weight: 500;
+    margin-bottom: 12px;
+    padding: 0 12px;
+  }
+}
+
+.btns {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 111px;
+  height: 57px;
+  margin: 0 24px;
+}
+
+.btn-cancel {
+  padding: 12px;
+  margin: 12px 12px;
+  border-radius: 10px;
+  border-color: var(--black);
+  background-color: var(--dark-blue);
+  color: var(--white);
+  font-size: 23px;
+  font-weight: 400;
+  transition: 125ms ease-in-out;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--light-blue);
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.btn-delete-contact {
+  padding: 12px;
+  margin: 12px 12px;
+  border-radius: 10px;
+  color: var(--red);
+  background-color: var(--white);
+  border: 1px solid var(--red);
+  font-size: 23px;
+  font-weight: 400;
+  transition: 125ms ease-in-out;
+  cursor: pointer;
+  &:hover {
+    color: var(--white);
+    background-color: var(--red);
+    border-color: var(--black);
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .dialog {
+    p {
+      font-size: 22px;
+    }
+  }
+}
+
+@media screen and (max-width: 350px) {
+  .dialog {
+    width: 280px;
+    p {
+      font-size: 22px;
+    }
+  }
+
+  .btn {
+    width: 100px;
+  }
+
+  .btn-delete-contact,
+  .btn-cancel {
+    font-size: 18px;
+  }
+}

src/app/shared/components/confirm-dialog/confirm-dialog.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmDialogComponent } from './confirm-dialog.component';
+
+describe('ConfirmDialogComponent', () => {
+  let component: ConfirmDialogComponent;
+  let fixture: ComponentFixture<ConfirmDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ConfirmDialogComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,24 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-confirm-dialog',
+  standalone: true,
+  imports: [TranslateModule],
+  templateUrl: './confirm-dialog.component.html',
+  styleUrl: './confirm-dialog.component.scss',
+})
+export class ConfirmDialogComponent {
+  @Input() message: string = 'Are you sure?';
+  @Output() onCancel = new EventEmitter<void>();
+  @Output() onConfirm = new EventEmitter<void>();
+
+  cancel() {
+    this.onCancel.emit();
+  }
+
+  confirm() {
+    this.cancel();
+    this.onConfirm.emit();
+  }
+}

src/assets/i18n/de.json

@@ -91,10 +91,10 @@
     "email": "E-Mail",
     "phone": "Telefon"
   },
-  "contactDeleteDialog": {
+  "confirmDialogComponent": {
     "deleteContact": "Möchten Sie den Kontakt wirklich löschen?",
     "btnCancel": "Abbrechen",
-    "btnDelete": "Löschen"
+    "btnConfirm": "Bestätigen"
   },
   "summary": {
     "headlineDescription": "Schlüsselmetriken auf einen Blick",

src/assets/i18n/en.json

@@ -91,10 +91,10 @@
     "email": "Email",
     "phone": "Phone"
   },
-  "contactDeleteDialog": {
+  "confirmDialogComponent": {
     "deleteContact": "Do you really want to delete the contact?",
     "btnCancel": "Cancel",
-    "btnDelete": "Delete"
+    "btnConfirm": "Confirm"
   },
   "summary": {
     "headlineDescription": "Key Metrics at a Glance",