60 lines
2.2 KiB
HTML
60 lines
2.2 KiB
HTML
<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-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 !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>
|
|
</div>
|
|
} @else {
|
|
<div class="bg-gray-50 p-3 md:p-4 rounded-lg space-y-2">
|
|
@for (employee of employees; track employee.id) {
|
|
<button
|
|
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 text-left"
|
|
(click)="openEmployeeDetailsModal(employee.id)"
|
|
(keydown.enter)="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>
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
</mat-dialog-content>
|
|
|
|
<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>
|