From d4ec6320532128196305104de26a5a1252120189 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20S=C3=A4ume?= Date: Fri, 10 Jan 2025 13:13:00 +0100 Subject: [PATCH] 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 @@

Info

- - First Name - - - - Last Name - - - - Postcode - money - - - - City - location_city - - - - Street - house - - - - Phone - phone - - +
+ + First Name + + First Name can not be Empty + + + Last Name + + Last Name can not be Empty + + + Postcode + money + + Postcode has to be exactly 5 long + + + City + location_city + + City can not be Empty + + + Street + house + + Street can not be Empty + + + Phone + phone + + Phone can not be Empty + + +

Skills

Skill - + @for (skill of ($unusedSkills|async); track skill) { - {{skill.skill}} + {{skill.skill}} } -
@@ -59,8 +68,8 @@ - - 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 = new MatTableDataSource([]); skillsDisplayedColumns = ['skill', 'action']; - $unusedSkills: Observable | undefined>; + $unusedSkills: Observable>; 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]) + ); } }