diff --git a/src/app/views/dashboard/Filter.d.ts b/src/app/views/dashboard/Filter.d.ts
new file mode 100644
index 0000000..0da2a77
--- /dev/null
+++ b/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;
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index 0c4136d..5a5cac1 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -3,13 +3,14 @@
Search
-
+
Qualification
-
+
+ None
@for (skill of ($qualifications|async); track skill) {
- {{skill.skill}}
+ {{ skill.skill }}
}
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index 43c4a18..098f8d9 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/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 = new MatTableDataSource([]);
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);
+ }
}