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

refactor: improve qualifications component structure and error handling

Browse Source
This commit is contained in:
Hop In, I Have Puppies AND WiFi 2025-01-22 09:02:55 +01:00
parent 44cf3de5a0
commit cc051bcb34
Signed by: jleibl
GPG Key ID: E7B6F77BF5EDB6F7
2 changed files with 353 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,68 +1,84 @@
<section class="!space-y-6 mb-6">
<section class="space-y-6 mb-6">
@defer {
@if (error$ | async; as error) {
<div class="bg-red-50 p-4 rounded-lg border border-red-200">
<div class="flex items-start gap-3">
<mat-icon class="text-red-600 text-2xl w-8 h-8">error</mat-icon>
<div>
<p class="text-gray-800 font-medium">{{ error }}</p>
<p class="text-gray-600 mt-1 text-sm">Please try refreshing the page.</p>
</div>
</div>
</div>
} @else {
@if (qualifications$ | async; as qualifications) {
<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">Qualifications</h2>
<mat-form-field class="!m-0" subscriptSizing="dynamic">
<mat-icon matPrefix class="!text-gray-400 !mr-2">search</mat-icon>
<div class="space-y-6">
<header class="flex justify-between items-center">
<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>
(input)="onSearch($event)">
<div matSuffix class="w-[24px] h-[24px] ml-2 flex items-center justify-center">
@if (isSearching$ | async) {
<mat-progress-spinner
[diameter]="20"
mode="indeterminate"
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>
<button mat-flat-button
color="primary"
class="!bg-blue-600 text-white shrink-0"
(click)="createQualification()">
<mat-icon class="mr-2">add</mat-icon>
Add Qualification
</button>
</div>
</header>
@if (qualifications) {
<div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
<table mat-table [dataSource]="qualifications" matSort class="!w-full">
@if (qualifications.length) {
<div class="overflow-x-auto rounded-lg bg-gray-50 p-4">
<table mat-table [dataSource]="qualifications" matSort class="w-full">
<ng-container matColumnDef="skill">
<th mat-header-cell *matHeaderCellDef class="!text-left !w-full">Skill</th>
<td mat-cell *matCellDef="let qualification" 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">
<th mat-header-cell *matHeaderCellDef class="text-left w-full">Skill</th>
<td mat-cell *matCellDef="let qualification" 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">
{{ qualification.skill[0]?.toUpperCase() }}
</span>
</div>
<div>
<a class="!text-blue-600 hover:!underline cursor-pointer"
[matTooltip]="'Click to view qualification details'"
(click)="openDetailsModal(qualification)">
<button class="text-blue-600 hover:underline"
[matTooltip]="'View qualification details'"
(click)="viewQualificationDetails(qualification)">
{{ qualification.skill }}
</a>
</button>
</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 qualification" class="!text-right !py-4 !whitespace-nowrap">
<div class="!flex !justify-end !items-center !gap-1">
<th mat-header-cell *matHeaderCellDef class="text-right w-[120px]">Actions</th>
<td mat-cell *matCellDef="let qualification" class="text-right py-4 whitespace-nowrap">
<div class="flex justify-end items-center gap-1">
<button mat-icon-button
color="primary"
[matTooltip]="'Edit qualification'"
(click)="openEditModal(qualification)">
(click)="editQualification(qualification)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button
color="warn"
[matTooltip]="'Delete qualification'"
(click)="openDeleteModal(qualification.id)">
(click)="deleteQualification(qualification.id)">
<mat-icon>delete</mat-icon>
</button>
</div>
@ -70,49 +86,42 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
} @else {
<mat-card class="!text-center !py-8">
<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-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>
}
}
} @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 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>
<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 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 qualifications.</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>
@if (isLoading$ | async) {
<div class="flex justify-center items-center py-12">
<mat-spinner diameter="48" class="text-blue-600"></mat-spinner>
</div>
}
}
</section>

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

@ -1,26 +1,188 @@
import {Component, inject, OnInit} from '@angular/core';
import { Component, inject, OnDestroy, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import {catchError, debounceTime, distinctUntilChanged, filter, map, Observable, of, retry, Subject} from 'rxjs';
import {
BehaviorSubject,
catchError,
combineLatest,
debounceTime,
distinctUntilChanged,
map,
Observable,
of,
retry,
Subject,
takeUntil,
startWith
} 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 { ComponentType } from '@angular/cdk/portal';
import { Qualification } from '../Qualification';
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 { DetailsComponent } from '../details/details.component';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig, MatSnackBarModule } from '@angular/material/snack-bar';
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 { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
class SearchEngine {
static readonly DEBOUNCE_TIME = 300;
constructor(
private readonly items: Qualification[],
private readonly searchTerm: string
) {}
execute(): Qualification[] {
if (!this.searchTerm?.trim()) {
return this.items;
}
const normalizedTerm = this.searchTerm.toLowerCase().trim();
return this.items.filter(item =>
item.skill?.toLowerCase().includes(normalizedTerm)
);
}
}
class ErrorHandler {
private readonly config: MatSnackBarConfig = {
duration: 5000,
horizontalPosition: 'end',
verticalPosition: 'bottom',
panelClass: ['error-snackbar']
};
constructor(private readonly snackBar: MatSnackBar) {}
handleHttpError(error: HttpErrorResponse): Observable<never[]> {
console.error('API Error:', error);
this.showError('Failed to load qualifications. Please try again.');
return of([]);
}
showError(message: string): void {
this.snackBar.open(message, 'Close', this.config);
}
}
class DialogManager {
constructor(
private readonly dialog: MatDialog,
private readonly errorHandler: ErrorHandler
) {}
openDialog<T>(
component: ComponentType<any>,
data?: T
): MatDialogRef<any, boolean> {
return this.dialog.open(component, { data });
}
}
interface QualificationState {
items: Qualification[];
filteredItems: Qualification[];
searchTerm: string;
isLoading: boolean;
isSearching: boolean;
error: string | null;
}
class QualificationStore {
private readonly initialState: QualificationState = {
items: [],
filteredItems: [],
searchTerm: '',
isLoading: false,
isSearching: false,
error: null
};
private readonly state = new BehaviorSubject<QualificationState>(this.initialState);
private readonly searchTerm$ = new Subject<string>();
readonly items$ = this.state.pipe(map(state => state.filteredItems));
readonly isLoading$ = this.state.pipe(map(state => state.isLoading));
readonly isSearching$ = this.state.pipe(map(state => state.isSearching));
readonly error$ = this.state.pipe(map(state => state.error));
constructor(
private readonly api: QualificationService,
private readonly errorHandler: ErrorHandler
) {
this.setupSearch();
}
private setupSearch(): void {
this.searchTerm$.pipe(
startWith(''),
debounceTime(SearchEngine.DEBOUNCE_TIME),
distinctUntilChanged()
).subscribe(term => {
this.state.next({
...this.state.value,
isSearching: true,
searchTerm: term
});
const currentState = this.state.value;
const engine = new SearchEngine(currentState.items, term);
const filteredItems = engine.execute();
setTimeout(() => {
this.state.next({
...currentState,
searchTerm: term,
filteredItems,
isSearching: false
});
}, 150);
});
}
load(): void {
this.setLoading(true);
this.api.getAll().pipe(
retry(3),
catchError(error => this.errorHandler.handleHttpError(error))
).subscribe(items => {
const engine = new SearchEngine(items, this.state.value.searchTerm);
this.state.next({
...this.state.value,
items,
filteredItems: engine.execute(),
isLoading: false,
error: null
});
});
}
search(term: string): void {
this.searchTerm$.next(term);
}
private setLoading(isLoading: boolean): void {
this.state.next({ ...this.state.value, isLoading });
}
complete(): void {
this.state.complete();
this.searchTerm$.complete();
}
}
@Component({
selector: 'app-qualifications',
@ -38,114 +200,73 @@ import {DetailsComponent} from "../details/details.component";
MatTableModule,
MatSortModule,
MatFormFieldModule,
MatInputModule,
MatInputModule
],
templateUrl: './table.component.html',
styleUrl: './table.component.css'
})
export class QualificationsComponent implements OnInit {
private readonly qualificationService: QualificationService = inject(QualificationService);
private readonly snackBar: MatSnackBar = inject(MatSnackBar);
private readonly dialog: MatDialog = inject(MatDialog);
export class QualificationsComponent implements OnInit, OnDestroy {
private readonly errorHandler = new ErrorHandler(inject(MatSnackBar));
private readonly dialogManager = new DialogManager(
inject(MatDialog),
this.errorHandler
);
private readonly store = new QualificationStore(
inject(QualificationService),
this.errorHandler
);
private static readonly MAX_RETRIES = 3;
private readonly destroy$ = new Subject<void>();
private allQualifications: Qualification[] = [];
private searchSubject = new Subject<string>();
public qualifications$: Observable<Qualification[]> = of([]);
public isSearching = false;
public readonly displayedColumns: string[] = ['skill', 'actions'];
protected readonly qualifications$ = this.store.items$;
protected readonly isLoading$ = this.store.isLoading$;
protected readonly isSearching$ = this.store.isSearching$;
protected readonly error$ = this.store.error$;
protected readonly displayedColumns = ['skill', 'actions'] as const;
ngOnInit() {
ngOnInit(): void {
this.loadQualifications();
this.setupSearch();
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
this.store.complete();
}
protected onSearch(event: Event): void {
const searchInput = event.target as HTMLInputElement;
this.store.search(searchInput.value);
}
protected createQualification(): void {
this.openModalAndReload(CreateComponent);
}
protected editQualification(qualification: Qualification): void {
this.openModalAndReload(EditComponent, qualification);
}
protected deleteQualification(id: number): void {
this.openModalAndReload(DeleteComponent, id);
}
protected viewQualificationDetails(qualification: Qualification): void {
this.dialogManager.openDialog(DetailsComponent, qualification);
}
private loadQualifications(): void {
this.fetchQualifications().subscribe(qualifications => {
this.allQualifications = qualifications;
this.qualifications$ = of(qualifications);
});
this.store.load();
}
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() {
const dialogRef = this.dialog.open(CreateComponent);
dialogRef.afterClosed().subscribe((success: boolean) => {
if (success) {
private openModalAndReload<T>(component: ComponentType<any>, data?: T): void {
const dialogRef = this.dialogManager.openDialog(component, data);
dialogRef.afterClosed()
.pipe(takeUntil(this.destroy$))
.subscribe(success => {
if (success === true) {
this.loadQualifications();
}
});
}
openEditModal(qualification: Qualification) {
const dialogRef = this.dialog.open(EditComponent, {
data: qualification
});
dialogRef.afterClosed().subscribe((success: boolean) => {
if (success) {
this.loadQualifications();
}
});
}
openDeleteModal(id: number) {
const dialogRef = this.dialog.open(DeleteComponent, {
data: id
});
dialogRef.afterClosed().subscribe((success: boolean) => {
if (success) {
this.loadQualifications();
}
});
}
openDetailsModal(qualification: Qualification) {
this.dialog.open(DetailsComponent, {
data: qualification
});
}
}