add search bar to employee list (#41)

Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me>
Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/41
Co-authored-by: Constantin Simonis <constantin@simonis.lol>
Co-committed-by: Constantin Simonis <constantin@simonis.lol>
This commit is contained in:
2025-01-15 13:15:33 +00:00
committed by Hop In, I Have Puppies AND WiFi
parent c41eceb51d
commit 44cf3de5a0
6 changed files with 326 additions and 219 deletions

View File

@ -3,8 +3,23 @@
@if (qualifications$ | async; as qualifications) {
<div class="!space-y-6">
<div class="!flex !justify-between !items-center">
<h2 class="!text-2xl !font-semibold !text-gray-900">Qualifications</h2>
<button mat-flat-button color="primary" class="!bg-blue-600 !text-white"
<div class="!flex !items-center !gap-4">
<h2 class="!text-2xl !font-semibold !text-gray-900 !shrink-0">Qualifications</h2>
<mat-form-field class="!m-0" subscriptSizing="dynamic">
<mat-icon matPrefix class="!text-gray-400 !mr-2">search</mat-icon>
<input matInput
type="text"
placeholder="Search qualifications..."
(keyup)="filterQualifications($event)">
<div matSuffix class="!w-[24px] !h-[24px] !ml-2 !flex !items-center !justify-center">
<mat-progress-spinner [diameter]="20" mode="indeterminate"
[class.!opacity-0]="!isSearching"
[class.!opacity-100]="isSearching"
class="!transition-opacity"></mat-progress-spinner>
</div>
</mat-form-field>
</div>
<button mat-flat-button color="primary" class="!bg-blue-600 !text-white !shrink-0"
(click)="openCreateModal()">
<mat-icon class="!mr-2">add</mat-icon>
Add Qualification