From 9a18bd0b3f5f74fd6ca1003d746c8ecc363e42ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20S=C3=A4ume?= <dominik.saeume@hmmh.de>
Date: Thu, 9 Jan 2025 10:44:02 +0100
Subject: [PATCH] WIP

---
 src/app/app.routes.ts                         | 12 ++-
 .../views/dashboard/dashboard.component.html  |  3 +-
 .../employee-detail.component.html            | 67 +++++++++++++++
 .../employee-detail.component.scss            | 35 ++++++++
 .../employee-detail.component.ts              | 86 +++++++++++++++++++
 5 files changed, 199 insertions(+), 4 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..467bc07 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,4 +1,10 @@
-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';
 
-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' },
+    { path: 'employee/:id', component: EmployeeDetailComponent, title: 'Edit Employee' }
+];
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index 2e49c07..018a733 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -1,4 +1,5 @@
 <p>dashboard works!</p>
-
+<a href="/employee/new">New Employee</a>
+<a href="/employee/1">Edit Employee 3</a>
 <button mat-button (click)="testInfo()">Test Info</button>
 <button mat-button (click)="testError()">Test Error</button>
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..8916760
--- /dev/null
+++ b/src/app/views/employee-detail/employee-detail.component.html
@@ -0,0 +1,67 @@
+<form class="employee-detail" [formGroup]="employeeForm" appearance="outline">
+    <div class="employee-detail__info-view">
+        <div class="employee-detail__info-view__base">
+            <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>
+        <table mat-table [dataSource]="skillsDataSource" class="employee-detail__info-view__skills">
+            <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"> {{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">
+                        <mat-icon>delete</mat-icon>
+                    </button>
+                </td>
+            </ng-container>
+
+
+            <tr mat-header-row *matHeaderRowDef="skillsDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: skillsDisplayedColumns;"></tr>
+
+        </table>
+    </div>
+    <div class="employee-detail__action-row">
+        <button mat-flat-button (click)="onAbort()" class="abort">Abort</button>
+        @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..ea2e269
--- /dev/null
+++ b/src/app/views/employee-detail/employee-detail.component.scss
@@ -0,0 +1,35 @@
+@use '@angular/material' as mat;
+
+.employee-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &__info-view {
+    display: flex;
+    gap: 1rem;
+
+    >* {
+      min-width: 0;
+      flex-basis: 0;
+      flex-grow: 1;
+    }
+
+    &__base {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__skills {
+      height: fit-content;
+      .mat-column-action {
+        width: 10px;
+      }
+    }
+  }
+
+  &__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..8f677b2
--- /dev/null
+++ b/src/app/views/employee-detail/employee-detail.component.ts
@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatButton, MatFabButton, MatMiniFabButton } from '@angular/material/button';
+import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInput } from '@angular/material/input';
+import { MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef, MatTable, MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
+import { Employee, EmployeeService, Qualification } from '@core/ems';
+
+@Component({
+    selector: 'app-employee-detail',
+    imports: [
+        MatButton,
+        ReactiveFormsModule,
+        MatFormField,
+        MatLabel,
+        MatInput,
+        MatIcon,
+        MatSuffix,
+        MatTable,
+        MatHeaderRowDef,
+        MatRowDef,
+        MatColumnDef,
+        MatHeaderCellDef,
+        MatCell,
+        MatCellDef,
+        MatHeaderCell,
+        MatHeaderRow,
+        MatRow,
+        MatMiniFabButton,
+    ],
+    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'];
+
+    constructor(
+        private route: ActivatedRoute,
+        private employeeService: EmployeeService,
+        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: []
+        });
+
+        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);
+        });
+
+
+
+    }
+
+    onAbort() {
+
+    }
+
+    onCreate() {
+
+    }
+
+    onSave() {
+
+    }
+}