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

Merged
jleibl merged 1 commits from task/add-not-found-result into main 2025-01-23 11:46:45 +00:00
Conversation 1 Commits 1 Files Changed 2 +56 -16
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>
</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">
<table mat-table [dataSource]="employees" matSort class="!w-full">
<ng-container matColumnDef="name">
@ -112,13 +139,6 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</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>
}

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

@ -40,7 +40,34 @@
</button>
</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">
<table
mat-table
@ -119,13 +146,6 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</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>
}