EMS/src/app/views/employee-detail/employee-detail.component.ts

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<Qualification> = new MatTableDataSource<Qualification>([]);
    skillsDisplayedColumns = ['skill', 'action'];
    $unusedSkills: Observable<Array<Qualification>>;

    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<Employee>({
            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>(employee);
            this.skillsDataSource = new MatTableDataSource<Qualification>(employee.skillSet);
            this.$unusedSkills = this.qualificationService.getAllQualifications().pipe(
                map((allSkills: Array<Qualification>) => {
                    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])
        );
    }
}