display users

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

@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';
 import { Task } from '../../interfaces/task.interface';
 import { TaskService } from '../../services/task.service';
 import { TaskComponent } from './task/task.component';
-import { EMPTY, isEmpty } from 'rxjs';
 import { TaskEmptyComponent } from './task/task-empty/task-empty.component';
 
 @Component({

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

@@ -28,10 +28,6 @@ export class TaskComponent {
     private userService: UserService
   ) {}
 
-  ngOnDestroy() {
-    this.userService.unsubUser();
-  }
-
   // Subtasks
 
   completedSubtasks(): number {

src/app/components/contacts/contacts.component.html

@@ -1 +1,17 @@
-<p>contacts works!</p>
+<section>
+  <div class="left-frame">
+    <button class="btn" type="submit">
+      <div class="btn-inside">
+        <span>Add new contact</span>
+        <img src="./../../../assets/img/contact/add.svg" alt="check" />
+      </div>
+    </button>
+
+    @for (sortLetter of usersFirstLetter; track allUsers) {
+    <div>{{ sortLetter }}</div>
+    @for (count of usersByFirstLetter[sortLetter]; track usersByFirstLetter; let
+    index = $index) {
+    <div>{{ usersByFirstLetter[sortLetter][index] }}</div>
+    } }
+  </div>
+</section>

src/app/components/contacts/contacts.component.scss

@@ -0,0 +1,28 @@
+.btn-inside {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 56px;
+  width: 302px;
+  padding: 8px 8px 8px 16px;
+  border-radius: 10px;
+  border: 0;
+  background-color: var(--dark-blue);
+  color: var(--white);
+  cursor: pointer;
+  font-size: 21px;
+  font-weight: 700;
+  &:hover {
+    background-color: var(--light-blue);
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+  }
+  img {
+    padding-left: 12px;
+  }
+}

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

@@ -1,12 +1,65 @@
 import { Component } from '@angular/core';
+import { UserService } from '../../services/user.service';
+import { User } from '../../interfaces/user.interface';
 
 @Component({
   selector: 'app-contacts',
   standalone: true,
   imports: [],
   templateUrl: './contacts.component.html',
-  styleUrl: './contacts.component.scss'
+  styleUrl: './contacts.component.scss',
 })
 export class ContactsComponent {
+  allUsers: User[] = [];
+  usersFirstLetter: string[] = [];
+  usersByFirstLetter: { [key: string]: string[] } = {};
 
+  constructor(private userService: UserService) {
+    this.userService.subUserList().subscribe(() => {
+      this.allUsers = this.loadAllUser();
+      this.sortAllUsers();
+      this.sortUsersFirstLetter();
+      this.sortUsersByFirstLetter();
+    });
+  }
+
+  loadAllUser(): User[] {
+    // Without Guest
+    return this.userService.allUsers.filter((user, index) => index !== 0);
+  }
+
+  sortAllUsers() {
+    this.allUsers = [...this.allUsers].sort((a, b) =>
+      (a.firstName?.toLowerCase() ?? '').localeCompare(
+        b.firstName?.toLowerCase() ?? ''
+      )
+    );
+  }
+
+  sortUsersFirstLetter() {
+    this.usersFirstLetter = Array.from(
+      new Set(this.allUsers.map((user) => user.firstName[0].toUpperCase()))
+    );
+  }
+
+  sortUsersByFirstLetter() {
+    this.allUsers.forEach((user) => {
+      const firstLetter = user.firstName[0].toUpperCase();
+      if (!this.usersByFirstLetter[firstLetter]) {
+        this.usersByFirstLetter[firstLetter] = [];
+      }
+      this.usersByFirstLetter[firstLetter].push(user.id);
+    });
+  }
+
+  displayUser(firstLetter: string) {
+    return this.allUsers
+      .filter(
+        (user) =>
+          user.firstName.charAt(0).toUpperCase() === firstLetter.toUpperCase()
+      )
+      .map((user) => user.firstName);
+  }
+
+  userName() {}
 }

src/app/services/user.service.ts

@@ -1,6 +1,7 @@
 import { Injectable, inject } from '@angular/core';
 import { Firestore, collection, onSnapshot } from '@angular/fire/firestore';
 import { User } from '../interfaces/user.interface';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
@@ -10,27 +11,22 @@ export class UserService {
 
   allUsers: User[] = [];
 
-  unsubUser;
-
-  constructor() {
-    this.unsubUser = this.subUserList();
-  }
+  constructor() {}
 
   subUserList() {
-    return onSnapshot(this.getUserRef(), (list) => {
-      this.allUsers = [];
-      list.forEach((element) => {
-        const taskData = { ...(element.data() as User), id: element.id };
-        this.allUsers.push(taskData);
-      });
+    return new Observable<void>((observer) => {
+      const unsubscribe = onSnapshot(
+        collection(this.firestore, 'users'),
+        (list) => {
+          this.allUsers = [];
+          list.forEach((element) => {
+            const taskData = { ...(element.data() as User), id: element.id };
+            this.allUsers.push(taskData);
+          });
+          observer.next();
+        }
+      );
+      return () => unsubscribe();
     });
   }
-
-  getUserRef() {
-    return collection(this.firestore, 'users');
-  }
-
-  ngOnDestroy() {
-    this.unsubUser;
-  }
 }

src/assets/img/contact/add.svg

@@ -0,0 +1,3 @@
+<svg width="31" height="22" viewBox="0 0 31 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.8294 13.1667C24.5134 13.1667 24.2499 13.0602 24.0388 12.8473C23.8277 12.6343 23.7222 12.3704 23.7222 12.0556V8.94448H20.611C20.2962 8.94448 20.0323 8.83763 19.8194 8.62392C19.6064 8.4102 19.4999 8.14539 19.4999 7.82948C19.4999 7.51357 19.6064 7.25006 19.8194 7.03895C20.0323 6.82784 20.2962 6.72228 20.611 6.72228H23.7222V3.61115C23.7222 3.29635 23.829 3.03246 24.0427 2.81948C24.2564 2.60653 24.5212 2.50005 24.8372 2.50005C25.1531 2.50005 25.4166 2.60653 25.6277 2.81948C25.8388 3.03246 25.9444 3.29635 25.9444 3.61115V6.72228H29.0555C29.3703 6.72228 29.6342 6.82914 29.8472 7.04285C30.0601 7.25656 30.1666 7.52137 30.1666 7.83728C30.1666 8.15319 30.0601 8.41671 29.8472 8.62782C29.6342 8.83893 29.3703 8.94448 29.0555 8.94448H25.9444V12.0556C25.9444 12.3704 25.8375 12.6343 25.6238 12.8473C25.4101 13.0602 25.1453 13.1667 24.8294 13.1667ZM11.4999 10.4778C10.0333 10.4778 8.81473 9.99264 7.84435 9.02228C6.874 8.0519 6.38882 6.83338 6.38882 5.36672C6.38882 3.90005 6.874 2.68154 7.84435 1.71118C8.81473 0.740804 10.0333 0.255615 11.4999 0.255615C12.9666 0.255615 14.1851 0.740804 15.1555 1.71118C16.1258 2.68154 16.611 3.90005 16.611 5.36672C16.611 6.83338 16.1258 8.0519 15.1555 9.02228C14.1851 9.99264 12.9666 10.4778 11.4999 10.4778ZM1.94435 21.1667C1.62955 21.1667 1.36566 21.0602 1.15269 20.8473C0.93973 20.6343 0.833252 20.3704 0.833252 20.0556V17.8334C0.833252 17.063 1.0314 16.3612 1.42769 15.7279C1.824 15.0945 2.3666 14.6186 3.05549 14.3C4.62586 13.5815 6.08022 13.0649 7.41855 12.75C8.75691 12.4352 10.1162 12.2779 11.4963 12.2779C12.8765 12.2779 14.237 12.4352 15.5777 12.75C16.9184 13.0649 18.3666 13.5815 19.9222 14.3C20.611 14.6334 21.1573 15.113 21.561 15.7389C21.9647 16.3649 22.1666 17.063 22.1666 17.8334V20.0556C22.1666 20.3704 22.0601 20.6343 21.8472 20.8473C21.6342 21.0602 21.3703 21.1667 21.0555 21.1667H1.94435ZM3.05545 18.9445H19.9444V17.8334C19.9444 17.5149 19.8648 17.2149 19.7055 16.9334C19.5462 16.6519 19.3073 16.4408 18.9888 16.3C17.5518 15.5963 16.2629 15.1204 15.1222 14.8723C13.9814 14.6241 12.774 14.5 11.4999 14.5C10.2259 14.5 9.01844 14.6278 7.87769 14.8834C6.73695 15.1389 5.44066 15.6112 3.98882 16.3C3.69991 16.4408 3.47212 16.6519 3.30545 16.9334C3.13879 17.2149 3.05545 17.5149 3.05545 17.8334V18.9445ZM11.4999 8.25562C12.3221 8.25562 13.0092 7.97969 13.561 7.42785C14.1129 6.87598 14.3888 6.18894 14.3888 5.36672C14.3888 4.54449 14.1129 3.85746 13.561 3.30562C13.0092 2.75375 12.3221 2.47782 11.4999 2.47782C10.6777 2.47782 9.99066 2.75375 9.43882 3.30562C8.88695 3.85746 8.61102 4.54449 8.61102 5.36672C8.61102 6.18894 8.88695 6.87598 9.43882 7.42785C9.99066 7.97969 10.6777 8.25562 11.4999 8.25562Z" fill="white"/>
+</svg>