angular/ems-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance employee and qualification forms with hints and improved layouts (#37)

Browse Source 
- 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.

Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/37
Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me>
Co-committed-by: Jan-Marlon Leibl <jleibl@proton.me>
This commit is contained in:
Jan-Marlon Leibl
2025-01-15 10:34:10 +00:00
committed by Hop In, I Have Puppies AND WiFi
parent 37b5c27a50
commit 95bf76f9c1
18 changed files with 354 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/qualification/details/details.component.html
View File

@ -1,26 +1,42 @@
<h2 mat-dialog-title class="text-xl font-semibold mb-4">
<h2 mat-dialog-title class="text-xl md:text-2xl font-semibold text-gray-800 mb-3 md:mb-4">
{{ qualification.skill }} Developers
</h2>
<mat-dialog-content class="px-1">
@if (employees$ | async; as employees) {
@if (employees.length === 0) {
<p class="text-gray-500 italic">No employees found with this qualification.</p>
} @else {
<div class="space-y-1">
@for (employee of employees; track employee.id) {
<a
class="block w-full px-4 py-2 text-blue-600 rounded-lg hover:bg-blue-50 transition-colors cursor-pointer"
(click)="openEmployeeDetailsModal(employee.id)"
>
<span class="font-medium">{{ employee.firstName }} {{ employee.lastName }}</span>
</a>
}
</div>
<mat-dialog-content class="!px-3 md:!px-6">
<div class="w-full min-w-[280px] md:min-w-[400px] space-y-4 md:space-y-6">
@if (employees$ | async; as employees) {
@if (employees.length === 0) {
<div class="bg-gray-50 p-3 md:p-4 rounded-lg text-center">
<mat-icon class="text-gray-400 text-xl md:text-2xl mb-2">person_off</mat-icon>
<p class="text-gray-600 text-sm md:text-base">No employees found with this qualification.</p>
</div>
} @else {
<div class="bg-gray-50 p-3 md:p-4 rounded-lg space-y-2">
@for (employee of employees; track employee.id) {
<a class="block w-full p-3 bg-white rounded-lg hover:bg-blue-50 transition-colors cursor-pointer border border-gray-100 hover:border-blue-100"
(click)="openEmployeeDetailsModal(employee.id)">
<div class="flex items-center space-x-3">
<div class="h-8 w-8 md:h-10 md:w-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
<span class="text-blue-600 font-medium text-sm md:text-base">
{{ employee.firstName?.charAt(0) }}{{ employee.lastName?.charAt(0) }}
</span>
</div>
<div>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ employee.firstName }} {{ employee.lastName }}</span>
</div>
</div>
</a>
}
</div>
}
}
}
</div>
</mat-dialog-content>
<mat-dialog-actions align="end" class="mt-4">
<button mat-button (click)="closeModal()">Close</button>
<mat-dialog-actions align="end" class="!px-3 md:!px-6 !py-4 !mt-4 border-t">
<button mat-button
(click)="closeModal()"
class="text-sm md:text-base hover:bg-gray-100 py-2 px-4 md:px-6 rounded-md w-full">
Close
</button>
</mat-dialog-actions>