99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
import {Component, inject, OnInit} from '@angular/core';
|
|
import {CommonModule} from '@angular/common';
|
|
import {catchError, Observable, of, retry} from 'rxjs';
|
|
import {HttpErrorResponse} from '@angular/common/http';
|
|
import {Employee} from '../Employee';
|
|
|
|
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 {MatDialog} from "@angular/material/dialog";
|
|
import {DeleteComponent} from "../delete/delete.component";
|
|
import EmployeeApiService from "../../services/employee-api.service";
|
|
import {CreateComponent} from "../create/create.component";
|
|
import {EditComponent} from "../edit/edit.component";
|
|
|
|
@Component({
|
|
selector: 'app-employee-list',
|
|
standalone: true,
|
|
imports: [
|
|
CommonModule,
|
|
MatCardModule,
|
|
MatButtonModule,
|
|
MatIconModule,
|
|
MatProgressSpinnerModule,
|
|
MatSnackBarModule,
|
|
MatDividerModule,
|
|
MatTooltipModule,
|
|
MatMenuModule,
|
|
MatTableModule,
|
|
MatSortModule
|
|
],
|
|
templateUrl: './table.component.html',
|
|
styleUrl: './table.component.css'
|
|
})
|
|
export class TableComponent implements OnInit{
|
|
private readonly apiService: EmployeeApiService = inject(EmployeeApiService);
|
|
private readonly snackBar: MatSnackBar = inject(MatSnackBar);
|
|
private readonly matDialog: MatDialog = inject(MatDialog);
|
|
|
|
private static readonly MAX_RETRIES = 3;
|
|
public employees$: Observable<Employee[]> = of([]);
|
|
public readonly displayedColumns: string[] = ['name', 'actions'];
|
|
|
|
public ngOnInit(): void {
|
|
this.employees$ = this.fetchEmployees();
|
|
}
|
|
|
|
private fetchEmployees(): Observable<Employee[]> {
|
|
return this.apiService.getAll().pipe(
|
|
retry(TableComponent.MAX_RETRIES),
|
|
catchError((error: HttpErrorResponse) => {
|
|
console.error('Error fetching employees:', error);
|
|
this.showErrorMessage('Failed to load employees. 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 openDeleteDialogue(employee: Employee): void {
|
|
this.matDialog.open(DeleteComponent, {data: employee})
|
|
.afterClosed()
|
|
.subscribe(() => {
|
|
this.employees$ = this.fetchEmployees();
|
|
});
|
|
}
|
|
|
|
protected showCreateEmployeeModal() {
|
|
this.matDialog.open(CreateComponent)
|
|
.afterClosed()
|
|
.subscribe(() => {
|
|
this.employees$ = this.fetchEmployees();
|
|
});
|
|
}
|
|
|
|
protected showEditEmployeeModal(employee: Employee) {
|
|
this.matDialog.open(EditComponent, {data: employee})
|
|
.afterClosed()
|
|
.subscribe(() => {
|
|
this.employees$ = this.fetchEmployees();
|
|
});
|
|
}
|
|
}
|