From f6664e1d8a7adf3ccd8b8d7099f6227dedb835ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20S=C3=A4ume?= <dominik.saeume@hmmh.de>
Date: Thu, 9 Jan 2025 23:33:35 +0100
Subject: [PATCH 1/2] Feature: Employee Edit - Layout, Read, Style

---
 src/app/app.routes.ts                         | 13 ++-
 .../employee-detail.component.html            | 82 ++++++++++++++++++
 .../employee-detail.component.scss            | 82 ++++++++++++++++++
 .../employee-detail.component.ts              | 83 +++++++++++++++++++
 4 files changed, 257 insertions(+), 3 deletions(-)
 create mode 100644 src/app/views/employee-detail/employee-detail.component.html
 create mode 100644 src/app/views/employee-detail/employee-detail.component.scss
 create mode 100644 src/app/views/employee-detail/employee-detail.component.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 087641c..87d779e 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,4 +1,11 @@
-import {Routes} from '@angular/router';
-import {DashboardComponent} from '@app/views/dashboard/dashboard.component';
+import { Routes } from '@angular/router';
+import { DashboardComponent } from '@app/views/dashboard/dashboard.component';
+import { AuthService } from '@core/auth/auth.service';
 
-export const routes: Routes = [{path: '', component: DashboardComponent, title: 'Home'}];
+import { EmployeeDetailComponent } from './views/employee-detail/employee-detail.component';
+
+export const routes: Routes = [
+    { path: '', component: DashboardComponent, title: 'Home' },
+    { path: 'employee/new', component: EmployeeDetailComponent, title: 'New Employee', canActivate: [AuthService] },
+    { path: 'employee/:id', component: EmployeeDetailComponent, title: 'Edit Employee', canActivate: [AuthService] }
+];
diff --git a/src/app/views/employee-detail/employee-detail.component.html b/src/app/views/employee-detail/employee-detail.component.html
new file mode 100644
index 0000000..2bbc985
--- /dev/null
+++ b/src/app/views/employee-detail/employee-detail.component.html
@@ -0,0 +1,82 @@
+<form class="employee-detail" [formGroup]="employeeForm" appearance="outline">
+    <div class="employee-detail__info-view">
+        <div class="employee-detail__info-view__base">
+            <h2>Info</h2>
+            <mat-form-field>
+                <mat-label>First Name</mat-label>
+                <input matInput formControlName="firstName">
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>Last Name</mat-label>
+                <input matInput formControlName="lastName">
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>Postcode</mat-label>
+                <mat-icon matSuffix>money</mat-icon>
+                <input matInput formControlName="postcode">
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>City</mat-label>
+                <mat-icon matSuffix>location_city</mat-icon>
+                <input matInput formControlName="city">
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>Street</mat-label>
+                <mat-icon matSuffix>house</mat-icon>
+                <input matInput formControlName="street">
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>Phone</mat-label>
+                <mat-icon matSuffix>phone</mat-icon>
+                <input matInput formControlName="phone">
+            </mat-form-field>
+        </div>
+        <div class="employee-detail__info-view__skills">
+            <h2>Skills</h2>
+            <div class="employee-detail__info-view__skills__action-row">
+                <mat-form-field>
+                    <mat-label>Skill</mat-label>
+                    <mat-select [disabled]="!($unusedSkills | async)?.length">
+                        @for (skill of ($unusedSkills|async); track skill) {
+                        <mat-option [value]="skill.skill">{{skill.skill}}</mat-option>
+                        }
+                    </mat-select>
+                </mat-form-field>
+                <button mat-fab class="shadowless">
+                    <mat-icon>add</mat-icon>
+                </button>
+            </div>
+            <mat-table [dataSource]="skillsDataSource">
+                <ng-container matColumnDef="id">
+                    <th mat-header-cell *matHeaderCellDef>Id</th>
+                    <td mat-cell *matCellDef="let skill">{{skill.id}}</td>
+                </ng-container>
+                <ng-container matColumnDef="skill">
+                    <th mat-header-cell *matHeaderCellDef>Skill</th>
+                    <td mat-cell *matCellDef="let skill">
+                        <p>{{skill.skill}}
+                    </td>
+                </ng-container>
+                <ng-container matColumnDef="action">
+                    <th mat-header-cell *matHeaderCellDef></th>
+                    <td mat-cell *matCellDef="let row">
+                        <button mat-mini-fab class="warn shadowless">
+                            <mat-icon>delete</mat-icon>
+                        </button>
+                    </td>
+                </ng-container>
+                <tr mat-row *matRowDef="let row; columns: skillsDisplayedColumns;"></tr>
+            </mat-table>
+        </div>
+    </div>
+    <div class="employee-detail__action-row">
+        <a mat-flat-button class="abort" routerLink="/">Abort</a>
+        @if (isNewEmployee) {
+        <button mat-flat-button (click)="onCreate()">Create</button>
+        }
+        @else {
+        <button mat-flat-button (click)="onSave()">Save</button>
+        }
+    </div>
+
+</form>
diff --git a/src/app/views/employee-detail/employee-detail.component.scss b/src/app/views/employee-detail/employee-detail.component.scss
new file mode 100644
index 0000000..4946223
--- /dev/null
+++ b/src/app/views/employee-detail/employee-detail.component.scss
@@ -0,0 +1,82 @@
+@use '@angular/material' as mat;
+
+.employee-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &__info-view {
+    display: flex;
+    gap: 2rem;
+
+    >* {
+      min-width: 0;
+      flex-basis: 0;
+      flex-grow: 1;
+    }
+
+    &__base {
+      display: flex;
+      flex-direction: column;
+
+      input {
+        font-size: var(--mat-sys-body-large-size);
+      }
+    }
+
+    &__skills {
+      height: fit-content;
+      width: 100%;
+
+      &__action-row {
+        display: flex;
+        gap: 1rem;
+
+        mat-form-field:first-of-type {
+          flex-grow: 1;
+        }
+      }
+
+      p {
+        font-size: var(--mat-sys-body-large-size);
+        margin: 0;
+      }
+
+      tr {
+        height: 76px;
+
+        td.mat-column-skill {
+          width: 100%;
+          padding-top: 28px;
+          padding-bottom: 28px;
+        }
+
+        td.mat-column-action {
+          width: 0;
+          vertical-align: middle;
+          padding-left: 24px;
+          padding-right: 8px;
+        }
+
+        &:first-of-type {
+          height: 66px;
+
+          td.mat-column-skill {
+            padding-top: 0;
+            padding-bottom: 0;
+          }
+
+          td.mat-column-action {
+            padding-top: 10px;
+            vertical-align: unset;
+          }
+        }
+      }
+    }
+  }
+
+  &__action-row {
+    display: flex;
+    justify-content: space-between;
+  }
+}
diff --git a/src/app/views/employee-detail/employee-detail.component.ts b/src/app/views/employee-detail/employee-detail.component.ts
new file mode 100644
index 0000000..dd7fa2d
--- /dev/null
+++ b/src/app/views/employee-detail/employee-detail.component.ts
@@ -0,0 +1,83 @@
+import { AsyncPipe } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { Employee, EmployeeService, Qualification, QualificationService } from '@core/ems';
+import { map, Observable } from 'rxjs';
+
+@Component({
+    selector: 'app-employee-detail',
+    imports: [
+        AsyncPipe,
+        MatIcon,
+        RouterLink,
+        MatButtonModule,
+        MatInputModule,
+        MatSelectModule,
+        MatTableModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+    ],
+    templateUrl: './employee-detail.component.html',
+    styleUrl: './employee-detail.component.scss'
+})
+export class EmployeeDetailComponent {
+    isNewEmployee: boolean;
+    employeeForm: FormGroup;
+    skillsDataSource: MatTableDataSource<Qualification> = new MatTableDataSource<Qualification>([]);
+    skillsDisplayedColumns = ['skill', 'action'];
+    $unusedSkills: Observable<Array<Qualification> | undefined>;
+
+    constructor(
+        private route: ActivatedRoute,
+        private employeeService: EmployeeService,
+        private qualificationService: QualificationService,
+        private formBuilder: FormBuilder
+    ) {
+        const idParam = this.route.snapshot.paramMap.get('id');
+        this.isNewEmployee = idParam == null;
+
+        this.employeeForm = this.formBuilder.group<Employee>({
+            id: 0,
+            firstName: '',
+            lastName: '',
+            postcode: '',
+            city: '',
+            street: '',
+            phone: '',
+            skillSet: []
+        });
+
+        this.$unusedSkills = this.qualificationService.getAllQualifications();
+
+        if (this.isNewEmployee) {
+            return;
+        }
+
+        const id = parseInt(idParam as string);
+        this.employeeService.getEmployee({ id }).subscribe((employee) => {
+            this.employeeForm = this.formBuilder.group<Employee>(employee);
+            this.skillsDataSource = new MatTableDataSource<Qualification>(employee.skillSet);
+            this.$unusedSkills = this.qualificationService.getAllQualifications().pipe(
+                map((allSkills: Array<Qualification>) => {
+                    const usedSkillIds = new Set(employee.skillSet.map(skill => skill.id));
+                    return allSkills?.filter(skill => !usedSkillIds.has(skill.id));
+                })
+            );
+        });
+    }
+
+    onCreate() {
+
+    }
+
+    onSave() {
+
+    }
+}
-- 
2.45.3


