feat(search): implement search functionality for employees

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css

@@ -19,7 +19,7 @@ h1 {
 
 .search-bar {
   display: flex;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   align-items: center;
 }
 

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html

@@ -13,10 +13,13 @@
   </div>
 
   <div class="header-actions">
-    <div class="search-bar">
+    <form [formGroup]="searchForm">
-      <input type="text" placeholder="Search employee">
+      <div class="search-bar">
-      <button>Search</button>
+        <input type="text" placeholder="Search employee" formControlName="search">
-    </div>
+        <button (click)="submit()">Search</button>
+      </div>
+      <p class="text-body-tertiary">Search for a propertiy of an Employee. eg. First Name</p>
+    </form>
     <button class="add-button">Add employee</button>
   </div>
 
@@ -33,7 +36,8 @@
       </tr>
     </thead>
     <tbody>
-      @for (employee of employees | async; track employee) {
+      @if (employees) {
+      @for (employee of employees; track employee) {
       <tr>
         <td>{{ employee.firstName }}</td>
         <td>{{ employee.lastName }}</td>
@@ -47,6 +51,7 @@
         </td>
       </tr>
       }
+      }
     </tbody>
   </table>
 </div>

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts

@@ -3,20 +3,48 @@ import { CommonModule } from '@angular/common';
 import { Observable, of } from 'rxjs';
 import { EmployeeResponseDTO } from '../../models/mitarbeiter';
 import { EmployeeService } from '../../service/employee.service';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-mitarbeiterverwaltung-view',
   templateUrl: './mitarbeiterverwaltung-view.component.html',
   styleUrls: ['./mitarbeiterverwaltung-view.component.css'],
   standalone: true,
-  imports: [CommonModule]
+  imports: [CommonModule, ReactiveFormsModule]
 })
 export class MitarbeiterverwaltungViewComponent implements OnInit {
-  employees: Observable<Array<EmployeeResponseDTO>> = of([]);
+  employees: Array<EmployeeResponseDTO> = [];
+  searchForm!: FormGroup;
 
   constructor(private employeeService: EmployeeService) {}
 
+  submit() {
+    const searchTerm = this.searchForm.get("search")?.value || '';
+
+    this.employeeService.getAllEmployees().subscribe(employees => {
+      let foundEmployees: Array<EmployeeResponseDTO> = [];
+      for (const employee of employees) {
+        if (
+          employee.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          employee.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          employee.street.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          employee.postcode.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          employee.city.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          employee.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          searchTerm == ''
+        ) {
+          foundEmployees.push(employee);
+        }
+      }
+
+      this.employees = foundEmployees;
+    });
+  }
+
   ngOnInit(): void {
-    this.employees = this.employeeService.getAllEmployees();
+    this.searchForm = new FormGroup({
+      search: new FormControl(''),
+    });
+    this.employeeService.getAllEmployees().subscribe(employees => this.employees = employees);
   }
 }