diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 5fcbcba..c9981e2 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -32,8 +32,9 @@ export const routes: Routes = [ component: EmployeeDetailComponent, }, { - path: "qualifikationbearbeiten", + path: "qualifikationbearbeiten/:id", component: QualifikatonBearbeitenViewComponent, + canActivate: [AuthGuard], }, { path: "**", diff --git a/src/app/components/qualifikation-form/qualifikation-form.component.css b/src/app/components/qualifikation-form/qualifikation-form.component.css index e69de29..886cc52 100644 --- a/src/app/components/qualifikation-form/qualifikation-form.component.css +++ b/src/app/components/qualifikation-form/qualifikation-form.component.css @@ -0,0 +1,131 @@ +body { + font-family: sans-serif; + margin: 0; + padding: 20px; + background-color: #f0f0f0; +} + +.container { + width: 100%; + max-width: 800px; + margin: 0 auto; + padding: 20px; + background-color: #fff; +} + +h1, h2 { + font-size: 1.8rem; + margin-bottom: 15px; +} + +.back-button { + background-color: #ccc; + color: #333; + border: none; + padding: 8px 12px; + border-radius: 3px; + margin-bottom: 15px; +} + +.form-group { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 5px; +} + +input[type="text"] { + width: 100%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 1px; +} + +.employee-list { + list-style: none; + padding: 0; +} + +.employee-list li { + display: flex; + align-items: center; + margin-bottom: 5px; +} + +.employee-icon { + margin-right: 5px; +} + +.add-employee-section { + margin-top: 15px; +} + +.add-employee-section select { + padding: 10px; + border: 1px solid #ddd; + border-radius: 3px; + margin-right: 10px; +} + +.add-employee-button { + background-color: #06a63b; + color: #fff; + padding: 10px 15px; + border: none; + border-radius: 3px; + cursor: pointer; + margin-top: 10px; +} + +.save-button { + background-color: #007bff; + color: #fff; + padding: 10px 15px; + border: none; + border-radius: 3px; + cursor: pointer; + margin-top: 20px; + display: block; + width: 100%; +} + +.delete-skill-button { + color: #fff; + padding: 5px 8px; + border: none; + cursor: pointer; + margin-left: 4px; + margin-right: 4px; + border-radius: 3px; +} + +.delete-skill-button img { + width: 15px; + height: 15px; +} + +.add-employee-section { + margin-top: 15px; +} + +.add-employee-section label { + display: block; + margin-bottom: 5px; + font-weight: bold; +} + +.add-employee-section input[type="text"] { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 3px; +} + +.employee-container { + border: 1px solid #ccc; + padding: 20px; + border-radius: 1px; + margin-bottom: 20px; +} diff --git a/src/app/components/qualifikation-form/qualifikation-form.component.html b/src/app/components/qualifikation-form/qualifikation-form.component.html index f8e7cc9..e1d52d1 100644 --- a/src/app/components/qualifikation-form/qualifikation-form.component.html +++ b/src/app/components/qualifikation-form/qualifikation-form.component.html @@ -1 +1,49 @@ -

qualifikation-form works!

+
+
+ + +
+ + +
+ +
+

Employees possessing the qualification

+ +
    + @for (employee of (employees | async)?.employees; track employee) { + @if (!isEmployeeHidden(employee.id)) { +
  • + + {{employee.firstName}} {{employee.lastName}} +
    • + } + } + @for (employee of addedEmployees | async; track employee) { +
  • + + {{employee.firstName}} {{employee.lastName}} +
    • + } +
+ +
+ + + +
+
+ + +
+
diff --git a/src/app/components/qualifikation-form/qualifikation-form.component.ts b/src/app/components/qualifikation-form/qualifikation-form.component.ts index 35a62c3..27309ca 100644 --- a/src/app/components/qualifikation-form/qualifikation-form.component.ts +++ b/src/app/components/qualifikation-form/qualifikation-form.component.ts @@ -1,12 +1,90 @@ -import { Component } from '@angular/core'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { EmployeesForAQualificationDTO, QualificationGetDTO } from '../../models/skill'; +import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; +import { SkillService } from '../../service/skill.service'; +import { EmployeeService } from '../../service/employee.service'; +import { Observable, of, tap } from 'rxjs'; +import { EmployeeNameDataDTO, EmployeeResponseDTO } from '../../models/mitarbeiter'; +import { AsyncPipe } from '@angular/common'; @Component({ selector: 'app-qualifikation-form', standalone: true, - imports: [], + imports: [ReactiveFormsModule, AsyncPipe], templateUrl: './qualifikation-form.component.html', styleUrl: './qualifikation-form.component.css' }) export class QualifikationFormComponent { + @Input() skill!: QualificationGetDTO; + @Output() skillChange = new EventEmitter(); + public skillForm!: FormGroup; + public employees: Observable = of(); + public allEmployees: Observable> = of([]); + public hiddenEmployees: Array = []; + public addedEmployees: Observable> = of([]); + public addedEmployeesIds: Array = []; + errorMessages: Record = {}; + + constructor(private skillService: SkillService, private employeeService: EmployeeService) { } + + removeEmployee(id: number) { + this.hiddenEmployees.push(id); + } + + isEmployeeHidden(id: number) { + for (const employeeId of this.hiddenEmployees) { + if (id == employeeId) { + return true + } + } + + return false; + } + + employeeHasSkill(employee: EmployeeResponseDTO) { + + for (const id of this.addedEmployeesIds) { + console.log(id, employee.id); + if (id == employee.id) { + return true; + } + } + + for (const employeeSkill of employee.skillSet || []) { + if (employeeSkill.id == this.skill.id) { + return true; + } + } + + return false; + } + + addEmployee() { + console.log("a"); + const employeeId = this.skillForm.get("newEmployee")?.value; + this.employeeService.getEmployeeById(employeeId).subscribe(employee => { + this.addedEmployees.pipe(tap(employeeList => { + employeeList.push(employee); + this.addedEmployeesIds.push(employee.id); + })).subscribe(); + }); + } + + setUpForm() { + this.skillForm = new FormGroup({ + name: new FormControl(this.skill.skill, Validators.required), + newEmployee: new FormControl(), + }); + } + + ngOnChanges(): void { + this.setUpForm(); + this.employees = this.skillService.getEmployeesBySkill(this.skill.id); + } + + ngOnInit() { + this.setUpForm(); + this.allEmployees = this.employeeService.getAllEmployees(); + } } diff --git a/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.css b/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.css index 886cc52..e69de29 100644 --- a/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.css +++ b/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.css @@ -1,131 +0,0 @@ -body { - font-family: sans-serif; - margin: 0; - padding: 20px; - background-color: #f0f0f0; -} - -.container { - width: 100%; - max-width: 800px; - margin: 0 auto; - padding: 20px; - background-color: #fff; -} - -h1, h2 { - font-size: 1.8rem; - margin-bottom: 15px; -} - -.back-button { - background-color: #ccc; - color: #333; - border: none; - padding: 8px 12px; - border-radius: 3px; - margin-bottom: 15px; -} - -.form-group { - margin-bottom: 15px; -} - -label { - display: block; - margin-bottom: 5px; -} - -input[type="text"] { - width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 1px; -} - -.employee-list { - list-style: none; - padding: 0; -} - -.employee-list li { - display: flex; - align-items: center; - margin-bottom: 5px; -} - -.employee-icon { - margin-right: 5px; -} - -.add-employee-section { - margin-top: 15px; -} - -.add-employee-section select { - padding: 10px; - border: 1px solid #ddd; - border-radius: 3px; - margin-right: 10px; -} - -.add-employee-button { - background-color: #06a63b; - color: #fff; - padding: 10px 15px; - border: none; - border-radius: 3px; - cursor: pointer; - margin-top: 10px; -} - -.save-button { - background-color: #007bff; - color: #fff; - padding: 10px 15px; - border: none; - border-radius: 3px; - cursor: pointer; - margin-top: 20px; - display: block; - width: 100%; -} - -.delete-skill-button { - color: #fff; - padding: 5px 8px; - border: none; - cursor: pointer; - margin-left: 4px; - margin-right: 4px; - border-radius: 3px; -} - -.delete-skill-button img { - width: 15px; - height: 15px; -} - -.add-employee-section { - margin-top: 15px; -} - -.add-employee-section label { - display: block; - margin-bottom: 5px; - font-weight: bold; -} - -.add-employee-section input[type="text"] { - width: 100%; - padding: 10px; - border: 1px solid #ddd; - border-radius: 3px; -} - -.employee-container { - border: 1px solid #ccc; - padding: 20px; - border-radius: 1px; - margin-bottom: 20px; -} diff --git a/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.html b/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.html index 2370e98..adfe33c 100644 --- a/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.html +++ b/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.html @@ -1,36 +1 @@ -
- - -
- - -
- -
-

Employees possessing the qualification

- -
    -
  • - - Max Mustermann -
    • -
  • - - Mehdi Boudjoudi -
    • -
- -
- - - -
-
- - -
- + diff --git a/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.ts b/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.ts index ed93e94..ed279c8 100644 --- a/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.ts +++ b/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.ts @@ -1,12 +1,38 @@ import { Component } from '@angular/core'; +import { QualifikationFormComponent } from '../qualifikation-form/qualifikation-form.component'; +import { SkillService } from '../../service/skill.service'; +import { FormGroup } from '@angular/forms'; +import { QualificationGetDTO } from '../../models/skill'; +import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-qualifikaton-bearbeiten-view', standalone: true, - imports: [], + imports: [QualifikationFormComponent], templateUrl: './qualifikaton-bearbeiten-view.component.html', styleUrl: './qualifikaton-bearbeiten-view.component.css' }) export class QualifikatonBearbeitenViewComponent { + public skill!: QualificationGetDTO; + constructor(private skillService: SkillService, private route: ActivatedRoute) {} + + submitted(skill: QualificationGetDTO) { + + } + + ngOnInit(): void { + this.skill = { + id: 0, + skill: '', + }; + + this.skillService.getAllSkills().subscribe(skills => { + for (const skill of skills) { + if (skill.id == Number(this.route.snapshot.params['id'])) { + this.skill = skill; + } + } + }); + } } diff --git a/src/app/service/skill.service.ts b/src/app/service/skill.service.ts index 9f6764b..8b044ef 100644 --- a/src/app/service/skill.service.ts +++ b/src/app/service/skill.service.ts @@ -1,7 +1,8 @@ import { HttpClient } from "@angular/common/http"; import { Injectable } from "@angular/core"; -import { QualificationGetDTO } from "../models/skill"; +import { EmployeesForAQualificationDTO, QualificationGetDTO } from "../models/skill"; import { Observable } from "rxjs"; +import { EmployeeNameDataDTO } from "../models/mitarbeiter"; @Injectable({ providedIn: 'root' @@ -17,4 +18,8 @@ export class SkillService { getAllSkills(): Observable> { return this.http.get>(`${SkillService.BASE_URL}/qualifications`); } + + getEmployeesBySkill(id: number): Observable { + return this.http.get(`${SkillService.BASE_URL}/qualifications/${id}/employees`); + } }