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

add no data found messages (#49)

Browse Source 
Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/49
Reviewed-by: Constantin Simonis <constantin@simonis.lol>
Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me>
Co-committed-by: Jan-Marlon Leibl <jleibl@proton.me>
This commit is contained in:
Hop In, I Have Puppies AND WiFi 2025-01-23 11:46:45 +00:00 committed by Hop In, I Have Puppies AND WiFi
parent eac3d9c834
commit 64d8ce5837
2 changed files with 56 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,7 +40,34 @@
</button> </button>
</div> </div>
@if (employees) { @if (!employees || employees.length === 0) {
<div class="!bg-gray-50 !rounded-lg !p-8">
<div class="!text-center !max-w-sm !mx-auto">
<div
class="!bg-blue-100 !rounded-full !w-16 !h-16 !flex !items-center !justify-center !mx-auto !mb-4"
>
<mat-icon class="!text-blue-600 !w-8 !h-8 !text-3xl"
>people</mat-icon
>
</div>
<h3 class="!text-gray-900 !font-medium !text-lg !mb-2">
No employees found
</h3>
<p class="!text-gray-600 !mb-6">
Get started by adding your first employee to the directory.
</p>
<button
mat-flat-button
color="primary"
class="!bg-blue-600 !text-white"
(click)="showCreateEmployeeModal()"
>
<mat-icon class="!mr-2">add</mat-icon>
Add Employee
</button>
</div>
</div>
} @else {
<div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4"> <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
<table mat-table [dataSource]="employees" matSort class="!w-full"> <table mat-table [dataSource]="employees" matSort class="!w-full">
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
@ -112,13 +139,6 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table> </table>
</div> </div>
} @else {
<mat-card class="!text-center !py-8">
<mat-card-content>
<mat-icon class="!w-8 !h-8 !text-gray-400 !mb-4">people</mat-icon>
<p class="!text-gray-600">No employees found</p>
</mat-card-content>
</mat-card>
} }
</div> </div>
} }

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

@ -40,7 +40,34 @@
</button> </button>
</div> </div>
@if (qualifications) { @if (!qualifications || qualifications.length === 0) {
<div class="!bg-gray-50 !rounded-lg !p-8">
<div class="!text-center !max-w-sm !mx-auto">
<div
class="!bg-blue-100 !rounded-full !w-16 !h-16 !flex !items-center !justify-center !mx-auto !mb-4"
>
<mat-icon class="!text-blue-600 !w-8 !h-8 !text-3xl"
>school</mat-icon
>
</div>
<h3 class="!text-gray-900 !font-medium !text-lg !mb-2">
No qualifications found
</h3>
<p class="!text-gray-600 !mb-6">
Get started by adding your first qualification to the directory.
</p>
<button
mat-flat-button
color="primary"
class="!bg-blue-600 !text-white"
(click)="openCreateModal()"
>
<mat-icon class="!mr-2">add</mat-icon>
Add Qualification
</button>
</div>
</div>
} @else {
<div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4"> <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
<table <table
mat-table mat-table
@ -119,13 +146,6 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table> </table>
</div> </div>
} @else {
<mat-card class="!text-center !py-8">
<mat-card-content>
<mat-icon class="!w-8 !h-8 !text-gray-400 !mb-4">school</mat-icon>
<p class="!text-gray-600">No qualifications found</p>
</mat-card-content>
</mat-card>
} }
</div> </div>
} }