diff --git a/src/app/components/board/board.component.ts b/src/app/components/board/board.component.ts index 38bc8f0..92c74bc 100644 --- a/src/app/components/board/board.component.ts +++ b/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({ diff --git a/src/app/components/board/task/task.component.ts b/src/app/components/board/task/task.component.ts index 2d5f098..9bac4b6 100644 --- a/src/app/components/board/task/task.component.ts +++ b/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 { diff --git a/src/app/components/contacts/contacts.component.html b/src/app/components/contacts/contacts.component.html index e400718..01fbad9 100644 --- a/src/app/components/contacts/contacts.component.html +++ b/src/app/components/contacts/contacts.component.html @@ -1 +1,17 @@ -

contacts works!

+
+
+ + + @for (sortLetter of usersFirstLetter; track allUsers) { +
{{ sortLetter }}
+ @for (count of usersByFirstLetter[sortLetter]; track usersByFirstLetter; let + index = $index) { +
{{ usersByFirstLetter[sortLetter][index] }}
+ } } +
+
diff --git a/src/app/components/contacts/contacts.component.scss b/src/app/components/contacts/contacts.component.scss index e69de29..ff73220 100644 --- a/src/app/components/contacts/contacts.component.scss +++ b/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; + } +} diff --git a/src/app/components/contacts/contacts.component.ts b/src/app/components/contacts/contacts.component.ts index 8ebd8ab..7ceea73 100644 --- a/src/app/components/contacts/contacts.component.ts +++ b/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() {} } diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts index 611fb4f..aec0957 100644 --- a/src/app/services/user.service.ts +++ b/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((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; - } } diff --git a/src/assets/img/contact/add.svg b/src/assets/img/contact/add.svg new file mode 100644 index 0000000..0c7d4a5 --- /dev/null +++ b/src/assets/img/contact/add.svg @@ -0,0 +1,3 @@ + + +