From 7beb017f98094ad2469f35bf68c5c6a4897b7882 Mon Sep 17 00:00:00 2001
From: Art <d.art.shishkin@gmail.com>
Date: Tue, 21 Sep 2021 16:46:16 +0300
Subject: [PATCH] 169. Search user list - My Implementation (#22)

---
 .../app/component/user/user.component.html    |  9 +++++---
 .../src/app/component/user/user.component.ts  | 22 +++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/support-portal-frontend/src/app/component/user/user.component.html b/support-portal-frontend/src/app/component/user/user.component.html
index d7c2e9c..3d260df 100644
--- a/support-portal-frontend/src/app/component/user/user.component.html
+++ b/support-portal-frontend/src/app/component/user/user.component.html
@@ -37,7 +37,8 @@
       <div class="mb-3 float-end">
         <div class="btn-group mr-2">
           <form class="form-inline my-2 my-lg-0 justify-content-center">
-            <input name="searchFileName" class="form-control mr-sm-2" type="search" placeholder="Search users...">
+            <input name="searchFileName" #searchTerm class="form-control mr-sm-2" type="search" placeholder="Search users..."
+                   (keyup)="searchUsers(searchTerm.value)">
           </form>
           <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#addUserModal">
             <i class="fa fa-plus"></i>New User
@@ -186,7 +187,7 @@
           </div>
           <div class="modal-body">
             <div>
-              <form #newUserForm="ngForm" (ngSubmit)="onAddNewUser(newUserForm)" >
+              <form #newUserForm="ngForm" (ngSubmit)="onAddNewUser(newUserForm)">
                 <div class="form-group">
                   <label for="firstName">First Name</label>
                   <input type="text" name="firstName" required ngModel class="form-control">
@@ -247,7 +248,9 @@
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="new-user-close">Close</button>
-            <button type="button" class="btn btn-primary" (click)="saveNewUser()" [disabled]="newUserForm.invalid">Save changes</button>
+            <button type="button" class="btn btn-primary" (click)="saveNewUser()" [disabled]="newUserForm.invalid">Save
+              changes
+            </button>
           </div>
         </div>
       </div>
diff --git a/support-portal-frontend/src/app/component/user/user.component.ts b/support-portal-frontend/src/app/component/user/user.component.ts
index d2b75f4..91a43e0 100644
--- a/support-portal-frontend/src/app/component/user/user.component.ts
+++ b/support-portal-frontend/src/app/component/user/user.component.ts
@@ -103,6 +103,28 @@ export class UserComponent implements OnInit, OnDestroy {
     this.clickButton('new-user-save');
   }
 
+  public searchUsers(searchTerm: string): void {
+
+    if (!searchTerm) {
+      this.users = this.userService.getUsersFromLocalStorage();
+      return;
+    }
+
+    const matchUsers: User[] = [];
+    searchTerm = searchTerm.toLowerCase();
+    for (const user of this.userService.getUsersFromLocalStorage()) {
+      if (user.username.toLowerCase().includes(searchTerm)
+        || user.userId.toLowerCase().includes(searchTerm)
+        || user.firstName.toLowerCase().includes(searchTerm)
+        || user.lastName.toLowerCase().includes(searchTerm)
+        || user.email.toLowerCase().includes(searchTerm)) {
+        matchUsers.push(user);
+      }
+    }
+    this.users = matchUsers;
+
+  }
+
   private clickButton(buttonId: string): void {
     document.getElementById(buttonId)?.click();
   }