fix: bugfixes and optimization in OverlayComponent for improved performance and usability

src/app/services/overlay.service.ts

@@ -19,4 +19,8 @@ export class OverlayService {
   setOverlayData(overlay: string, data: any) {
     this.overlayDataSubject.next({ overlay, data });
   }
+
+  clearOverlayData() {
+    this.overlayDataSubject.next(null);
+  }
 }

src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html

@@ -125,7 +125,7 @@
         class="btn-delete"
         type="button"
         value="{{ 'contactDialogForm.btnDelete' | translate }}"
-        (click)="deleteContact(selectedUser.id)"
+        (click)="toggleConfirmDialog()"
       ></app-form-btn>
       } @else {
       <app-form-btn
@@ -154,3 +154,11 @@
     </div>
   </form>
 </section>
+
+<!-- Confirm dialog -->
+<app-confirm-dialog
+  *ngIf="showConfirmDialog"
+  [message]="'confirmDialogComponent.deleteContact' | translate"
+  (onConfirm)="deleteContact(selectedUser.id)"
+  (onCancel)="toggleConfirmDialog()"
+></app-confirm-dialog>

src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.ts

@@ -16,11 +16,19 @@ import { ApiService } from '../../../../../services/api.service';
 import { ToastNotificationService } from '../../../../../services/toast-notification.service';
 import { UpdateNotifierService } from '../../../../../services/update-notifier.service';
 import { User } from '../../../../../interfaces/user.interface';
+import { ConfirmDialogComponent } from '../../../confirm-dialog/confirm-dialog.component';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-contact-form',
   standalone: true,
-  imports: [TranslateModule, FormsModule, FormBtnComponent],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    FormsModule,
+    FormBtnComponent,
+    ConfirmDialogComponent,
+  ],
   templateUrl: './contact-form.component.html',
   styleUrl: './contact-form.component.scss',
 })
