{{ sortLetter }}
+ @for (sortLetter of this.sortAllUsers(); track sortLetter) {
+ {{ sortLetter.firstName }}
- @for (count of usersByFirstLetter[sortLetter]; track usersByFirstLetter;
- let index = $index) {
-
+ @for (user of this.sortUsersFirstLetter(sortLetter.id); track user; let
+ index = $index) {
+
diff --git a/src/app/components/contacts/contacts.component.ts b/src/app/components/contacts/contacts.component.ts
index 8c29df2..9719d3a 100644
--- a/src/app/components/contacts/contacts.component.ts
+++ b/src/app/components/contacts/contacts.component.ts
@@ -18,14 +18,7 @@ export class ContactsComponent {
usersByFirstLetter: { [key: string]: string[] } = {};
currentUserId: string = '';
- constructor(public userService: UserService, private route: ActivatedRoute) {
- this.userService.subUserList().subscribe(() => {
- this.allUsers = this.loadAllUser();
- this.sortAllUsers();
- this.sortUsersFirstLetter();
- this.sortUsersByFirstLetter();
- });
- }
+ constructor(public userService: UserService, private route: ActivatedRoute) {}
ngOnInit(): void {
this.routeUserId();
@@ -39,34 +32,22 @@ export class ContactsComponent {
}
}
- loadAllUser(): User[] {
- // Without Guest
- return this.userService.allUsers.filter((user, index) => index !== 0);
+ loadAllUserWithoutGuest(): User[] {
+ return this.userService.getUsers().filter((user) => user.initials !== 'G');
}
sortAllUsers() {
- this.allUsers = [...this.allUsers].sort((a, b) =>
- (a.firstName?.toLowerCase() ?? '').localeCompare(
- b.firstName?.toLowerCase() ?? ''
+ return [...this.loadAllUserWithoutGuest()].sort((a, b) =>
+ (a.initials?.toLowerCase() ?? '').localeCompare(
+ b.initials?.toLowerCase() ?? ''
)
);
}
- sortUsersFirstLetter() {
- this.usersFirstLetter = [];
- this.usersFirstLetter = Array.from(
- new Set(this.allUsers.map((user) => user.firstName[0].toUpperCase()))
+ sortUsersFirstLetter(userId: string) {
+ const filteredUsers = this.loadAllUserWithoutGuest().filter(
+ (user) => user.id === userId
);
- }
-
- sortUsersByFirstLetter() {
- this.usersByFirstLetter = {};
- this.allUsers.forEach((user) => {
- const firstLetter = user.firstName[0].toUpperCase();
- if (!this.usersByFirstLetter[firstLetter]) {
- this.usersByFirstLetter[firstLetter] = [];
- }
- this.usersByFirstLetter[firstLetter].push(user.id);
- });
+ return filteredUsers;
}
}
diff --git a/src/app/services/language.service.ts b/src/app/services/language.service.ts
index d81b48b..14de5e6 100644
--- a/src/app/services/language.service.ts
+++ b/src/app/services/language.service.ts
@@ -6,15 +6,17 @@ import { TranslateService } from '@ngx-translate/core';
})
export class LanguageService {
currentLang = 'en';
- currentFlag = 'de';
constructor(private translate: TranslateService) {
this.translate.setDefaultLang(this.currentLang);
}
- switchLanguage() {
- this.currentLang = this.currentLang === 'en' ? 'de' : 'en';
- this.currentFlag = this.currentLang === 'en' ? 'de' : 'en';
+ switchLanguage(lang: string) {
+ if (lang === 'en') {
+ this.currentLang = 'en';
+ } else if (lang == 'de') {
+ this.currentLang = 'de';
+ }
this.translate.use(this.currentLang);
}
}
diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts
index 4d26abf..17d08a8 100644
--- a/src/app/services/user.service.ts
+++ b/src/app/services/user.service.ts
@@ -1,52 +1,53 @@
-import { Injectable, inject } from '@angular/core';
+import { Injectable, OnDestroy, 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',
})
-export class UserService {
+export class UserService implements OnDestroy {
firestore: Firestore = inject(Firestore);
allUsers: User[] = [];
- userMap: { [key: string]: User } = {};
+ isUserLogin: boolean = true;
+
+ unsubUser;
constructor() {
- this.subUserList().subscribe(() => {
- this.organizeUserData();
- });
+ this.unsubUser = this.subUserList();
+ }
+
+ getUsers(): User[] {
+ return this.allUsers;
}
subUserList() {
- 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();
+ return onSnapshot(collection(this.firestore, 'users'), (list) => {
+ this.allUsers = [];
+ list.forEach((element) => {
+ this.allUsers.push(this.setUserObject(element.data(), element.id));
+ });
});
}
- organizeUserData() {
- this.userMap = {};
- this.allUsers.forEach((user) => {
- this.userMap[user.id] = user;
- });
+ setUserObject(obj: any, id: string): User {
+ return {
+ id: id,
+ firstName: obj.firstName,
+ lastName: obj.lastName,
+ email: obj.email,
+ phone: obj.phone,
+ initials: obj.initials,
+ color: obj.color,
+ };
}
- displayUserDetails(id: string, query: keyof User) {
- if (this.userMap[id]) {
- const user = this.userMap[id];
- return user[query];
- }
- return '';
+ getUserDetails(userId: string, query: keyof User) {
+ const filteredUsers = this.getUsers().filter((user) => user.id === userId);
+ return filteredUsers.map((user) => user[query]);
+ }
+
+ ngOnDestroy() {
+ this.unsubUser();
}
}
diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html
index dd1fa89..c973657 100644
--- a/src/app/shared/components/header/header.component.html
+++ b/src/app/shared/components/header/header.component.html
@@ -8,10 +8,17 @@
-
- {{
- userService.displayUserDetails(
- usersByFirstLetter[sortLetter][index],
- "initials"
- )
- }}
+ {{ userService.getUserDetails(user.id, "initials") }}
- {{
- userService.displayUserDetails(
- usersByFirstLetter[sortLetter][index],
- "firstName"
- )
- }}
+ {{ userService.getUserDetails(user.id, "firstName") }}
,
- {{
- userService.displayUserDetails(
- usersByFirstLetter[sortLetter][index],
- "lastName"
- )
- }}
+ {{ userService.getUserDetails(user.id, "lastName") }}
- {{
- userService.displayUserDetails(
- usersByFirstLetter[sortLetter][index],
- "email"
- )
- }}
+ {{ userService.getUserDetails(user.id, "email") }}
Kanban Project Management Tool
- 
+ 
+
+
+
+
+ 
G