added search

src/app/components/add-task/add-task.component.html

@@ -58,13 +58,21 @@
         <div class="assigned">
           <p>Assigned to</p>
           <input
-            class="searchfield"
+            #searchField
+            id="search-assigned"
+            class="search-assigned"
+            name="search"
             type="text"
+            [(ngModel)]="searchValue"
+            (input)="searchTask()"
             autocomplete="off"
             (click)="toggleAssignedMenu()"
           />
           @if (isAssignedOpen) {
-          <app-assigned></app-assigned>
+          <app-assigned
+            [filteredUsers]="filteredUsers"
+            [searchInput]="searchInput"
+          ></app-assigned>
           }
         </div>
       </div>

src/app/components/add-task/add-task.component.scss

@@ -37,7 +37,7 @@ p {
   padding: 6px;
   p {
     color: var(--red);
-    font-size: 16px;
+    font-size: 12px;
     font-weight: 400;
   }
 }

src/app/components/add-task/add-task.component.ts

@@ -2,6 +2,8 @@ import { CommonModule } from '@angular/common';
 import { Component, HostListener, ViewChild } from '@angular/core';
 import { FormsModule, NgForm, NgModel } from '@angular/forms';
 import { AssignedComponent } from './assigned/assigned.component';
+import { User } from '../../interfaces/user.interface';
+import { FirebaseService } from '../../services/firebase.service';
 
 @Component({
   selector: 'app-add-task',
@@ -17,7 +19,12 @@ export class AddTaskComponent {
 
   currentDate: string = new Date().toISOString().split('T')[0];
   dateInPast: boolean = false;
-  isAssignedOpen: boolean = true;
+  isAssignedOpen: boolean = false;
+  searchValue: string = '';
+  searchInput: boolean = false;
+  filteredUsers: User[] = [];
+
+  constructor(public firebaseService: FirebaseService) {}
 
   taskData = {
     title: '',
@@ -37,6 +44,27 @@ export class AddTaskComponent {
     }
   }
 
+  updateSearchInput() {
+    if (this.searchValue) {
+      this.searchInput = this.searchValue.toLowerCase().length > 0;
+    } else {
+      this.searchInput = false;
+    }
+    return this.searchInput;
+  }
+
+  searchTask(): void {
+    this.updateSearchInput();
+    this.filteredUsers = this.firebaseService
+      .getAllUserWithoutGuest()
+      .filter(
+        (user) =>
+          user.firstName.toLowerCase().includes(this.searchValue) ||
+          user.lastName.toLowerCase().includes(this.searchValue) ||
+          user.initials.toLowerCase().includes(this.searchValue)
+      );
+  }
+
   toggleAssignedMenu() {
     this.isAssignedOpen = !this.isAssignedOpen;
   }
@@ -93,7 +121,7 @@ export class AddTaskComponent {
   @HostListener('document:click', ['$event'])
   checkOpenNavbar(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;
-    if (!targetElement.closest('.assigned')) {
+    if (!targetElement.closest('.search-assigned')) {
       this.isAssignedOpen = false;
     }
   }

src/app/components/add-task/assigned/assigned.component.html

@@ -1,5 +1,5 @@
 <section>
-  @for (user of loadAllUserWithoutGuest(); track user; let index = $index) {
+  @for (user of displayAssigned(); track user; let index = $index) {
   <div
     class="content"
     (click)="addAssignedToTask(user.id)"

src/app/components/add-task/assigned/assigned.component.ts

@@ -11,6 +11,8 @@ import { User } from '../../../interfaces/user.interface';
   styleUrl: './assigned.component.scss',
 })
 export class AssignedComponent {
+  @Input() filteredUsers: User[] = [];
+  @Input() searchInput: boolean = false;
   assigned: string[] = [];
 
   constructor(public firebaseService: FirebaseService) {
@@ -45,9 +47,11 @@ export class AssignedComponent {
     }
   }
 
-  loadAllUserWithoutGuest(): User[] {
-    return this.firebaseService
-      .getAllUsers()
-      .filter((user) => user.initials !== 'G');
+  displayAssigned() {
+    if (this.searchInput) {
+      return this.filteredUsers;
+    } else {
+      return this.firebaseService.getAllUserWithoutGuest();
+    }
   }
 }

src/app/services/firebase.service.ts

@@ -72,6 +72,10 @@ export class FirebaseService implements OnDestroy {
     return this.allUsers;
   }
 
+  getAllUserWithoutGuest(): User[] {
+    return this.getAllUsers().filter((user) => user.initials !== 'G');
+  }
+
   getCurrentUserId() {
     let currentUser = localStorage.getItem('currentUser');
     if (currentUser !== null) {