Feature: Filter Dashboard - Simple Filter for visible values

src/app/views/dashboard/Filter.d.ts

@@ -0,0 +1,8 @@
+import {Qualification} from '@core/ems';
+
+interface Filter {
+    fuzzy: string,
+    qualification: Qualification|undefined
+}
+
+export default Filter;

src/app/views/dashboard/dashboard.component.html

@@ -3,11 +3,12 @@
         <div class="dashboard__action-row">
             <mat-form-field>
                 <mat-label>Search</mat-label>
-                <input matInput>
+                <input matInput (keyup)="onFuzzyFilter($event)">
             </mat-form-field>
             <mat-form-field>
                 <mat-label>Qualification</mat-label>
-                <mat-select>
+                <mat-select [(value)]="selectedQualificationFilter" (valueChange)="onFilterUpdate()">
+                    <mat-option>None</mat-option>
                     @for (skill of ($qualifications|async); track skill) {
                         <mat-option [value]="skill">{{ skill.skill }}</mat-option>
                     }
@@ -18,7 +19,7 @@
                 <mat-icon>add</mat-icon>
             </button>
         </div>
-
+‚
         <mat-table [dataSource]="employeeDataSource" class="dashboard__employees">
             <ng-container matColumnDef="id">
                 <th mat-header-cell *matHeaderCellDef>Id</th>

src/app/views/dashboard/dashboard.component.ts

@@ -10,6 +10,7 @@ import {MatSelectModule} from '@angular/material/select';
 import {MatTableDataSource, MatTableModule} from '@angular/material/table';
 import {RouterLink} from '@angular/router';
 import {DeleteModelComponent} from '@app/delete-model/delete-model.component';
+import Filter from '@app/views/dashboard/Filter';
 import {AuthService} from '@core/auth/auth.service';
 import {Employee, EmployeeService, Qualification, QualificationService} from '@core/ems';
 import {NotificationService, NotificationType} from '@core/notification/notification.service';
@@ -22,6 +23,8 @@ import {Observable} from 'rxjs';
     styleUrl: './dashboard.component.scss'
 })
 export class DashboardComponent {
+    selectedQualificationFilter: Qualification | undefined;
+    fuzzyFilter: string = '';
 
     employeeDataSource: MatTableDataSource<Employee> = new MatTableDataSource<Employee>([]);
     employeesDisplayedColumns = ['id', 'first-name', 'last-name', 'skills', 'actions'];
@@ -37,6 +40,30 @@ export class DashboardComponent {
         this.$qualifications = this.qualificationService.getAllQualifications();
         this.employeeService.getAllEmployees().subscribe((employees) => {
             this.employeeDataSource = new MatTableDataSource(employees);
+            this.employeeDataSource.filterPredicate = (employee: Employee, rawFilter: string): boolean => {
+                const filter = JSON.parse(rawFilter) as Filter;
+                if (filter.fuzzy == '' && filter.qualification == undefined) {
+                    return true;
+                }
+
+                if (
+                    filter.qualification != undefined
+                    && !employee.skillSet.map((skill) => skill.id).includes(filter.qualification.id)
+                ) {
+                    return false;
+                }
+
+                if (
+                    filter.fuzzy != ''
+                    && !employee.id.toString().includes(filter.fuzzy)
+                    && !employee.firstName.toLowerCase().includes(filter.fuzzy)
+                    && !employee.lastName.toLowerCase().includes(filter.fuzzy)
+                ) {
+                    return false;
+                }
+
+                return true;
+            };
 
         });
     }
@@ -66,4 +93,22 @@ export class DashboardComponent {
             });
         });
     }
+
+    onFuzzyFilter(event: KeyboardEvent) {
+        this.fuzzyFilter = (event.target as HTMLInputElement).value;
+        this.onFilterUpdate();
+    }
+
+    onFilterUpdate() {
+        const skill = this.selectedQualificationFilter;
+        const fuzzy = this.fuzzyFilter;
+        if (skill == undefined && fuzzy == '') {
+            this.employeeDataSource.filter = '';
+            return;
+        }
+        this.employeeDataSource.filter = JSON.stringify({
+            qualification: skill,
+            fuzzy: fuzzy.toLowerCase()
+        } as Filter);
+    }
 }