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.html

@@ -1,103 +1,113 @@
 <section class="!space-y-6 mb-6">
   @defer {
-    @if (employees$ | async; as employees) {
+  @if (employees$ | async; as employees) {
-      <div class="!space-y-6">
+  <div class="!space-y-6">
-        <div class="!flex !justify-between !items-center">
+    <div class="!flex !justify-between !items-center">
-          <h2 class="!text-2xl !font-semibold !text-gray-900">Employee Directory</h2>
+      <div class="!flex !items-center !gap-4">
-          <button mat-flat-button color="primary" class="!bg-blue-600 !text-white" (click)="showCreateEmployeeModal()">
+        <h2 class="!text-2xl !font-semibold !text-gray-900 !shrink-0">Employee Directory</h2>
-            <mat-icon class="!mr-2">add</mat-icon>
+        <mat-form-field class="!m-0" subscriptSizing="dynamic">
-            Add Employee
+          <mat-icon matPrefix class="!text-gray-400 !mr-2">search</mat-icon>
-          </button>
+          <input matInput
-        </div>
+                 type="text"
-
+                 placeholder="Search employees..."
-        @if (employees) {
+                 (keyup)="filterEmployees($event)">
-          <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
+          <div matSuffix class="!w-[24px] !h-[24px] !ml-2 !flex !items-center !justify-center">
-            <table mat-table [dataSource]="employees" matSort class="!w-full">
+            <mat-progress-spinner [diameter]="20" mode="indeterminate" 
-              <ng-container matColumnDef="name">
+              [class.!opacity-0]="!isSearching"
-                <th mat-header-cell *matHeaderCellDef class="!text-left !w-full"> Name</th>
+              [class.!opacity-100]="isSearching"
-                <td mat-cell *matCellDef="let employee" class="!py-4">
+              class="!transition-opacity"></mat-progress-spinner>
-                  <div class="!flex !items-center">
-                    <div class="!h-10 !w-10 !rounded-full !bg-blue-100 !flex !items-center !justify-center !mr-3">
-                      <span class="!text-blue-600 !font-medium">
-                        {{ employee.firstName[0] }}{{ employee.lastName[0] }}
-                      </span>
-                    </div>
-                    <div>
-                      <a
-                        class="!text-blue-600 hover:!underline cursor-pointer"
-                        [matTooltip]="'Click to view Employee details'"
-                        (click)="openDetailModal(employee)">
-                        {{ employee.lastName }}, {{ employee.firstName }}
-                      </a>
-                    </div>
-                  </div>
-                </td>
-              </ng-container>
-
-              <ng-container matColumnDef="actions">
-                <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" 
-                            [matTooltip]="'Edit employee'"
-                            (click)="showEditEmployeeModal(employee)">
-                      <mat-icon>edit</mat-icon>
-                    </button>
-                    <button mat-icon-button 
-                            color="warn" 
-                            [matTooltip]="'Delete employee'"
-                            (click)="openDeleteDialogue(employee)">
-                      <mat-icon>delete</mat-icon>
-                    </button>
-                  </div>
-                </td>
-              </ng-container>
-
-              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-            </table>
           </div>
-        } @else {
+        </mat-form-field>
-          <mat-card class="!text-center !py-8">
-            <mat-card-content>
-              <mat-icon class="!w-8 !h-8 !text-gray-400 !mb-4">people</mat-icon>
-              <p class="!text-gray-600">No employees found</p>
-            </mat-card-content>
-          </mat-card>
-        }
       </div>
+      <button mat-flat-button color="primary" class="!bg-blue-600 !text-white !shrink-0"
+        (click)="showCreateEmployeeModal()">
+        <mat-icon class="!mr-2">add</mat-icon>
+        Add Employee
+      </button>
+    </div>
+
+    @if (employees) {
+    <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
+      <table mat-table [dataSource]="employees" matSort class="!w-full">
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef class="!text-left !w-full"> Name</th>
+          <td mat-cell *matCellDef="let employee" class="!py-4">
+            <div class="!flex !items-center">
+              <div class="!h-10 !w-10 !rounded-full !bg-blue-100 !flex !items-center !justify-center !mr-3">
+                <span class="!text-blue-600 !font-medium">
+                  {{ employee.firstName[0] }}{{ employee.lastName[0] }}
+                </span>
+              </div>
+              <div>
+                <a class="!text-blue-600 hover:!underline cursor-pointer"
+                  [matTooltip]="'Click to view Employee details'" (click)="openDetailModal(employee)">
+                  {{ employee.lastName }}, {{ employee.firstName }}
+                </a>
+              </div>
+            </div>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <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" [matTooltip]="'Edit employee'"
+                (click)="showEditEmployeeModal(employee)">
+                <mat-icon>edit</mat-icon>
+              </button>
+              <button mat-icon-button color="warn" [matTooltip]="'Delete employee'"
+                (click)="openDeleteDialogue(employee)">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+    </div>
+    } @else {
+    <mat-card class="!text-center !py-8">
+      <mat-card-content>
+        <mat-icon class="!w-8 !h-8 !text-gray-400 !mb-4">people</mat-icon>
+        <p class="!text-gray-600">No employees found</p>
+      </mat-card-content>
+    </mat-card>
     }
+  </div>
+  }
   } @placeholder {
-    <div class="!space-y-6">
+  <div class="!space-y-6">
-      <div class="!animate-pulse">
+    <div class="!animate-pulse">
-        <div class="!flex !justify-between !items-center !mb-8">
+      <div class="!flex !justify-between !items-center !mb-8">
-          <div class="!h-8 !bg-gray-200 !rounded !w-1/4"></div>
+        <div class="!h-8 !bg-gray-200 !rounded !w-1/4"></div>
-          <div class="!h-10 !bg-gray-200 !rounded !w-32"></div>
+        <div class="!h-10 !bg-gray-200 !rounded !w-32"></div>
-        </div>
+      </div>
-        <div class="!bg-gray-50 !p-4 !rounded-lg">
+      <div class="!bg-gray-50 !p-4 !rounded-lg">
-          <div class="!space-y-4">
+        <div class="!space-y-4">
-            <div class="!h-10 !bg-gray-200 !rounded"></div>
+          <div class="!h-10 !bg-gray-200 !rounded"></div>
-            @for (i of [1, 2, 3]; track i) {
+          @for (i of [1, 2, 3]; track i) {
-              <div class="!h-16 !bg-white !rounded-lg !shadow-sm"></div>
+          <div class="!h-16 !bg-white !rounded-lg !shadow-sm"></div>
-            }
+          }
-          </div>
         </div>
       </div>
     </div>
+  </div>
   } @error {
-    <div class="bg-red-50 p-3 md:p-4 rounded-lg border border-red-200">
+  <div class="bg-red-50 p-3 md:p-4 rounded-lg border border-red-200">
-      <div class="flex items-start space-x-2 md:space-x-3">
+    <div class="flex items-start space-x-2 md:space-x-3">
-        <mat-icon class="text-red-600 text-xl md:text-2xl !w-8 !h-8">error</mat-icon>
+      <mat-icon class="text-red-600 text-xl md:text-2xl !w-8 !h-8">error</mat-icon>
-        <div>
+      <div>
-          <p class="text-gray-800 font-medium text-sm md:text-base">There was an error loading the employees.</p>
+        <p class="text-gray-800 font-medium text-sm md:text-base">There was an error loading the employees.</p>
-          <p class="text-gray-600 mt-1 text-xs md:text-sm">Please try refreshing the page.</p>
+        <p class="text-gray-600 mt-1 text-xs md:text-sm">Please try refreshing the page.</p>
-        </div>
       </div>
     </div>
+  </div>
   } @loading {
-    <div class="!flex !justify-center !items-center !py-12">
+  <div class="!flex !justify-center !items-center !py-12">
-      <mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
+    <mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
-    </div>
+  </div>
   }
 </section>

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

src/app/qualification/delete/delete.component.ts

@@ -22,7 +22,6 @@ import {MatIcon} from "@angular/material/icon";
     ReactiveFormsModule,
     MatDialogActions,
     MatButton,
-    MatError,
     MatIcon
   ],
   templateUrl: './delete.component.html',

