change file structure

Reviewed-on: #21
Reviewed-by: Get in my car i have candy <huydw@proton.me>

src/app/employee/table/table.component.ts

@@ -0,0 +1,79 @@
+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";
+
+@Component({
+  selector: 'app-employee-list',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatSnackBarModule,
+    MatDividerModule,
+    MatTooltipModule,
+    MatMenuModule,
+    MatTableModule,
+    MatSortModule
+  ],
+  templateUrl: './table.component.html',
+  host: {
+    class: 'block w-full p-6'
+  },
+  styleUrl: './table.component.css'
+})
+export class TableComponent implements OnInit{
+  private readonly apiService: EmployeeApiService = inject(EmployeeApiService);
+  private readonly snackBar: MatSnackBar = inject(MatSnackBar);
+  private readonly deleteDialogue: 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.deleteDialogue.open(DeleteComponent, {data: employee});
+  }
+}