@@ -30,7 +38,7 @@ export class ContactFormComponent implements OnInit, OnChanges {
   @Input() newColor: string = '';
   @Input() currentColor: string = '';
   @Output() initialsEmitter = new EventEmitter<string>();
-  @Output() closeDialogEmitter = new EventEmitter<string>();
+  @Output() closeDialogEmitter = new EventEmitter<boolean>();
 
   constructor(
     public resizeService: ResizeService,
@@ -39,6 +47,8 @@ export class ContactFormComponent implements OnInit, OnChanges {
     private updateNotifierService: UpdateNotifierService
   ) {}
 
+  showConfirmDialog = false;
+
   contactData = {
     firstName: '',
     lastName: '',
@@ -284,7 +294,11 @@ export class ContactFormComponent implements OnInit, OnChanges {
     }
   }
 
+  toggleConfirmDialog(): void {
+    this.showConfirmDialog = !this.showConfirmDialog;
+  }
+
   closeDialog() {
-    this.closeDialogEmitter.emit('');
+    this.closeDialogEmitter.emit(false);
   }
 }

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

@@ -1,5 +1,5 @@
 @if (overlayData !== "new") {
-<section>
+<section class="overlay">
   <div class="dialog">
     <div class="header">
       <img src="./../../../../assets/img/logo.svg" alt="" />
@@ -36,7 +36,7 @@
   </div>
 </section>
 } @else {
-<section>
+<section class="overlay">
   <div class="dialog">
     <div class="header">
       <img src="./../../../../assets/img/logo.svg" alt="" />

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

@@ -21,7 +21,7 @@ import { ColorPickerModule } from 'ngx-color-picker';
 export class ContactOverlayComponent implements OnInit {
   @Input() overlayData: any = [];
   @Input() overlayType: string = '';
-  @Output() closeDialogEmitter = new EventEmitter<string>();
+  @Output() closeDialogEmitter = new EventEmitter<boolean>();
 
   randomColor: string = this.getRandomColor();
   userInitials: string = '';
@@ -52,7 +52,7 @@ export class ContactOverlayComponent implements OnInit {
   }
 
   closeDialog() {
-    this.closeDialogEmitter.emit('');
+    this.closeDialogEmitter.emit(false);
   }
 
   /**

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

@@ -13,7 +13,7 @@ import { TranslateModule } from '@ngx-translate/core';
 export class DialogOverlayComponent {
   @Input() overlayData: string = '';
   @Input() overlayType: string = '';
-  @Output() closeDialogEmitter = new EventEmitter<string>();
+  @Output() closeDialogEmitter = new EventEmitter<boolean>();
 
   constructor(private router: Router) {}
 
@@ -24,6 +24,6 @@ export class DialogOverlayComponent {
    */
   closeOverlay() {
     this.router.navigate(['/login']);
-    this.closeDialogEmitter.emit('');
+    this.closeDialogEmitter.emit(false);
   }
 }

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

@@ -14,8 +14,8 @@ import { ContactOverlayComponent } from './contact-overlay/contact-overlay.compo
     CommonModule,
     TaskOverlayComponent,
     TaskEditOverlayComponent,
-    DialogOverlayComponent,
     ContactOverlayComponent,
+    DialogOverlayComponent,
   ],
   templateUrl: './overlay.component.html',
   styleUrl: './overlay.component.scss',
@@ -53,23 +53,26 @@ export class OverlayComponent implements OnInit {
    * If the overlay type is 'dialog', navigates to the login route.
    * @param emitter The string to be emitted, which will also be set as the overlay data.
    */
-  onCloseOverlay(emitter: string) {
-    this.overlayType === 'dialog' && this.router.navigate(['/login']);
+  onCloseOverlay(emitter: boolean) {
     this.overlayData = emitter;
+    this.overlayService.clearOverlayData();
   }
 
   @HostListener('document:click', ['$event'])
+
   /**
-   * Listens for clicks on the overlay background and closes the overlay if the target element does not have the class 'overlay-content'.
-   * @param event The click event.
+   * Checks if a click event occurred within the overlay but outside the content or dialog elements.
+   * If so, closes the overlay by emitting an event.
+   *
+   * @param event The MouseEvent that triggered the check.
    */
   checkOpenContactEdit(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;
     if (
       targetElement.closest('.overlay') &&
-      !targetElement.closest('.overlay-content')
+      (!targetElement.closest('.content') || !targetElement.closest('.dialog'))
     ) {
-      this.onCloseOverlay('');
+      this.onCloseOverlay(false);
     }
   }
 }

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

@@ -16,7 +16,7 @@ import { ApiService } from '../../../../services/api.service';
 export class TaskEditOverlayComponent {
   @Input() overlayData: string = '';
   @Input() overlayType: string = '';
-  @Output() closeDialogEmitter = new EventEmitter<string>();
+  @Output() closeDialogEmitter = new EventEmitter<boolean>();
 
   overlayMobile: boolean = false;
 
@@ -64,7 +64,7 @@ export class TaskEditOverlayComponent {
   closeDialog() {
     this.overlayMobile
       ? this.router.navigate(['/board'])
-      : this.closeDialogEmitter.emit('');
+      : this.closeDialogEmitter.emit(false);
     this.removeTaskData();
   }
 

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

@@ -145,6 +145,8 @@
   </div>
   }
 </section>
+
+<!-- Confirm dialog -->
 <app-confirm-dialog
   *ngIf="showConfirmDialog"
   [message]="'confirmDialogComponent.deleteTask' | translate"

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

@@ -29,7 +29,7 @@ import { ConfirmDialogComponent } from '../../confirm-dialog/confirm-dialog.comp
 })
 export class TaskOverlayComponent implements OnInit {
   @Input() overlayData: string = '';
-  @Output() closeDialogEmitter = new EventEmitter<string>();
+  @Output() closeDialogEmitter = new EventEmitter<boolean>();
 
   task: Task | null = null;
   overlayMobile: boolean = false;
@@ -94,7 +94,7 @@ export class TaskOverlayComponent implements OnInit {
    * can be used to close the overlay from the parent component.
    */
   closeDialog() {
-    this.closeDialogEmitter.emit('');
+    this.closeDialogEmitter.emit(false);
   }
 
   /**