From e1f58acdeed84309ae4526c5f1b6eb258005bfb0 Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 15 Jan 2025 11:26:08 +0100 Subject: [PATCH] Enhance employee and qualification forms with hints and improved layouts - Added hints to input fields in create and edit employee forms for better user guidance. - Updated the layout of dialog actions in employee and qualification forms for improved usability. - Enhanced delete confirmation dialogs for qualifications and employees with better styling and error handling. - Improved the display of employee details and qualifications with better formatting and structure. These changes aim to improve user experience and accessibility across the application. --- src/app/employee/create/create.component.html | 22 +++++- src/app/employee/create/create.component.ts | 3 +- src/app/employee/delete/delete.component.html | 39 +++++++-- src/app/employee/delete/delete.component.ts | 4 +- .../employee/details/details.component.html | 79 ++++++++++++++----- src/app/employee/edit/edit.component.html | 22 +++++- src/app/employee/edit/edit.component.ts | 5 +- src/app/employee/table/table.component.html | 28 ++++--- .../create/create.component.html | 53 +++++++++---- .../qualification/create/create.component.ts | 7 +- .../delete/delete.component.html | 48 ++++++++--- .../qualification/delete/delete.component.ts | 6 +- .../details/details.component.html | 54 ++++++++----- .../details/details.component.ts | 4 +- .../qualification/edit/edit.component.html | 53 +++++++++---- src/app/qualification/edit/edit.component.ts | 7 +- .../qualification/table/table.component.html | 58 ++++++++------ .../qualification/table/table.component.ts | 6 +- 18 files changed, 354 insertions(+), 144 deletions(-) diff --git a/src/app/employee/create/create.component.html b/src/app/employee/create/create.component.html index a882ad2..1c30474 100644 --- a/src/app/employee/create/create.component.html +++ b/src/app/employee/create/create.component.html @@ -6,12 +6,14 @@ First Name + Enter the first name {{errors['firstName']}} Last Name + Enter the last name {{errors['lastName']}} @@ -19,6 +21,7 @@ Street + Enter the street address {{errors['street']}} @@ -26,12 +29,14 @@ City + Enter the city {{errors['city']}} Postcode + Enter postcode {{errors['postcode']}} @@ -39,11 +44,13 @@ Phone + Enter the phone number {{errors['phone']}} Qualifications + Select the qualifications {{qualification.skill}} @@ -52,9 +59,18 @@ {{errors['qualifications']}} - - - + + + diff --git a/src/app/employee/create/create.component.ts b/src/app/employee/create/create.component.ts index 0d5dbe7..6773957 100644 --- a/src/app/employee/create/create.component.ts +++ b/src/app/employee/create/create.component.ts @@ -1,6 +1,6 @@ import {Component, inject, OnInit} from '@angular/core'; import {AbstractControl, FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms"; -import {MatFormField, MatLabel} from "@angular/material/form-field"; +import {MatFormField, MatHint, MatLabel} from "@angular/material/form-field"; import {MatError, MatInput} from "@angular/material/input"; import {MatButton} from "@angular/material/button"; import { @@ -36,6 +36,7 @@ import {debounceTime} from "rxjs"; MatSelect, NgForOf, MatError, + MatHint ], templateUrl: './create.component.html', standalone: true, diff --git a/src/app/employee/delete/delete.component.html b/src/app/employee/delete/delete.component.html index bf2fdb5..3a3287d 100644 --- a/src/app/employee/delete/delete.component.html +++ b/src/app/employee/delete/delete.component.html @@ -1,6 +1,33 @@ -

Delete {{employee.firstName}} {{employee.lastName}}

-Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}? This cant be undone. - - - - +

Delete Employee

+ + +
+
+
+ warning +
+

+ Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}? +

+

This action cannot be undone.

