added language menu & update service

src/app/components/contacts/contact-detail/contact-detail.component.html

@@ -15,20 +15,17 @@
       <div
         class="circle"
         [ngStyle]="{
-          'background-color': userService.displayUserDetails(
+          'background-color': userService.getUserDetails(currentUserId, 'color')
-            currentUserId,
-            'color'
-          )
         }"
       >
         <div class="initials">
-          {{ userService.displayUserDetails(currentUserId, "initials") }}
+          {{ userService.getUserDetails(currentUserId, "initials") }}
         </div>
       </div>
       <div class="details">
         <div class="name">
-          {{ userService.displayUserDetails(currentUserId, "firstName") }}
+          {{ userService.getUserDetails(currentUserId, "firstName") }}
-          {{ userService.displayUserDetails(currentUserId, "lastName") }}
+          {{ userService.getUserDetails(currentUserId, "lastName") }}
         </div>
         <div class="btns">
           <div class="btn">
@@ -47,19 +44,13 @@
       <div class="info">
         <p>Email:</p>
         <a
-          [href]="
+          [href]="'mail:' + userService.getUserDetails(currentUserId, 'email')"
-            'mail:' + userService.displayUserDetails(currentUserId, 'email')
-          "
         >
-          {{ userService.displayUserDetails(currentUserId, "email") }}
+          {{ userService.getUserDetails(currentUserId, "email") }}
         </a>
         <p>Phone:</p>
-        <a
+        <a [href]="'tel:' + userService.getUserDetails(currentUserId, 'phone')">
-          [href]="
+          {{ userService.getUserDetails(currentUserId, "phone") }}
-            'tel:' + userService.displayUserDetails(currentUserId, 'phone')
-          "
-        >
-          {{ userService.displayUserDetails(currentUserId, "phone") }}
         </a>
       </div>
     </div>

src/app/components/contacts/contact-detail/contact-detail.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { UserService } from '../../../services/user.service';
 import { CommonModule } from '@angular/common';
 import { ContactsComponent } from '../contacts.component';

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

@@ -6,62 +6,35 @@
         <img src="./../../../assets/img/contact/add.svg" alt="check" />
       </div>
     </button>
-
     <div class="content">
