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

update error message styling in HTML templates #40

Merged
jleibl merged 2 commits from task/update-error-message-styling into main 2025-01-15 11:33:14 +00:00
Conversation 1 Commits 2 Files Changed 7 +41 -35
7 changed files with 41 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/employee/delete/delete.component.html
View File

@ -4,7 +4,7 @@
<div class="w-full min-w-[280px] md:min-w-[400px] space-y-4 md:space-y-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="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"> <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> <mat-icon class="text-amber-600 text-xl md:text-2xl !w-8 !h-8">warning</mat-icon>
<div> <div>
<p class="text-gray-800 font-medium text-sm md:text-base"> <p class="text-gray-800 font-medium text-sm md:text-base">
Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}? Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}?

20
src/app/employee/table/table.component.html
View File

@ -61,7 +61,7 @@
} @else { } @else {
<mat-card class="!text-center !py-8"> <mat-card class="!text-center !py-8">
<mat-card-content> <mat-card-content>
<mat-icon class="!w-12 !h-12 !text-gray-400 !mb-4">people_outline</mat-icon> <mat-icon class="!w-8 !h-8 !text-gray-400 !mb-4">people</mat-icon>
<p class="!text-gray-600">No employees found</p> <p class="!text-gray-600">No employees found</p>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
@ -86,17 +86,15 @@
</div> </div>
</div> </div>
} @error { } @error {
<mat-card class="!bg-red-50 !border !border-red-100"> <div class="bg-red-50 p-3 md:p-4 rounded-lg border border-red-200">
<mat-card-content class="!p-4"> <div class="flex items-start space-x-2 md:space-x-3">
<div class="!flex !items-center !gap-4 !text-red-800"> <mat-icon class="text-red-600 text-xl md:text-2xl !w-8 !h-8">error</mat-icon>
<mat-icon class="!text-red-500">error_outline</mat-icon> <div>
<div> <p class="text-gray-800 font-medium text-sm md:text-base">There was an error loading the employees.</p>
<h3 class="!font-medium !mb-1">Error loading employees</h3> <p class="text-gray-600 mt-1 text-xs md:text-sm">Please try refreshing the page.</p>
<p class="!text-sm !text-red-700">Please try refreshing the page.</p>
</div>
</div> </div>
</mat-card-content> </div>
</mat-card> </div>
} @loading { } @loading {
<div class="!flex !justify-center !items-center !py-12"> <div class="!flex !justify-center !items-center !py-12">
<mat-spinner diameter="48" class="!text-blue-600"></mat-spinner> <mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>

9
src/app/qualification/create/create.component.html
View File

@ -4,10 +4,13 @@
<form [formGroup]="qualificationForm" (ngSubmit)="create()" class="w-full min-w-[280px] md:min-w-[400px]"> <form [formGroup]="qualificationForm" (ngSubmit)="create()" class="w-full min-w-[280px] md:min-w-[400px]">
<div class="space-y-4 md:space-y-6"> <div class="space-y-4 md:space-y-6">
@if (apiErrorMessage) { @if (apiErrorMessage) {
<div class="bg-red-50 p-3 md:p-4 rounded-lg"> <div class="bg-red-50 p-3 md:p-4 rounded-lg border border-red-200">
<div class="flex items-start space-x-2 md:space-x-3"> <div class="flex items-start space-x-2 md:space-x-3">
<mat-icon class="text-red-600 text-xl md:text-2xl">error_outline</mat-icon> <mat-icon class="text-red-600 text-xl md:text-2xl !w-8 !h-8">error</mat-icon>
<mat-error class="text-sm md:text-base text-red-700">{{ apiErrorMessage }}</mat-error> <div>
<p class="text-gray-800 font-medium text-sm md:text-base">There was an error creating the qualification.</p>
<p class="text-gray-600 mt-1 text-xs md:text-sm">{{ apiErrorMessage }}</p>
</div>
</div> </div>
</div> </div>
} }

12
src/app/qualification/delete/delete.component.html
View File

@ -3,23 +3,27 @@
<mat-dialog-content class="!px-3 md:!px-6"> <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="w-full min-w-[280px] md:min-w-[400px] space-y-4 md:space-y-6">
@if (apiError) { @if (apiError) {
<div class="bg-red-50 p-3 md:p-4 rounded-lg"> <div class="bg-red-50 p-3 md:p-4 rounded-lg border border-red-200">
<div class="flex items-start space-x-2 md:space-x-3"> <div class="flex items-start space-x-2 md:space-x-3">
<mat-icon class="text-red-600 text-xl md:text-2xl">error_outline</mat-icon> <mat-icon class="text-red-600 text-xl md:text-2xl !w-8 !h-8">error</mat-icon>
<mat-error class="text-sm md:text-base text-red-700">{{ apiError }}</mat-error> <div>
<p class="text-gray-800 font-medium text-sm md:text-base">There was an error deleting the qualification.</p>
<p class="text-gray-600 mt-1 text-xs md:text-sm">{{ apiError }}</p>
</div>
</div> </div>
</div> </div>
} }
<div class="bg-amber-50 p-3 md:p-4 rounded-lg border border-amber-200"> <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"> <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> <mat-icon class="text-amber-600 text-xl md:text-2xl !w-8 !h-8">warning</mat-icon>
<div> <div>
<p class="text-gray-800 font-medium text-sm md:text-base">Are you sure you want to delete this qualification?</p> <p class="text-gray-800 font-medium text-sm md:text-base">Are you sure you want to delete this qualification?</p>
<p class="text-gray-600 mt-1 text-xs md:text-sm">This action cannot be undone.</p> <p class="text-gray-600 mt-1 text-xs md:text-sm">This action cannot be undone.</p>
</div> </div>
</div> </div>
</div> </div>
<mat-dialog-actions align="end" class="!px-0 !mb-0 flex flex-col sm:flex-row w-full gap-3"> <mat-dialog-actions align="end" class="!px-0 !mb-0 flex flex-col sm:flex-row w-full gap-3">
<button mat-button <button mat-button

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

@ -7,7 +7,7 @@
@if (employees$ | async; as employees) { @if (employees$ | async; as employees) {
@if (employees.length === 0) { @if (employees.length === 0) {
<div class="bg-gray-50 p-3 md:p-4 rounded-lg text-center"> <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> <mat-icon class="text-gray-400 text-xl md:text-2xl mb-2 !w-8 !h-8">person_off</mat-icon>
<p class="text-gray-600 text-sm md:text-base">No employees found with this qualification.</p> <p class="text-gray-600 text-sm md:text-base">No employees found with this qualification.</p>
</div> </div>
} @else { } @else {

9
src/app/qualification/edit/edit.component.html
View File

@ -4,10 +4,13 @@
<form [formGroup]="qualificationForm" (ngSubmit)="edit()" class="w-full min-w-[280px] md:min-w-[400px]"> <form [formGroup]="qualificationForm" (ngSubmit)="edit()" class="w-full min-w-[280px] md:min-w-[400px]">
<div class="space-y-4 md:space-y-6"> <div class="space-y-4 md:space-y-6">
@if (apiErrorMessage) { @if (apiErrorMessage) {
<div class="bg-red-50 p-3 md:p-4 rounded-lg"> <div class="bg-red-50 p-3 md:p-4 rounded-lg border border-red-200">
<div class="flex items-start space-x-2 md:space-x-3"> <div class="flex items-start space-x-2 md:space-x-3">
<mat-icon class="text-red-600 text-xl md:text-2xl">error_outline</mat-icon> <mat-icon class="text-red-600 text-xl md:text-2xl !w-8 !h-8">error</mat-icon>
<mat-error class="text-sm md:text-base text-red-700">{{ apiErrorMessage }}</mat-error> <div>
<p class="text-gray-800 font-medium text-sm md:text-base">There was an error editing the qualification.</p>
<p class="text-gray-600 mt-1 text-xs md:text-sm">{{ apiErrorMessage }}</p>
</div>
</div> </div>
</div> </div>
} }

22
src/app/qualification/table/table.component.html
View File

@ -61,7 +61,7 @@
} @else { } @else {
<mat-card class="!text-center !py-8"> <mat-card class="!text-center !py-8">
<mat-card-content> <mat-card-content>
<mat-icon class="!w-12 !h-12 !text-gray-400 !mb-4">school</mat-icon> <mat-icon class="!w-8 !h-8 !text-gray-400 !mb-4">school</mat-icon>
<p class="!text-gray-600">No qualifications found</p> <p class="!text-gray-600">No qualifications found</p>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
@ -86,17 +86,15 @@
</div> </div>
</div> </div>
} @error { } @error {
<mat-card class="!bg-red-50 !border !border-red-100"> <div class="bg-red-50 p-3 md:p-4 rounded-lg border border-red-200">
<mat-card-content class="!p-4"> <div class="flex items-start space-x-2 md:space-x-3">
<div class="!flex !items-center !gap-4 !text-red-800"> <mat-icon class="text-red-600 text-xl md:text-2xl !w-8 !h-8">error</mat-icon>
<mat-icon class="!text-red-500">error_outline</mat-icon> <div>
<div> <p class="text-gray-800 font-medium text-sm md:text-base">There was an error loading the qualifications.</p>
<h3 class="!font-medium !mb-1">Error loading qualifications</h3> <p class="text-gray-600 mt-1 text-xs md:text-sm">Please try refreshing the page.</p>
<p class="!text-sm !text-red-700">Please try refreshing the page.</p> </div>
</div> </div>
</div> </div>
</mat-card-content>
</mat-card>
} @loading { } @loading {
<div class="!flex !justify-center !items-center !py-12"> <div class="!flex !justify-center !items-center !py-12">
<mat-spinner diameter="48" class="!text-blue-600"></mat-spinner> <mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>