clean code

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

@@ -30,7 +30,11 @@
     <div class="footer">
       <div class="footer-badge">
         @for (assigned of task.assigned; track assigned) {
-        <span class="footer-badged">{{ userBadged(assigned) }}</span>
+        <span
+          class="footer-badged"
+          [style.background-color]="userBadgedColor(assigned)"
+          >{{ userBadged(assigned) }}</span
+        >
         }
       </div>
       <div class="footer-priority prio-{{ task.priority }}"></div>

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

@@ -100,7 +100,6 @@ section {
   min-height: 32px;
   border-radius: 45px;
   border: 1px solid var(--white);
-  background-color: red;
   color: var(--white);
   font-size: 12px;
   font-weight: 400;

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

@@ -45,7 +45,9 @@ export class TaskComponent {
 
   userBadged(id: number) {
     const userId = String(id);
-    const user = this.userService.getUsers().find((user) => user.id === userId);
+    const user = this.userService
+      .getAllUsers()
+      .find((user) => user.id === userId);
     if (user) {
       if (user.firstName === 'Guest') {
         return user.firstName.charAt(0);
@@ -58,4 +60,16 @@ export class TaskComponent {
       return;
     }
   }
+
+  userBadgedColor(id: number) {
+    const userId = String(id);
+    const user = this.userService
+      .getAllUsers()
+      .find((user) => user.id === userId);
+    if (user) {
+      return user.color;
+    } else {
+      return;
+    }
+  }
 }

src/app/components/contacts/contacts.component.ts

@@ -33,7 +33,9 @@ export class ContactsComponent {
   }
 
   loadAllUserWithoutGuest(): User[] {
-    return this.userService.getUsers().filter((user) => user.initials !== 'G');
+    return this.userService
+      .getAllUsers()
+      .filter((user) => user.initials !== 'G');
   }
 
   sortUsersByFirstLetter(sortLetter: string) {

src/app/services/user.service.ts

@@ -21,21 +21,20 @@ export class UserService implements OnDestroy {
     return onSnapshot(collection(this.firestore, 'users'), (list) => {
       this.allUsers = [];
       list.forEach((element) => {
-        const taskData = element.data() as User;
-        const taskWithId = { ...taskData };
-        taskWithId.id = element.id;
-        this.allUsers.push(taskWithId);
+        const userWithId = { id: element.id, ...element.data() } as User;
+        this.allUsers.push(userWithId);
       });
     });
   }
 
-  getUsers(): User[] {
+  getAllUsers(): User[] {
     return this.allUsers;
   }
 
   getUserDetails(userId: string, query: keyof User) {
-    const filteredUsers = this.getUsers().filter((user) => user.id === userId);
-    return filteredUsers.map((user) => user[query]);
+    return this.getAllUsers()
+      .filter((user) => user.id === userId)
+      .map((user) => user[query]);
   }
 
   ngOnDestroy() {