-      @for (sortLetter of usersFirstLetter; track allUsers) {
+      @for (sortLetter of this.sortAllUsers(); track sortLetter) {
-      <div class="first-letter">{{ sortLetter }}</div>
+      <div class="first-letter">{{ sortLetter.firstName }}</div>
       <div class="line"></div>
-      @for (count of usersByFirstLetter[sortLetter]; track usersByFirstLetter;
+      @for (user of this.sortUsersFirstLetter(sortLetter.id); track user; let
-      let index = $index) {
+      index = $index) {
-      <div
+      <div class="contact" routerLink="/contacts/{{ user.id }}">
-        class="contact"
-        routerLink="/contacts/{{ usersByFirstLetter[sortLetter] }}"
-      >
         <div
           class="circle"
           [ngStyle]="{
-            'background-color': userService.displayUserDetails(
+            'background-color': userService.getUserDetails(user.id, 'color')
-              usersByFirstLetter[sortLetter][index],
-              'color'
-            )
           }"
         >
           <div class="initials">
-            {{
+            {{ userService.getUserDetails(user.id, "initials") }}
-              userService.displayUserDetails(
-                usersByFirstLetter[sortLetter][index],
-                "initials"
-              )
-            }}
           </div>
         </div>
         <div class="details">
           <div class="name">
             <div class="first-name">
-              {{
+              {{ userService.getUserDetails(user.id, "firstName") }}
-                userService.displayUserDetails(
-                  usersByFirstLetter[sortLetter][index],
-                  "firstName"
-                )
-              }}
             </div>
             <span>,&nbsp;</span>
             <div class="last-name">
-              {{
+              {{ userService.getUserDetails(user.id, "lastName") }}
-                userService.displayUserDetails(
-                  usersByFirstLetter[sortLetter][index],
-                  "lastName"
-                )
-              }}
             </div>
           </div>
           <div class="email">
-            {{
+            {{ userService.getUserDetails(user.id, "email") }}
-              userService.displayUserDetails(
-                usersByFirstLetter[sortLetter][index],
-                "email"
-              )
-            }}
           </div>
         </div>
       </div>

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) {
+  constructor(public userService: UserService, private route: ActivatedRoute) {}
-    this.userService.subUserList().subscribe(() => {
-      this.allUsers = this.loadAllUser();
-      this.sortAllUsers();
-      this.sortUsersFirstLetter();
-      this.sortUsersByFirstLetter();
-    });
-  }
 
   ngOnInit(): void {
     this.routeUserId();
@@ -39,34 +32,22 @@ export class ContactsComponent {
     }
   }
 
-  loadAllUser(): User[] {
+  loadAllUserWithoutGuest(): User[] {
-    // Without Guest
+    return this.userService.getUsers().filter((user) => user.initials !== 'G');
-    return this.userService.allUsers.filter((user, index) => index !== 0);
   }
 
   sortAllUsers() {
-    this.allUsers = [...this.allUsers].sort((a, b) =>
+    return [...this.loadAllUserWithoutGuest()].sort((a, b) =>
-      (a.firstName?.toLowerCase() ?? '').localeCompare(
+      (a.initials?.toLowerCase() ?? '').localeCompare(
-        b.firstName?.toLowerCase() ?? ''
+        b.initials?.toLowerCase() ?? ''
       )
     );
   }
 
-  sortUsersFirstLetter() {
+  sortUsersFirstLetter(userId: string) {
-    this.usersFirstLetter = [];
+    const filteredUsers = this.loadAllUserWithoutGuest().filter(
-    this.usersFirstLetter = Array.from(
+      (user) => user.id === userId
-      new Set(this.allUsers.map((user) => user.firstName[0].toUpperCase()))
     );
-  }
+    return filteredUsers;
-
-  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);
-    });
   }
 }

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() {
+  switchLanguage(lang: string) {
-    this.currentLang = this.currentLang === 'en' ? 'de' : 'en';
+    if (lang === 'en') {
-    this.currentFlag = this.currentLang === 'en' ? 'de' : 'en';
+      this.currentLang = 'en';
+    } else if (lang == 'de') {
+      this.currentLang = 'de';
+    }
     this.translate.use(this.currentLang);
   }
 }

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.unsubUser = this.subUserList();
-      this.organizeUserData();
+  }
-    });
+
+  getUsers(): User[] {
+    return this.allUsers;
   }
 
   subUserList() {
-    return new Observable<void>((observer) => {
+    return onSnapshot(collection(this.firestore, 'users'), (list) => {
-      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(this.setUserObject(element.data(), element.id));
-            this.allUsers.push(taskData);
       });
-          observer.next();
-        }
-      );
-      return () => unsubscribe();
     });
   }
 
