From 5ff00d751063a23d195f6d1368f48a005960edfe Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 15 Jan 2025 07:02:38 +0100 Subject: [PATCH 1/7] feat(routes): add route for MitarbeiterBearbeitenViewComponent --- src/app/app.routes.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index d0683e9..0ed7af5 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -5,6 +5,7 @@ import { EmployeeDetailComponent } from "./components/employee-detail/employee-d import { QualifikatonBearbeitenViewComponent } from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component"; import { KeycloakAuthGuard } from "keycloak-angular"; import { AuthGuard } from "./service/auth.service"; +import { MitarbeiterBearbeitenViewComponent } from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component"; export const routes: Routes = [ { @@ -16,6 +17,10 @@ export const routes: Routes = [ component: MitarbeiterverwaltungViewComponent, canActivate: [AuthGuard], }, + { + path: "mitarbeiterbearbeiten/:id", + component: MitarbeiterBearbeitenViewComponent + }, { path: "mitarbeiterdetails", component: EmployeeDetailComponent, From 0bcc7d468469c1074231ece637c223a5c172685f Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 15 Jan 2025 07:10:50 +0100 Subject: [PATCH 2/7] refactor: move form to seperate component as it will be used 2 times --- .../mitarbeiter-bearbeiten-view.component.css | 120 ------------------ ...mitarbeiter-bearbeiten-view.component.html | 50 +------- .../mitarbeiter-bearbeiten-view.component.ts | 3 +- .../mitarbeiter-form.component.css | 120 ++++++++++++++++++ .../mitarbeiter-form.component.html | 49 +++++++ .../mitarbeiter-form.component.spec.ts | 23 ++++ .../mitarbeiter-form.component.ts | 12 ++ 7 files changed, 207 insertions(+), 170 deletions(-) create mode 100644 src/app/components/mitarbeiter-form/mitarbeiter-form.component.css create mode 100644 src/app/components/mitarbeiter-form/mitarbeiter-form.component.html create mode 100644 src/app/components/mitarbeiter-form/mitarbeiter-form.component.spec.ts create mode 100644 src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.css b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.css index ac54d29..e69de29 100644 --- a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.css +++ b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.css @@ -1,120 +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: 2rem; - margin-bottom: 20px; -} - -.back-button { - background-color: #ccc; - color: #333; - border: none; - padding: 8px 12px; - border-radius: 3px; - margin-bottom: 15px; -} - -.user-info { - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 20px; - margin-bottom: 20px; -} - -.form-group { - display: flex; - flex-direction: column; -} - -label { - margin-bottom: 5px; -} - -input[type="text"] { - padding: 10px; - border: 1px solid #ddd; - border-radius: 3px; -} - -input[type="text"]::placeholder { - color: #999; -} - -.save-button { - background-color: #007bff; - color: #fff; - padding: 10px 15px; - border: none; - border-radius: 3px; - cursor: pointer; - margin-top: 10px; - width: 100%; -} - -.skills-container { - border: 1px solid #ccc; - padding: 20px; - border-radius: 3px; -} - -.skill-controls select { - padding: 10px 10px; - border: none; - border-radius: 3px; - background-color: #007bff; - color: #fff; - cursor: pointer; -} - -.skill-list { - list-style: none; - padding: 0; -} - -.skill-list li { - display: flex; - align-items: center; - margin-bottom: 5px; -} - -.skill-icon { - margin-right: 5px; -} - -.delete-skill-button { - color: #fff; - padding: 5px 8px; - border: none; - cursor: pointer; - margin-left: 10px; - border-radius: 3px; -} - -.delete-skill-button img { - width: 15px; - height: 15px; -} - -.add-skill-button{ - background-color: #06a63b; - color: #fff; - padding: 8px 10px; - border: none; - border-radius: 3px; - cursor: pointer; - margin-left: 10px; -} - diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html index 4bc03b5..fccd9f7 100644 --- a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html +++ b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html @@ -1,49 +1 @@ -
- - - -
-

Skills

-
    -
  • - Skill 1 - -
    • -
