src/app/app.routes.ts

@@ -40,8 +40,9 @@ export const routes: Routes = [
     canActivate: [AuthGuard],
   },
   {
-    path: "mitarbeiterdetails",
+    path: "mitarbeiterdetails/:id",
     component: EmployeeDetailComponent,
+    canActivate: [AuthGuard],
   },
   {
     path: "qualifikationbearbeiten/:id",

src/app/components/employee-detail/employee-detail.component.html

@@ -1,28 +1,29 @@
-<div class="d-flex flex-col" style="height: 100%;">
-  <app-navigation-bar></app-navigation-bar>
-  <div class="p-3" style="width: 100%;">
-    <a href="" class="btn btn-primary">Zurück</a>
-    <div class="row align-items-start pt-3">
-      <div class="col">
-        <h1>Name des Mitarbeiters</h1>
-        <p><strong>Straße: </strong>Straße des Benutzers</p>
-        <p><strong>Postleitzahl: </strong>Postleitzahl des Benutzers</p>
-        <p><strong>Stadt: </strong>Stadt des Benutzers</p>
-        <p><strong>Telefonnummer: </strong>Telefonnummer des Benutzers</p>
-        <button class="btn btn-danger">Löschen</button>
-        <button class="ms-3 btn btn-primary">Bearbeiten</button>
-      </div>
-      <div class="col">
-        <h2>Qualifikationen</h2>
-        <ul class="list-group" style="width: fit-content;">
-          <li class="list-group-item">Qualifikation 1</li>
-          <li class="list-group-item">Qualifikation 2</li>
-          <li class="list-group-item">Qualifikation 3</li>
-          <li class="list-group-item">Qualifikation 4</li>
-          <li class="list-group-item">Qualifikation 5</li>
-        </ul>
-      </div>
-    </div>
+<div class="container">
+  <div class="d-flex flex-col" style="height: 100%;">
+    <div class="p-3" style="width: 100%;">
+      <button class="btn btn-primary" (click)="goToEmployeePage()">Zurück</button>
+      <div class="row align-items-start pt-3">
+        <div class="col">
+          <h1>{{ employee.firstName }} {{ employee.lastName }} </h1>
+          <p><strong>Straße: </strong>{{ employee.street }}</p>
+          <p><strong>Postleitzahl: </strong>{{ employee.postcode }}</p>
+          <p><strong>Stadt: </strong>{{ employee.city }}</p>
+          <p><strong>Telefonnummer: </strong>{{ employee.phone }}s</p>
+          <button class="btn btn-danger" (click)="deleteEmployee(currentId)">Löschen</button>
+          <button class="ms-3 btn btn-primary" (click)="editEmployee(currentId)">Bearbeiten</button>
 
+        </div>
+        <div class="col">
+          <h2>Qualifikationen</h2>
+          <ul class="list-group" style="width: fit-content;">
+            @for(skill of skillSet; track skill) {
+            <li class="list-group-item">{{ skill }}</li>
+            }
+
+          </ul>
+        </div>
+      </div>
+
+    </div>
   </div>
 </div>

src/app/components/employee-detail/employee-detail.component.ts

@@ -1,5 +1,11 @@
-import { Component } from '@angular/core';
-import { NavigationBarComponent } from '../navigation-bar/navigation-bar.component';
+import {Component} from '@angular/core';
+import {NavigationBarComponent} from '../navigation-bar/navigation-bar.component';
+import {EmployeeNameAndSkillDataDTO, EmployeeResponseDTO} from "../../models/mitarbeiter";
+import {EmployeeService} from "../../service/employee.service";
+import {ActivatedRoute, Router} from "@angular/router";
+import {Observable} from "rxjs";
+import {QualificationGetDTO} from "../../models/skill";
+import {SkillService} from "../../service/skill.service";
 
 @Component({
   selector: 'app-employee-detail',
@@ -9,5 +15,31 @@ import { NavigationBarComponent } from '../navigation-bar/navigation-bar.compone
   styleUrl: './employee-detail.component.css'
 })
 export class EmployeeDetailComponent {
+  employee!: EmployeeResponseDTO;
+  skillSet: string[] = [];
+  currentId: number = 0;
 
+  constructor(private employeeService: EmployeeService, private router: Router, private route: ActivatedRoute, private skillService: SkillService) {
+    this.currentId = this.route.snapshot.params['id'];
+    this.employeeService.getEmployeeById(this.route.snapshot.params['id']).subscribe(employee => {
+      this.employee = employee;
+      this.skillSet = this.employee.skillSet?.map(skill => skill.skill) || [];
+    });
+  }
+
+  editEmployee(id: number) {
+    this.router.navigate([`/mitarbeiterbearbeiten/${id}`]);
+  }
+
+  goToEmployeePage(){
+    this.router.navigate(['mitarbeiter']);
+  }
+
+  deleteEmployee(id: number) {
+    this.employeeService.deleteEmployee(id);
+    this.router.navigate([`mitarbeiter`]);
+  }
+
+
+  protected readonly EmployeeService = EmployeeService;
 }

src/app/components/mitarbeiter-erstellen/mitarbeiter-erstellen.component.ts

@@ -17,6 +17,7 @@ export class MitarbeiterErstellenComponent {
   constructor(private employeeService: EmployeeService, private route: ActivatedRoute, private router: Router) { }
 
   submitted(mitarbeiter: EmployeeResponseDTO) {
+    console.log(mitarbeiter)
     this.employeeService.createEmployee(mitarbeiter);
     this.returnToEmployeeOverview();
   }

src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts

@@ -3,7 +3,7 @@ import { EmployeeNameAndSkillDataDTO, EmployeeRequestPutDTO, EmployeeResponseDTO
 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 { AsyncPipe, NgFor, Location } from '@angular/common';
 import { SkillService } from '../../service/skill.service';
 import { QualificationGetDTO } from '../../models/skill';
 import { Observable, of } from 'rxjs';
@@ -11,7 +11,7 @@ import { Observable, of } from 'rxjs';
 @Component({
   selector: 'app-mitarbeiter-form',
   standalone: true,
-  imports: [MitarbeiterFormComponent, ReactiveFormsModule, NgFor, AsyncPipe],
+  imports: [ReactiveFormsModule, NgFor, AsyncPipe],
   templateUrl: './mitarbeiter-form.component.html',
   styleUrl: './mitarbeiter-form.component.css'
 })
@@ -24,12 +24,10 @@ export class MitarbeiterFormComponent {
   public hasAllSkills: boolean = false;
   errorMessages: Record<string, string> = {};
 
-  constructor(public http: HttpClient, public router: Router, private skillService: SkillService) {
-
-  }
+  constructor(public http: HttpClient, public router: Router, private skillService: SkillService, private location: Location) {}
 
   returnToEmployeeOverview() {
-    this.router.navigate(["mitarbeiter"]);
+    this.location.back();
   }
 
   private setupForm() {
@@ -40,7 +38,7 @@ export class MitarbeiterFormComponent {
       postcode: new FormControl(this.mitarbeiter.postcode, [Validators.required, Validators.minLength(5), Validators.maxLength(5)]),
       city: new FormControl(this.mitarbeiter.city, Validators.required),
       phone: new FormControl(this.mitarbeiter.phone, [Validators.required, Validators.pattern('^[- +()0-9]+$')]),
-      newSkill: new FormControl(),
+      newSkill: new FormControl(null, Validators.required) // Added
     });
   }
 
@@ -88,6 +86,7 @@ export class MitarbeiterFormComponent {
       const newSkill = skills.filter(skill => skill.id == id)[0];
       this.mitarbeiter.skillSet?.push(newSkill);
       this.skillsChanged();
+      this.mitarbeiterForm.get("newSkill")?.reset(null); // Added
     });
   }
 

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html

@@ -40,7 +40,7 @@
           <td>{{ employee.firstName }}</td>
           <td>{{ employee.lastName }}</td>
           <td>
-            <button class="btn btn-primary me-2" (click)="editEmployee(employee.id)">Edit</button>
+          <button class="btn btn-primary me-2" (click)="goToEmployeeDetailPage(employee.id)">Details</button>
             <button class="btn btn-danger" (click)="deleteEmployee(employee.id)">Delete</button>
           </td>
         </tr>

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts

@@ -18,7 +18,9 @@ export class MitarbeiterverwaltungViewComponent implements OnInit {
   employees: Array<EmployeeResponseDTO> = [];
   searchForm!: FormGroup;
 
-  constructor(private employeeService: EmployeeService, private router: Router) {}
+  constructor(private employeeService: EmployeeService, private router: Router) {
+    this.updateEmployees();
+  }
 
   submit() {
     const searchTerm = this.searchForm.get("search")?.value || '';
@@ -56,10 +58,18 @@ export class MitarbeiterverwaltungViewComponent implements OnInit {
     this.employees = this.employees.filter(employee => employee.id != id);
   }
 
+  goToEmployeeDetailPage(id: number){
+    this.router.navigate([`/mitarbeiterdetails/${id}`]);
+  }
+
+  updateEmployees() {
+    this.employeeService.getAllEmployees().subscribe(employees => this.employees = employees);
+  }
+
   ngOnInit(): void {
     this.searchForm = new FormGroup({
       search: new FormControl(''),
     });
-    this.employeeService.getAllEmployees().subscribe(employees => this.employees = employees);
+    this.updateEmployees();
   }
 }

src/app/service/skill.service.ts

@@ -1,10 +1,10 @@
-import { HttpClient } from "@angular/common/http";
-import { Injectable } from "@angular/core";
-import { EmployeesForAQualificationDTO, QualificationGetDTO, QualificationPostDTO } from "../models/skill";
-import { Observable } from "rxjs";
-import { EmployeeNameDataDTO } from "../models/mitarbeiter";
-import { EmployeeService } from "./employee.service";
-import { Environment } from "../environments/environment";
+import {HttpClient} from "@angular/common/http";
+import {Injectable} from "@angular/core";
+import {EmployeesForAQualificationDTO, QualificationGetDTO, QualificationPostDTO} from "../models/skill";
+import {Observable} from "rxjs";
+import {EmployeeNameAndSkillDataDTO, EmployeeNameDataDTO} from "../models/mitarbeiter";
+import {EmployeeService} from "./employee.service";
+import {Environment} from "../environments/environment";
 
 @Injectable({
   providedIn: 'root'
@@ -47,4 +47,9 @@ export class SkillService {
   getEmployeesBySkill(id: number): Observable<EmployeesForAQualificationDTO> {
     return this.http.get<EmployeesForAQualificationDTO>(`${SkillService.BASE_URL}/qualifications/${id}/employees`);
   }
+
+  getSkillsOfEmployee(id: number): Observable<EmployeeNameAndSkillDataDTO> {
+    return this.http.get<EmployeeNameAndSkillDataDTO>(`${SkillService.BASE_URL}/employees/${id}/qualifications`);
+  }
+
 }

tests/mitarbeiter.spec.ts

@@ -27,14 +27,6 @@ test.describe('mitarbeiter', () => {
     expect(page.url()).toContain('mitarbeitererstellen');
   });
 
-  test('EditShouldRedirectToCorrespondingPage', async ({ page }) => {
-    const button = page.getByText('Edit').first();
-    await button.click();
-
-    expect(page.url()).toContain('mitarbeiterbearbeiten');
-    expect(page.url()).toContain('1');
-  });
-
   test('DeleteShouldBeThere', async ({ page }) => {
     const button = page.getByText('Delete').first();