From 0be9f98cca1fedca08da31c9edbbc0a6bddca535 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Sun, 6 Apr 2025 15:54:18 +0200
Subject: [PATCH] fix: additional bug fixes in OverlayComponent

---
 .../components/add-task/add-task.component.ts |   6 +-
 src/app/components/board/board.component.html |   2 +-
 .../contact-form/contact-form.component.html  | 284 +++++++++---------
 .../contact-overlay.component.html            | 120 ++++----
 .../contact-overlay.component.scss            |  15 +-
 .../components/overlay/overlay.component.ts   |  12 +-
 6 files changed, 209 insertions(+), 230 deletions(-)

diff --git a/src/app/components/add-task/add-task.component.ts b/src/app/components/add-task/add-task.component.ts
index 8dd2420..e6f1681 100644
--- a/src/app/components/add-task/add-task.component.ts
+++ b/src/app/components/add-task/add-task.component.ts
@@ -83,13 +83,13 @@ export class AddTaskComponent implements OnInit {
   }
 
   async loadExistingTaskData() {
-    if (this.overlayData) {
+    if (this.overlayType === 'newTaskOverlay') {
+      this.taskData.status = this.overlayData;
+    } else if (this.overlayData) {
       const taskData = await firstValueFrom(this.getTaskData(this.overlayData));
       if (taskData) {
         this.taskData = { ...this.taskData, ...taskData };
       }
-    } else if (this.overlayType === 'newTaskOverlay') {
-      this.taskData.status = this.overlayData;
     }
   }
 
diff --git a/src/app/components/board/board.component.html b/src/app/components/board/board.component.html
index e0166a4..c694674 100644
--- a/src/app/components/board/board.component.html
+++ b/src/app/components/board/board.component.html
@@ -31,7 +31,7 @@
         >
         <span class="line"></span>
       </div>
-      <button class="btn" type="submit" (click)="addNewTaskOverlay('none')">
+      <button class="btn" type="submit" (click)="addNewTaskOverlay(TODO)">
         <div class="btn-inside">
           <span>{{ "board.addTask" | translate }}</span>
           <img src="./../../../assets/img/board/add_white.svg" alt="check" />
diff --git a/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html b/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html
index fd4ac25..08c5ea7 100644
--- a/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html
+++ b/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html
@@ -1,159 +1,157 @@
-<section>
-  <form
-    (ngSubmit)="onSubmit(contactForm)"
-    (keyup)="updateFormData()"
-    #contactForm="ngForm"
-    onsubmit="return false"
-    class="contact-formular"
-  >
-    <div class="name">
-      <input
-        id="firstName"
-        type="text"
-        class="firstName"
-        name="firstName"
-        #firstName="ngModel"
-        placeholder="{{
-          contactData.firstName !== ''
-            ? contactData.firstName
-            : ('contactDialogForm.firstName' | translate)
-        }}"
-        [(ngModel)]="contactData.firstName"
-        pattern="[A-Za-z]+"
-        autocomplete="off"
-        required
-      />
-      @if (resizeService.isContactViewMedia) {
-      <div class="error-msg">
-        @if (firstName.hasError('pattern') && firstName.touched) {
-        <p>{{ "contactDialogForm.invalidPattern" | translate }}</p>
-        } @else { @if (!firstName.valid && firstName.touched) {
-        <p>{{ "contactDialogForm.invalidFirstName" | translate }}</p>
-        }}
-      </div>
-      }
-      <input
-        id="lastName"
-        type="text"
-        class="lastName"
-        name="lastName"
-        #lastName="ngModel"
-        placeholder="{{
-          contactData.lastName !== ''
-            ? contactData.lastName
-            : ('contactDialogForm.lastName' | translate)
-        }}"
-        [(ngModel)]="contactData.lastName"
-        pattern="[A-Za-z]+"
-        autocomplete="off"
-        required
-      />
-    </div>
-    @if (resizeService.isContactViewMedia) {
-    <div class="error-msg">
-      @if (lastName.hasError('pattern') && lastName.touched) {
-      <p>{{ "contactDialogForm.invalidPattern" | translate }}</p>
-      } @else { @if (!lastName.valid && lastName.touched) {
-      <p>{{ "contactDialogForm.invalidLastName" | translate }}</p>
-      }}
-    </div>
-    } @if (!resizeService.isContactViewMedia) {
-    <div class="error-msg">
-      @if (firstName.hasError('pattern') || lastName.hasError('pattern') &&
-      firstName.touched) {
-      <p>{{ "contactDialogForm.invalidPattern" | translate }}</p>
-      } @else { @if ((!firstName.valid && firstName.touched) && (!lastName.valid
-      && lastName.touched)) {
-      <p>{{ "contactDialogForm.invalidName" | translate }}</p>
-      } @else { @if (!firstName.valid && firstName.touched &&
-      !firstName.hasError('pattern')) {
-      <p>{{ "contactDialogForm.invalidFirstName" | translate }}</p>
-      } @else { @if (!lastName.valid && lastName.touched &&
-      !lastName.hasError('pattern')) {
-      <p>{{ "contactDialogForm.invalidLastName" | translate }}</p>
-      } } } }
-    </div>
-    }
+<form
+  (ngSubmit)="onSubmit(contactForm)"
+  (keyup)="updateFormData()"
+  #contactForm="ngForm"
+  onsubmit="return false"
+  class="contact-formular"
+>
+  <div class="name">
     <input
