Fixs: API Doc, RouterLink, Styling, Layout

src/app/app.component.html

@@ -1,3 +1,6 @@
 <app-header></app-header>
 <app-notification-box></app-notification-box>
-<router-outlet/>
+<main>
+    <h1>{{title.getTitle()}}</h1>
+    <router-outlet />
+</main>

src/app/app.component.scss

@@ -0,0 +1,17 @@
+app-header {
+  width: 100%;
+}
+
+main {
+  flex-grow: 1;
+  min-width: 100%;
+  width: fit-content;
+  box-sizing: border-box;
+  padding: 2rem;
+
+  @media (min-width: 60rem) {
+    width: 80%;
+    min-width: 60rem;
+    max-width: 80rem;
+  }
+}

src/app/app.component.ts

@@ -1,6 +1,7 @@
-import {Component} from '@angular/core';
-import {RouterOutlet} from '@angular/router';
-import {HeaderComponent} from '@app/header/header.component';
+import { Component } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from '@app/header/header.component';
 
 import { NotificationBoxComponent } from './notification-box/notification-box.component';
 
@@ -11,4 +12,5 @@ import { NotificationBoxComponent } from './notification-box/notification-box.co
     styleUrl: './app.component.scss'
 })
 export class AppComponent {
+    constructor(protected title: Title) { }
 }

src/app/app.config.ts

@@ -1,5 +1,6 @@
 import {provideHttpClient} from '@angular/common/http';
 import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
 import {provideRouter} from '@angular/router';
 import {routes} from '@app/app.routes';
@@ -26,6 +27,7 @@ export const appConfig: ApplicationConfig = {
                 useRefreshToken: true,
                 logLevel: LogLevel.Error,
             },
-        })
+        }),
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }
     ],
 };

src/app/core/auth/auth.service.ts

