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,13 +3,14 @@
         <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>
+                        <mat-option [value]="skill">{{ skill.skill }}</mat-option>
                     }
                 </mat-select>
             </mat-form-field>
@@ -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'];
@@ -34,31 +37,55 @@ export class DashboardComponent {
         private dialog: MatDialog,
         private notifications: NotificationService
     ) {
-        this.$qualifications= this.qualificationService.getAllQualifications();
+        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;
+            };
 
         });
     }
 
-    onDelete(employee: Employee){
+    onDelete(employee: Employee) {
         const dialogRef = this.dialog.open(DeleteModelComponent, {
-            data:{
-                title:`Delete ${employee.firstName} ${employee.lastName}`,
+            data: {
+                title: `Delete ${employee.firstName} ${employee.lastName}`,
                 description: `Do you really want to delete ${employee.firstName} ${employee.lastName}?`,
                 cancel: 'No',
                 ok: 'Yes',
             }
         });
 
-        dialogRef.afterClosed().subscribe((accepted:boolean) => {
-            if (!accepted){
+        dialogRef.afterClosed().subscribe((accepted: boolean) => {
+            if (!accepted) {
                 return;
             }
-            this.employeeService.deleteEmployee({id:employee.id}).subscribe(()=> {
+            this.employeeService.deleteEmployee({id: employee.id}).subscribe(() => {
                 const data = this.employeeDataSource.data;
                 const i = data.indexOf(employee);
-                if (i != -1){
+                if (i != -1) {
                     data.splice(i, 1);
                     this.employeeDataSource.data = data;
                 }
@@ -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);
+    }
 }