add search bar to employee list (#41)

Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me>
Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/41
Co-authored-by: Constantin Simonis <constantin@simonis.lol>
Co-committed-by: Constantin Simonis <constantin@simonis.lol>

src/app/employee/table/table.component.ts

@@ -1,6 +1,6 @@
 import {Component, inject, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {catchError, Observable, of, retry} from 'rxjs';
+import {catchError, debounceTime, distinctUntilChanged, filter, map, Observable, of, retry, Subject} from 'rxjs';
 import {HttpErrorResponse} from '@angular/common/http';
 import {Employee} from '../Employee';
 
@@ -20,6 +20,9 @@ import EmployeeApiService from "../../services/employee-api.service";
 import {CreateComponent} from "../create/create.component";
 import {EditComponent} from "../edit/edit.component";
 import {DetailsComponent} from "../details/details.component";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatInputModule} from "@angular/material/input";
+import {Qualification} from "../../qualification/Qualification";
 
 @Component({
   selector: 'app-employee-list',
@@ -35,7 +38,9 @@ import {DetailsComponent} from "../details/details.component";
     MatTooltipModule,
     MatMenuModule,
     MatTableModule,
-    MatSortModule
+    MatSortModule,
+    MatFormFieldModule,
+    MatInputModule,
   ],
   templateUrl: './table.component.html',
   styleUrl: './table.component.css'
@@ -46,11 +51,40 @@ export class TableComponent implements OnInit {
   private readonly matDialog: MatDialog = inject(MatDialog);
 
   private static readonly MAX_RETRIES = 3;
+  
+  private allEmployees: Employee[] = [];
+  private searchSubject = new Subject<string>();
   public employees$: Observable<Employee[]> = of([]);
+  public isSearching = false;
   public readonly displayedColumns: string[] = ['name', 'actions'];
 
   public ngOnInit(): void {
-    this.employees$ = this.fetchEmployees();
+    this.loadEmployees();
+    this.setupSearch();
+  }
+
+  private loadEmployees(): void {
+    this.fetchEmployees().subscribe(employees => {
+      this.allEmployees = employees;
+      this.employees$ = of(employees);
+    });
+  }
+
+  private setupSearch(): void {
+    this.searchSubject.pipe(
+      debounceTime(300),
+      distinctUntilChanged()
+    ).subscribe(searchTerm => {
+      this.isSearching = true;
+      setTimeout(() => {
+        const filteredEmployees = this.allEmployees.filter(employee =>
+          employee.firstName?.toLowerCase().includes(searchTerm) ||
+          employee.lastName?.toLowerCase().includes(searchTerm)
+        );
+        this.employees$ = of(filteredEmployees);
+        this.isSearching = false;
+      }, 150);
+    });
   }
 
   private fetchEmployees(): Observable<Employee[]> {
@@ -106,4 +140,9 @@ export class TableComponent implements OnInit {
   protected openDetailModal(employee: Employee) {
     this.matDialog.open(DetailsComponent, {data: employee});
   }
+
+  protected filterEmployees(event: Event): void {
+    const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
+    this.searchSubject.next(searchTerm);
+  }
 }