add functionality to delete employee button (#11)

Reviewed-on: #11
Reviewed-by: Hernd Beidemann <huydw@proton.me>

src/app/delete-employee/delete-employee.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/delete-employee/delete-employee.component.ts

@@ -0,0 +1,34 @@
+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-employee.component.html',
+  standalone: true,
+  styleUrl: './delete-employee.component.css'
+})
+export class DeleteEmployeeComponent {
+  private apiService: EmployeeApiService = inject(EmployeeApiService);
+
+  protected employee: Employee = inject(MAT_DIALOG_DATA);
+
+  deleteEmployee(id: number) {
+    this.apiService.deleteById(id).subscribe();
+  }
+}

src/app/employee-list/employee-list.component.html

@@ -37,7 +37,7 @@
                   <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'">
+                  <button mat-icon-button color="warn" [matTooltip]="'Delete employee'" (click)="openDeleteDialogue(employee)">
                     <mat-icon>delete</mat-icon>
                   </button>
                 </td>

src/app/employee-list/employee-list.component.ts

@@ -1,19 +1,22 @@
-import { Component } from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {CommonModule} from '@angular/common';
-import { Observable, catchError, of, retry } from 'rxjs';
+import {catchError, Observable, of, retry} from 'rxjs';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import {HttpErrorResponse} from '@angular/common/http';
-import { Employee } from '../Employee';
+import {Employee} from '../Employee';
 
-import { MatCardModule } from '@angular/material/card';
+import {MatCardModule} from '@angular/material/card';
-import { MatButtonModule } from '@angular/material/button';
+import {MatButtonModule} from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
+import {MatIconModule} from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
-import { MatDividerModule } from '@angular/material/divider';
+import {MatDividerModule} from '@angular/material/divider';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
-import { MatMenuModule } from '@angular/material/menu';
+import {MatMenuModule} from '@angular/material/menu';
-import { MatTableModule } from '@angular/material/table';
+import {MatTableModule} from '@angular/material/table';
-import { MatSortModule } from '@angular/material/sort';
+import {MatSortModule} from '@angular/material/sort';
+import {MatDialog} from "@angular/material/dialog";
+import {DeleteEmployeeComponent} from "../delete-employee/delete-employee.component";
+import EmployeeApiService from "../services/employee-api.service";
 
 @Component({
   selector: 'app-employee-list',
@@ -37,23 +40,21 @@ import { MatSortModule } from '@angular/material/sort';
   },
   styleUrl: './employee-list.component.css'
 })
-export class EmployeeListComponent {
+export class EmployeeListComponent implements OnInit{
-  private static readonly EMPLOYEES_ENDPOINT = 'http://localhost:8089/employees';
+  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[]>;
+  public employees$: Observable<Employee[]> = of([]);
   public readonly displayedColumns: string[] = ['name', 'actions'];
 
-  constructor(
+  public ngOnInit(): void {
-    private readonly httpClient: HttpClient,
-    private readonly snackBar: MatSnackBar
-  ) {
     this.employees$ = this.fetchEmployees();
   }
 
   private fetchEmployees(): Observable<Employee[]> {
-    return this.httpClient.get<Employee[]>(
+    return this.apiService.getAll().pipe(
-      EmployeeListComponent.EMPLOYEES_ENDPOINT,
-    ).pipe(
       retry(EmployeeListComponent.MAX_RETRIES),
       catchError((error: HttpErrorResponse) => {
         console.error('Error fetching employees:', error);
@@ -71,4 +72,8 @@ export class EmployeeListComponent {
       panelClass: ['!bg-red-50', '!text-red-900', '!border', '!border-red-100']
     });
   }
+
+  protected openDeleteDialogue(employee: Employee): void {
+    this.deleteDialogue.open(DeleteEmployeeComponent, {data: employee});
+  }
 }

src/app/services/auth.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { AuthService } from './auth.service';
-
-describe('AuthService', () => {
-  let service: AuthService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(AuthService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/services/employee-api.service.ts

@@ -0,0 +1,22 @@
+import {inject, Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {Employee} from "../Employee";
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export default class EmployeeApiService {
+  private http: HttpClient = inject(HttpClient);
+
+  private static readonly BASE_URL = 'http://localhost:8089';
+
+  public deleteById(id: number): Observable<Employee> {
+    return this.http.delete(`${EmployeeApiService.BASE_URL}/employees/${id}`)
+  }
+
+  public getAll(): Observable<Employee[]> {
+    return this.http.get<Employee[]>(`${EmployeeApiService.BASE_URL}/employees`)
+  }
+}