@@ -1,7 +1,9 @@
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 import UserData from '@core/auth/UserData';
-import {OidcSecurityService} from 'angular-auth-oidc-client';
-import {Observable} from 'rxjs';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { Observable } from 'rxjs';
+
+import { OpenAPI } from '../ems';
 
 @Injectable({
     providedIn: 'root'
@@ -11,13 +13,14 @@ export class AuthService {
 
     constructor(private readonly oidcSecurityService: OidcSecurityService) {
         this.$user = new Observable((publish) => {
-            this.oidcSecurityService.checkAuth().subscribe(({isAuthenticated, userData}) => {
+            this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData }) => {
                 publish.next(isAuthenticated ? {
                     username: userData.preferred_username,
                     verified: userData.email_verified
                 } : undefined);
             });
         });
+        this.oidcSecurityService.getAccessToken().subscribe(token => OpenAPI.TOKEN = token);
 
     }
 
@@ -26,7 +29,7 @@ export class AuthService {
     }
 
     logout() {
-        this.oidcSecurityService.logoff();
+        this.oidcSecurityService.logoff().subscribe(() => { });
     }
 
 }

src/app/core/ems/ems.yml

@@ -1,24 +1,66 @@
 openapi: 3.0.1
 info:
   title: Employees Management Micro-Service
-  description: "\n## Overview\n\nEmployees Management Service API manages the employees\
-    \ of HighTec Gmbh including their qualifications. It offers the possibility to\
-    \ create, read, update and delete employees and qualifications. Existing employees\
-    \ can be assigned new qualifications or have them withdrawn. \nThe API is organized\
-    \ around REST. It has predictable resource-oriented URLs, accepts JSON-encoded\
-    \ request bodies, returns JSON-encoded responses, uses standard HTTP response\
-    \ codes and authentication.\n"
+  description: "## Overview \n
+    \ Employees Management Service API manages the employees <br>
+    \ of HighTec Gmbh including their qualifications. It offers the possibility to <br>
+    \ create, read, update and delete employees and qualifications. Existing employees <br>
+    \ can be assigned new qualifications or have them withdrawn. <br>
+    \ The API is organized <br>
+    \ around REST. It has predictable resource-oriented URLs, accepts JSON-encoded <br>
+    \ request bodies, returns JSON-encoded responses, uses standard HTTP response <br>
+    \ codes and authentication."
   version: 1.1.2
 servers:
 - url: ""
 security:
 - bearerAuth: []
 paths:
+  /qualifications:
+    get:
+      tags:
+        - qualification
+      summary: Get a list of all available qualifications
+      operationId: getAllQualifications
+      responses:
+        "401":
+          description: not authorized
+        "200":
+          description: list of qualifications
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Qualification'
+    post:
+      tags:
+      - qualification
+      summary: Creates a new qualification
+      operationId: createQualification
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/NewQualification'
+        required: true
+      responses:
+        "201":
+          description: created qualification
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Qualification'
+        "401":
+          description: not authorized
+        "400":
+          description: invalid JSON posted
+
   /qualifications/{id}:
     put:
       tags:
-      - qualification-controller
-      summary: updates a qualification
+      - qualification
+      summary: Updates a qualification
       operationId: updateQualification
       parameters:
       - name: id
@@ -31,7 +73,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/QualificationPostDTO'
+              $ref: '#/components/schemas/NewQualification'
         required: true
       responses:
         "200":
@@ -39,7 +81,7 @@ paths:
           content:
             application/json:
               schema:
-                $ref: '#/components/schemas/QualificationPostDTO'
+                $ref: '#/components/schemas/Qualification'
         "401":
           description: not authorized
         "404":
@@ -48,9 +90,9 @@ paths:
           description: invalid JSON posted
     delete:
       tags:
-      - qualification-controller
-      summary: deletes a qualification by id
-      operationId: deleteQualificationByDesignation
+      - qualification
+      summary: Deletes a qualification
+      operationId: deleteQualification
       parameters:
       - name: id
         in: path
@@ -67,12 +109,13 @@ paths:
           description: delete successful
         "403":
           description: qualification is in use
-  /employees/{id}:
+
+  /qualifications/{id}/employees:
     get:
       tags:
-      - employee-controller
-      summary: find employee by id
-      operationId: findById
+      - qualification
+      summary: Get all employees with a specific qualification
+      operationId: getAllQualificationEmployees
       parameters:
       - name: id
         in: path
@@ -81,50 +124,86 @@ paths:
           type: integer
           format: int64
       responses:
+        "401":
+          description: not authorized
         "200":
-          description: employee
+          description: List of employees who have the desired qualification
           content:
             application/json:
               schema:
-                  $ref: '#/components/schemas/EmployeeResponseDTO'
+                $ref: '#/components/schemas/QualificationEmployees'
+        "404":
+          description: qualification id does not exist
+
+  /employees:
+    get:
+      tags:
+      - employee
+      summary: Get a list of all available employees
+      operationId: getAllEmployees
+      responses:
         "401":
           description: not authorized
-        "404":
-          description: resource not found
-    put:
+        "200":
+          description: list of employees
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Employee'
+    post:
       tags:
-      - employee-controller
-      summary: updates employee by id
-      operationId: updateEmployee
-      parameters:
-      - name: id
-        in: path
-        required: true
-        schema:
-          type: integer
-          format: int64
+      - employee
+      summary: Creates a new employee
+      operationId: createEmployee
       requestBody:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/EmployeeRequestPutDTO'
+              $ref: '#/components/schemas/NewEmployee'
         required: true
+      responses:
+        "401":
+          description: not authorized
+        "201":
+          description: created employee
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Employee'
+        "400":
+          description: invalid JSON posted
+
+  /employees/{id}:
+    get:
+      tags:
+      - employee
+      summary: Gets a specific employee
+      operationId: getEmployee
+      parameters:
+      - name: id
+        in: path
+        required: true
+        schema:
+          type: integer
+          format: int64
       responses:
         "200":
           description: employee
           content:
             application/json:
               schema:
-                $ref: '#/components/schemas/EmployeeResponseDTO'
+                  $ref: '#/components/schemas/Employee'
         "401":
           description: not authorized
         "404":
           description: resource not found
     delete:
       tags:
-      - employee-controller
-      summary: deletes a employee by id
-      operationId: deleteCustomer
+      - employee
+      summary: Deletes a specific employee
+      operationId: DeleteEmployee
       parameters:
       - name: id
         in: path
@@ -141,9 +220,9 @@ paths:
           description: delete successful
     patch:
       tags:
-      - employee-controller
-      summary: updates employee by id
-      operationId: patchEmployee
+      - employee
+      summary: Updates a employee
+      operationId: updateEmployee
       parameters:
       - name: id
         in: path
@@ -155,7 +234,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/EmployeeRequestPutDTO'
+              $ref: '#/components/schemas/UpdatedEmployee'
         required: true
       responses:
         "200":
@@ -163,93 +242,18 @@ paths:
           content:
             application/json:
               schema:
-                $ref: '#/components/schemas/EmployeeResponseDTO'
+                $ref: '#/components/schemas/Employee'
         "401":
           description: not authorized
         "404":
           description: resource not found
-  /qualifications:
-    get:
-      tags:
-      - qualification-controller
-      summary: delivers a list of all available qualifications
-      operationId: findAll
-      responses:
-        "401":
-          description: not authorized
-        "200":
-          description: list of qualifications
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/QualificationGetDTO'
-    post:
-      tags:
-      - qualification-controller
-      summary: creates a new qualification with its id and designation
-      operationId: createQualification
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/QualificationPostDTO'
-        required: true
-      responses:
-        "201":
-          description: created qualification
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/QualificationPostDTO'
-        "401":
-          description: not authorized
-        "400":
-          description: invalid JSON posted
-  /employees:
-    get:
-      tags:
-      - employee-controller
-      summary: delivers a list of all employees
-      operationId: findAll_1
-      responses:
-        "401":
-          description: not authorized
-        "200":
-          description: list of employees
-          content:
-            application/json:
-              schema:
-                type: array
-                items:
-                  $ref: '#/components/schemas/EmployeeResponseDTO'
-    post:
-      tags:
-      - employee-controller
-      summary: creates a new employee
-      operationId: createEmployee
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/EmployeeRequestDTO'
-        required: true
-      responses:
-        "401":
-          description: not authorized
-        "201":
-          description: created employee
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/EmployeeResponseDTO'
-        "400":
-          description: invalid JSON posted
+
   /employees/{id}/qualifications:
     get:
       tags:
-      - employee-controller
-      summary: finds all qualifications of an employee by id
-      operationId: findAllQualificationOfAEmployeeById
+      - employee
+      summary: Gets all qualifications of a specific employee
+      operationId: getAllEmployeeQualifications
       parameters:
       - name: id
         in: path
@@ -267,12 +271,12 @@ paths:
           content:
             application/json:
               schema:
-                $ref: '#/components/schemas/EmployeeNameAndSkillDataDTO'
+                $ref: '#/components/schemas/EmployeeQualifications'
     post:
       tags:
-      - employee-controller
-      summary: adds a qualification to an employee by id
-      operationId: addQualificationToEmployeeById
+      - employee
+      summary: Adds a qualification to an employee
+      operationId: addQualificationToEmployee
       parameters:
       - name: id
         in: path
@@ -284,7 +288,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/QualificationPostDTO'
+              $ref: '#/components/schemas/NewQualification' # Nobody knows why Heidemann did this.
         required: true
       responses:
         "401":
@@ -298,45 +302,23 @@ paths:
           content:
             application/json:
               schema:
-                $ref: '#/components/schemas/EmployeeNameAndSkillDataDTO'
-  /qualifications/{id}/employees:
-    get:
-      tags:
-      - qualification-controller
-      summary: find employees by qualification id
-      operationId: findAllEmployeesByQualification
-      parameters:
-      - name: id
-        in: path
-        required: true
-        schema:
-          type: integer
-          format: int64
-      responses:
-        "401":
-          description: not authorized
-        "200":
-          description: List of employees who have the desired qualification
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/EmployeesForAQualificationDTO'
-        "404":
-          description: qualification id does not exist
-  /employees/{eid}/qualifications/{qid}:
+                $ref: '#/components/schemas/EmployeeQualifications'
+
+
+  /employees/{employeeId}/qualifications/{qualificationId}:
     delete:
       tags:
-      - employee-controller
-      summary: deletes a qualification of an employee by id
+      - employee
+      summary: Removes a qualification from an employee
       operationId: removeQualificationFromEmployee
       parameters:
-      - name: eid
+      - name: employeeId
         in: path
         required: true
         schema:
           type: integer
           format: int64
-      - name: qid
+      - name: qualificationId
         in: path
         required: true
         schema:
@@ -352,142 +334,155 @@ paths:
           content:
             application/json:
               schema:
-                $ref: '#/components/schemas/EmployeeNameAndSkillDataDTO'
+                $ref: '#/components/schemas/EmployeeQualifications'
+
 components:
+  securitySchemes:
+    bearerAuth:
+      type: http
+      scheme: bearer
+      bearerFormat: JWT
   schemas:
-    QualificationPostDTO:
+    Qualification:
+      type: object
+      properties:
+        id:
+          type: integer
+          format: int64
+        skill:
+          type: string
+      required:
+      - id
+      - skill
+    NewQualification:
+      type: object
+      properties:
+        skill:
+          type: string
       required:
       - skill
-      type: object
-      properties:
-        skill:
-          type: string
-    EmployeeRequestPutDTO:
-      type: object
-      properties:
-        lastName:
-          type: string
-        firstName:
-          type: string
-        street:
-          type: string
-        postcode:
-          type: string
-        city:
-          type: string
-        phone:
-          type: string
-        skillSet:
-          type: array
-          items:
-            type: integer
-            format: int64
-    EmployeeResponseDTO:
-      required:
-      - city
-      - firstName
-      - lastName
-      - phone
-      - postcode
-      - street
-      type: object
-      properties:
-        id:
-          type: integer
-          format: int64
-        lastName:
-          type: string
-        firstName:
-          type: string
-        street:
-          type: string
-        postcode:
-          maxLength: 5
-          minLength: 5
-          type: string
-        city:
-          type: string
-        phone:
-          type: string
-        skillSet:
-          type: array
-          items:
-            $ref: '#/components/schemas/QualificationGetDTO'
-    QualificationGetDTO:
-      type: object
-      properties:
-        skill:
-          type: string
-        id:
-          type: integer
-          format: int64
-    EmployeeRequestDTO:
-      required:
-      - city
-      - firstName
-      - lastName
-      - phone
-      - postcode
-      - street
-      type: object
-      properties:
-        lastName:
-          type: string
-        firstName:
-          type: string
-        street:
-          type: string
-        postcode:
-          maxLength: 5
-          minLength: 5
-          type: string
-        city:
-          type: string
-        phone:
-          type: string
-        skillSet:
-          type: array
-          items:
-            type: integer
-            format: int64
-    EmployeeNameAndSkillDataDTO:
-      type: object
-      properties:
-        id:
-          type: integer
-          format: int64
-        lastName:
-          type: string
-        firstName:
-          type: string
-        skillSet:
-          uniqueItems: true
-          type: array
-          items:
-            $ref: '#/components/schemas/QualificationGetDTO'
-    EmployeeNameDataDTO:
-      type: object
-      properties:
-        id:
-          type: integer
-          format: int64
-        lastName:
-          type: string
-        firstName:
-          type: string
-    EmployeesForAQualificationDTO:
+    QualificationEmployees:
       type: object
       properties:
         qualification:
-          $ref: '#/components/schemas/QualificationGetDTO'
+          $ref: '#/components/schemas/Qualification'
         employees:
           uniqueItems: true
           type: array
           items:
-            $ref: '#/components/schemas/EmployeeNameDataDTO'
-  securitySchemes:
-    bearerAuth:
-      type: http
-      name: bearerAuth
-      scheme: bearer
-      bearerFormat: JWT
+            $ref: '#/components/schemas/QualificationEmployee'
+      required:
+        - qualification
+        - employees
+    QualificationEmployee:
+      type: object
+      properties:
+        id:
+          type: integer
+          format: int64
+        lastName:
+          type: string
+        firstName:
+          type: string
+      required:
+        - id
+        - lastName
+        - firstName
+    Employee:
+      type: object
+      properties:
+        id:
+          type: integer
+          format: int64
+        firstName:
+          type: string
+        lastName:
+          type: string
+        postcode:
+          maxLength: 5
+          minLength: 5
+          type: string
+        city:
+          type: string
+        street:
+          type: string
+        phone:
+          type: string
+        skillSet:
+          type: array
+          items:
+            $ref: '#/components/schemas/Qualification'
+      required:
+        - id
+        - firstName
+        - lastName
+        - postcode
+        - city
+        - street
+        - phone
+        - skillSet
+    NewEmployee:
+      type: object
+      properties:
+        lastName:
+          type: string
+        firstName:
+          type: string
+        street:
+          type: string
+        postcode:
+          maxLength: 5
+          minLength: 5
+          type: string
+        city:
+          type: string
+        phone:
+          type: string
+        skillSet:
+          type: array
+          items:
+            type: integer
+            format: int64
+      required:
+        - firstName
+        - lastName
+        - postcode
+        - city
+        - street
+        - phone
+        - skillSet
+    UpdatedEmployee:
+      type: object
+      properties:
+        lastName:
+          type: string
+        firstName:
+          type: string
+        street:
+          type: string
+        postcode:
+          type: string
+        city:
+          type: string
+        phone:
+          type: string
+        skillSet:
+          type: array
+          items:
+            type: integer
+            format: int64
+    EmployeeQualifications:
+      type: object
+      properties:
+        id:
+          type: integer
+          format: int64
+        lastName:
+          type: string
+        firstName:
+          type: string
+        skillSet:
+          uniqueItems: true
+          type: array
+          items:
+            $ref: '#/components/schemas/Qualification'

src/app/core/ems/services.gen.ts

@@ -5,20 +5,55 @@ import { HttpClient } from '@angular/common/http';
 import type { Observable } from 'rxjs';
 import { OpenAPI } from './core/OpenAPI';
 import { request as __request } from './core/request';
-import type { UpdateQualificationData, UpdateQualificationResponse, DeleteQualificationByDesignationData, DeleteQualificationByDesignationResponse, FindAllResponse, CreateQualificationData, CreateQualificationResponse, FindAllEmployeesByQualificationData, FindAllEmployeesByQualificationResponse, FindByIdData, FindByIdResponse, UpdateEmployeeData, UpdateEmployeeResponse, DeleteCustomerData, DeleteCustomerResponse, PatchEmployeeData, PatchEmployeeResponse, FindAll1Response, CreateEmployeeData, CreateEmployeeResponse, FindAllQualificationOfAemployeeByIdData, FindAllQualificationOfAemployeeByIdResponse, AddQualificationToEmployeeByIdData, AddQualificationToEmployeeByIdResponse, RemoveQualificationFromEmployeeData, RemoveQualificationFromEmployeeResponse } from './types.gen';
+import type { GetAllQualificationsResponse, CreateQualificationData, CreateQualificationResponse, UpdateQualificationData, UpdateQualificationResponse, DeleteQualificationData, DeleteQualificationResponse, GetAllQualificationEmployeesData, GetAllQualificationEmployeesResponse, GetAllEmployeesResponse, CreateEmployeeData, CreateEmployeeResponse, GetEmployeeData, GetEmployeeResponse, DeleteEmployeeData, DeleteEmployeeResponse, UpdateEmployeeData, UpdateEmployeeResponse, GetAllEmployeeQualificationsData, GetAllEmployeeQualificationsResponse, AddQualificationToEmployeeData, AddQualificationToEmployeeResponse, RemoveQualificationFromEmployeeData, RemoveQualificationFromEmployeeResponse } from './types.gen';
 
 @Injectable({
     providedIn: 'root'
 })
-export class QualificationControllerService {
+export class QualificationService {
     constructor(public readonly http: HttpClient) { }
     
     /**
-     * updates a qualification
+     * Get a list of all available qualifications
+     * @returns Qualification list of qualifications
+     * @throws ApiError
+     */
+    public getAllQualifications(): Observable<GetAllQualificationsResponse> {
+        return __request(OpenAPI, this.http, {
+            method: 'GET',
+            url: '/qualifications',
+            errors: {
+                401: 'not authorized'
+            }
+        });
+    }
+    
+    /**
+     * Creates a new qualification
+     * @param data The data for the request.
+     * @param data.requestBody
+     * @returns Qualification created qualification
+     * @throws ApiError
+     */
+    public createQualification(data: CreateQualificationData): Observable<CreateQualificationResponse> {
+        return __request(OpenAPI, this.http, {
+            method: 'POST',
+            url: '/qualifications',
+            body: data.requestBody,
+            mediaType: 'application/json',
+            errors: {
+                400: 'invalid JSON posted',
+                401: 'not authorized'
+            }
+        });
+    }
+    
+    /**
+     * Updates a qualification
      * @param data The data for the request.
      * @param data.id
      * @param data.requestBody
-     * @returns QualificationPostDTO updated qualification
+     * @returns Qualification updated qualification
      * @throws ApiError
      */
     public updateQualification(data: UpdateQualificationData): Observable<UpdateQualificationResponse> {
@@ -39,13 +74,13 @@ export class QualificationControllerService {
     }
     
     /**
-     * deletes a qualification by id
+     * Deletes a qualification
      * @param data The data for the request.
      * @param data.id
      * @returns void delete successful
      * @throws ApiError
      */
-    public deleteQualificationByDesignation(data: DeleteQualificationByDesignationData): Observable<DeleteQualificationByDesignationResponse> {
+    public deleteQualification(data: DeleteQualificationData): Observable<DeleteQualificationResponse> {
         return __request(OpenAPI, this.http, {
             method: 'DELETE',
             url: '/qualifications/{id}',
@@ -61,48 +96,13 @@ export class QualificationControllerService {
     }
     
     /**
-     * delivers a list of all available qualifications
-     * @returns QualificationGetDTO list of qualifications
-     * @throws ApiError
-     */
-    public findAll(): Observable<FindAllResponse> {
-        return __request(OpenAPI, this.http, {
-            method: 'GET',
-            url: '/qualifications',
-            errors: {
-                401: 'not authorized'
-            }
-        });
-    }
-    
-    /**
-     * creates a new qualification with its id and designation
-     * @param data The data for the request.
-     * @param data.requestBody
-     * @returns QualificationPostDTO created qualification
-     * @throws ApiError
-     */
-    public createQualification(data: CreateQualificationData): Observable<CreateQualificationResponse> {
-        return __request(OpenAPI, this.http, {
-            method: 'POST',
-            url: '/qualifications',
-            body: data.requestBody,
-            mediaType: 'application/json',
-            errors: {
-                400: 'invalid JSON posted',
-                401: 'not authorized'
-            }
-        });
-    }
-    
-    /**
-     * find employees by qualification id
+     * Get all employees with a specific qualification
      * @param data The data for the request.
      * @param data.id
-     * @returns EmployeesForAQualificationDTO List of employees who have the desired qualification
+     * @returns QualificationEmployees List of employees who have the desired qualification
      * @throws ApiError
      */
-    public findAllEmployeesByQualification(data: FindAllEmployeesByQualificationData): Observable<FindAllEmployeesByQualificationResponse> {
+    public getAllQualificationEmployees(data: GetAllQualificationEmployeesData): Observable<GetAllQualificationEmployeesResponse> {
         return __request(OpenAPI, this.http, {
             method: 'GET',
             url: '/qualifications/{id}/employees',
@@ -121,105 +121,15 @@ export class QualificationControllerService {
 @Injectable({
     providedIn: 'root'
 })
-export class EmployeeControllerService {
+export class EmployeeService {
     constructor(public readonly http: HttpClient) { }
     
     /**
-     * find employee by id
-     * @param data The data for the request.
-     * @param data.id
-     * @returns EmployeeResponseDTO employee
+     * Get a list of all available employees
+     * @returns Employee list of employees
      * @throws ApiError
      */
-    public findById(data: FindByIdData): Observable<FindByIdResponse> {
-        return __request(OpenAPI, this.http, {
-            method: 'GET',
-            url: '/employees/{id}',
-            path: {
-                id: data.id
-            },
-            errors: {
-                401: 'not authorized',
-                404: 'resource not found'
-            }
-        });
-    }
-    
-    /**
-     * updates employee by id
-     * @param data The data for the request.
-     * @param data.id
-     * @param data.requestBody
-     * @returns EmployeeResponseDTO employee
-     * @throws ApiError
-     */
-    public updateEmployee(data: UpdateEmployeeData): Observable<UpdateEmployeeResponse> {
-        return __request(OpenAPI, this.http, {
-            method: 'PUT',
-            url: '/employees/{id}',
-            path: {
-                id: data.id
-            },
-            body: data.requestBody,
-            mediaType: 'application/json',
-            errors: {
-                401: 'not authorized',
-                404: 'resource not found'
-            }
-        });
-    }
-    
-    /**
-     * deletes a employee by id
-     * @param data The data for the request.
-     * @param data.id
-     * @returns void delete successful
-     * @throws ApiError
-     */
-    public deleteCustomer(data: DeleteCustomerData): Observable<DeleteCustomerResponse> {
-        return __request(OpenAPI, this.http, {
-            method: 'DELETE',
-            url: '/employees/{id}',
-            path: {
-                id: data.id
-            },
-            errors: {
-                401: 'not authorized',
-                404: 'resource not found'
-            }
-        });
-    }
-    
-    /**
-     * updates employee by id
-     * @param data The data for the request.
-     * @param data.id
-     * @param data.requestBody
-     * @returns EmployeeResponseDTO employee
-     * @throws ApiError
-     */
-    public patchEmployee(data: PatchEmployeeData): Observable<PatchEmployeeResponse> {
-        return __request(OpenAPI, this.http, {
-            method: 'PATCH',
-            url: '/employees/{id}',
-            path: {
-                id: data.id
-            },
-            body: data.requestBody,
-            mediaType: 'application/json',
-            errors: {
-                401: 'not authorized',
-                404: 'resource not found'
-            }
-        });
-    }
-    
-    /**
-     * delivers a list of all employees
-     * @returns EmployeeResponseDTO list of employees
-     * @throws ApiError
-     */
-    public findAll1(): Observable<FindAll1Response> {
+    public getAllEmployees(): Observable<GetAllEmployeesResponse> {
         return __request(OpenAPI, this.http, {
             method: 'GET',
             url: '/employees',
@@ -230,10 +140,10 @@ export class EmployeeControllerService {
     }
     
     /**
-     * creates a new employee
+     * Creates a new employee
      * @param data The data for the request.
      * @param data.requestBody
-     * @returns EmployeeResponseDTO created employee
+     * @returns Employee created employee
      * @throws ApiError
      */
     public createEmployee(data: CreateEmployeeData): Observable<CreateEmployeeResponse> {
@@ -250,13 +160,79 @@ export class EmployeeControllerService {
     }
     
     /**
-     * finds all qualifications of an employee by id
+     * Gets a specific employee
      * @param data The data for the request.
      * @param data.id
-     * @returns EmployeeNameAndSkillDataDTO employee with a list of his qualifications
+     * @returns Employee employee
      * @throws ApiError
      */
-    public findAllQualificationOfAemployeeById(data: FindAllQualificationOfAemployeeByIdData): Observable<FindAllQualificationOfAemployeeByIdResponse> {
+    public getEmployee(data: GetEmployeeData): Observable<GetEmployeeResponse> {
+        return __request(OpenAPI, this.http, {
+            method: 'GET',
+            url: '/employees/{id}',
+            path: {
+                id: data.id
+            },
+            errors: {
+                401: 'not authorized',
+                404: 'resource not found'
+            }
+        });
+    }
+    
+    /**
+     * Deletes a specific employee
+     * @param data The data for the request.
+     * @param data.id
+     * @returns void delete successful
+     * @throws ApiError
+     */
+    public deleteEmployee(data: DeleteEmployeeData): Observable<DeleteEmployeeResponse> {
+        return __request(OpenAPI, this.http, {
+            method: 'DELETE',
+            url: '/employees/{id}',
+            path: {
+                id: data.id
+            },
+            errors: {
+                401: 'not authorized',
+                404: 'resource not found'
+            }
+        });
+    }
+    
+    /**
+     * Updates a employee
+     * @param data The data for the request.
+     * @param data.id
+     * @param data.requestBody
+     * @returns Employee employee
+     * @throws ApiError
+     */
+    public updateEmployee(data: UpdateEmployeeData): Observable<UpdateEmployeeResponse> {
+        return __request(OpenAPI, this.http, {
+            method: 'PATCH',
+            url: '/employees/{id}',
+            path: {
+                id: data.id
+            },
+            body: data.requestBody,
+            mediaType: 'application/json',
+            errors: {
+                401: 'not authorized',
+                404: 'resource not found'
+            }
+        });
+    }
+    
+    /**
+     * Gets all qualifications of a specific employee
+     * @param data The data for the request.
+     * @param data.id
+     * @returns EmployeeQualifications employee with a list of his qualifications
+     * @throws ApiError
+     */
+    public getAllEmployeeQualifications(data: GetAllEmployeeQualificationsData): Observable<GetAllEmployeeQualificationsResponse> {
         return __request(OpenAPI, this.http, {
             method: 'GET',
             url: '/employees/{id}/qualifications',
@@ -271,14 +247,14 @@ export class EmployeeControllerService {
     }
     
     /**
-     * adds a qualification to an employee by id
+     * Adds a qualification to an employee
      * @param data The data for the request.
      * @param data.id
      * @param data.requestBody
-     * @returns EmployeeNameAndSkillDataDTO employee with a list of his qualifications
+     * @returns EmployeeQualifications employee with a list of his qualifications
      * @throws ApiError
      */
-    public addQualificationToEmployeeById(data: AddQualificationToEmployeeByIdData): Observable<AddQualificationToEmployeeByIdResponse> {
+    public addQualificationToEmployee(data: AddQualificationToEmployeeData): Observable<AddQualificationToEmployeeResponse> {
         return __request(OpenAPI, this.http, {
             method: 'POST',
             url: '/employees/{id}/qualifications',
@@ -296,20 +272,20 @@ export class EmployeeControllerService {
     }
     
     /**
-     * deletes a qualification of an employee by id
+     * Removes a qualification from an employee
      * @param data The data for the request.
-     * @param data.eid
-     * @param data.qid
-     * @returns EmployeeNameAndSkillDataDTO employee with a list of his qualifications
+     * @param data.employeeId
+     * @param data.qualificationId
+     * @returns EmployeeQualifications employee with a list of his qualifications
      * @throws ApiError
      */
     public removeQualificationFromEmployee(data: RemoveQualificationFromEmployeeData): Observable<RemoveQualificationFromEmployeeResponse> {
         return __request(OpenAPI, this.http, {
             method: 'DELETE',
-            url: '/employees/{eid}/qualifications/{qid}',
+            url: '/employees/{employeeId}/qualifications/{qualificationId}',
             path: {
-                eid: data.eid,
-                qid: data.qid
+                employeeId: data.employeeId,
+                qualificationId: data.qualificationId
             },
             errors: {
                 401: 'not authorized',

src/app/core/ems/types.gen.ts

@@ -1,10 +1,47 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-export type QualificationPostDTO = {
+export type Qualification = {
+    id: number;
     skill: string;
 };
 
-export type EmployeeRequestPutDTO = {
+export type NewQualification = {
+    skill: string;
+};
+
+export type QualificationEmployees = {
+    qualification: Qualification;
+    employees: Array<QualificationEmployee>;
+};
+
+export type QualificationEmployee = {
+    id: number;
+    lastName: string;
+    firstName: string;
+};
+
+export type Employee = {
+    id: number;
+    firstName: string;
+    lastName: string;
+    postcode: string;
+    city: string;
+    street: string;
+    phone: string;
+    skillSet: Array<Qualification>;
+};
+
+export type NewEmployee = {
+    lastName: string;
+    firstName: string;
+    street: string;
+    postcode: string;
+    city: string;
+    phone: string;
+    skillSet: Array<(number)>;
+};
+
+export type UpdatedEmployee = {
     lastName?: string;
     firstName?: string;
     street?: string;
@@ -14,127 +51,83 @@ export type EmployeeRequestPutDTO = {
     skillSet?: Array<(number)>;
 };
 
-export type EmployeeResponseDTO = {
-    id?: number;
-    lastName: string;
-    firstName: string;
-    street: string;
-    postcode: string;
-    city: string;
-    phone: string;
-    skillSet?: Array<QualificationGetDTO>;
-};
-
-export type QualificationGetDTO = {
-    skill?: string;
-    id?: number;
-};
-
-export type EmployeeRequestDTO = {
-    lastName: string;
-    firstName: string;
-    street: string;
-    postcode: string;
-    city: string;
-    phone: string;
-    skillSet?: Array<(number)>;
-};
-
-export type EmployeeNameAndSkillDataDTO = {
+export type EmployeeQualifications = {
     id?: number;
     lastName?: string;
     firstName?: string;
-    skillSet?: Array<QualificationGetDTO>;
+    skillSet?: Array<Qualification>;
 };
 
-export type EmployeeNameDataDTO = {
-    id?: number;
-    lastName?: string;
-    firstName?: string;
+export type GetAllQualificationsResponse = (Array<Qualification>);
+
+export type CreateQualificationData = {
+    requestBody: NewQualification;
 };
 
-export type EmployeesForAQualificationDTO = {
-    qualification?: QualificationGetDTO;
-    employees?: Array<EmployeeNameDataDTO>;
-};
+export type CreateQualificationResponse = (Qualification);
 
 export type UpdateQualificationData = {
     id: number;
-    requestBody: QualificationPostDTO;
+    requestBody: NewQualification;
 };
 
-export type UpdateQualificationResponse = (QualificationPostDTO);
+export type UpdateQualificationResponse = (Qualification);
 
-export type DeleteQualificationByDesignationData = {
+export type DeleteQualificationData = {
     id: number;
 };
 
-export type DeleteQualificationByDesignationResponse = (void);
+export type DeleteQualificationResponse = (void);
 
-export type FindAllResponse = (QualificationGetDTO);
-
-export type CreateQualificationData = {
-    requestBody: QualificationPostDTO;
-};
-
-export type CreateQualificationResponse = (QualificationPostDTO);
-
-export type FindAllEmployeesByQualificationData = {
+export type GetAllQualificationEmployeesData = {
     id: number;
 };
 
-export type FindAllEmployeesByQualificationResponse = (EmployeesForAQualificationDTO);
+export type GetAllQualificationEmployeesResponse = (QualificationEmployees);
 
-export type FindByIdData = {
+export type GetAllEmployeesResponse = (Array<Employee>);
+
+export type CreateEmployeeData = {
+    requestBody: NewEmployee;
+};
+
+export type CreateEmployeeResponse = (Employee);
+
+export type GetEmployeeData = {
     id: number;
 };
 
-export type FindByIdResponse = (EmployeeResponseDTO);
+export type GetEmployeeResponse = (Employee);
+
+export type DeleteEmployeeData = {
+    id: number;
+};
+
+export type DeleteEmployeeResponse = (void);
 
 export type UpdateEmployeeData = {
     id: number;
-    requestBody: EmployeeRequestPutDTO;
+    requestBody: UpdatedEmployee;
 };
 
-export type UpdateEmployeeResponse = (EmployeeResponseDTO);
+export type UpdateEmployeeResponse = (Employee);
 
-export type DeleteCustomerData = {
+export type GetAllEmployeeQualificationsData = {
     id: number;
 };
 
-export type DeleteCustomerResponse = (void);
+export type GetAllEmployeeQualificationsResponse = (EmployeeQualifications);
 
-export type PatchEmployeeData = {
+export type AddQualificationToEmployeeData = {
     id: number;
-    requestBody: EmployeeRequestPutDTO;
+    requestBody: NewQualification;
 };
 
-export type PatchEmployeeResponse = (EmployeeResponseDTO);
-
-export type FindAll1Response = (Array<EmployeeResponseDTO>);
-
-export type CreateEmployeeData = {
-    requestBody: EmployeeRequestDTO;
-};
-
-export type CreateEmployeeResponse = (EmployeeResponseDTO);
-
-export type FindAllQualificationOfAemployeeByIdData = {
-    id: number;
-};
-
-export type FindAllQualificationOfAemployeeByIdResponse = (EmployeeNameAndSkillDataDTO);
-
-export type AddQualificationToEmployeeByIdData = {
-    id: number;
-    requestBody: QualificationPostDTO;
-};
-
-export type AddQualificationToEmployeeByIdResponse = (EmployeeNameAndSkillDataDTO);
+export type AddQualificationToEmployeeResponse = (EmployeeQualifications);
 
 export type RemoveQualificationFromEmployeeData = {
-    eid: number;
-    qid: number;
+    employeeId: number;
+    qualificationId: number;
 };
 
-export type RemoveQualificationFromEmployeeResponse = (EmployeeNameAndSkillDataDTO);
+export type RemoveQualificationFromEmployeeResponse = (EmployeeQualifications);

src/app/header/header.component.html

@@ -4,7 +4,7 @@
             <mat-icon>badge</mat-icon>
             EMS</a>
         @for (route of routes; track route) {
-        <a mat-button href="{{ route.path }}" class="{{ route.class }}">{{ route.title }}</a>
+        <a mat-button routerLink="{{ route.path }}" class="{{ route.class }}">{{ route.title }}</a>
         }
     </nav>
     @if (auth.$user|async; as user) {

src/app/notification-box/notification-box.component.ts

@@ -1,13 +1,13 @@
 import { animate, style, transition, trigger } from '@angular/animations';
 import { Component, OnInit } from '@angular/core';
-import { MatCard, MatCardContent } from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
 import { Notification, NotificationService } from '@core/notification/notification.service';
 
 const NOTIFICATION_TTL = 3000;
 
 @Component({
     selector: 'app-notification-box',
-    imports: [MatCard, MatCardContent],
+    imports: [MatCardModule],
     animations: [
         trigger('slideInOut', [
             transition(':enter', [

src/app/views/dashboard/dashboard.component.html

@@ -1,4 +1,4 @@
-<p>dashboard works!</p>
-
-<button mat-button (click)="testInfo()">Test Info</button>
-<button mat-button (click)="testError()">Test Error</button>
+<a mat-flat-button routerLink="/employee/new">New Employee</a>
+<a mat-flat-button routerLink="/employee/1">Edit Employee 3</a>
+<button mat-flat-button (click)="testInfo()">Test Info</button>
+<button mat-flat-button (click)="testError()">Test Error</button>

src/app/views/dashboard/dashboard.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
-import { MatButton } from '@angular/material/button';
-
-import { NotificationService, NotificationType } from '../../core/notification/notification.service';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterLink } from '@angular/router';
+import { NotificationService, NotificationType } from '@core/notification/notification.service';
 
 @Component({
     selector: 'app-dashboard',
-    imports: [MatButton],
+    imports: [MatButtonModule, RouterLink],
     templateUrl: './dashboard.component.html',
     styleUrl: './dashboard.component.scss'
 })

src/styles.scss

@@ -1,9 +1,9 @@
 @use '@angular/material' as mat;
 
-
 html,
 body {
   height: 100%;
+  min-height: 100%;
   margin: 0;
 
   background: var(--mat-sys-surface);
@@ -14,8 +14,69 @@ body {
   color-scheme: light dark;
   font-family: var(--mat-sys-label-medium-font);
 
-  @include mat.theme((color: mat.$azure-palette,
-      typography: Roboto,
-      density: 0));
-
+  @include mat.theme((
+    color: mat.$azure-palette,
+    typography: Roboto,
+    density: 0
+  ));
+}
+
+app-root {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.mdc-button,
+.mdc-fab {
+  &.abort,
+  &.error,
+  &.warn {
+    $ripple: var(color-mix(in srgb, var(--mat-sys-on-error) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent));
+    $fg: var(--mat-sys-on-error);
+    $bg: var(--mat-sys-error);
+    $fg-container: var(--mat-sys-on-error-container);
+    $bg-container: var(--mat-sys-error-container);
+
+    @include mat.button-overrides((
+        // default
+        text-label-text-color: $bg,
+        text-ripple-color: $ripple,
+        text-state-layer-color: $bg,
+        // filled
+        filled-label-text-color: $fg,
+        filled-container-color: $bg,
+        filled-ripple-color: $ripple,
+        filled-state-layer-color: $fg,
+    ));
+    @include mat.fab-overrides((
+        // default
+        container-color: $bg-container,
+        foreground-color: $fg-container,
+        state-layer-color: $fg-container,
+        ripple-color: $ripple,
+        // mini
+        small-container-color: $bg-container,
+        small-foreground-color: $fg-container,
+        small-state-layer-color: $fg-container,
+        small-ripple-color: $ripple
+      ));
+  }
+}
+
+.mdc-fab.shadowless {
+  @include mat.fab-overrides((
+    // default
+    container-elevation-shadow: transparent,
+    hover-container-elevation-shadow: transparent,
+    pressed-container-elevation-shadow: transparent,
+    focus-container-elevation-shadow: transparent,
+    // mini
+    small-container-elevation-shadow: transparent,
+    small-hover-container-elevation-shadow: transparent,
+    small-pressed-container-elevation-shadow: transparent,
+    small-focus-container-elevation-shadow: transparent,
+  ));
 }