-      id="email"
-      type="email"
-      name="email"
-      #email="ngModel"
+      id="firstName"
+      type="text"
+      class="firstName"
+      name="firstName"
+      #firstName="ngModel"
       placeholder="{{
-        contactData.email !== ''
-          ? contactData.email
-          : ('contactDialogForm.email' | translate)
+        contactData.firstName !== ''
+          ? contactData.firstName
+          : ('contactDialogForm.firstName' | translate)
       }}"
-      [(ngModel)]="contactData.email"
+      [(ngModel)]="contactData.firstName"
+      pattern="[A-Za-z]+"
       autocomplete="off"
       required
     />
+    @if (resizeService.isContactViewMedia) {
     <div class="error-msg">
-      @if(!email.valid && email.touched &&
-      !checkIfUserEmailIsValid(contactData.email)) {
-      <p>{{ "contactDialogForm.invalidMail0" | translate }}</p>
-      } @else { @if (email.touched &&
-      !checkIfUserEmailIsValid(contactData.email)) {
-      <p>{{ "contactDialogForm.invalidMail1" | translate }}</p>
-      } @else { @if (existEmailOnServer(contactData.email) &&
-      !contactData.email) {
-      <p>{{ "contactDialogForm.invalidMail2" | translate }}</p>
-      } } }
+      @if (firstName.hasError('pattern') && firstName.touched) {
+      <p>{{ "contactDialogForm.invalidPattern" | translate }}</p>
+      } @else { @if (!firstName.valid && firstName.touched) {
+      <p>{{ "contactDialogForm.invalidFirstName" | translate }}</p>
+      }}
     </div>
+    }
     <input
-      id="phone"
-      type="phone"
-      name="phone"
-      #phone="ngModel"
+      id="lastName"
+      type="text"
+      class="lastName"
+      name="lastName"
+      #lastName="ngModel"
       placeholder="{{
-        contactData.phone !== ''
-          ? contactData.phone
-          : ('contactDialogForm.phone' | translate)
+        contactData.lastName !== ''
+          ? contactData.lastName
+          : ('contactDialogForm.lastName' | translate)
       }}"
-      [(ngModel)]="contactData.phone"
-      pattern="[\d\+\-\(\)\/]{10,15}"
+      [(ngModel)]="contactData.lastName"
+      pattern="[A-Za-z]+"
       autocomplete="off"
+      required
     />