src/app/qualification/table/table.component.html

@@ -3,8 +3,23 @@
         @if (qualifications$ | async; as qualifications) {
             <div class="!space-y-6">
                 <div class="!flex !justify-between !items-center">
-                    <h2 class="!text-2xl !font-semibold !text-gray-900">Qualifications</h2>
+                    <div class="!flex !items-center !gap-4">
-                    <button mat-flat-button color="primary" class="!bg-blue-600 !text-white"
+                        <h2 class="!text-2xl !font-semibold !text-gray-900 !shrink-0">Qualifications</h2>
+                        <mat-form-field class="!m-0" subscriptSizing="dynamic">
+                            <mat-icon matPrefix class="!text-gray-400 !mr-2">search</mat-icon>
+                            <input matInput
+                                   type="text"
+                                   placeholder="Search qualifications..."
+                                   (keyup)="filterQualifications($event)">
+                            <div matSuffix class="!w-[24px] !h-[24px] !ml-2 !flex !items-center !justify-center">
+                                <mat-progress-spinner [diameter]="20" mode="indeterminate" 
+                                    [class.!opacity-0]="!isSearching"
+                                    [class.!opacity-100]="isSearching"
+                                    class="!transition-opacity"></mat-progress-spinner>
+                            </div>
+                        </mat-form-field>
+                    </div>
+                    <button mat-flat-button color="primary" class="!bg-blue-600 !text-white !shrink-0"
                             (click)="openCreateModal()">
                         <mat-icon class="!mr-2">add</mat-icon>
                         Add Qualification

src/app/qualification/table/table.component.ts

@@ -1,68 +1,112 @@
 import {Component, inject, OnInit} from '@angular/core';
-import {Observable} from "rxjs";
+import {CommonModule} from '@angular/common';
+import {catchError, debounceTime, distinctUntilChanged, filter, map, Observable, of, retry, Subject} from 'rxjs';
+import {HttpErrorResponse} from '@angular/common/http';
 import {Qualification} from "../Qualification";
 import {MatDialog} from "@angular/material/dialog";
 import QualificationService from "../../services/qualification.service";
 import {CreateComponent} from "../create/create.component";
 import {EditComponent} from "../edit/edit.component";
 import {DeleteComponent} from "../delete/delete.component";
-import {AsyncPipe} from "@angular/common";
+import {MatCardModule} from '@angular/material/card';
-import {MatButton, MatIconButton} from "@angular/material/button";
+import {MatButtonModule} from '@angular/material/button';
-import {
+import {MatIconModule} from '@angular/material/icon';
-    MatCell,
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-    MatCellDef,
+import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
-    MatColumnDef,
+import {MatDividerModule} from '@angular/material/divider';
-    MatHeaderCell,
+import {MatTooltipModule} from '@angular/material/tooltip';
-    MatHeaderCellDef,
+import {MatMenuModule} from '@angular/material/menu';
-    MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+import {MatTableModule} from '@angular/material/table';
-    MatTable
+import {MatSortModule} from '@angular/material/sort';
-} from "@angular/material/table";
+import {MatFormFieldModule} from "@angular/material/form-field";
-import {MatIcon} from "@angular/material/icon";
+import {MatInputModule} from "@angular/material/input";
-import {MatCard, MatCardContent} from "@angular/material/card";
-import {MatTooltip} from "@angular/material/tooltip";
-import {MatProgressSpinner} from "@angular/material/progress-spinner";
 import {DetailsComponent} from "../details/details.component";
-import {MatSort} from "@angular/material/sort";
 
 @Component({
     selector: 'app-qualifications',
+    standalone: true,
     imports: [
-        AsyncPipe,
+        CommonModule,
-        MatButton,
+        MatCardModule,
-        MatTable,
+        MatButtonModule,
-        MatColumnDef,
+        MatIconModule,
-        MatHeaderCell,
+        MatProgressSpinnerModule,
-        MatCell,
+        MatSnackBarModule,
-        MatHeaderCellDef,
+        MatDividerModule,
-        MatCellDef,
+        MatTooltipModule,
-        MatIconButton,
+        MatMenuModule,
-        MatIcon,
+        MatTableModule,
-        MatHeaderRow,
+        MatSortModule,
-        MatRow,
+        MatFormFieldModule,
-        MatHeaderRowDef,
+        MatInputModule,
-        MatRowDef,
-        MatCard,
-        MatCardContent,
-        MatTooltip,
-        MatProgressSpinner,
-        MatSort
     ],
     templateUrl: './table.component.html',
     styleUrl: './table.component.css'
 })
 export class QualificationsComponent implements OnInit {
-    public qualifications$!: Observable<Qualification[]>;
-    public readonly displayedColumns: string[] = ['skill', 'actions'];
-
-    private readonly dialog: MatDialog = inject(MatDialog);
     private readonly qualificationService: QualificationService = inject(QualificationService);
+    private readonly snackBar: MatSnackBar = inject(MatSnackBar);
+    private readonly dialog: MatDialog = inject(MatDialog);
+
+    private static readonly MAX_RETRIES = 3;
+    
+    private allQualifications: Qualification[] = [];
+    private searchSubject = new Subject<string>();
+    public qualifications$: Observable<Qualification[]> = of([]);
+    public isSearching = false;
+    public readonly displayedColumns: string[] = ['skill', 'actions'];
 
     ngOnInit() {
         this.loadQualifications();
+        this.setupSearch();
     }
 
-    private loadQualifications() {
+    private loadQualifications(): void {
-        this.qualifications$ = this.qualificationService.getAll();
+        this.fetchQualifications().subscribe(qualifications => {
+            this.allQualifications = qualifications;
+            this.qualifications$ = of(qualifications);
+        });
+    }
+
+    private setupSearch(): void {
+        this.searchSubject.pipe(
+            debounceTime(300),
+            distinctUntilChanged()
+        ).subscribe(searchTerm => {
+            this.isSearching = true;
+            setTimeout(() => {
+                const filteredQualifications = this.allQualifications.filter(qualification =>
+                    qualification.skill?.toLowerCase().includes(searchTerm)
+                );
+                this.qualifications$ = of(filteredQualifications);
+                this.isSearching = false;
+            }, 150);
+        });
+    }
+
+    private fetchQualifications(): Observable<Qualification[]> {
+        return this.qualificationService.getAll().pipe(
+            retry(QualificationsComponent.MAX_RETRIES),
+            catchError((error: HttpErrorResponse) => {
+                console.error('Error fetching qualifications:', error);
+                this.showErrorMessage('Failed to load qualifications. Please try again.');
+                return of([]);
+            })
+        );
+    }
+
+    private showErrorMessage(message: string): void {
+        this.snackBar.open(message, 'Close', {
+            duration: 5000,
+            horizontalPosition: 'end',
+            verticalPosition: 'bottom',
+            panelClass: ['!bg-red-50', '!text-red-900', '!border', '!border-red-100']
+        });
+    }
+
+    protected filterQualifications(event: Event): void {
+        const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
+        this.searchSubject.next(searchTerm);
     }
 
     openCreateModal() {
@@ -100,7 +144,7 @@ export class QualificationsComponent implements OnInit {
     }
 
     openDetailsModal(qualification: Qualification) {
-        const dialogRef = this.dialog.open(DetailsComponent, {
+        this.dialog.open(DetailsComponent, {
             data: qualification
         });
     }