Jan-Marlon Leibl
e1f58acdee
- 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.
34 lines
1.4 KiB
HTML
34 lines
1.4 KiB
HTML
<h2 mat-dialog-title class="text-xl md:text-2xl font-semibold text-gray-800 mb-3 md:mb-4">Delete Employee</h2>
|
|
|
|
<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">
|
|
<div class="bg-amber-50 p-3 md:p-4 rounded-lg border border-amber-200">
|
|
<div class="flex items-start space-x-2 md:space-x-3">
|
|
<mat-icon class="text-amber-600 text-xl md:text-2xl">warning</mat-icon>
|
|
<div>
|
|
<p class="text-gray-800 font-medium text-sm md:text-base">
|
|
Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}?
|
|
</p>
|
|
<p class="text-gray-600 mt-1 text-xs md:text-sm">This action cannot be undone.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<mat-dialog-actions align="end" class="!px-0 !mb-0 flex flex-col sm:flex-row w-full gap-3">
|
|
<button mat-button
|
|
[mat-dialog-close]="false"
|
|
class="text-sm md:text-base hover:bg-gray-100 py-2 px-6 rounded-md w-full sm:flex-1">
|
|
Cancel
|
|
</button>
|
|
<button mat-flat-button
|
|
color="warn"
|
|
(click)="deleteEmployee(employee.id ?? 0)"
|
|
mat-dialog-close
|
|
class="!ml-0 text-sm md:text-base py-2 px-6 rounded-md w-full sm:flex-1"
|
|
cdkFocusInitial>
|
|
Delete
|
|
</button>
|
|
</mat-dialog-actions>
|
|
</div>
|
|
</mat-dialog-content>
|