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

add search bar to employee list #41

Merged
jleibl merged 2 commits from feature/search into main 2025-01-15 13:15:34 +00:00
Conversation 1 Commits 2 Files Changed 6 +326 -219
6 changed files with 326 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
src/app/employee/table/table.component.css
View File

@ -1,73 +1,73 @@
:host ::ng-deep { :host ::ng-deep {
.mat-mdc-card { .mat-mdc-card {
--mdc-elevated-card-container-color: transparent; --mdc-elevated-card-container-color: transparent;
@apply !shadow-none !rounded-xl; @apply !shadow-none !rounded-xl;
} }
.mat-mdc-button-base { .mat-mdc-button-base {
--mat-mdc-button-persistent-ripple-color: currentColor; --mat-mdc-button-persistent-ripple-color: currentColor;
@apply !rounded-lg; @apply !rounded-lg;
} }
.mat-mdc-progress-spinner { .mat-mdc-progress-spinner {
--mdc-circular-progress-active-indicator-color: #2563eb; --mdc-circular-progress-active-indicator-color: #2563eb;
} }
.mdc-data-table__header-cell { .mdc-data-table__header-cell {
@apply !text-gray-600 !font-semibold !text-sm !py-4 !px-6; @apply !text-gray-600 !font-semibold !text-sm !py-4 !px-6;
} }
.mat-mdc-table { .mat-mdc-table {
@apply !bg-transparent !border-separate !border-spacing-y-2; @apply !bg-transparent !border-separate !border-spacing-y-2;
.mat-mdc-row { .mat-mdc-row {
@apply !bg-white !rounded-xl !shadow-sm !transition-all !duration-200; @apply !bg-white !rounded-xl !shadow-sm !transition-all !duration-200;
&:hover { &:hover {
@apply !bg-gray-50 !shadow-md !transform !scale-[1.01]; @apply !bg-gray-50 !shadow-md !transform !scale-[1.01];
} }
.mat-mdc-cell { .mat-mdc-cell {
@apply !border-b-0 !py-4 !px-6 first:!rounded-l-xl last:!rounded-r-xl; @apply !border-b-0 !py-4 !px-6 first:!rounded-l-xl last:!rounded-r-xl;
} }
} }
.mat-mdc-header-row { .mat-mdc-header-row {
@apply !bg-transparent; @apply !bg-transparent;
.mat-mdc-header-cell { .mat-mdc-header-cell {
@apply !border-b-0; @apply !border-b-0;
} }
} }
} }
.mat-mdc-menu-panel { .mat-mdc-menu-panel {
@apply !rounded-xl !shadow-lg; @apply !rounded-xl !shadow-lg;
} }
.mat-mdc-menu-item { .mat-mdc-menu-item {
@apply !rounded-lg !mx-1 !my-0.5; @apply !rounded-lg !mx-1 !my-0.5;
} }
.mdc-button { .mdc-button {
@apply !font-medium; @apply !font-medium;
&.mat-primary { &.mat-primary {
@apply !bg-blue-600 !text-white hover:!bg-blue-700; @apply !bg-blue-600 !text-white hover:!bg-blue-700;
} }
&.mat-warn { &.mat-warn {
@apply !bg-red-600 !text-white hover:!bg-red-700; @apply !bg-red-600 !text-white hover:!bg-red-700;
} }
} }
.mat-mdc-snack-bar-container { .mat-mdc-snack-bar-container {
&.error-snackbar { &.error-snackbar {
@apply !rounded-xl; @apply !rounded-xl;
.mdc-snackbar__surface { .mdc-snackbar__surface {
@apply !bg-red-50 !text-red-900 !border !border-red-100; @apply !bg-red-50 !text-red-900 !border !border-red-100;
} }
} }
} }
} }

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

