import { AsyncPipe } from '@angular/common'; import { Component } from '@angular/core'; import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIcon } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; import { MatSelect, MatSelectModule } from '@angular/material/select'; import { MatTableDataSource, MatTableModule } from '@angular/material/table'; import { ActivatedRoute, Router, RouterLink } from '@angular/router'; import { Employee, EmployeeService, NewEmployee, Qualification, QualificationService, UpdatedEmployee } from '@core/ems'; import { NotificationService, NotificationType } from '@core/notification/notification.service'; import { map, Observable } from 'rxjs'; @Component({ selector: 'app-employee-detail', imports: [ AsyncPipe, MatIcon, RouterLink, MatButtonModule, MatInputModule, MatSelectModule, MatTableModule, MatFormFieldModule, ReactiveFormsModule, ], templateUrl: './employee-detail.component.html', styleUrl: './employee-detail.component.scss' }) export class EmployeeDetailComponent { isNewEmployee: boolean; employeeForm: FormGroup; skillsDataSource: MatTableDataSource = new MatTableDataSource([]); skillsDisplayedColumns = ['skill', 'action']; $unusedSkills: Observable>; constructor( private route: ActivatedRoute, private router: Router, private employeeService: EmployeeService, private qualificationService: QualificationService, private formBuilder: FormBuilder, private notificationService: NotificationService ) { const idParam = this.route.snapshot.paramMap.get('id'); this.isNewEmployee = idParam == null; this.employeeForm = this.formBuilder.group({ id: 0, firstName: '', lastName: '', postcode: '', city: '', street: '', phone: '', skillSet: [] }); this.$unusedSkills = this.qualificationService.getAllQualifications(); if (this.isNewEmployee) { return; } const id = parseInt(idParam as string); this.employeeService.getEmployee({ id }).subscribe((employee) => { this.employeeForm = this.formBuilder.group(employee); this.skillsDataSource = new MatTableDataSource(employee.skillSet); this.$unusedSkills = this.qualificationService.getAllQualifications().pipe( map((allSkills: Array) => { const usedSkillIds = new Set(employee.skillSet.map(skill => skill.id)); return allSkills?.filter(skill => !usedSkillIds.has(skill.id)); }) ); }); } onCreate() { if (!this.employeeForm.valid) { return; } const employee: NewEmployee = this.employeeForm.value; employee.skillSet = this.skillsDataSource.data.map((qualification) => qualification.id); this.employeeService.createEmployee({ requestBody: employee }).subscribe((response) => { this.notificationService.publish(`${response.firstName} ${response.lastName} was created`, NotificationType.Information); this.router.navigate(['']); }); } onSave() { if (!this.employeeForm.valid) { return; } const id = this.employeeForm.value.id; const employee: UpdatedEmployee = this.employeeForm.value; employee.skillSet = this.skillsDataSource.data.map((qualification) => qualification.id); if (employee.skillSet.length == 0) { this.employeeService.getAllEmployeeQualifications({ id }).subscribe((result) => { result.skillSet?.forEach((skill) => { this.employeeService.removeQualificationFromEmployee({ employeeId: id, qualificationId: skill.id }).subscribe(() => { }); }); }); } this.employeeService.updateEmployee({ id: id, requestBody: employee }).subscribe((response) => { this.notificationService.publish(`${response.firstName} ${response.lastName} was updated`, NotificationType.Information); this.router.navigate(['']); }); } onAddSkill(select: MatSelect) { if (select.value == undefined) { return; } const newSkill = select.value as Qualification; const skills = this.skillsDataSource.data; skills.push(newSkill); this.skillsDataSource.data = skills; this.$unusedSkills = this.$unusedSkills.pipe( map((skills) => skills.filter(skill => skill.id != newSkill.id)) ); } onRemoveSkill(skill: Qualification) { const skills = this.skillsDataSource.data; this.skillsDataSource.data = skills.filter(filterSkill => filterSkill.id != skill.id); this.$unusedSkills = this.$unusedSkills.pipe( map(skills => [...skills, skill]) ); } }