src/app/employee/table/table.component.html

@@ -1,4 +1,10 @@
 <section class="!space-y-6 mb-6">
+  <mat-form-field>
+    <input matInput
+           placeholder="Search employees"
+           class="!rounded-lg !bg-gray-50 !p-2 !text-gray-800"
+           (input)="filterEmployees($event)">
+  </mat-form-field>
   @defer {
     @if (employees$ | async; as employees) {
       <div class="!space-y-6">

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, filter, map, Observable, of, retry} from 'rxjs';
 import {HttpErrorResponse} from '@angular/common/http';
 import {Employee} from '../Employee';
 
@@ -20,6 +20,8 @@ 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 {MatFormField, MatInput} from "@angular/material/input";
+import {Qualification} from "../../qualification/Qualification";
 
 @Component({
   selector: 'app-employee-list',
@@ -35,7 +37,9 @@ import {DetailsComponent} from "../details/details.component";
     MatTooltipModule,
     MatMenuModule,
     MatTableModule,
-    MatSortModule
+    MatSortModule,
+    MatInput,
+    MatFormField
   ],
   templateUrl: './table.component.html',
   styleUrl: './table.component.css'
@@ -106,4 +110,22 @@ export class TableComponent implements OnInit {
   protected openDetailModal(employee: Employee) {
     this.matDialog.open(DetailsComponent, {data: employee});
   }
+
+  filterEmployees($event: Event) {
+    const input = $event.target as HTMLInputElement;
+    const filterValue = input.value.trim().toLowerCase();
+
+    this.employees$ = this.employees$.pipe(
+      map((employees: Employee[]) => employees.filter((employee: Employee) => {
+        const filterValue = input.value.trim().toLowerCase();
+        return employee.firstName?.toLowerCase().includes(filterValue)
+          || employee.lastName?.toLowerCase().includes(filterValue)
+          || employee.street?.toLowerCase().includes(filterValue)
+          || employee.phone?.toLowerCase().includes(filterValue)
+          || employee.postcode?.toString().toLowerCase().includes(filterValue)
+          || employee.city?.toString().toLowerCase().includes(filterValue)
+          || employee.skillSet?.some((skill: Qualification) => skill.skill?.toLowerCase().includes(filterValue));
+      }))
+    );
+  }
 }