+
+
+
+ + + + + +
+ diff --git a/src/app/employee/delete/delete.component.ts b/src/app/employee/delete/delete.component.ts index 4d76523..d3bb241 100644 --- a/src/app/employee/delete/delete.component.ts +++ b/src/app/employee/delete/delete.component.ts @@ -8,6 +8,7 @@ import { MatDialogTitle } from "@angular/material/dialog"; import {MatButton} from "@angular/material/button"; +import {MatIcon} from "@angular/material/icon"; import EmployeeApiService from "../../services/employee-api.service"; @Component({ @@ -17,7 +18,8 @@ import EmployeeApiService from "../../services/employee-api.service"; MatDialogTitle, MatDialogActions, MatButton, - MatDialogClose + MatDialogClose, + MatIcon ], templateUrl: './delete.component.html', standalone: true, diff --git a/src/app/employee/details/details.component.html b/src/app/employee/details/details.component.html index 4b6832a..be56bee 100644 --- a/src/app/employee/details/details.component.html +++ b/src/app/employee/details/details.component.html @@ -1,27 +1,68 @@ -

{{ employee.firstName }} {{ employee.lastName }}

+

Employee Details

- -
-
-

ID: {{ employee.id }}

-

First Name: {{ employee.firstName }}

-

Last Name: {{ employee.lastName }}

-

Phone: {{ employee.phone }}

-

Postcode: {{ employee.postcode }}

-

Street: {{ employee.street }}

-

City: {{ employee.city }}

-

Skills:

-
    - @for (skill of employee.skillSet; track null) { -
  • • {{skill.skill}}
    • + +
    +
    +
    + + {{ employee.firstName?.charAt(0) ?? '' }}{{ employee.lastName?.charAt(0) ?? '' }} + +
    +
    +

    {{ employee.firstName }} {{ employee.lastName }}

    +

    ID: {{ employee.id }}

    +
    +
    + +
    +

    Contact Information

    +
    +
    +

    Phone

    +

    {{ employee.phone }}

    +
    +
    +
    + +
    +

    Address

    +
    +
    +
    +

    Street

    +

    {{ employee.street }}

    +
    +
    +

    City

    +

    {{ employee.city }}

    +
    +
    +
    +

    Postcode

    +

    {{ employee.postcode }}

    +
    +
    +
    + +
    +

    Qualifications

    +
    + @for (skill of employee.skillSet; track skill.id) { +
    + {{skill.skill}} +
    } @empty { -
  • -
    • +

    No qualifications added

    } -
+
- - + + diff --git a/src/app/employee/edit/edit.component.html b/src/app/employee/edit/edit.component.html index 93dd8ce..6e13586 100644 --- a/src/app/employee/edit/edit.component.html +++ b/src/app/employee/edit/edit.component.html @@ -6,34 +6,40 @@ First Name + Enter the first name Last Name + Enter the last name Street + Enter the street address
City + Enter the city Postcode + Enter postcode
Phone + Enter phone number @@ -43,11 +49,21 @@ {{qualification.skill}} + Select qualifications - - - + + + diff --git a/src/app/employee/edit/edit.component.ts b/src/app/employee/edit/edit.component.ts index 769a938..91b8421 100644 --- a/src/app/employee/edit/edit.component.ts +++ b/src/app/employee/edit/edit.component.ts @@ -9,7 +9,7 @@ import { MatDialogTitle } from "@angular/material/dialog"; import {NgForOf, NgIf} from "@angular/common"; -import {MatFormField} from "@angular/material/form-field"; +import {MatFormField, MatHint} from "@angular/material/form-field"; import {MatInput, MatLabel} from "@angular/material/input"; import {MatButton} from "@angular/material/button"; import {Employee} from "../Employee"; @@ -33,7 +33,8 @@ import {MatOption, MatSelect} from "@angular/material/select"; MatLabel, MatSelect, MatOption, - NgForOf + NgForOf, + MatHint ], templateUrl: './edit.component.html', standalone: true, diff --git a/src/app/employee/table/table.component.html b/src/app/employee/table/table.component.html index 3c2d148..a88e272 100644 --- a/src/app/employee/table/table.component.html +++ b/src/app/employee/table/table.component.html @@ -14,7 +14,7 @@
- + - + diff --git a/src/app/qualification/create/create.component.html b/src/app/qualification/create/create.component.html index 1485544..e1a4511 100644 --- a/src/app/qualification/create/create.component.html +++ b/src/app/qualification/create/create.component.html @@ -1,24 +1,43 @@ -

Create Qualification

- -
-
+

Create Qualification

+ + + +
@if (apiErrorMessage) { - {{ apiErrorMessage }} +
+
+ error_outline + {{ apiErrorMessage }} +
+
} - - Skill - - - {{ getErrorMessage('skill') }} - - +
+ + Skill + + Enter the skill name + + {{ getErrorMessage('skill') }} + + +
- - - + + +
diff --git a/src/app/qualification/create/create.component.ts b/src/app/qualification/create/create.component.ts index ff75395..f88996b 100644 --- a/src/app/qualification/create/create.component.ts +++ b/src/app/qualification/create/create.component.ts @@ -9,9 +9,10 @@ import { MatDialogTitle } from "@angular/material/dialog"; import {NgIf} from "@angular/common"; -import {MatError, MatFormField, MatLabel} from "@angular/material/form-field"; +import {MatError, MatFormField, MatHint, MatLabel} from "@angular/material/form-field"; import {MatButton} from "@angular/material/button"; import {MatInput} from "@angular/material/input"; +import {MatIcon} from "@angular/material/icon"; import {filter} from "rxjs"; @Component({ @@ -27,7 +28,9 @@ import {filter} from "rxjs"; MatDialogActions, MatButton, MatInput, - MatDialogClose + MatDialogClose, + MatHint, + MatIcon ], templateUrl: './create.component.html', styleUrl: './create.component.css' diff --git a/src/app/qualification/delete/delete.component.html b/src/app/qualification/delete/delete.component.html index 6f734e0..b768f05 100644 --- a/src/app/qualification/delete/delete.component.html +++ b/src/app/qualification/delete/delete.component.html @@ -1,15 +1,39 @@ -

Delete Qualification

+

Delete Qualification

- - @if (apiError) { -
-

{{ apiError }}

+ +
+ @if (apiError) { +
+
+ error_outline + {{ apiError }} +
+
+ } + +
+
+ warning +
+

Are you sure you want to delete this qualification?

+

This action cannot be undone.

+
+
- } - Are you sure you want to delete this qualification? This can't be undone. - - - - - + + + + +
+ diff --git a/src/app/qualification/delete/delete.component.ts b/src/app/qualification/delete/delete.component.ts index 532c628..478cf51 100644 --- a/src/app/qualification/delete/delete.component.ts +++ b/src/app/qualification/delete/delete.component.ts @@ -10,6 +10,8 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import QualificationService from "../../services/qualification.service"; import {MatButton} from "@angular/material/button"; import {HttpErrorResponse} from "@angular/common/http"; +import { MatError } from '@angular/material/form-field' +import {MatIcon} from "@angular/material/icon"; @Component({ selector: 'app-delete-qualification', @@ -19,7 +21,9 @@ import {HttpErrorResponse} from "@angular/common/http"; MatDialogTitle, ReactiveFormsModule, MatDialogActions, - MatButton + MatButton, + MatError, + MatIcon ], templateUrl: './delete.component.html', standalone: true, diff --git a/src/app/qualification/details/details.component.html b/src/app/qualification/details/details.component.html index 3197fa6..43966bf 100644 --- a/src/app/qualification/details/details.component.html +++ b/src/app/qualification/details/details.component.html @@ -1,26 +1,42 @@ -

+

{{ qualification.skill }} Developers

- - @if (employees$ | async; as employees) { - @if (employees.length === 0) { -

No employees found with this qualification.

- } @else { -
- @for (employee of employees; track employee.id) { - - {{ employee.firstName }} {{ employee.lastName }} - - } -
+ +
+ @if (employees$ | async; as employees) { + @if (employees.length === 0) { +
+ person_off +

No employees found with this qualification.

+
+ } @else { +
+ @for (employee of employees; track employee.id) { + +
+
+ + {{ employee.firstName?.charAt(0) }}{{ employee.lastName?.charAt(0) }} + +
+
+ {{ employee.firstName }} {{ employee.lastName }} +
+
+ + } +
+ } } - } +
- - + + diff --git a/src/app/qualification/details/details.component.ts b/src/app/qualification/details/details.component.ts index 9a2246d..bacae6b 100644 --- a/src/app/qualification/details/details.component.ts +++ b/src/app/qualification/details/details.component.ts @@ -13,6 +13,7 @@ import {AsyncPipe} from "@angular/common"; import {MatButton} from "@angular/material/button"; import {DetailsComponent as EmployeeDetailsComponent} from "../../employee/details/details.component"; import EmployeeApiService from "../../services/employee-api.service"; +import {MatIcon} from "@angular/material/icon"; @Component({ selector: 'app-details', @@ -21,7 +22,8 @@ import EmployeeApiService from "../../services/employee-api.service"; MatDialogContent, MatDialogTitle, MatDialogActions, - MatButton + MatButton, + MatIcon ], templateUrl: './details.component.html', styleUrl: './details.component.css' diff --git a/src/app/qualification/edit/edit.component.html b/src/app/qualification/edit/edit.component.html index 71a4cb6..ad63f13 100644 --- a/src/app/qualification/edit/edit.component.html +++ b/src/app/qualification/edit/edit.component.html @@ -1,24 +1,43 @@ -

Edit Qualification

- -
-
+

Edit Qualification

+ + + +
@if (apiErrorMessage) { - {{ apiErrorMessage }} +
+
+ error_outline + {{ apiErrorMessage }} +
+
} - - Skill - - - {{ getErrorMessage('skill') }} - - +
+ + Skill + + Enter the skill name + + {{ getErrorMessage('skill') }} + + +
- - - + + +
diff --git a/src/app/qualification/edit/edit.component.ts b/src/app/qualification/edit/edit.component.ts index 8da9791..975824f 100644 --- a/src/app/qualification/edit/edit.component.ts +++ b/src/app/qualification/edit/edit.component.ts @@ -9,10 +9,11 @@ import { MatDialogTitle } from "@angular/material/dialog"; import {MatButton} from "@angular/material/button"; -import {MatError, MatFormField, MatLabel} from "@angular/material/form-field"; +import {MatError, MatFormField, MatHint, MatLabel} from "@angular/material/form-field"; import {MatInput} from "@angular/material/input"; import {NgIf} from "@angular/common"; import {Qualification} from "../Qualification"; +import {MatIcon} from "@angular/material/icon"; @Component({ selector: 'app-edit-qualification', @@ -28,7 +29,9 @@ import {Qualification} from "../Qualification"; MatLabel, NgIf, ReactiveFormsModule, - MatDialogClose + MatDialogClose, + MatHint, + MatIcon ], templateUrl: './edit.component.html', styleUrl: './edit.component.css' diff --git a/src/app/qualification/table/table.component.html b/src/app/qualification/table/table.component.html index 088d12e..fac7b1a 100644 --- a/src/app/qualification/table/table.component.html +++ b/src/app/qualification/table/table.component.html @@ -7,42 +7,50 @@
@if (qualifications) {
-
Name Name
@@ -35,16 +35,22 @@ -
Actions - - + Actions +
+ + +
- - - - - +
ID{{ qualification.id }}
- + - - + diff --git a/src/app/qualification/table/table.component.ts b/src/app/qualification/table/table.component.ts index 51052d9..1e5629c 100644 --- a/src/app/qualification/table/table.component.ts +++ b/src/app/qualification/table/table.component.ts @@ -22,6 +22,7 @@ import {MatCard, MatCardContent} from "@angular/material/card"; import {MatTooltip} from "@angular/material/tooltip"; import {MatProgressSpinner} from "@angular/material/progress-spinner"; import {DetailsComponent} from "../details/details.component"; +import {MatSort} from "@angular/material/sort"; @Component({ selector: 'app-qualifications', @@ -43,14 +44,15 @@ import {DetailsComponent} from "../details/details.component"; MatCard, MatCardContent, MatTooltip, - MatProgressSpinner + MatProgressSpinner, + MatSort ], templateUrl: './table.component.html', styleUrl: './table.component.css' }) export class QualificationsComponent implements OnInit { public qualifications$!: Observable; - public readonly displayedColumns: string[] = ['id', 'skill', 'actions']; + public readonly displayedColumns: string[] = ['skill', 'actions']; private readonly dialog: MatDialog = inject(MatDialog); private readonly qualificationService: QualificationService = inject(QualificationService);
SkillSkill - - {{ qualification.skill }} - +
+
+ + {{ qualification.skill[0]?.toUpperCase() }} + +
+ +
Actions - - + Actions +
+ + +