-
- - -
-
- -
+ diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts index ccf171e..2f3c3c5 100644 --- a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts +++ b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts @@ -1,9 +1,10 @@ import { Component } from '@angular/core'; +import { MitarbeiterFormComponent } from '../mitarbeiter-form/mitarbeiter-form.component'; @Component({ selector: 'app-mitarbeiter-bearbeiten-view', standalone: true, - imports: [], + imports: [MitarbeiterFormComponent], templateUrl: './mitarbeiter-bearbeiten-view.component.html', styleUrl: './mitarbeiter-bearbeiten-view.component.css' }) diff --git a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.css b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.css new file mode 100644 index 0000000..ac54d29 --- /dev/null +++ b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.css @@ -0,0 +1,120 @@ +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: 2rem; + margin-bottom: 20px; +} + +.back-button { + background-color: #ccc; + color: #333; + border: none; + padding: 8px 12px; + border-radius: 3px; + margin-bottom: 15px; +} + +.user-info { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 20px; + margin-bottom: 20px; +} + +.form-group { + display: flex; + flex-direction: column; +} + +label { + margin-bottom: 5px; +} + +input[type="text"] { + padding: 10px; + border: 1px solid #ddd; + border-radius: 3px; +} + +input[type="text"]::placeholder { + color: #999; +} + +.save-button { + background-color: #007bff; + color: #fff; + padding: 10px 15px; + border: none; + border-radius: 3px; + cursor: pointer; + margin-top: 10px; + width: 100%; +} + +.skills-container { + border: 1px solid #ccc; + padding: 20px; + border-radius: 3px; +} + +.skill-controls select { + padding: 10px 10px; + border: none; + border-radius: 3px; + background-color: #007bff; + color: #fff; + cursor: pointer; +} + +.skill-list { + list-style: none; + padding: 0; +} + +.skill-list li { + display: flex; + align-items: center; + margin-bottom: 5px; +} + +.skill-icon { + margin-right: 5px; +} + +.delete-skill-button { + color: #fff; + padding: 5px 8px; + border: none; + cursor: pointer; + margin-left: 10px; + border-radius: 3px; +} + +.delete-skill-button img { + width: 15px; + height: 15px; +} + +.add-skill-button{ + background-color: #06a63b; + color: #fff; + padding: 8px 10px; + border: none; + border-radius: 3px; + cursor: pointer; + margin-left: 10px; +} + diff --git a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html new file mode 100644 index 0000000..4bc03b5 --- /dev/null +++ b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html @@ -0,0 +1,49 @@ +
+ + + +
+

Skills

+
    +
  • + Skill 1 + +
    • +
+
+ + +
+
+ +
diff --git a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.spec.ts b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.spec.ts new file mode 100644 index 0000000..76b7600 --- /dev/null +++ b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MitarbeiterFormComponent } from './mitarbeiter-form.component'; + +describe('MitarbeiterFormComponent', () => { + let component: MitarbeiterFormComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MitarbeiterFormComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MitarbeiterFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts new file mode 100644 index 0000000..59b5c0f --- /dev/null +++ b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-mitarbeiter-form', + standalone: true, + imports: [MitarbeiterFormComponent], + templateUrl: './mitarbeiter-form.component.html', + styleUrl: './mitarbeiter-form.component.css' +}) +export class MitarbeiterFormComponent { + +} From d86af94ac8170fbadf2881d268a478071ba82c21 Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 15 Jan 2025 11:02:12 +0100 Subject: [PATCH 3/7] feat: add employee management and skill handling features --- src/app/app.config.ts | 34 +++---- src/app/app.routes.ts | 3 +- ...mitarbeiter-bearbeiten-view.component.html | 2 +- .../mitarbeiter-bearbeiten-view.component.ts | 22 +++++ .../mitarbeiter-form.component.html | 95 ++++++++++--------- .../mitarbeiter-form.component.ts | 64 ++++++++++++- src/app/models/mitarbeiter.ts | 47 +++++++++ src/app/models/skill.ts | 12 +++ src/app/service/employee.service.ts | 43 +++++++++ src/app/service/skill.service.ts | 20 ++++ 10 files changed, 277 insertions(+), 65 deletions(-) create mode 100644 src/app/models/mitarbeiter.ts create mode 100644 src/app/models/skill.ts create mode 100644 src/app/service/employee.service.ts create mode 100644 src/app/service/skill.service.ts diff --git a/src/app/app.config.ts b/src/app/app.config.ts index b047b4b..bd19328 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -2,7 +2,7 @@ import { APP_INITIALIZER, ApplicationConfig, provideZoneChangeDetection } from ' import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; -import {KeycloakAngularModule, KeycloakBearerInterceptor, KeycloakService} from "keycloak-angular"; +import { KeycloakAngularModule, KeycloakBearerInterceptor, KeycloakService } from "keycloak-angular"; import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; export const initializeKeycloak = (keycloak: KeycloakService) => async () => @@ -28,20 +28,20 @@ function initializeApp(keycloak: KeycloakService): () => Promise { export const appConfig: ApplicationConfig = { providers: [ - provideRouter(routes), - KeycloakAngularModule, - { - provide: APP_INITIALIZER, - useFactory: initializeApp, - multi: true, - deps: [KeycloakService] - }, - KeycloakService, - provideHttpClient(withInterceptorsFromDi()), - { - provide: HTTP_INTERCEPTORS, - useClass: KeycloakBearerInterceptor, - multi: true - } - ] + provideRouter(routes), + KeycloakAngularModule, + { + provide: APP_INITIALIZER, + useFactory: initializeApp, + multi: true, + deps: [KeycloakService] + }, + KeycloakService, + provideHttpClient(withInterceptorsFromDi()), + { + provide: HTTP_INTERCEPTORS, + useClass: KeycloakBearerInterceptor, + multi: true + } + ] }; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 0ed7af5..93c626a 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -19,7 +19,8 @@ export const routes: Routes = [ }, { path: "mitarbeiterbearbeiten/:id", - component: MitarbeiterBearbeitenViewComponent + component: MitarbeiterBearbeitenViewComponent, + canActivate: [AuthGuard], }, { path: "mitarbeiterdetails", diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html index fccd9f7..0d53245 100644 --- a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html +++ b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html @@ -1 +1 @@ - + diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts index 2f3c3c5..a07c020 100644 --- a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts +++ b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts @@ -1,5 +1,8 @@ import { Component } from '@angular/core'; import { MitarbeiterFormComponent } from '../mitarbeiter-form/mitarbeiter-form.component'; +import { EmployeeResponseDTO } from '../../models/mitarbeiter'; +import { EmployeeService } from '../../service/employee.service'; +import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-mitarbeiter-bearbeiten-view', @@ -9,5 +12,24 @@ import { MitarbeiterFormComponent } from '../mitarbeiter-form/mitarbeiter-form.c styleUrl: './mitarbeiter-bearbeiten-view.component.css' }) export class MitarbeiterBearbeitenViewComponent { + public mitarbeiter!: EmployeeResponseDTO; + constructor(private employeeService: EmployeeService, private route: ActivatedRoute) { } + + ngOnInit(): void { + this.mitarbeiter = { + id: 0, + firstName: '', + lastName: '', + street: '', + phone: '', + skillSet: [], + postcode: '', + city: '', + } + this.employeeService.getEmployeeById(this.route.snapshot.params['id']).subscribe(employee => { + this.mitarbeiter = employee; + console.log(this.mitarbeiter); + }); + } } diff --git a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html index 4bc03b5..2dae44f 100644 --- a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html +++ b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html @@ -1,49 +1,56 @@ -
- - +
-
-

Skills

-
    -
  • - Skill 1 - + + +
    +

    Skills

    +
      + @for (skill of mitarbeiter.skillSet; track skill) { +
    • + {{skill.skill}} + -
      • -
    -
    - - +
    • + } +
+
+ + +
+
- - + + diff --git a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts index 59b5c0f..c242ba6 100644 --- a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts +++ b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts @@ -1,12 +1,72 @@ -import { Component } from '@angular/core'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { EmployeeNameAndSkillDataDTO, EmployeeRequestPutDTO, EmployeeResponseDTO } from '../../models/mitarbeiter'; +import { AbstractControl, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; +import { HttpClient } from '@angular/common/http'; +import { Router } from '@angular/router'; +import { AsyncPipe, NgFor } from '@angular/common'; +import { SkillService } from '../../service/skill.service'; +import { QualificationGetDTO } from '../../models/skill'; +import { Observable, of } from 'rxjs'; +import { EmployeeService } from '../../service/employee.service'; @Component({ selector: 'app-mitarbeiter-form', standalone: true, - imports: [MitarbeiterFormComponent], + imports: [MitarbeiterFormComponent, ReactiveFormsModule, NgFor, AsyncPipe], templateUrl: './mitarbeiter-form.component.html', styleUrl: './mitarbeiter-form.component.css' }) export class MitarbeiterFormComponent { + @Input() mitarbeiter!: EmployeeResponseDTO; + @Output() mitarbeiterChange = new EventEmitter(); + public mitarbeiterForm!: FormGroup; + public allSkills: Observable> = of([]); + + constructor(public http: HttpClient, public router: Router, private employeeService: EmployeeService, private skillService: SkillService) { + + } + + private setupForm() { + this.mitarbeiterForm = new FormGroup({ + lastName: new FormControl(this.mitarbeiter.lastName), + firstName: new FormControl(this.mitarbeiter.firstName), + street: new FormControl(this.mitarbeiter.street), + postcode: new FormControl(this.mitarbeiter.postcode), + city: new FormControl(this.mitarbeiter.city), + phone: new FormControl(this.mitarbeiter.phone), + newSkill: new FormControl(), + }); + } + + ngOnChanges(): void { + this.setupForm(); + } + + ngOnInit(): void { + this.allSkills = this.skillService.getAllSkills(); + this.setupForm(); + } + + removeSkill(id?: number) { + this.mitarbeiter.skillSet = this.mitarbeiter.skillSet?.filter(skill => skill.id !== id); + } + + addSkill() { + const id = Number(this.mitarbeiterForm.get("newSkill")?.value); + this.employeeService.addSkillToEmployee(id, this.mitarbeiter); + } + + submit() { + this.mitarbeiter.firstName = this.mitarbeiterForm.get("firstName")?.value; + this.mitarbeiter.lastName = this.mitarbeiterForm.get("lastName")?.value; + this.mitarbeiter.street = this.mitarbeiterForm.get("street")?.value; + this.mitarbeiter.postcode = this.mitarbeiterForm.get("postcode")?.value; + this.mitarbeiter.city = this.mitarbeiterForm.get("city")?.value; + this.mitarbeiter.phone = this.mitarbeiterForm.get("phone")?.value; + + console.log(this.mitarbeiterForm); + console.log(this.mitarbeiter); + this.mitarbeiterChange.emit(this.mitarbeiter); + } } diff --git a/src/app/models/mitarbeiter.ts b/src/app/models/mitarbeiter.ts new file mode 100644 index 0000000..9b67f85 --- /dev/null +++ b/src/app/models/mitarbeiter.ts @@ -0,0 +1,47 @@ +import { QualificationGetDTO, QualificationPostDTO } from "./skill"; + +export interface EmployeeRequestPutDTO { + lastName: string, + firstName: string, + street: string, + postcode: string, + city: string, + phone: string, + skillSet: Array, +} + +export interface EmployeeResponseDTO { + id: number, + lastName: string, + firstName: string, + street: string, + postcode: string, + city: string, + phone: string, + skillSet?: Array, +} + +export interface EmployeeRequestDTO { + lastName: string, + firstName: string, + street: string, + postcode: string, + city: string, + phone: string, + skillSet?: Array, +} + +export interface EmployeeNameAndSkillDataDTO { + id: number, + lastName: string, + firstName: string, + skillSet: Array, +} + +export interface EmployeeNameDataDTO { + id: number, + lastName: string, + firstName: string, +} + + diff --git a/src/app/models/skill.ts b/src/app/models/skill.ts new file mode 100644 index 0000000..b3db681 --- /dev/null +++ b/src/app/models/skill.ts @@ -0,0 +1,12 @@ +export interface QualificationGetDTO { + id: number, + skill: string, +} + +export interface QualificationPostDTO { + skill: string, +} + +export interface EmployeesForAQualificationDTO { + qualification: QualificationGetDTO, +} diff --git a/src/app/service/employee.service.ts b/src/app/service/employee.service.ts new file mode 100644 index 0000000..3afb443 --- /dev/null +++ b/src/app/service/employee.service.ts @@ -0,0 +1,43 @@ +import { Injectable } from "@angular/core"; +import { EmployeeRequestPutDTO, EmployeeResponseDTO } from "../models/mitarbeiter"; +import { HttpClient } from "@angular/common/http"; +import { Observable } from "rxjs"; +import { SkillService } from "./skill.service"; + +@Injectable({ + providedIn: 'root' +}) +export class EmployeeService { + constructor(private http: HttpClient) {} + + + responseDtoToPutDto(employee: EmployeeResponseDTO): EmployeeRequestPutDTO { + return { + firstName: employee.firstName, + lastName: employee.lastName, + street: employee.street, + postcode: employee.postcode, + city: employee.city, + phone: employee.phone, + skillSet: employee.skillSet?.map(skill => skill.id) || [], + } + } + + + getAllEmployees(): Observable> { + return this.http.get>(`${SkillService.BASE_URL}/employees`); + } + + + getEmployeeById(id: number): Observable { + return this.http.get(`${SkillService.BASE_URL}/employees/${id}`); + } + + + addSkillToEmployee(skillId: number, employee: EmployeeResponseDTO) { + let employeePut = this.responseDtoToPutDto(employee); + employeePut.skillSet.push(skillId); + + this.http.put(`${SkillService.BASE_URL}/employees/${employee.id}`, employeePut).subscribe(); + } +} diff --git a/src/app/service/skill.service.ts b/src/app/service/skill.service.ts new file mode 100644 index 0000000..9f6764b --- /dev/null +++ b/src/app/service/skill.service.ts @@ -0,0 +1,20 @@ +import { HttpClient } from "@angular/common/http"; +import { Injectable } from "@angular/core"; +import { QualificationGetDTO } from "../models/skill"; +import { Observable } from "rxjs"; + +@Injectable({ + providedIn: 'root' +}) +export class SkillService { + + public static readonly BASE_URL = "http://localhost:8089"; + + constructor(private http: HttpClient) { + + } + + getAllSkills(): Observable> { + return this.http.get>(`${SkillService.BASE_URL}/qualifications`); + } +} From 8abc5855ddb9cef37defb5f77059213af4b1579f Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 15 Jan 2025 11:30:39 +0100 Subject: [PATCH 4/7] feat(mitarbeiter-bearbeiten): add employee update functionality --- ...mitarbeiter-bearbeiten-view.component.html | 2 +- .../mitarbeiter-bearbeiten-view.component.ts | 4 +++ .../mitarbeiter-form.component.html | 4 +++ .../mitarbeiter-form.component.ts | 34 +++++++++++++++++-- src/app/models/skill.ts | 3 ++ src/app/service/employee.service.ts | 5 ++- 6 files changed, 47 insertions(+), 5 deletions(-) diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html index 0d53245..682a986 100644 --- a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html +++ b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html @@ -1 +1 @@ - + diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts index a07c020..40a8719 100644 --- a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts +++ b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts @@ -16,6 +16,10 @@ export class MitarbeiterBearbeitenViewComponent { constructor(private employeeService: EmployeeService, private route: ActivatedRoute) { } + submitted(mitarbeiter: EmployeeResponseDTO) { + this.employeeService.updateEmployee(mitarbeiter); + } + ngOnInit(): void { this.mitarbeiter = { id: 0, diff --git a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html index 2dae44f..7406844 100644 --- a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html +++ b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html @@ -41,14 +41,18 @@ } + @if (!hasAllSkills) {
+ } diff --git a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts index c242ba6..95014cb 100644 --- a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts +++ b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts @@ -22,6 +22,7 @@ export class MitarbeiterFormComponent { public mitarbeiterForm!: FormGroup; public allSkills: Observable> = of([]); + public hasAllSkills: boolean = false; constructor(public http: HttpClient, public router: Router, private employeeService: EmployeeService, private skillService: SkillService) { @@ -43,18 +44,47 @@ export class MitarbeiterFormComponent { this.setupForm(); } + skillsChanged() { + this.allSkills.subscribe(skills => { + this.hasAllSkills = this.checkAllSkills(skills); + }); + } + ngOnInit(): void { this.allSkills = this.skillService.getAllSkills(); + this.skillsChanged(); this.setupForm(); } removeSkill(id?: number) { this.mitarbeiter.skillSet = this.mitarbeiter.skillSet?.filter(skill => skill.id !== id); + this.skillsChanged(); + } + + checkAllSkills(skills: Array): boolean { + const skillSet = this.mitarbeiter.skillSet || []; + + return skills.every(skill => + skillSet.some(givenSkill => skill.id === givenSkill.id) + ); + } + + hasSkill(id: number): boolean { + for (const skill of this.mitarbeiter.skillSet || []) { + if (skill.id == id) { + return true; + } + } + return false; } addSkill() { const id = Number(this.mitarbeiterForm.get("newSkill")?.value); - this.employeeService.addSkillToEmployee(id, this.mitarbeiter); + this.allSkills.subscribe(skills => { + const newSkill = skills.filter(skill => skill.id == id)[0]; + this.mitarbeiter.skillSet?.push(newSkill); + this.skillsChanged(); + }); } submit() { @@ -65,8 +95,6 @@ export class MitarbeiterFormComponent { this.mitarbeiter.city = this.mitarbeiterForm.get("city")?.value; this.mitarbeiter.phone = this.mitarbeiterForm.get("phone")?.value; - console.log(this.mitarbeiterForm); - console.log(this.mitarbeiter); this.mitarbeiterChange.emit(this.mitarbeiter); } } diff --git a/src/app/models/skill.ts b/src/app/models/skill.ts index b3db681..43b4411 100644 --- a/src/app/models/skill.ts +++ b/src/app/models/skill.ts @@ -1,3 +1,5 @@ +import { EmployeeNameDataDTO } from "./mitarbeiter"; + export interface QualificationGetDTO { id: number, skill: string, @@ -9,4 +11,5 @@ export interface QualificationPostDTO { export interface EmployeesForAQualificationDTO { qualification: QualificationGetDTO, + employees: Array, } diff --git a/src/app/service/employee.service.ts b/src/app/service/employee.service.ts index 3afb443..a8a4d38 100644 --- a/src/app/service/employee.service.ts +++ b/src/app/service/employee.service.ts @@ -8,7 +8,7 @@ import { SkillService } from "./skill.service"; providedIn: 'root' }) export class EmployeeService { - constructor(private http: HttpClient) {} + constructor(private http: HttpClient) { } responseDtoToPutDto(employee: EmployeeResponseDTO): EmployeeRequestPutDTO { @@ -23,6 +23,9 @@ export class EmployeeService { } } + updateEmployee(employee: EmployeeResponseDTO) { + this.http.put(`${SkillService.BASE_URL}/employees/${employee.id}`, this.responseDtoToPutDto(employee)).subscribe(); + } getAllEmployees(): Observable> { return this.http.get>(`${SkillService.BASE_URL}/employees`); From feaf8f54d2e16565294d2c54567b9126fc19ceee Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 15 Jan 2025 11:40:51 +0100 Subject: [PATCH 5/7] feat: add navigation to employee overview after update --- .../mitarbeiter-bearbeiten-view.component.ts | 9 +++++++-- .../mitarbeiter-form/mitarbeiter-form.component.html | 2 +- .../mitarbeiter-form/mitarbeiter-form.component.ts | 5 +++++ 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts index 40a8719..1a9d7ae 100644 --- a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts +++ b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; import { MitarbeiterFormComponent } from '../mitarbeiter-form/mitarbeiter-form.component'; import { EmployeeResponseDTO } from '../../models/mitarbeiter'; import { EmployeeService } from '../../service/employee.service'; -import { ActivatedRoute } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; @Component({ selector: 'app-mitarbeiter-bearbeiten-view', @@ -14,10 +14,15 @@ import { ActivatedRoute } from '@angular/router'; export class MitarbeiterBearbeitenViewComponent { public mitarbeiter!: EmployeeResponseDTO; - constructor(private employeeService: EmployeeService, private route: ActivatedRoute) { } + constructor(private employeeService: EmployeeService, private route: ActivatedRoute, private router: Router) { } submitted(mitarbeiter: EmployeeResponseDTO) { this.employeeService.updateEmployee(mitarbeiter); + this.returnToEmployeeOverview(); + } + + returnToEmployeeOverview() { + this.router.navigate(["mitarbeiter"]); } ngOnInit(): void { diff --git a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html index 7406844..b797a2e 100644 --- a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html +++ b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html @@ -1,7 +1,7 @@
- +