style(table): format HTML and CSS for employee table
This commit is contained in:
parent
7b88bc090a
commit
407a386bd0
GPG Key ID:
E7B6F77BF5EDB6F7
@ -1,73 +1,73 @@
|
||||
:host ::ng-deep {
|
||||
.mat-mdc-card {
|
||||
--mdc-elevated-card-container-color: transparent;
|
||||
@apply !shadow-none !rounded-xl;
|
||||
}
|
||||
|
||||
.mat-mdc-button-base {
|
||||
--mat-mdc-button-persistent-ripple-color: currentColor;
|
||||
@apply !rounded-lg;
|
||||
}
|
||||
|
||||
.mat-mdc-progress-spinner {
|
||||
--mdc-circular-progress-active-indicator-color: #2563eb;
|
||||
}
|
||||
|
||||
.mdc-data-table__header-cell {
|
||||
@apply !text-gray-600 !font-semibold !text-sm !py-4 !px-6;
|
||||
}
|
||||
|
||||
.mat-mdc-table {
|
||||
@apply !bg-transparent !border-separate !border-spacing-y-2;
|
||||
|
||||
.mat-mdc-row {
|
||||
@apply !bg-white !rounded-xl !shadow-sm !transition-all !duration-200;
|
||||
|
||||
&:hover {
|
||||
@apply !bg-gray-50 !shadow-md !transform !scale-[1.01];
|
||||
}
|
||||
|
||||
.mat-mdc-cell {
|
||||
@apply !border-b-0 !py-4 !px-6 first:!rounded-l-xl last:!rounded-r-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-header-row {
|
||||
@apply !bg-transparent;
|
||||
|
||||
.mat-mdc-header-cell {
|
||||
@apply !border-b-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-menu-panel {
|
||||
@apply !rounded-xl !shadow-lg;
|
||||
}
|
||||
|
||||
.mat-mdc-menu-item {
|
||||
@apply !rounded-lg !mx-1 !my-0.5;
|
||||
}
|
||||
|
||||
.mdc-button {
|
||||
@apply !font-medium;
|
||||
|
||||
&.mat-primary {
|
||||
@apply !bg-blue-600 !text-white hover:!bg-blue-700;
|
||||
}
|
||||
|
||||
&.mat-warn {
|
||||
@apply !bg-red-600 !text-white hover:!bg-red-700;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-snack-bar-container {
|
||||
&.error-snackbar {
|
||||
@apply !rounded-xl;
|
||||
|
||||
.mdc-snackbar__surface {
|
||||
@apply !bg-red-50 !text-red-900 !border !border-red-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:host ::ng-deep {
|
||||
.mat-mdc-card {
|
||||
--mdc-elevated-card-container-color: transparent;
|
||||
@apply !shadow-none !rounded-xl;
|
||||
}
|
||||
|
||||
.mat-mdc-button-base {
|
||||
--mat-mdc-button-persistent-ripple-color: currentColor;
|
||||
@apply !rounded-lg;
|
||||
}
|
||||
|
||||
.mat-mdc-progress-spinner {
|
||||
--mdc-circular-progress-active-indicator-color: #2563eb;
|
||||
}
|
||||
|
||||
.mdc-data-table__header-cell {
|
||||
@apply !text-gray-600 !font-semibold !text-sm !py-4 !px-6;
|
||||
}
|
||||
|
||||
.mat-mdc-table {
|
||||
@apply !bg-transparent !border-separate !border-spacing-y-2;
|
||||
|
||||
.mat-mdc-row {
|
||||
@apply !bg-white !rounded-xl !shadow-sm !transition-all !duration-200;
|
||||
|
||||
&:hover {
|
||||
@apply !bg-gray-50 !shadow-md !transform !scale-[1.01];
|
||||
}
|
||||
|
||||
.mat-mdc-cell {
|
||||
@apply !border-b-0 !py-4 !px-6 first:!rounded-l-xl last:!rounded-r-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-header-row {
|
||||
@apply !bg-transparent;
|
||||
|
||||
.mat-mdc-header-cell {
|
||||
@apply !border-b-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-menu-panel {
|
||||
@apply !rounded-xl !shadow-lg;
|
||||
}
|
||||
|
||||
.mat-mdc-menu-item {
|
||||
@apply !rounded-lg !mx-1 !my-0.5;
|
||||
}
|
||||
|
||||
.mdc-button {
|
||||
@apply !font-medium;
|
||||
|
||||
&.mat-primary {
|
||||
@apply !bg-blue-600 !text-white hover:!bg-blue-700;
|
||||
}
|
||||
|
||||
&.mat-warn {
|
||||
@apply !bg-red-600 !text-white hover:!bg-red-700;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-snack-bar-container {
|
||||
&.error-snackbar {
|
||||
@apply !rounded-xl;
|
||||
|
||||
.mdc-snackbar__surface {
|
||||
@apply !bg-red-50 !text-red-900 !border !border-red-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,109 +1,113 @@
|
||||
<section class="!space-y-6 mb-6">
|
||||
<mat-form-field>
|
||||
<input matInput
|
||||
placeholder="Search employees"
|
||||
class="!rounded-lg !bg-gray-50 !p-2 !text-gray-800"
|
||||
(input)="filterEmployees($event)">
|
||||
</mat-form-field>
|
||||
@defer {
|
||||
@if (employees$ | async; as employees) {
|
||||
<div class="!space-y-6">
|
||||
<div class="!flex !justify-between !items-center">
|
||||
<h2 class="!text-2xl !font-semibold !text-gray-900">Employee Directory</h2>
|
||||
<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>
|
||||
|
||||
@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>
|
||||
@if (employees$ | async; as employees) {
|
||||
<div class="!space-y-6">
|
||||
<div class="!flex !justify-between !items-center">
|
||||
<div class="!flex !items-center !gap-4">
|
||||
<h2 class="!text-2xl !font-semibold !text-gray-900 !shrink-0">Employee Directory</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 employees..."
|
||||
(keyup)="filterEmployees($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>
|
||||
} @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>
|
||||
}
|
||||
</mat-form-field>
|
||||
</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 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>
|
||||
</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>
|
||||
@ -1,6 +1,6 @@
|
||||
import {Component, inject, OnInit} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {catchError, filter, map, Observable, of, retry} from 'rxjs';
|
||||
import {catchError, debounceTime, distinctUntilChanged, filter, map, Observable, of, retry, Subject} from 'rxjs';
|
||||
import {HttpErrorResponse} from '@angular/common/http';
|
||||
import {Employee} from '../Employee';
|
||||
|
||||
@ -20,7 +20,8 @@ import EmployeeApiService from "../../services/employee-api.service";
|
||||
import {CreateComponent} from "../create/create.component";
|
||||
import {EditComponent} from "../edit/edit.component";
|
||||
import {DetailsComponent} from "../details/details.component";
|
||||
import {MatFormField, MatInput} from "@angular/material/input";
|
||||
import {MatFormFieldModule} from "@angular/material/form-field";
|
||||
import {MatInputModule} from "@angular/material/input";
|
||||
import {Qualification} from "../../qualification/Qualification";
|
||||
|
||||
@Component({
|
||||
@ -38,8 +39,8 @@ import {Qualification} from "../../qualification/Qualification";
|
||||
MatMenuModule,
|
||||
MatTableModule,
|
||||
MatSortModule,
|
||||
MatInput,
|
||||
MatFormField
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
],
|
||||
templateUrl: './table.component.html',
|
||||
styleUrl: './table.component.css'
|
||||
@ -50,11 +51,40 @@ export class TableComponent implements OnInit {
|
||||
private readonly matDialog: MatDialog = inject(MatDialog);
|
||||
|
||||
private static readonly MAX_RETRIES = 3;
|
||||
|
||||
private allEmployees: Employee[] = [];
|
||||
private searchSubject = new Subject<string>();
|
||||
public employees$: Observable<Employee[]> = of([]);
|
||||
public isSearching = false;
|
||||
public readonly displayedColumns: string[] = ['name', 'actions'];
|
||||
|
||||
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[]> {
|
||||
@ -111,21 +141,8 @@ export class TableComponent implements OnInit {
|
||||
this.matDialog.open(DetailsComponent, {data: employee});
|
||||
}
|
||||
|
||||
filterEmployees($event: Event) {
|
||||
const input = $event.target as HTMLInputElement;
|
||||
const filterValue = input.value.trim().toLowerCase();
|
||||
|
||||
this.employees$ = this.employees$.pipe(
|
||||
map((employees: Employee[]) => employees.filter((employee: Employee) => {
|
||||
const filterValue = input.value.trim().toLowerCase();
|
||||
return employee.firstName?.toLowerCase().includes(filterValue)
|
||||
|| employee.lastName?.toLowerCase().includes(filterValue)
|
||||
|| employee.street?.toLowerCase().includes(filterValue)
|
||||
|| employee.phone?.toLowerCase().includes(filterValue)
|
||||
|| employee.postcode?.toString().toLowerCase().includes(filterValue)
|
||||
|| employee.city?.toString().toLowerCase().includes(filterValue)
|
||||
|| employee.skillSet?.some((skill: Qualification) => skill.skill?.toLowerCase().includes(filterValue));
|
||||
}))
|
||||
);
|
||||
protected filterEmployees(event: Event): void {
|
||||
const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
|
||||
this.searchSubject.next(searchTerm);
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,7 +22,6 @@ import {MatIcon} from "@angular/material/icon";
|
||||
ReactiveFormsModule,
|
||||
MatDialogActions,
|
||||
MatButton,
|
||||
MatError,
|
||||
MatIcon
|
||||
],
|
||||
templateUrl: './delete.component.html',
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,68 +1,112 @@
|
||||
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 {MatDialog} from "@angular/material/dialog";
|
||||
import QualificationService from "../../services/qualification.service";
|
||||
import {CreateComponent} from "../create/create.component";
|
||||
import {EditComponent} from "../edit/edit.component";
|
||||
import {DeleteComponent} from "../delete/delete.component";
|
||||
import {AsyncPipe} from "@angular/common";
|
||||
import {MatButton, MatIconButton} from "@angular/material/button";
|
||||
import {
|
||||
MatCell,
|
||||
MatCellDef,
|
||||
MatColumnDef,
|
||||
MatHeaderCell,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
|
||||
MatTable
|
||||
} from "@angular/material/table";
|
||||
import {MatIcon} from "@angular/material/icon";
|
||||
import {MatCard, MatCardContent} from "@angular/material/card";
|
||||
import {MatTooltip} from "@angular/material/tooltip";
|
||||
import {MatProgressSpinner} from "@angular/material/progress-spinner";
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
|
||||
import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
|
||||
import {MatDividerModule} from '@angular/material/divider';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {MatMenuModule} from '@angular/material/menu';
|
||||
import {MatTableModule} from '@angular/material/table';
|
||||
import {MatSortModule} from '@angular/material/sort';
|
||||
import {MatFormFieldModule} from "@angular/material/form-field";
|
||||
import {MatInputModule} from "@angular/material/input";
|
||||
import {DetailsComponent} from "../details/details.component";
|
||||
import {MatSort} from "@angular/material/sort";
|
||||
|
||||
@Component({
|
||||
selector: 'app-qualifications',
|
||||
standalone: true,
|
||||
imports: [
|
||||
AsyncPipe,
|
||||
MatButton,
|
||||
MatTable,
|
||||
MatColumnDef,
|
||||
MatHeaderCell,
|
||||
MatCell,
|
||||
MatHeaderCellDef,
|
||||
MatCellDef,
|
||||
MatIconButton,
|
||||
MatIcon,
|
||||
MatHeaderRow,
|
||||
MatRow,
|
||||
MatHeaderRowDef,
|
||||
MatRowDef,
|
||||
MatCard,
|
||||
MatCardContent,
|
||||
MatTooltip,
|
||||
MatProgressSpinner,
|
||||
MatSort
|
||||
CommonModule,
|
||||
MatCardModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatSnackBarModule,
|
||||
MatDividerModule,
|
||||
MatTooltipModule,
|
||||
MatMenuModule,
|
||||
MatTableModule,
|
||||
MatSortModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
],
|
||||
templateUrl: './table.component.html',
|
||||
styleUrl: './table.component.css'
|
||||
})
|
||||
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 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() {
|
||||
this.loadQualifications();
|
||||
this.setupSearch();
|
||||
}
|
||||
|
||||
private loadQualifications() {
|
||||
this.qualifications$ = this.qualificationService.getAll();
|
||||
private loadQualifications(): void {
|
||||
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() {
|
||||
@ -100,7 +144,7 @@ export class QualificationsComponent implements OnInit {
|
||||
}
|
||||
|
||||
openDetailsModal(qualification: Qualification) {
|
||||
const dialogRef = this.dialog.open(DetailsComponent, {
|
||||
this.dialog.open(DetailsComponent, {
|
||||
data: qualification
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user