added username dialog

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

@@ -98,6 +98,8 @@
           @for (user of taskData.assigned; track user ) {
           <div
             class="circle"
+            (mousemove)="openDialog(user, $event)"
+            (mouseleave)="closeDialog()"
             [ngStyle]="{
               'background-color': firebaseService.getUserDetails(user, 'color')
             }"
@@ -108,6 +110,14 @@
           </div>
           }
         </div>
+        @if (AssignedDialogId != '') {
+        <div class="dialog" [style.left.px]="dialogX" [style.top.px]="dialogY">
+          <p>
+            {{ firebaseService.getUserDetails(AssignedDialogId, "firstName") }},
+            {{ firebaseService.getUserDetails(AssignedDialogId, "lastName") }}
+          </p>
+        </div>
+        }
       </div>
       <div class="middle-spacer"><div class="line"></div></div>
       <div class="right-side">

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

@@ -8,6 +8,21 @@ section {
   width: 100%;
 }
 
+.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;
+  }
+}
+
 .edit-task-overlay-content {
   height: calc(700px - 128px);
   padding: 0 6px;
@@ -112,6 +127,7 @@ p {
   border-radius: 100%;
   border: 2px solid var(--white);
   margin-right: 6px;
+  cursor: default;
   .initials {
     font-size: 12px;
     font-weight: 400;

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

@@ -28,6 +28,9 @@ export class AddTaskComponent {
   searchValue: string = '';
   searchInput: boolean = false;
   filteredUsers: User[] = [];
+  AssignedDialogId: string = '';
+  dialogX: number = 0;
+  dialogY: number = 0;
 
   constructor(
     public firebaseService: FirebaseService,
@@ -51,6 +54,20 @@ export class AddTaskComponent {
     this.loadLocalStorageData();
   }
 
+  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 = '';
+  }
+
   loadEditTaskData() {
     if (this.overlayData !== '') {
       const taskData = this.getTaskData(this.overlayData)[0];

src/app/services/firebase.service.ts

@@ -86,13 +86,9 @@ export class FirebaseService implements OnDestroy {
   }
 
   async addNewTask(task: Task) {
-    await addDoc(collection(this.firestore, 'tasks'), task)
-      .catch((err) => {
-        console.error(err);
-      })
-      .then((docRef) => {
-        console.log('Document written with ID: ', docRef?.id);
-      });
+    await addDoc(collection(this.firestore, 'tasks'), task).catch((err) => {
+      console.error(err);
+    });
   }
 
   // ------------- USERS ------------- //