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

@@ -3,8 +3,24 @@
   @if (employees$ | async; as employees) {
   <div class="!space-y-6">
     <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-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 employees..."
+                 (keyup)="filterEmployees($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)="showCreateEmployeeModal()">
         <mat-icon class="!mr-2">add</mat-icon>
         Add Employee
       </button>
@@ -23,10 +39,8 @@
                 </span>
               </div>
               <div>
-                      <a
+                <a class="!text-blue-600 hover:!underline cursor-pointer"
-                        class="!text-blue-600 hover:!underline cursor-pointer"
+                  [matTooltip]="'Click to view Employee details'" (click)="openDetailModal(employee)">
-                        [matTooltip]="'Click to view Employee details'"
-                        (click)="openDetailModal(employee)">
                   {{ employee.lastName }}, {{ employee.firstName }}
                 </a>
               </div>
@@ -38,15 +52,11 @@
           <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 
+              <button mat-icon-button color="primary" [matTooltip]="'Edit employee'"
-                            color="primary" 
-                            [matTooltip]="'Edit employee'"
                 (click)="showEditEmployeeModal(employee)">
                 <mat-icon>edit</mat-icon>
               </button>
-                    <button mat-icon-button 
+              <button mat-icon-button color="warn" [matTooltip]="'Delete employee'"
-                            color="warn" 
-                            [matTooltip]="'Delete employee'"
                 (click)="openDeleteDialogue(employee)">
                 <mat-icon>delete</mat-icon>
               </button>

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