From 0eb4fe419b3fa5c37b4a6ad02294dc3fe742c749 Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Wed, 18 Dec 2024 13:02:46 +0000 Subject: [PATCH] add functionality to delete employee button (#11) Reviewed-on: https://git.simonis.lol/angular/ems-frontend/pulls/11 Reviewed-by: Hernd Beidemann --- .../delete-employee.component.css | 0 .../delete-employee.component.html | 6 ++ .../delete-employee.component.ts | 34 ++++++++++++ .../employee-list.component.html | 2 +- .../employee-list/employee-list.component.ts | 55 ++++++++++--------- src/app/services/auth.service.spec.ts | 16 ------ src/app/services/employee-api.service.ts | 22 ++++++++ 7 files changed, 93 insertions(+), 42 deletions(-) create mode 100644 src/app/delete-employee/delete-employee.component.css create mode 100644 src/app/delete-employee/delete-employee.component.html create mode 100644 src/app/delete-employee/delete-employee.component.ts delete mode 100644 src/app/services/auth.service.spec.ts create mode 100644 src/app/services/employee-api.service.ts diff --git a/src/app/delete-employee/delete-employee.component.css b/src/app/delete-employee/delete-employee.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/delete-employee/delete-employee.component.html b/src/app/delete-employee/delete-employee.component.html new file mode 100644 index 0000000..f15bdb8 --- /dev/null +++ b/src/app/delete-employee/delete-employee.component.html @@ -0,0 +1,6 @@ +

Delete {{employee.firstName}} {{employee.lastName}}

+Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}? This cant be undone. + + + + diff --git a/src/app/delete-employee/delete-employee.component.ts b/src/app/delete-employee/delete-employee.component.ts new file mode 100644 index 0000000..26af39c --- /dev/null +++ b/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(); + } +} diff --git a/src/app/employee-list/employee-list.component.html b/src/app/employee-list/employee-list.component.html index ff1fa54..05c6beb 100644 --- a/src/app/employee-list/employee-list.component.html +++ b/src/app/employee-list/employee-list.component.html @@ -37,7 +37,7 @@ - diff --git a/src/app/employee-list/employee-list.component.ts b/src/app/employee-list/employee-list.component.ts index fa346a2..c2b5d4d 100644 --- a/src/app/employee-list/employee-list.component.ts +++ b/src/app/employee-list/employee-list.component.ts @@ -1,19 +1,22 @@ -import { Component } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { Observable, catchError, of, retry } from 'rxjs'; -import { HttpClient, HttpErrorResponse } from '@angular/common/http'; -import { Employee } from '../Employee'; +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 {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 {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 { - private static readonly EMPLOYEES_ENDPOINT = 'http://localhost:8089/employees'; +export class EmployeeListComponent 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; + public employees$: Observable = of([]); public readonly displayedColumns: string[] = ['name', 'actions']; - constructor( - private readonly httpClient: HttpClient, - private readonly snackBar: MatSnackBar - ) { + public ngOnInit(): void { this.employees$ = this.fetchEmployees(); } private fetchEmployees(): Observable { - return this.httpClient.get( - EmployeeListComponent.EMPLOYEES_ENDPOINT, - ).pipe( + return this.apiService.getAll().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}); + } } diff --git a/src/app/services/auth.service.spec.ts b/src/app/services/auth.service.spec.ts deleted file mode 100644 index f1251ca..0000000 --- a/src/app/services/auth.service.spec.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/src/app/services/employee-api.service.ts b/src/app/services/employee-api.service.ts new file mode 100644 index 0000000..c742de7 --- /dev/null +++ b/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 { + return this.http.delete(`${EmployeeApiService.BASE_URL}/employees/${id}`) + } + + public getAll(): Observable { + return this.http.get(`${EmployeeApiService.BASE_URL}/employees`) + } +}