-  organizeUserData() {
+  setUserObject(obj: any, id: string): User {
-    this.userMap = {};
+    return {
-    this.allUsers.forEach((user) => {
+      id: id,
-      this.userMap[user.id] = user;
+      firstName: obj.firstName,
-    });
+      lastName: obj.lastName,
+      email: obj.email,
+      phone: obj.phone,
+      initials: obj.initials,
+      color: obj.color,
+    };
   }
 
-  displayUserDetails(id: string, query: keyof User) {
+  getUserDetails(userId: string, query: keyof User) {
-    if (this.userMap[id]) {
+    const filteredUsers = this.getUsers().filter((user) => user.id === userId);
-      const user = this.userMap[id];
+    return filteredUsers.map((user) => user[query]);
-      return user[query];
   }
-    return '';
+
+  ngOnDestroy() {
+    this.unsubUser();
   }
 }

src/app/shared/components/header/header.component.html

@@ -8,10 +8,17 @@
     <div class="headline">Kanban Project Management Tool</div>
     <div class="left-frame">
       <div class="img-help" routerLink="help">
-        <img src="./../../../../assets/img/sidebar/help.svg" alt="" />
+        <img src="./../../../../assets/img/header/help.svg" alt="" />
+      </div>
+      <div class="img-language" (click)="toggleLanguage()">
+        <img src="./../../../../assets/img/header/language.svg" alt="" />
       </div>
       <div class="img-user" (click)="toggleNavbar()">G</div>
     </div>
   </div>
 </section>
-<app-navbar *ngIf="navbarVisible"></app-navbar>
+<app-navbar *ngIf="navbarVisible" [navbarVisible]="navbarVisible"></app-navbar>
+<app-navbar
+  *ngIf="navbarLanguageVisible"
+  [navbarLanguageVisible]="navbarLanguageVisible"
+></app-navbar>

src/app/shared/components/header/header.component.scss

@@ -38,7 +38,8 @@ section {
   }
 }
 
-.img-help {
+.img-help,
+.img-language {
   display: flex;
   align-items: center;
   width: 56px;

src/app/shared/components/header/header.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostListener } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NavbarComponent } from '../navbar/navbar.component';
 import { CommonModule } from '@angular/common';
@@ -12,23 +12,30 @@ import { CommonModule } from '@angular/common';
 })
 export class HeaderComponent {
   navbarVisible: boolean = false;
-
+  navbarLanguageVisible: boolean = false;
-  constructor(private elementRef: ElementRef) {}
 
   toggleNavbar() {
     this.navbarVisible = !this.navbarVisible;
   }
 
+  toggleLanguage() {
+    this.navbarLanguageVisible = !this.navbarLanguageVisible;
+  }
+
   @HostListener('document:click', ['$event'])
   onClick(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;
-
-    // Überprüfe, ob der Klick außerhalb der Navbar erfolgt ist
     if (
       !targetElement.closest('app-navbar') &&
       !targetElement.closest('.img-user')
     ) {
       this.navbarVisible = false;
     }
+    if (
+      !targetElement.closest('app-navbar') &&
+      !targetElement.closest('.img-language')
+    ) {
+      this.navbarLanguageVisible = false;
+    }
   }
 }

src/app/shared/components/navbar/navbar.component.html

@@ -1,4 +1,5 @@
-<nav id="navbar" class="navbar d-none">
+@if (navbarVisible) {
+<nav class="navbar d-none">
   <div class="link" routerLink="imprint">
     <span>Legal Notice</span>
   </div>
@@ -9,3 +10,25 @@
     <span>Log out</span>
   </div>
 </nav>
+} @else if (navbarLanguageVisible) {
+<nav class="navbar language d-none">
+  <div
+    class="link"
+    (click)="langService.switchLanguage('en')"
+    [ngClass]="{
+      active: langService.currentLang === 'en'
+    }"
+  >
+    <span>English</span>
+  </div>
+  <div
+    class="link"
+    (click)="langService.switchLanguage('de')"
+    [ngClass]="{
+      active: langService.currentLang === 'de'
+    }"
+  >
+    <span>German</span>
+  </div>
+</nav>
+}

src/app/shared/components/navbar/navbar.component.scss

@@ -13,14 +13,32 @@
   z-index: 1;
 }
 
+.language {
+  height: 108px;
+}
+
 .link {
   display: flex;
   align-items: center;
   height: 46px;
   padding: 8px 16px;
   border-radius: 8px;
-  color: var(--very-light-gray4);
+  color: var(--white);
   cursor: pointer;
+  &:hover {
+    background-color: var(--very-dark-blue);
+    span {
+      color: var(--light-blue);
+    }
+  }
+}
+
+.active {
+  background-color: var(--very-dark-blue);
+  cursor: unset;
+  span {
+    color: var(--light-blue);
+  }
 }
 
 span {
@@ -28,8 +46,3 @@ span {
   font-size: 16px;
   font-weight: 400;
 }
-
-.link:hover {
-  color: var(--light-blue);
-  background-color: var(--very-dark-blue);
-}

src/app/shared/components/navbar/navbar.component.ts

@@ -1,11 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { HeaderComponent } from '../header/header.component';
+import { LanguageService } from '../../../services/language.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-navbar',
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, HeaderComponent, CommonModule],
   templateUrl: './navbar.component.html',
   styleUrl: './navbar.component.scss',
 })
-export class NavbarComponent {}
+export class NavbarComponent {
+  @Input() navbarVisible: boolean = false;
+  @Input() navbarLanguageVisible: boolean = false;
+
+  constructor(public langService: LanguageService) {}
+}