-    <div class="error-msg">
-      @if (!phone.valid && phone.touched) {
-      <p>{{ "contactDialogForm.invalidPhone" | translate }}</p>
-      }
-    </div>
-    <div class="btns">
-      @if (selectedUserExists) {
-      <app-form-btn
-        class="btn-delete"
-        type="button"
-        value="{{ 'contactDialogForm.btnDelete' | translate }}"
-        (click)="toggleConfirmDialog()"
-      ></app-form-btn>
-      } @else {
-      <app-form-btn
-        class="btn-cancel"
-        type="button"
-        value="{{ 'contactDialogForm.btnCancel' | translate }}"
-        (click)="closeDialog()"
-      ></app-form-btn>
-      }
-      <app-form-btn
-        [class]="'btn-submit'"
-        [type]="'submit'"
-        [img]="'check'"
-        [imgFilter]="'none'"
-        value="{{ 'contactDialogForm.btnSave' | translate }}"
-        [disabled]="
-          firstName.invalid ||
-          !contactData.firstName ||
-          lastName.invalid ||
-          !contactData.lastName ||
-          email.invalid ||
-          !contactData.email ||
-          !checkIfUserEmailIsValid(contactData.email)
-        "
-      ></app-form-btn>
-    </div>
-  </form>
-</section>
+  </div>
+  @if (resizeService.isContactViewMedia) {
+  <div class="error-msg">
+    @if (lastName.hasError('pattern') && lastName.touched) {
+    <p>{{ "contactDialogForm.invalidPattern" | translate }}</p>
+    } @else { @if (!lastName.valid && lastName.touched) {
+    <p>{{ "contactDialogForm.invalidLastName" | translate }}</p>
+    }}
+  </div>
+  } @if (!resizeService.isContactViewMedia) {
+  <div class="error-msg">
+    @if (firstName.hasError('pattern') || lastName.hasError('pattern') &&
+    firstName.touched) {
+    <p>{{ "contactDialogForm.invalidPattern" | translate }}</p>
+    } @else { @if ((!firstName.valid && firstName.touched) && (!lastName.valid
+    && lastName.touched)) {
+    <p>{{ "contactDialogForm.invalidName" | translate }}</p>
+    } @else { @if (!firstName.valid && firstName.touched &&
+    !firstName.hasError('pattern')) {
+    <p>{{ "contactDialogForm.invalidFirstName" | translate }}</p>
+    } @else { @if (!lastName.valid && lastName.touched &&
+    !lastName.hasError('pattern')) {
+    <p>{{ "contactDialogForm.invalidLastName" | translate }}</p>
+    } } } }
+  </div>
+  }
+  <input
+    id="email"
+    type="email"
+    name="email"
+    #email="ngModel"
+    placeholder="{{
+      contactData.email !== ''
+        ? contactData.email
+        : ('contactDialogForm.email' | translate)
+    }}"
+    [(ngModel)]="contactData.email"
+    autocomplete="off"
+    required
+  />
+  <div class="error-msg">
+    @if(!email.valid && email.touched &&
+    !checkIfUserEmailIsValid(contactData.email)) {
+    <p>{{ "contactDialogForm.invalidMail0" | translate }}</p>
+    } @else { @if (email.touched && !checkIfUserEmailIsValid(contactData.email))
+    {
+    <p>{{ "contactDialogForm.invalidMail1" | translate }}</p>
+    } @else { @if (existEmailOnServer(contactData.email) && !contactData.email)
+    {
+    <p>{{ "contactDialogForm.invalidMail2" | translate }}</p>
+    } } }
+  </div>
+  <input
+    id="phone"
+    type="phone"
+    name="phone"
+    #phone="ngModel"
+    placeholder="{{
+      contactData.phone !== ''
+        ? contactData.phone
+        : ('contactDialogForm.phone' | translate)
+    }}"
+    [(ngModel)]="contactData.phone"
+    pattern="[\d\+\-\(\)\/]{10,15}"
+    autocomplete="off"
+  />
+  <div class="error-msg">
+    @if (!phone.valid && phone.touched) {
+    <p>{{ "contactDialogForm.invalidPhone" | translate }}</p>
+    }
+  </div>
+  <div class="btns">
+    @if (selectedUserExists) {
+    <app-form-btn
+      class="btn-delete"
+      type="button"
+      value="{{ 'contactDialogForm.btnDelete' | translate }}"
+      (click)="toggleConfirmDialog()"
+    ></app-form-btn>
+    } @else {
+    <app-form-btn
+      class="btn-cancel"
+      type="button"
+      value="{{ 'contactDialogForm.btnCancel' | translate }}"
+      (click)="closeDialog()"
+    ></app-form-btn>
+    }
+    <app-form-btn
+      [class]="'btn-submit'"
+      [type]="'submit'"
+      [img]="'check'"
+      [imgFilter]="'none'"
+      value="{{ 'contactDialogForm.btnSave' | translate }}"
+      [disabled]="
+        firstName.invalid ||
+        !contactData.firstName ||
+        lastName.invalid ||
+        !contactData.lastName ||
+        email.invalid ||
+        !contactData.email ||
+        !checkIfUserEmailIsValid(contactData.email)
+      "
+    ></app-form-btn>
+  </div>
+</form>
 
 <!-- Confirm dialog -->
 <app-confirm-dialog
