From 1a259ae5ee84f70af569bf322ad5c4fc3f4cad0d Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Wed, 18 Dec 2024 13:47:58 +0100 Subject: [PATCH 1/8] add delete functionality --- .../delete-employee.component.css | 0 .../delete-employee.component.html | 6 +++ .../delete-employee.component.ts | 38 ++++++++++++++++++ .../employee-list.component.html | 2 +- .../employee-list/employee-list.component.ts | 39 +++++++++++-------- src/app/services/api.service.ts | 16 ++++++++ 6 files changed, 84 insertions(+), 17 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 create mode 100644 src/app/services/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..87b09c3 --- /dev/null +++ b/src/app/delete-employee/delete-employee.component.ts @@ -0,0 +1,38 @@ +import {Component, EventEmitter, Inject, inject, Output} 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 ApiService from "../services/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: ApiService = inject(ApiService); + + @Output() + private deleteEvent: EventEmitter = new EventEmitter(); + + constructor(@Inject(MAT_DIALOG_DATA) protected employee: Employee) { + } + + 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..7d10d69 100644 --- a/src/app/employee-list/employee-list.component.ts +++ b/src/app/employee-list/employee-list.component.ts @@ -1,19 +1,21 @@ -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} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {catchError, Observable, of, retry} from 'rxjs'; +import {HttpClient, 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"; @Component({ selector: 'app-employee-list', @@ -45,7 +47,8 @@ export class EmployeeListComponent { constructor( private readonly httpClient: HttpClient, - private readonly snackBar: MatSnackBar + private readonly snackBar: MatSnackBar, + private readonly deleteDialogue: MatDialog ) { this.employees$ = this.fetchEmployees(); } @@ -71,4 +74,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/api.service.ts b/src/app/services/api.service.ts new file mode 100644 index 0000000..55576f9 --- /dev/null +++ b/src/app/services/api.service.ts @@ -0,0 +1,16 @@ +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 ApiService { + private http: HttpClient = inject(HttpClient); + + public deleteById(id: number): Observable { + return this.http.delete(`http://localhost:8089/employees/${id}`) + } +} -- 2.47.2 From 8b871d2e348723802cdfcff6a4506240c0d1f14e Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Wed, 18 Dec 2024 13:50:27 +0100 Subject: [PATCH 2/8] refactor --- src/app/delete-employee/delete-employee.component.ts | 4 ++-- .../services/{api.service.ts => employee-api.service.ts} | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) rename src/app/services/{api.service.ts => employee-api.service.ts} (63%) diff --git a/src/app/delete-employee/delete-employee.component.ts b/src/app/delete-employee/delete-employee.component.ts index 87b09c3..8c03539 100644 --- a/src/app/delete-employee/delete-employee.component.ts +++ b/src/app/delete-employee/delete-employee.component.ts @@ -8,7 +8,7 @@ import { MatDialogTitle } from "@angular/material/dialog"; import {MatButton} from "@angular/material/button"; -import ApiService from "../services/api.service"; +import EmployeeApiService from "../services/employee-api.service"; @Component({ selector: 'app-delete-employee', @@ -24,7 +24,7 @@ import ApiService from "../services/api.service"; styleUrl: './delete-employee.component.css' }) export class DeleteEmployeeComponent { - private apiService: ApiService = inject(ApiService); + private apiService: EmployeeApiService = inject(EmployeeApiService); @Output() private deleteEvent: EventEmitter = new EventEmitter(); diff --git a/src/app/services/api.service.ts b/src/app/services/employee-api.service.ts similarity index 63% rename from src/app/services/api.service.ts rename to src/app/services/employee-api.service.ts index 55576f9..68f0455 100644 --- a/src/app/services/api.service.ts +++ b/src/app/services/employee-api.service.ts @@ -7,10 +7,12 @@ import {Employee} from "../Employee"; @Injectable({ providedIn: 'root' }) -export default class ApiService { +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(`http://localhost:8089/employees/${id}`) + return this.http.delete(`${EmployeeApiService.BASE_URL}/employees/${id}`) } } -- 2.47.2 From 49716901e51426d958637c82a1be0f8a2e890a9c Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Wed, 18 Dec 2024 13:53:14 +0100 Subject: [PATCH 3/8] refactor --- .../employee-list/employee-list.component.ts | 20 +++++++++---------- src/app/services/employee-api.service.ts | 4 ++++ 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/app/employee-list/employee-list.component.ts b/src/app/employee-list/employee-list.component.ts index 7d10d69..87616c8 100644 --- a/src/app/employee-list/employee-list.component.ts +++ b/src/app/employee-list/employee-list.component.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {CommonModule} from '@angular/common'; import {catchError, Observable, of, retry} from 'rxjs'; import {HttpClient, HttpErrorResponse} from '@angular/common/http'; @@ -16,6 +16,7 @@ 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', @@ -39,24 +40,21 @@ import {DeleteEmployeeComponent} from "../delete-employee/delete-employee.compon }, 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 readonly displayedColumns: string[] = ['name', 'actions']; - constructor( - private readonly httpClient: HttpClient, - private readonly snackBar: MatSnackBar, - private readonly deleteDialogue: MatDialog - ) { + 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); diff --git a/src/app/services/employee-api.service.ts b/src/app/services/employee-api.service.ts index 68f0455..c742de7 100644 --- a/src/app/services/employee-api.service.ts +++ b/src/app/services/employee-api.service.ts @@ -15,4 +15,8 @@ export default class EmployeeApiService { 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`) + } } -- 2.47.2 From 824fd2b66961b4bab412f584443c49535d38e2ed Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Wed, 18 Dec 2024 13:54:22 +0100 Subject: [PATCH 4/8] remove test --- src/app/services/auth.service.spec.ts | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 src/app/services/auth.service.spec.ts 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(); - }); -}); -- 2.47.2 From 26d70151e79d0219a936597cb3301168061befeb Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Wed, 18 Dec 2024 13:54:53 +0100 Subject: [PATCH 5/8] remove unused import --- src/app/employee-list/employee-list.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/employee-list/employee-list.component.ts b/src/app/employee-list/employee-list.component.ts index 87616c8..4593017 100644 --- a/src/app/employee-list/employee-list.component.ts +++ b/src/app/employee-list/employee-list.component.ts @@ -1,7 +1,7 @@ import {Component, inject, OnInit} from '@angular/core'; import {CommonModule} from '@angular/common'; 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 {MatCardModule} from '@angular/material/card'; -- 2.47.2 From cb77d76aa38998590243dbb99256869c8c8ecc44 Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Wed, 18 Dec 2024 13:56:32 +0100 Subject: [PATCH 6/8] fix --- src/app/employee-list/employee-list.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/employee-list/employee-list.component.ts b/src/app/employee-list/employee-list.component.ts index 4593017..c2b5d4d 100644 --- a/src/app/employee-list/employee-list.component.ts +++ b/src/app/employee-list/employee-list.component.ts @@ -46,7 +46,7 @@ export class EmployeeListComponent implements OnInit{ 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']; public ngOnInit(): void { -- 2.47.2 From e1a8c1d3bddb11ad1d08a980bfcefc2a3cf09d2e Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Wed, 18 Dec 2024 13:57:55 +0100 Subject: [PATCH 7/8] remove output --- src/app/delete-employee/delete-employee.component.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/app/delete-employee/delete-employee.component.ts b/src/app/delete-employee/delete-employee.component.ts index 8c03539..a2f12eb 100644 --- a/src/app/delete-employee/delete-employee.component.ts +++ b/src/app/delete-employee/delete-employee.component.ts @@ -1,4 +1,4 @@ -import {Component, EventEmitter, Inject, inject, Output} from '@angular/core'; +import {Component, Inject, inject} from '@angular/core'; import {Employee} from "../Employee"; import { MAT_DIALOG_DATA, @@ -26,9 +26,6 @@ import EmployeeApiService from "../services/employee-api.service"; export class DeleteEmployeeComponent { private apiService: EmployeeApiService = inject(EmployeeApiService); - @Output() - private deleteEvent: EventEmitter = new EventEmitter(); - constructor(@Inject(MAT_DIALOG_DATA) protected employee: Employee) { } -- 2.47.2 From 78b42a7d2e941adbda98d3413b0ffdc304f2f6a1 Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Wed, 18 Dec 2024 14:00:43 +0100 Subject: [PATCH 8/8] refactor --- src/app/delete-employee/delete-employee.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/delete-employee/delete-employee.component.ts b/src/app/delete-employee/delete-employee.component.ts index a2f12eb..26af39c 100644 --- a/src/app/delete-employee/delete-employee.component.ts +++ b/src/app/delete-employee/delete-employee.component.ts @@ -26,8 +26,7 @@ import EmployeeApiService from "../services/employee-api.service"; export class DeleteEmployeeComponent { private apiService: EmployeeApiService = inject(EmployeeApiService); - constructor(@Inject(MAT_DIALOG_DATA) protected employee: Employee) { - } + protected employee: Employee = inject(MAT_DIALOG_DATA); deleteEmployee(id: number) { this.apiService.deleteById(id).subscribe(); -- 2.47.2