From d4ec6320532128196305104de26a5a1252120189 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20S=C3=A4ume?= <dominik.saeume@hmmh.de>
Date: Fri, 10 Jan 2025 13:13:00 +0100
Subject: [PATCH 2/2] Feature: Employee Edit - Function, Layout, Style

---
 .../employee-detail.component.html            | 75 +++++++++++--------
 .../employee-detail.component.scss            | 51 +++++++------
 .../employee-detail.component.ts              | 64 ++++++++++++++--
 3 files changed, 131 insertions(+), 59 deletions(-)

diff --git a/src/app/views/employee-detail/employee-detail.component.html b/src/app/views/employee-detail/employee-detail.component.html
index 2bbc985..3b9955b 100644
--- a/src/app/views/employee-detail/employee-detail.component.html
+++ b/src/app/views/employee-detail/employee-detail.component.html
@@ -2,47 +2,56 @@
     <div class="employee-detail__info-view">
         <div class="employee-detail__info-view__base">
             <h2>Info</h2>
-            <mat-form-field>
-                <mat-label>First Name</mat-label>
-                <input matInput formControlName="firstName">
-            </mat-form-field>
-            <mat-form-field>
-                <mat-label>Last Name</mat-label>
-                <input matInput formControlName="lastName">
-            </mat-form-field>
-            <mat-form-field>
-                <mat-label>Postcode</mat-label>
-                <mat-icon matSuffix>money</mat-icon>
-                <input matInput formControlName="postcode">
-            </mat-form-field>
-            <mat-form-field>
-                <mat-label>City</mat-label>
-                <mat-icon matSuffix>location_city</mat-icon>
-                <input matInput formControlName="city">
-            </mat-form-field>
-            <mat-form-field>
-                <mat-label>Street</mat-label>
-                <mat-icon matSuffix>house</mat-icon>
-                <input matInput formControlName="street">
-            </mat-form-field>
-            <mat-form-field>
-                <mat-label>Phone</mat-label>
-                <mat-icon matSuffix>phone</mat-icon>
-                <input matInput formControlName="phone">
-            </mat-form-field>
+            <div class="employee-detail__info-view__base__content">
+                <mat-form-field>
+                    <mat-label>First Name</mat-label>
+                    <input matInput formControlName="firstName" required>
+                    <mat-error>First Name can not be Empty</mat-error>
+                </mat-form-field>
+                <mat-form-field>
+                    <mat-label>Last Name</mat-label>
+                    <input matInput formControlName="lastName" required>
+                    <mat-error>Last Name can not be Empty</mat-error>
+                </mat-form-field>
+                <mat-form-field>
+                    <mat-label>Postcode</mat-label>
+                    <mat-icon matSuffix>money</mat-icon>
+                    <input matInput formControlName="postcode" required minlength="5" maxlength="5">
+                    <mat-error>Postcode has to be exactly 5 long</mat-error>
+                </mat-form-field>
+                <mat-form-field>
+                    <mat-label>City</mat-label>
+                    <mat-icon matSuffix>location_city</mat-icon>
+                    <input matInput formControlName="city" required>
+                    <mat-error>City can not be Empty</mat-error>
+                </mat-form-field>
+                <mat-form-field>
+                    <mat-label>Street</mat-label>
+                    <mat-icon matSuffix>house</mat-icon>
+                    <input matInput formControlName="street" required>
+                    <mat-error>Street can not be Empty</mat-error>
+                </mat-form-field>
+                <mat-form-field>
+                    <mat-label>Phone</mat-label>
+                    <mat-icon matSuffix>phone</mat-icon>
+                    <input matInput formControlName="phone" required>
+                    <mat-error>Phone can not be Empty</mat-error>
+                </mat-form-field>
+
+            </div>
         </div>
         <div class="employee-detail__info-view__skills">
             <h2>Skills</h2>
             <div class="employee-detail__info-view__skills__action-row">
                 <mat-form-field>
                     <mat-label>Skill</mat-label>