src/assets/img/header/help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

src/assets/img/header/language.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/></svg>

src/assets/img/sidebar/help.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.95 16.9658C10.3 16.9658 10.5958 16.845 10.8375 16.6033C11.0792 16.3617 11.2 16.0658 11.2 15.7158C11.2 15.3658 11.0792 15.07 10.8375 14.8283C10.5958 14.5867 10.3 14.4658 9.95 14.4658C9.6 14.4658 9.30417 14.5867 9.0625 14.8283C8.82083 15.07 8.7 15.3658 8.7 15.7158C8.7 16.0658 8.82083 16.3617 9.0625 16.6033C9.30417 16.845 9.6 16.9658 9.95 16.9658ZM10 20.9658C8.61667 20.9658 7.31667 20.7033 6.1 20.1783C4.88333 19.6533 3.825 18.9408 2.925 18.0408C2.025 17.1408 1.3125 16.0825 0.7875 14.8658C0.2625 13.6492 0 12.3492 0 10.9658C0 9.58249 0.2625 8.28249 0.7875 7.06582C1.3125 5.84915 2.025 4.79082 2.925 3.89082C3.825 2.99082 4.88333 2.27832 6.1 1.75332C7.31667 1.22832 8.61667 0.96582 10 0.96582C11.3833 0.96582 12.6833 1.22832 13.9 1.75332C15.1167 2.27832 16.175 2.99082 17.075 3.89082C17.975 4.79082 18.6875 5.84915 19.2125 7.06582C19.7375 8.28249 20 9.58249 20 10.9658C20 12.3492 19.7375 13.6492 19.2125 14.8658C18.6875 16.0825 17.975 17.1408 17.075 18.0408C16.175 18.9408 15.1167 19.6533 13.9 20.1783C12.6833 20.7033 11.3833 20.9658 10 20.9658ZM10 18.9658C12.2333 18.9658 14.125 18.1908 15.675 16.6408C17.225 15.0908 18 13.1992 18 10.9658C18 8.73249 17.225 6.84082 15.675 5.29082C14.125 3.74082 12.2333 2.96582 10 2.96582C7.76667 2.96582 5.875 3.74082 4.325 5.29082C2.775 6.84082 2 8.73249 2 10.9658C2 13.1992 2.775 15.0908 4.325 16.6408C5.875 18.1908 7.76667 18.9658 10 18.9658ZM10.1 6.66582C10.5167 6.66582 10.8792 6.79915 11.1875 7.06582C11.4958 7.33249 11.65 7.66582 11.65 8.06582C11.65 8.43249 11.5375 8.75749 11.3125 9.04082C11.0875 9.32415 10.8333 9.59082 10.55 9.84082C10.1667 10.1742 9.82917 10.5408 9.5375 10.9408C9.24583 11.3408 9.1 11.7908 9.1 12.2908C9.1 12.5242 9.1875 12.72 9.3625 12.8783C9.5375 13.0367 9.74167 13.1158 9.975 13.1158C10.225 13.1158 10.4375 13.0325 10.6125 12.8658C10.7875 12.6992 10.9 12.4908 10.95 12.2408C11.0167 11.8908 11.1667 11.5783 11.4 11.3033C11.6333 11.0283 11.8833 10.7658 12.15 10.5158C12.5333 10.1492 12.8625 9.74915 13.1375 9.31582C13.4125 8.88249 13.55 8.39915 13.55 7.86582C13.55 7.01582 13.2042 6.31999 12.5125 5.77832C11.8208 5.23665 11.0167 4.96582 10.1 4.96582C9.46667 4.96582 8.8625 5.09915 8.2875 5.36582C7.7125 5.63249 7.275 6.04082 6.975 6.59082C6.85833 6.79082 6.82083 7.00332 6.8625 7.22832C6.90417 7.45332 7.01667 7.62415 7.2 7.74082C7.43333 7.87415 7.675 7.91582 7.925 7.86582C8.175 7.81582 8.38333 7.67415 8.55 7.44082C8.73333 7.19082 8.9625 6.99915 9.2375 6.86582C9.5125 6.73249 9.8 6.66582 10.1 6.66582Z" fill="#A8A8A8"/>
-</svg>