diff --git a/src/app/Employee.ts b/src/app/Employee.ts index 1debefc..ded99b0 100644 --- a/src/app/Employee.ts +++ b/src/app/Employee.ts @@ -1,10 +1,15 @@ +import {Qualification} from "./Qualification"; + export class Employee { - constructor(public id?: number, - public lastName?: string, - public firstName?: string, - public street?: string, - public postcode?: string, - public city?: string, - public phone?: string) { + constructor( + public id?: number, + public lastName?: string, + public firstName?: string, + public street?: string, + public postcode?: string, + public city?: string, + public phone?: string, + public skillSet?: Qualification[] + ) { } } diff --git a/src/app/Qualification.ts b/src/app/Qualification.ts index d31bd5e..c5821f7 100644 --- a/src/app/Qualification.ts +++ b/src/app/Qualification.ts @@ -1,4 +1,7 @@ export class Qualification { - constructor(public skill?: string) { + constructor( + public id?: number, + public skill?: string + ) { } } diff --git a/src/app/create-employee/create-employee.component.html b/src/app/create-employee/create-employee.component.html index bf4c399..bd139c9 100644 --- a/src/app/create-employee/create-employee.component.html +++ b/src/app/create-employee/create-employee.component.html @@ -1,6 +1,6 @@

Create Employee

-
+
@@ -36,6 +36,13 @@ + + Skills + + {{ skill.skill }} + + + diff --git a/src/app/create-employee/create-employee.component.ts b/src/app/create-employee/create-employee.component.ts index 89b1154..d4a2ded 100644 --- a/src/app/create-employee/create-employee.component.ts +++ b/src/app/create-employee/create-employee.component.ts @@ -1,5 +1,5 @@ import {Component, inject, OnInit} from '@angular/core'; -import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms"; +import {FormArray, FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms"; import {MatFormField, MatLabel} from "@angular/material/form-field"; import {MatInput} from "@angular/material/input"; import {MatButton} from "@angular/material/button"; @@ -12,7 +12,11 @@ import { } from "@angular/material/dialog"; import {Employee} from "../Employee"; import EmployeeApiService from "../services/employee-api.service"; -import {catchError} from "rxjs"; +import {Observable} from "rxjs"; +import {MatOption, MatSelect} from "@angular/material/select"; +import {AsyncPipe, NgForOf, NgIf} from "@angular/common"; +import {Qualification} from "../Qualification"; +import QualificationService from "../services/qualification.service"; @Component({ selector: 'app-create-employee', @@ -25,17 +29,25 @@ import {catchError} from "rxjs"; MatDialogContent, MatDialogTitle, MatDialogActions, - MatDialogClose + MatDialogClose, + MatSelect, + MatOption, + NgForOf, + NgIf, + AsyncPipe, ], templateUrl: './create-employee.component.html', standalone: true, styleUrl: './create-employee.component.css' }) -export class CreateEmployeeComponent implements OnInit{ - employeeForm!: FormGroup; +export class CreateEmployeeComponent implements OnInit { + employeeForm: FormGroup | null = null; employeeService: EmployeeApiService = inject(EmployeeApiService); formBuilder: FormBuilder = inject(FormBuilder); dialogRef: MatDialogRef = inject(MatDialogRef); + qualificationService: QualificationService = inject(QualificationService); + skills!: Observable + formSkills: FormArray = this.formBuilder.array([]); ngOnInit(): void { this.employeeForm = this.formBuilder.group({ @@ -45,16 +57,31 @@ export class CreateEmployeeComponent implements OnInit{ postcode: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(5)]], city: ['', Validators.required], phone: ['', Validators.required], + skillSet: this.formSkills }); + + this.skills = this.qualificationService.getAll(); + + this.skills.subscribe((qualifications: Qualification[]) => { + qualifications.forEach((qualification: Qualification) => { + + this.formSkills.push(this.formBuilder.group(qualification)); + }); + }) } submit() { - if (!this.employeeForm.valid) { + console.log(this.employeeForm?.controls['skillSet'].value) + if (this.employeeForm === null || !this.employeeForm.valid) { console.error('Form invalid'); return; } + const newEmployee = this.employeeForm.value as Employee; + //newEmployee.skillSet = newEmployee.skillSet?.map((selected: boolean, index: number) => {return }) - this.employeeService.create(this.employeeForm.value as Employee).subscribe(); + return; + + this.employeeService.create(newEmployee).subscribe(); this.dialogRef.close(); } }