Merge pull request 'Mitarbeiter erstellen' (#66) from feature/create-employee into main

Reviewed-on: #66

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 { MitarbeiterBearbeitenViewComponent } from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component";
 import { AuthGuard } from "./service/auth.service";
+import { MitarbeiterErstellenComponent } from "./components/mitarbeiter-erstellen/mitarbeiter-erstellen.component";
 
 export const routes: Routes = [
   {
@@ -16,6 +17,11 @@ export const routes: Routes = [
     component: MitarbeiterverwaltungViewComponent,
     canActivate: [AuthGuard],
   },
+  {
+    path: "mitarbeitererstellen",
+    component: MitarbeiterErstellenComponent,
+    canActivate: [AuthGuard],
+  },
   {
     path: "mitarbeiterbearbeiten/:id",
     component: MitarbeiterBearbeitenViewComponent,

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

@@ -0,0 +1 @@
+<app-mitarbeiter-form [(mitarbeiter)]="mitarbeiter" (mitarbeiterChange)="submitted($event)"></app-mitarbeiter-form>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MitarbeiterErstellenComponent } from './mitarbeiter-erstellen.component';
+
+describe('MitarbeiterErstellenComponent', () => {
+  let component: MitarbeiterErstellenComponent;
+  let fixture: ComponentFixture<MitarbeiterErstellenComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MitarbeiterErstellenComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MitarbeiterErstellenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { EmployeeResponseDTO } from '../../models/mitarbeiter';
+import { EmployeeService } from '../../service/employee.service';
+import { MitarbeiterFormComponent } from '../mitarbeiter-form/mitarbeiter-form.component';
+
+@Component({
+  selector: 'app-mitarbeiter-erstellen',
+  standalone: true,
+  imports: [MitarbeiterFormComponent],
+  templateUrl: './mitarbeiter-erstellen.component.html',
+  styleUrl: './mitarbeiter-erstellen.component.css'
+})
+export class MitarbeiterErstellenComponent {
+  public mitarbeiter!: EmployeeResponseDTO;
+
+  constructor(private employeeService: EmployeeService, private route: ActivatedRoute, private router: Router) { }
+
+  submitted(mitarbeiter: EmployeeResponseDTO) {
+    this.employeeService.createEmployee(mitarbeiter);
+    this.returnToEmployeeOverview();
+  }
+
+  returnToEmployeeOverview() {
+    this.router.navigate(["mitarbeiter"]);
+  }
+
+  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;
+    });
+  }
+}

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

@@ -20,7 +20,7 @@
       </div>
       <p class="text-body-tertiary">Search for a propertiy of an Employee. eg. First Name</p>
     </form>
-    <button class="add-button">Add employee</button>
+    <button (click)="createEmployee()" class="add-button">Add employee</button>
   </div>
 
   <table class="employee-table">

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

@@ -46,6 +46,10 @@ export class MitarbeiterverwaltungViewComponent implements OnInit {
     this.router.navigate([`/mitarbeiterbearbeiten/${id}`]);
   }
 
+  createEmployee() {
+    this.router.navigate(['/mitarbeitererstellen']);
+  }
+
   deleteEmployee(id: number) {
     this.employeeService.deleteEmployee(id);
     this.employees = this.employees.filter(employee => employee.id != id);

src/app/service/employee.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { EmployeeRequestPutDTO, EmployeeResponseDTO } from "../models/mitarbeiter";
+import { EmployeeRequestDTO, EmployeeRequestPutDTO, EmployeeResponseDTO } from "../models/mitarbeiter";
 import { HttpClient } from "@angular/common/http";
 import { Observable } from "rxjs";
 import { SkillService } from "./skill.service";
@@ -10,6 +10,17 @@ import { SkillService } from "./skill.service";
 export class EmployeeService {
   constructor(private http: HttpClient) { }
 
+  responseToRequestDto(employee: EmployeeResponseDTO): EmployeeRequestDTO {
+    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) || [],
+    }
+  }
 
   responseDtoToPutDto(employee: EmployeeResponseDTO): EmployeeRequestPutDTO {
     return {
@@ -23,6 +34,10 @@ export class EmployeeService {
     }
   }
 
+  createEmployee(employee: EmployeeResponseDTO) {
+    this.http.post(`${SkillService.BASE_URL}/employees`, this.responseToRequestDto(employee)).subscribe();
+  }
+
   updateEmployee(employee: EmployeeResponseDTO) {
     this.http.put(`${SkillService.BASE_URL}/employees/${employee.id}`, this.responseDtoToPutDto(employee)).subscribe();
   }