change file structure

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

src/app/employee/Employee.ts

@@ -0,0 +1,10 @@
+export class Employee {
+  constructor(public id?: number,
+              public lastName?: string,
+              public firstName?: string,
+              public street?: string,
+              public postcode?: string,
+              public city?: string,
+              public phone?: string) {
+  }
+}

src/app/employee/delete/delete.component.html

@@ -0,0 +1,6 @@
+<h2 mat-dialog-title>Delete {{employee.firstName}} {{employee.lastName}}</h2>
+<mat-dialog-content>Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}? This cant be undone.</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button [mat-dialog-close]="true" (click)="deleteEmployee(employee.id ?? 0)">Delete</button>
+</mat-dialog-actions>

src/app/employee/delete/delete.component.ts

@@ -0,0 +1,36 @@
+import {Component, Inject, inject} from '@angular/core';
+import {Employee} from "../Employee";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import {MatButton} from "@angular/material/button";
+import EmployeeApiService from "../../services/employee-api.service";
+
+@Component({
+  selector: 'app-delete-employee',
+  imports: [
+    MatDialogContent,
+    MatDialogTitle,
+    MatDialogActions,
+    MatButton,
+    MatDialogClose
+  ],
+  templateUrl: './delete.component.html',
+  standalone: true,
+  styleUrl: './delete.component.css'
+})
+export class DeleteComponent {
+  private apiService: EmployeeApiService = inject(EmployeeApiService);
+
+  protected employee: Employee = inject(MAT_DIALOG_DATA);
+
+  deleteEmployee(id: number) {
+    this.apiService.deleteById(id).subscribe();
+
+    location.reload();
+  }
+}

src/app/employee/table/table.component.css

@@ -0,0 +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;
+      }
+    }
+  }
+}

src/app/employee/table/table.component.html

@@ -0,0 +1,94 @@
+<section class="!space-y-6">
+  @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">
+            <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"> 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>
+                      <div class="!font-medium !text-gray-900">
+                        {{employee.lastName}}, {{employee.firstName}}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="actions">
+                <th mat-header-cell *matHeaderCellDef class="!text-right"> Actions </th>
+                <td mat-cell *matCellDef="let employee" class="!text-right !py-4">
+                  <button mat-icon-button color="primary" [matTooltip]="'Edit employee'" class="!mr-2">
+                    <mat-icon>edit</mat-icon>
+                  </button>
+                  <button mat-icon-button color="warn" [matTooltip]="'Delete employee'" (click)="openDeleteDialogue(employee)">
+                    🗑️
+                  </button>
+                </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-12 !h-12 !text-gray-400 !mb-4">people_outline</mat-icon>
+              <p class="!text-gray-600">No employees 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>
+        <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 {
+    <mat-card class="!bg-red-50 !border !border-red-100">
+      <mat-card-content class="!p-4">
+        <div class="!flex !items-center !gap-4 !text-red-800">
+          <mat-icon class="!text-red-500">error_outline</mat-icon>
+          <div>
+            <h3 class="!font-medium !mb-1">Error loading employees</h3>
+            <p class="!text-sm !text-red-700">Please try refreshing the page.</p>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  } @loading (minimum 500ms) {
+    <div class="!flex !justify-center !items-center !py-12">
+      <mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
+    </div>
+  }
+</section>

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});
+  }
+}