dialogue for user name on the task board added

src/app/components/add-task/add-task.component.html

@@ -331,15 +331,11 @@
         [img]="'check'"
         [imgFilter]="'none'"
         [value]="
-          (overlayData.toString() !== '' &&
-          overlayData.toString() !== 'none' &&
-          overlayData.toString() !== 'todo' &&
-          overlayData.toString() !== 'inprogress' &&
-          overlayData.toString() !== 'awaitfeedback' &&
-          overlayData.toString() !== 'done'
-            ? 'addTask.update'
-            : 'addTask.create'
-          ) | translate
+          ['none', 'todo', 'inprogress', 'awaitfeedback', 'done'].includes(
+            overlayData.toString()
+          )
+            ? ('addTask.create' | translate)
+            : ('addTask.update' | translate)
         "
         [disabled]="
           title.invalid ||

src/app/components/board/task/task.component.html

@@ -44,12 +44,16 @@
         <div class="footer-badge">
           <span
             class="footer-badged"
+            (mousemove)="openDialog(task.creator, $event)"
+            (mouseleave)="closeDialog()"
             [style.background-color]="userBadgedColor(task.creator)"
             >{{ userBadged(task.creator) }}</span
           >
           @for (assigned of task.assigned; track assigned) {
           <span
             class="footer-badged"
+            (mousemove)="openDialog(assigned, $event)"
+            (mouseleave)="closeDialog()"
             [style.background-color]="userBadgedColor(assigned)"
             >{{ userBadged(assigned) }}</span
           >
@@ -64,5 +68,12 @@
     [taskId]="task.id"
     [boardTaskStatus]="task.status"
   ></app-task-menu>
+  } @if (AssignedDialogId != '') {
+  <div class="dialog" [style.left.px]="dialogX" [style.top.px]="dialogY">
+    <p>
+      {{ firebaseService.getUserDetails(AssignedDialogId, "firstName") }},
+      {{ firebaseService.getUserDetails(AssignedDialogId, "lastName") }}
+    </p>
+  </div>
   } }
 </section>

src/app/components/board/task/task.component.scss

@@ -21,6 +21,21 @@ section {
   }
 }
 
+.dialog {
+  position: fixed;
+  width: min-content;
+  height: fit-content;
+  padding: 10px 15px;
+  border-radius: 0px 20px 20px 20px;
+  border: 1px solid var(--black);
+  z-index: 2;
+  background-color: var(--white);
+  p {
+    font-size: 18px;
+    font-weight: 400;
+  }
+}
+
 .header {
   display: flex;
   align-items: center;

src/app/components/board/task/task.component.ts

@@ -18,6 +18,9 @@ import { SharedService } from '../../../services/shared.service';
 export class TaskComponent {
   @Input() task: Task = {} as Task;
   isMenuOpen: boolean = false;
+  AssignedDialogId: string = '';
+  dialogX: number = 0;
+  dialogY: number = 0;
 
   categoryColors = new Map<string, string>([
     ['User Story', '#0038ff'],
@@ -26,7 +29,7 @@ export class TaskComponent {
 
   constructor(
     public dragDropService: DragDropService,
-    private firebaseService: FirebaseService,
+    public firebaseService: FirebaseService,
     public overlayService: OverlayService,
     public sharedService: SharedService,
     private router: Router
@@ -57,15 +60,32 @@ export class TaskComponent {
   @HostListener('document:click', ['$event'])
   checkToggleTaskMenu(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;
-    if (
-      !targetElement.closest('.menu-btn') &&
-      !targetElement.closest('.menu-img') &&
-      !targetElement.closest('app-task-menu')
-    ) {
+    const menuSelectors = ['.menu-btn', '.menu-img', 'app-task-menu'];
+    const isMenuClicked = menuSelectors.some((selector) =>
+      targetElement.closest(selector)
+    );
+
+    if (!isMenuClicked) {
       this.isMenuOpen = false;
     }
   }
 
+  // Dialog
+
+  openDialog(userId: any, event: MouseEvent) {
+    this.AssignedDialogId = userId;
+    this.updateDialogPosition(event);
+  }
+
+  updateDialogPosition(event: MouseEvent) {
+    this.dialogX = event.clientX + 25;
+    this.dialogY = event.clientY + 10;
+  }
+
+  closeDialog() {
+    this.AssignedDialogId = '';
+  }
+
   // Subtasks
 
   completedSubtasks(): number {

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

@@ -128,20 +128,27 @@ export class ContactDetailComponent {
   @HostListener('document:click', ['$event'])
   checkOpenContactEdit(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;
+
     if (targetElement.closest('.btn-edit')) {
-      this.sharedService.isAnyDialogOpen = true;
-      this.sharedService.isEditContactDialogOpen = true;
+      this.setDialogStatus(true, true, false, false);
     } else if (targetElement.closest('.btn-new')) {
-      this.sharedService.isAnyDialogOpen = true;
-      this.sharedService.isNewContactDialogOpen = true;
+      this.setDialogStatus(true, false, true, false);
     } else if (targetElement.closest('.btn-delete')) {
-      this.sharedService.isAnyDialogOpen = true;
-      this.sharedService.isDeleteContactDialogOpen = true;
+      this.setDialogStatus(true, false, false, true);
     } else if (!targetElement.closest('.dialog')) {
-      this.sharedService.isAnyDialogOpen = false;
-      this.sharedService.isEditContactDialogOpen = false;
-      this.sharedService.isDeleteContactDialogOpen = false;
-      this.sharedService.isNewContactDialogOpen = false;
+      this.setDialogStatus(false, false, false, false);
     }
   }
+
+  private setDialogStatus(
+    anyOpen: boolean,
+    editOpen: boolean,
+    newOpen: boolean,
+    deleteOpen: boolean
+  ) {
+    this.sharedService.isAnyDialogOpen = anyOpen;
+    this.sharedService.isEditContactDialogOpen = editOpen;
+    this.sharedService.isNewContactDialogOpen = newOpen;
+    this.sharedService.isDeleteContactDialogOpen = deleteOpen;
+  }
 }