@ -1,103 +1,113 @@
<section class="!space-y-6 mb-6"> <section class="!space-y-6 mb-6">
@defer { @defer {
@if (employees$ | async; as employees) { @if (employees$ | async; as employees) {
<div class="!space-y-6"> <div class="!space-y-6">
<div class="!flex !justify-between !items-center"> <div class="!flex !justify-between !items-center">
<h2 class="!text-2xl !font-semibold !text-gray-900">Employee Directory</h2> <div class="!flex !items-center !gap-4">
<button mat-flat-button color="primary" class="!bg-blue-600 !text-white" (click)="showCreateEmployeeModal()"> <h2 class="!text-2xl !font-semibold !text-gray-900 !shrink-0">Employee Directory</h2>
<mat-icon class="!mr-2">add</mat-icon> <mat-form-field class="!m-0" subscriptSizing="dynamic">
Add Employee <mat-icon matPrefix class="!text-gray-400 !mr-2">search</mat-icon>
</button> <input matInput
</div> type="text"
placeholder="Search employees..."
@if (employees) { (keyup)="filterEmployees($event)">
<div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4"> <div matSuffix class="!w-[24px] !h-[24px] !ml-2 !flex !items-center !justify-center">
<table mat-table [dataSource]="employees" matSort class="!w-full"> <mat-progress-spinner [diameter]="20" mode="indeterminate"
<ng-container matColumnDef="name"> [class.!opacity-0]="!isSearching"
<th mat-header-cell *matHeaderCellDef class="!text-left !w-full"> Name</th> [class.!opacity-100]="isSearching"
<td mat-cell *matCellDef="let employee" class="!py-4"> class="!transition-opacity"></mat-progress-spinner>
<div class="!flex !items-center">
<div class="!h-10 !w-10 !rounded-full !bg-blue-100 !flex !items-center !justify-center !mr-3">
<span class="!text-blue-600 !font-medium">
{{ employee.firstName[0] }}{{ employee.lastName[0] }}
</span>
</div>
<div>
<a
class="!text-blue-600 hover:!underline cursor-pointer"
[matTooltip]="'Click to view Employee details'"
(click)="openDetailModal(employee)">
{{ employee.lastName }}, {{ employee.firstName }}
</a>
</div>
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="!text-right !w-[120px]"> Actions</th>
<td mat-cell *matCellDef="let employee" class="!text-right !py-4 !whitespace-nowrap">
<div class="!flex !justify-end !items-center !gap-1">
<button mat-icon-button
color="primary"
[matTooltip]="'Edit employee'"
(click)="showEditEmployeeModal(employee)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button
color="warn"
[matTooltip]="'Delete employee'"
(click)="openDeleteDialogue(employee)">
<mat-icon>delete</mat-icon>
</button>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div> </div>
} @else { </mat-form-field>
<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>
<button mat-flat-button color="primary" class="!bg-blue-600 !text-white !shrink-0"
(click)="showCreateEmployeeModal()">
<mat-icon class="!mr-2">add</mat-icon>
Add Employee
</button>
</div>
@if (employees) {
<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">
<th mat-header-cell *matHeaderCellDef class="!text-left !w-full"> Name</th>
<td mat-cell *matCellDef="let employee" class="!py-4">
<div class="!flex !items-center">
<div class="!h-10 !w-10 !rounded-full !bg-blue-100 !flex !items-center !justify-center !mr-3">
<span class="!text-blue-600 !font-medium">
{{ employee.firstName[0] }}{{ employee.lastName[0] }}
</span>
</div>
<div>
<a class="!text-blue-600 hover:!underline cursor-pointer"
[matTooltip]="'Click to view Employee details'" (click)="openDetailModal(employee)">
{{ employee.lastName }}, {{ employee.firstName }}
</a>
</div>
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="!text-right !w-[120px]"> Actions</th>
<td mat-cell *matCellDef="let employee" class="!text-right !py-4 !whitespace-nowrap">
<div class="!flex !justify-end !items-center !gap-1">
<button mat-icon-button color="primary" [matTooltip]="'Edit employee'"
(click)="showEditEmployeeModal(employee)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button color="warn" [matTooltip]="'Delete employee'"
(click)="openDeleteDialogue(employee)">
<mat-icon>delete</mat-icon>
</button>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<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>
} }
} @placeholder { </div>
<div class="!space-y-6">
<div class="!animate-pulse">
<div class="!flex !justify-between !items-center !mb-8">
<div class="!h-8 !bg-gray-200 !rounded !w-1/4"></div>
<div class="!h-10 !bg-gray-200 !rounded !w-32"></div>
</div>
<div class="!bg-gray-50 !p-4 !rounded-lg">
<div class="!space-y-4">
<div class="!h-10 !bg-gray-200 !rounded"></div>
@for (i of [1, 2, 3]; track i) {
<div class="!h-16 !bg-white !rounded-lg !shadow-sm"></div>
}
</div>
</div>
</div>
</div>
} @error {
<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">
<mat-icon class="text-red-600 text-xl md:text-2xl !w-8 !h-8">error</mat-icon>
<div>
<p class="text-gray-800 font-medium text-sm md:text-base">There was an error loading the employees.</p>
<p class="text-gray-600 mt-1 text-xs md:text-sm">Please try refreshing the page.</p>
</div>
</div>
</div>
} @loading {
<div class="!flex !justify-center !items-center !py-12">
<mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
</div>
} }
</section> } @placeholder {
<div class="!space-y-6">
<div class="!animate-pulse">
<div class="!flex !justify-between !items-center !mb-8">
<div class="!h-8 !bg-gray-200 !rounded !w-1/4"></div>
<div class="!h-10 !bg-gray-200 !rounded !w-32"></div>
</div>
<div class="!bg-gray-50 !p-4 !rounded-lg">
<div class="!space-y-4">
<div class="!h-10 !bg-gray-200 !rounded"></div>
@for (i of [1, 2, 3]; track i) {
<div class="!h-16 !bg-white !rounded-lg !shadow-sm"></div>
}
</div>
</div>
</div>
</div>
} @error {
<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">
<mat-icon class="text-red-600 text-xl md:text-2xl !w-8 !h-8">error</mat-icon>
<div>
<p class="text-gray-800 font-medium text-sm md:text-base">There was an error loading the employees.</p>
<p class="text-gray-600 mt-1 text-xs md:text-sm">Please try refreshing the page.</p>
</div>
</div>
</div>
} @loading {
<div class="!flex !justify-center !items-center !py-12">
<mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
</div>
}
</section>

45
src/app/employee/table/table.component.ts
View File

@ -1,6 +1,6 @@
import {Component, inject, OnInit} from '@angular/core'; import {Component, inject, OnInit} from '@angular/core';
import {CommonModule} from '@angular/common'; import {CommonModule} from '@angular/common';
import {catchError, Observable, of, retry} from 'rxjs'; import {catchError, debounceTime, distinctUntilChanged, filter, map, Observable, of, retry, Subject} from 'rxjs';
import {HttpErrorResponse} from '@angular/common/http'; import {HttpErrorResponse} from '@angular/common/http';
import {Employee} from '../Employee'; import {Employee} from '../Employee';
@ -20,6 +20,9 @@ import EmployeeApiService from "../../services/employee-api.service";
import {CreateComponent} from "../create/create.component"; import {CreateComponent} from "../create/create.component";
import {EditComponent} from "../edit/edit.component"; import {EditComponent} from "../edit/edit.component";
import {DetailsComponent} from "../details/details.component"; import {DetailsComponent} from "../details/details.component";
import {MatFormFieldModule} from "@angular/material/form-field";
import {MatInputModule} from "@angular/material/input";
import {Qualification} from "../../qualification/Qualification";
@Component({ @Component({
selector: 'app-employee-list', selector: 'app-employee-list',
@ -35,7 +38,9 @@ import {DetailsComponent} from "../details/details.component";
MatTooltipModule, MatTooltipModule,
MatMenuModule, MatMenuModule,
MatTableModule, MatTableModule,
MatSortModule MatSortModule,
MatFormFieldModule,
MatInputModule,
], ],
templateUrl: './table.component.html', templateUrl: './table.component.html',
styleUrl: './table.component.css' styleUrl: './table.component.css'
@ -46,11 +51,40 @@ export class TableComponent implements OnInit {
private readonly matDialog: MatDialog = inject(MatDialog); private readonly matDialog: MatDialog = inject(MatDialog);
private static readonly MAX_RETRIES = 3; private static readonly MAX_RETRIES = 3;
private allEmployees: Employee[] = [];
private searchSubject = new Subject<string>();
public employees$: Observable<Employee[]> = of([]); public employees$: Observable<Employee[]> = of([]);
public isSearching = false;
public readonly displayedColumns: string[] = ['name', 'actions']; public readonly displayedColumns: string[] = ['name', 'actions'];
public ngOnInit(): void { public ngOnInit(): void {
this.employees$ = this.fetchEmployees(); this.loadEmployees();
this.setupSearch();
}
private loadEmployees(): void {
this.fetchEmployees().subscribe(employees => {
this.allEmployees = employees;
this.employees$ = of(employees);
});
}
private setupSearch(): void {
this.searchSubject.pipe(
debounceTime(300),
distinctUntilChanged()
).subscribe(searchTerm => {
this.isSearching = true;
setTimeout(() => {
const filteredEmployees = this.allEmployees.filter(employee =>
employee.firstName?.toLowerCase().includes(searchTerm) ||
employee.lastName?.toLowerCase().includes(searchTerm)
);
this.employees$ = of(filteredEmployees);
this.isSearching = false;
}, 150);
});
} }
private fetchEmployees(): Observable<Employee[]> { private fetchEmployees(): Observable<Employee[]> {
@ -106,4 +140,9 @@ export class TableComponent implements OnInit {
protected openDetailModal(employee: Employee) { protected openDetailModal(employee: Employee) {
this.matDialog.open(DetailsComponent, {data: employee}); this.matDialog.open(DetailsComponent, {data: employee});
} }
protected filterEmployees(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
this.searchSubject.next(searchTerm);
}
} }

1
src/app/qualification/delete/delete.component.ts
View File

@ -22,7 +22,6 @@ import {MatIcon} from "@angular/material/icon";
ReactiveFormsModule, ReactiveFormsModule,
MatDialogActions, MatDialogActions,
MatButton, MatButton,
MatError,
MatIcon MatIcon
], ],
templateUrl: './delete.component.html', templateUrl: './delete.component.html',

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

@ -3,8 +3,23 @@
@if (qualifications$ | async; as qualifications) { @if (qualifications$ | async; as qualifications) {
<div class="!space-y-6"> <div class="!space-y-6">
<div class="!flex !justify-between !items-center"> <div class="!flex !justify-between !items-center">
<h2 class="!text-2xl !font-semibold !text-gray-900">Qualifications</h2> <div class="!flex !items-center !gap-4">
<button mat-flat-button color="primary" class="!bg-blue-600 !text-white" <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()"> (click)="openCreateModal()">
<mat-icon class="!mr-2">add</mat-icon> <mat-icon class="!mr-2">add</mat-icon>
Add Qualification Add Qualification

130
src/app/qualification/table/table.component.ts
View File

@ -1,68 +1,112 @@
import {Component, inject, OnInit} from '@angular/core'; import {Component, inject, OnInit} from '@angular/core';
import {Observable} from "rxjs"; import {CommonModule} from '@angular/common';
import {catchError, debounceTime, distinctUntilChanged, filter, map, Observable, of, retry, Subject} from 'rxjs';
import {HttpErrorResponse} from '@angular/common/http';
import {Qualification} from "../Qualification"; import {Qualification} from "../Qualification";
import {MatDialog} from "@angular/material/dialog"; import {MatDialog} from "@angular/material/dialog";
import QualificationService from "../../services/qualification.service"; import QualificationService from "../../services/qualification.service";
import {CreateComponent} from "../create/create.component"; import {CreateComponent} from "../create/create.component";
import {EditComponent} from "../edit/edit.component"; import {EditComponent} from "../edit/edit.component";
import {DeleteComponent} from "../delete/delete.component"; import {DeleteComponent} from "../delete/delete.component";
import {AsyncPipe} from "@angular/common"; import {MatCardModule} from '@angular/material/card';
import {MatButton, MatIconButton} from "@angular/material/button"; import {MatButtonModule} from '@angular/material/button';
import { import {MatIconModule} from '@angular/material/icon';
MatCell, import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
MatCellDef, import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
MatColumnDef, import {MatDividerModule} from '@angular/material/divider';
MatHeaderCell, import {MatTooltipModule} from '@angular/material/tooltip';
MatHeaderCellDef, import {MatMenuModule} from '@angular/material/menu';
MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef, import {MatTableModule} from '@angular/material/table';
MatTable import {MatSortModule} from '@angular/material/sort';
} from "@angular/material/table"; import {MatFormFieldModule} from "@angular/material/form-field";
import {MatIcon} from "@angular/material/icon"; import {MatInputModule} from "@angular/material/input";
import {MatCard, MatCardContent} from "@angular/material/card";
import {MatTooltip} from "@angular/material/tooltip";
import {MatProgressSpinner} from "@angular/material/progress-spinner";
import {DetailsComponent} from "../details/details.component"; import {DetailsComponent} from "../details/details.component";
import {MatSort} from "@angular/material/sort";
@Component({ @Component({
selector: 'app-qualifications', selector: 'app-qualifications',
standalone: true,
imports: [ imports: [
AsyncPipe, CommonModule,
MatButton, MatCardModule,
MatTable, MatButtonModule,
MatColumnDef, MatIconModule,
MatHeaderCell, MatProgressSpinnerModule,
MatCell, MatSnackBarModule,
MatHeaderCellDef, MatDividerModule,
MatCellDef, MatTooltipModule,
MatIconButton, MatMenuModule,
MatIcon, MatTableModule,
MatHeaderRow, MatSortModule,
MatRow, MatFormFieldModule,
MatHeaderRowDef, MatInputModule,
MatRowDef,
MatCard,
MatCardContent,
MatTooltip,
MatProgressSpinner,
MatSort
], ],
templateUrl: './table.component.html', templateUrl: './table.component.html',
styleUrl: './table.component.css' styleUrl: './table.component.css'
}) })
export class QualificationsComponent implements OnInit { export class QualificationsComponent implements OnInit {
public qualifications$!: Observable<Qualification[]>;
public readonly displayedColumns: string[] = ['skill', 'actions'];
private readonly dialog: MatDialog = inject(MatDialog);
private readonly qualificationService: QualificationService = inject(QualificationService); private readonly qualificationService: QualificationService = inject(QualificationService);
private readonly snackBar: MatSnackBar = inject(MatSnackBar);
private readonly dialog: MatDialog = inject(MatDialog);
private static readonly MAX_RETRIES = 3;
private allQualifications: Qualification[] = [];
private searchSubject = new Subject<string>();
public qualifications$: Observable<Qualification[]> = of([]);
public isSearching = false;
public readonly displayedColumns: string[] = ['skill', 'actions'];
ngOnInit() { ngOnInit() {
this.loadQualifications(); this.loadQualifications();
this.setupSearch();
} }
private loadQualifications() { private loadQualifications(): void {
this.qualifications$ = this.qualificationService.getAll(); this.fetchQualifications().subscribe(qualifications => {
this.allQualifications = qualifications;
this.qualifications$ = of(qualifications);
});
}
private setupSearch(): void {
this.searchSubject.pipe(
debounceTime(300),
distinctUntilChanged()
).subscribe(searchTerm => {
this.isSearching = true;
setTimeout(() => {
const filteredQualifications = this.allQualifications.filter(qualification =>
qualification.skill?.toLowerCase().includes(searchTerm)
);
this.qualifications$ = of(filteredQualifications);
this.isSearching = false;
}, 150);
});
}
private fetchQualifications(): Observable<Qualification[]> {
return this.qualificationService.getAll().pipe(
retry(QualificationsComponent.MAX_RETRIES),
catchError((error: HttpErrorResponse) => {
console.error('Error fetching qualifications:', error);
this.showErrorMessage('Failed to load qualifications. Please try again.');
return of([]);
})
);
}
private showErrorMessage(message: string): void {
this.snackBar.open(message, 'Close', {
duration: 5000,
horizontalPosition: 'end',
verticalPosition: 'bottom',
panelClass: ['!bg-red-50', '!text-red-900', '!border', '!border-red-100']
});
}
protected filterQualifications(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
this.searchSubject.next(searchTerm);
} }
openCreateModal() { openCreateModal() {
@ -100,7 +144,7 @@ export class QualificationsComponent implements OnInit {
} }
openDetailsModal(qualification: Qualification) { openDetailsModal(qualification: Qualification) {
const dialogRef = this.dialog.open(DetailsComponent, { this.dialog.open(DetailsComponent, {
data: qualification data: qualification
}); });
} }