-                    <mat-select [disabled]="!($unusedSkills | async)?.length">
+                    <mat-select #skillSelect [disabled]="!($unusedSkills | async)?.length">
                         @for (skill of ($unusedSkills|async); track skill) {
-                        <mat-option [value]="skill.skill">{{skill.skill}}</mat-option>
+                        <mat-option [value]="skill">{{skill.skill}}</mat-option>
                         }
                     </mat-select>
                 </mat-form-field>
-                <button mat-fab class="shadowless">
+                <button mat-fab class="shadowless" (click)="onAddSkill(skillSelect)">
                     <mat-icon>add</mat-icon>
                 </button>
             </div>
@@ -59,8 +68,8 @@
                 </ng-container>
                 <ng-container matColumnDef="action">
                     <th mat-header-cell *matHeaderCellDef></th>
-                    <td mat-cell *matCellDef="let row">
-                        <button mat-mini-fab class="warn shadowless">
+                    <td mat-cell *matCellDef="let skill">
+                        <button mat-mini-fab class="warn shadowless" (click)="onRemoveSkill(skill)">
                             <mat-icon>delete</mat-icon>
                         </button>
                     </td>
diff --git a/src/app/views/employee-detail/employee-detail.component.scss b/src/app/views/employee-detail/employee-detail.component.scss
index 4946223..32145d6 100644
--- a/src/app/views/employee-detail/employee-detail.component.scss
+++ b/src/app/views/employee-detail/employee-detail.component.scss
@@ -3,11 +3,18 @@
 .employee-detail {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 4rem;
+
+  // Calculate Height and Spacing based on the Form Fields
+  $inner-form-height: 56px;
+  $form-height: 75.5px;
+  $inner-form-spacing: 4.5px;
+  $form-conter-padding: calc(($form-height + $inner-form-spacing - $inner-form-height) / 2);
+  $form-conter-padding-fab: calc(($form-conter-padding - $inner-form-spacing) / 2);
 
   &__info-view {
     display: flex;
-    gap: 2rem;
+    gap: 4rem;
 
     >* {
       min-width: 0;
@@ -19,8 +26,14 @@
       display: flex;
       flex-direction: column;
 
-      input {
-        font-size: var(--mat-sys-body-large-size);
+      &__content {
+        display: flex;
+        flex-direction: column;
+        gap: $inner-form-spacing;
+
+        input {
+          font-size: var(--mat-sys-body-large-size);
+        }
       }
     }
 
@@ -37,38 +50,34 @@
         }
       }
 
-      p {
-        font-size: var(--mat-sys-body-large-size);
-        margin: 0;
-      }
-
       tr {
-        height: 76px;
-
         td.mat-column-skill {
           width: 100%;
-          padding-top: 28px;
-          padding-bottom: 28px;
+          justify-self: center;
+          padding: $form-conter-padding 0;
+
+          p {
+            display: flex;
+            height: $inner-form-height;
+            margin: 0;
+            align-items: center;
+            font-size: var(--mat-sys-body-large-size);
+          }
         }
 
         td.mat-column-action {
           width: 0;
           vertical-align: middle;
-          padding-left: 24px;
-          padding-right: 8px;
+          padding-right: 8px; // Half the difference to the Width of a FAB
         }
 
         &:first-of-type {
-          height: 66px;
-
           td.mat-column-skill {
-            padding-top: 0;
-            padding-bottom: 0;
+            padding-top: $inner-form-spacing;
           }
 
           td.mat-column-action {
-            padding-top: 10px;
-            vertical-align: unset;
+            padding-bottom: $form-conter-padding-fab;
           }
         }
       }
diff --git a/src/app/views/employee-detail/employee-detail.component.ts b/src/app/views/employee-detail/employee-detail.component.ts
index dd7fa2d..3f0445b 100644
--- a/src/app/views/employee-detail/employee-detail.component.ts
+++ b/src/app/views/employee-detail/employee-detail.component.ts
@@ -5,10 +5,11 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
+import { MatSelect, MatSelectModule } from '@angular/material/select';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterLink } from '@angular/router';
-import { Employee, EmployeeService, Qualification, QualificationService } from '@core/ems';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { Employee, EmployeeService, NewEmployee, Qualification, QualificationService, UpdatedEmployee } from '@core/ems';
+import { NotificationService, NotificationType } from '@core/notification/notification.service';
 import { map, Observable } from 'rxjs';
 
 @Component({
@@ -32,13 +33,15 @@ export class EmployeeDetailComponent {
     employeeForm: FormGroup;
     skillsDataSource: MatTableDataSource<Qualification> = new MatTableDataSource<Qualification>([]);
     skillsDisplayedColumns = ['skill', 'action'];
-    $unusedSkills: Observable<Array<Qualification> | undefined>;
+    $unusedSkills: Observable<Array<Qualification>>;
 
     constructor(
         private route: ActivatedRoute,
+        private router: Router,
         private employeeService: EmployeeService,
         private qualificationService: QualificationService,
-        private formBuilder: FormBuilder
+        private formBuilder: FormBuilder,
+        private notificationService: NotificationService
     ) {
         const idParam = this.route.snapshot.paramMap.get('id');
         this.isNewEmployee = idParam == null;
@@ -74,10 +77,61 @@ export class EmployeeDetailComponent {
     }
 
     onCreate() {
+        if (!this.employeeForm.valid) {
+            return;
+        }
 
+        const employee: NewEmployee = this.employeeForm.value;
+        employee.skillSet = this.skillsDataSource.data.map((qualification) => qualification.id);
+        this.employeeService.createEmployee({ requestBody: employee }).subscribe((response) => {
+            this.notificationService.publish(`${response.firstName} ${response.lastName} was created`, NotificationType.Information);
+            this.router.navigate(['']);
+        });
     }
 
     onSave() {
+        if (!this.employeeForm.valid) {
+            return;
+        }
 
+        const id = this.employeeForm.value.id;
+        const employee: UpdatedEmployee = this.employeeForm.value;
+        employee.skillSet = this.skillsDataSource.data.map((qualification) => qualification.id);
+
+        if (employee.skillSet.length == 0) {
+            this.employeeService.getAllEmployeeQualifications({ id }).subscribe((result) => {
+                result.skillSet?.forEach((skill) => {
+                    this.employeeService.removeQualificationFromEmployee({ employeeId: id, qualificationId: skill.id }).subscribe(() => { });
+                });
+            });
+        }
+
+        this.employeeService.updateEmployee({ id: id, requestBody: employee }).subscribe((response) => {
+            this.notificationService.publish(`${response.firstName} ${response.lastName} was updated`, NotificationType.Information);
+            this.router.navigate(['']);
+        });
+    }
+
+    onAddSkill(select: MatSelect) {
+        if (select.value == undefined) {
+            return;
+        }
+        const newSkill = select.value as Qualification;
+
+        const skills = this.skillsDataSource.data;
+        skills.push(newSkill);
+        this.skillsDataSource.data = skills;
+
+        this.$unusedSkills = this.$unusedSkills.pipe(
+            map((skills) => skills.filter(skill => skill.id != newSkill.id))
+        );
+    }
+
+    onRemoveSkill(skill: Qualification) {
+        const skills = this.skillsDataSource.data;
+        this.skillsDataSource.data = skills.filter(filterSkill => filterSkill.id != skill.id);
+        this.$unusedSkills = this.$unusedSkills.pipe(
+            map(skills => [...skills, skill])
+        );
     }
 }
-- 
2.45.3