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">
@@ -38,14 +44,14 @@
                 <th mat-header-cell *matHeaderCellDef class="!text-right !w-[120px]"> Actions</th>
                 <td mat-cell *matCellDef="let employee" class="!text-right !py-4 !whitespace-nowrap">
                   <div class="!flex !justify-end !items-center !gap-1">
-                    <button mat-icon-button 
-                            color="primary" 
+                    <button mat-icon-button
+                            color="primary"
                             [matTooltip]="'Edit employee'"
                             (click)="showEditEmployeeModal(employee)">
                       <mat-icon>edit</mat-icon>
                     </button>
-                    <button mat-icon-button 
-                            color="warn" 
+                    <button mat-icon-button
+                            color="warn"
                             [matTooltip]="'Delete employee'"
                             (click)="openDeleteDialogue(employee)">
                       <mat-icon>delete</mat-icon>

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));
+      }))
+    );
+  }
 }