From 0aba24ada5419ca427cbd4046f4fc3f69043f2fb Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sun, 7 Apr 2024 17:53:23 +0200
Subject: [PATCH] added search

---
 .../add-task/add-task.component.html          | 12 +++++--
 .../add-task/add-task.component.scss          |  2 +-
 .../components/add-task/add-task.component.ts | 32 +++++++++++++++++--
 .../add-task/assigned/assigned.component.html |  2 +-
 .../add-task/assigned/assigned.component.ts   | 12 ++++---
 src/app/services/firebase.service.ts          |  4 +++
 6 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/src/app/components/add-task/add-task.component.html b/src/app/components/add-task/add-task.component.html
index f5983dd..a5733c4 100644
--- a/src/app/components/add-task/add-task.component.html
+++ b/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>
diff --git a/src/app/components/add-task/add-task.component.scss b/src/app/components/add-task/add-task.component.scss
index 5f58ebe..e471bd8 100644
--- a/src/app/components/add-task/add-task.component.scss
+++ b/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;
   }
 }
diff --git a/src/app/components/add-task/add-task.component.ts b/src/app/components/add-task/add-task.component.ts
index 8ccf1fd..8ce739e 100644
--- a/src/app/components/add-task/add-task.component.ts
+++ b/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;
     }
   }
diff --git a/src/app/components/add-task/assigned/assigned.component.html b/src/app/components/add-task/assigned/assigned.component.html
index fd5ffad..cb8fa09 100644
--- a/src/app/components/add-task/assigned/assigned.component.html
+++ b/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)"
diff --git a/src/app/components/add-task/assigned/assigned.component.ts b/src/app/components/add-task/assigned/assigned.component.ts
index 9ae31ab..fc1330f 100644
--- a/src/app/components/add-task/assigned/assigned.component.ts
+++ b/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();
+    }
   }
 }
diff --git a/src/app/services/firebase.service.ts b/src/app/services/firebase.service.ts
index f6589c3..aacb621 100644
--- a/src/app/services/firebase.service.ts
+++ b/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) {