diff --git a/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.html b/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.html
index 4c9cbd4..b3ad0fd 100644
--- a/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.html
+++ b/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.html
@@ -1,69 +1,67 @@
 @if (overlayData !== "new") {
-<section class="overlay">
-  <div class="dialog">
-    <div class="header">
-      <img src="./../../../../assets/img/logo.svg" alt="" />
-      <p>{{ "contacts.editContact" | translate }}</p>
-      <app-btn-close (click)="closeDialog()"></app-btn-close>
-    </div>
-    <div class="content">
-      <div class="badge">
-        <div class="picker">
-          <input
-            [(colorPicker)]="overlayData.color"
-            [style.background]="newColor === '' ? overlayData.color : newColor"
-            (colorPickerChange)="updateColor($event)"
-          />
-          <div class="initials">
-            @if (!userInitials) {
-            {{ overlayData.initials }} } @else {
-            {{ userInitials }}
-            }
-          </div>
+
+<div class="overlay">
+  <div class="header">
+    <img src="./../../../../assets/img/logo.svg" alt="" />
+    <p>{{ "contacts.editContact" | translate }}</p>
+    <app-btn-close (click)="closeDialog()"></app-btn-close>
+  </div>
+  <div class="content">
+    <div class="badge">
+      <div class="picker">
+        <input
+          [(colorPicker)]="overlayData.color"
+          [style.background]="newColor === '' ? overlayData.color : newColor"
+          (colorPickerChange)="updateColor($event)"
+        />
+        <div class="initials">
+          @if (!userInitials) {
+          {{ overlayData.initials }} } @else {
+          {{ userInitials }}
+          }
         </div>
       </div>
-      <div class="form">
-        <app-contact-form
-          (initialsEmitter)="initialsEmitter($event)"
-          (closeDialogEmitter)="closeDialog()"
-          [selectedUser]="overlayData"
-          [newColor]="newColor"
-          [currentColor]="overlayData.color"
-        ></app-contact-form>
-      </div>
     </div>
-    <div class="notice">{{ "contacts.notice" | translate }}</div>
+    <div class="form">
+      <app-contact-form
+        (initialsEmitter)="initialsEmitter($event)"
+        (closeDialogEmitter)="closeDialog()"
+        [selectedUser]="overlayData"
+        [newColor]="newColor"
+        [currentColor]="overlayData.color"
+      ></app-contact-form>
+    </div>
   </div>
-</section>
+  <div class="notice">{{ "contacts.notice" | translate }}</div>
+</div>
 } @else {
-<section class="overlay">
-  <div class="dialog">
-    <div class="header">
-      <img src="./../../../../assets/img/logo.svg" alt="" />
-      <p>{{ "contacts.addContact" | translate }}</p>
-      <app-btn-close (click)="closeDialog()"></app-btn-close>
-    </div>
-    <div class="content">
-      <div class="badge">
-        <div class="picker">
-          <input
-            [(colorPicker)]="randomColor"
-            [style.background]="randomColor"
-            (colorPickerSelect)="updateColor($event)"
-          />
-          <div class="initials">{{ userInitials }}</div>
-        </div>
-      </div>
-      <div class="form">
-        <app-contact-form
-          (initialsEmitter)="initialsEmitter($event)"
-          (closeDialogEmitter)="closeDialog()"
-          [randomColor]="randomColor"
-          [newColor]="newColor"
-        ></app-contact-form>
-      </div>
-    </div>
-    <div class="notice">{{ "contacts.notice" | translate }}</div>
+
+<div class="overlay">
+  <div class="header">
+    <img src="./../../../../assets/img/logo.svg" alt="" />
+    <p>{{ "contacts.addContact" | translate }}</p>
+    <app-btn-close (click)="closeDialog()"></app-btn-close>
   </div>
-</section>
+  <div class="content">
+    <div class="badge">
+      <div class="picker">
+        <input
+          [(colorPicker)]="randomColor"
+          [style.background]="randomColor"
+          (colorPickerSelect)="updateColor($event)"
+        />
+        <div class="initials">{{ userInitials }}</div>
+      </div>
+    </div>
+    <div class="form">
+      <app-contact-form
+        (initialsEmitter)="initialsEmitter($event)"
+        (closeDialogEmitter)="closeDialog()"
+        [randomColor]="randomColor"
+        [newColor]="newColor"
+      ></app-contact-form>
+    </div>
+  </div>
+  <div class="notice">{{ "contacts.notice" | translate }}</div>
+</div>
 }
diff --git a/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.scss b/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.scss
index 342471c..5594605 100644
--- a/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.scss
+++ b/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.scss
@@ -1,17 +1,4 @@
-section {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dialog {
+.overlay {
   background-color: var(--white);
   width: 760px;
   height: auto;
diff --git a/src/app/shared/components/overlay/overlay.component.ts b/src/app/shared/components/overlay/overlay.component.ts
index 11f2aaf..b6e8ec1 100644
--- a/src/app/shared/components/overlay/overlay.component.ts
+++ b/src/app/shared/components/overlay/overlay.component.ts
@@ -59,19 +59,15 @@ export class OverlayComponent implements OnInit {
   }
 
   @HostListener('document: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.
+   * Closes the contact edit overlay if the user clicks on the overlay background.
    *
-   * @param event The MouseEvent that triggered the check.
+   * @param event The MouseEvent triggered by a click action.
    */
   checkOpenContactEdit(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;
-    if (
-      targetElement.closest('.overlay') &&
-      (!targetElement.closest('.content') || !targetElement.closest('.dialog'))
-    ) {
+
+    if (targetElement === document.querySelector('.overlay')) {
       this.onCloseOverlay(false);
     }
   }