From 9a70d02fb27cb7a09ce86cad80c944bb78c8e1db Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Wed, 11 Dec 2024 21:09:27 +0100 Subject: [PATCH 01/25] initial email receiver component Signed-off-by: Christoph Klingenberg --- .../email-receiver-settings.component.css | 0 .../email-receiver-settings.component.html | 108 ++++++++++++++++++ .../email-receiver-settings.component.spec.ts | 23 ++++ .../email-receiver-settings.component.ts | 86 ++++++++++++++ 4 files changed, 217 insertions(+) create mode 100644 apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.css create mode 100644 apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html create mode 100644 apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.spec.ts create mode 100644 apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.css b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.css new file mode 100644 index 00000000..e69de29b diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html new file mode 100644 index 00000000..7b78e132 --- /dev/null +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html @@ -0,0 +1,108 @@ + + +

Email Alert Recipients

+ +
+ + +
+ +
+
+

All Backups:

+ + + + + Email + + + + + + + + + + + + ID + + + + + + + + + + We couldn't find any backups! + + {{ email.mail }} + {{ email.id }} + + + + + + + +
+ + + + + + + + +

Add Email Recipient

+
+
+ + + + + Please enter a valid email address + +
+
+
+ + +
+ diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.spec.ts b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.spec.ts new file mode 100644 index 00000000..e34aab05 --- /dev/null +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EmailReceiverSettingsComponent } from './email-receiver-settings.component'; + +describe('EmailReceiverSettingsComponent', () => { + let component: EmailReceiverSettingsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [EmailReceiverSettingsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(EmailReceiverSettingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts new file mode 100644 index 00000000..af9c593f --- /dev/null +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts @@ -0,0 +1,86 @@ +import { Component } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { EmailType } from 'apps/frontend/src/app/shared/types/email'; +import { BehaviorSubject, Observable, Subject, takeUntil } from 'rxjs'; +import { EmailReceiverService } from '../../../services/email/email-receiver.service'; +import { CustomEmailFilter } from './emailfilter'; + +@Component({ + selector: 'app-email-receiver-settings', + templateUrl: './email-receiver-settings.component.html', + styleUrl: './email-receiver-settings.component.css', +}) +export class EmailReceiverSettingsComponent { + isLoading = false; + emailForm: FormGroup; + showEmailModal = false; + + protected emailsSubject$ = new BehaviorSubject([]); + private readonly destroy$ = new Subject(); + + protected emailFilter: CustomEmailFilter; + protected emailIdFilter: CustomEmailFilter; + + constructor( + private fb: FormBuilder, + private emailService: EmailReceiverService + ) { + this.emailFilter = new CustomEmailFilter('mail'); + this.emailIdFilter = new CustomEmailFilter('id'); + + this.emailForm = this.fb.group({ + email: ['', [Validators.required, Validators.email]], + }); + } + + ngOnInit() { + this.loadEmailReceiver(); + } + + loadEmailReceiver(): void { + this.isLoading = true; + this.emailService + .getAllEmails() + .pipe(takeUntil(this.destroy$)) + .subscribe({ + next: (emails) => { + console.log(emails); + this.emailsSubject$.next(emails); + this.isLoading = false; + }, + + error: (error) => (this.isLoading = false), + }); + } + + addEmail() { + if (this.emailForm.valid) { + // hier muss ich die communication mit backend einbauen. wiederhole eingabe, + //wenn email bereits in Liste vorhanden, oder die eingabe keine korrekte email ist + this.isLoading = true; + const newEmail = { + email: this.emailForm.get('email')?.value, + }; + + const currentEmails = this.emailsSubject$.getValue(); + + //this.emailsSubject$.next([...currentEmails, newEmail]); + this.emailForm.reset(); + this.showEmailModal = false; + } + } + + removeEmail(emailToRemove: EmailType) { + this.emailService.deleteEmail(emailToRemove); + /* this.emailsSubject$.next( + currentEmails.filter((email) => email.id !== emailToRemove.id) + ); */ + } + + saveChanges() {} + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } +} From 5b24a153c608475e293a639900e8315a1cfeef33 Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Wed, 11 Dec 2024 21:09:56 +0100 Subject: [PATCH 02/25] navigate to email settings Signed-off-by: Christoph Klingenberg --- apps/frontend/src/app/app.component.html | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/frontend/src/app/app.component.html b/apps/frontend/src/app/app.component.html index 0543c1c3..ad71637e 100644 --- a/apps/frontend/src/app/app.component.html +++ b/apps/frontend/src/app/app.component.html @@ -12,6 +12,15 @@ Notifications + From 3638bdd7b911dec87546c0927fa33e6e10eb3ed5 Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Wed, 11 Dec 2024 21:10:25 +0100 Subject: [PATCH 03/25] add email type Signed-off-by: Christoph Klingenberg --- apps/frontend/src/app/shared/types/email.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 apps/frontend/src/app/shared/types/email.ts diff --git a/apps/frontend/src/app/shared/types/email.ts b/apps/frontend/src/app/shared/types/email.ts new file mode 100644 index 00000000..afa5120a --- /dev/null +++ b/apps/frontend/src/app/shared/types/email.ts @@ -0,0 +1,4 @@ +export interface EmailType { + id: string; + mail: string; +} \ No newline at end of file From 499b5d906520682d880d04d7ce5860a26242db8a Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Wed, 11 Dec 2024 21:10:58 +0100 Subject: [PATCH 04/25] navigate to email settings Signed-off-by: Christoph Klingenberg --- apps/frontend/src/app/app.routes.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/frontend/src/app/app.routes.ts b/apps/frontend/src/app/app.routes.ts index 20cccd76..3ffd76f8 100644 --- a/apps/frontend/src/app/app.routes.ts +++ b/apps/frontend/src/app/app.routes.ts @@ -3,9 +3,12 @@ import { TestUploadComponent } from './test-upload/component/test-upload/test-up import { FindTestDataComponent } from './test-upload/component/find-test-data/find-test-data.component'; import { BackupsComponent } from './backups-overview/backups/backups/backups.component'; import { AlertComponent } from './alert/component/alert.component'; +import { EmailReceiverSettingsComponent } from './management/components/settings/email-receiver-settings/email-receiver-settings.component'; export const appRoutes: Route[] = [ { path: 'upload', component: TestUploadComponent }, { path: 'findData', component: FindTestDataComponent }, + { path: 'email-receiver', component: EmailReceiverSettingsComponent}, { path: '', component: BackupsComponent }, + ]; From 5013600812979830ada5db60767aebbb6107ec51 Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Wed, 11 Dec 2024 21:11:16 +0100 Subject: [PATCH 05/25] include more clarity icons Signed-off-by: Christoph Klingenberg --- apps/frontend/src/app/app.module.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/apps/frontend/src/app/app.module.ts b/apps/frontend/src/app/app.module.ts index edcee333..0ac98e73 100644 --- a/apps/frontend/src/app/app.module.ts +++ b/apps/frontend/src/app/app.module.ts @@ -23,6 +23,10 @@ import { tagIcon, dataClusterIcon, filterIcon, + envelopeIcon, + plusIcon, + lockIcon, + trashIcon, } from '@cds/core/icon'; import { NgxEchartsModule } from 'ngx-echarts'; import { TestUploadComponent } from './test-upload/component/test-upload/test-upload.component'; @@ -31,6 +35,7 @@ import { BackupsComponent } from './backups-overview/backups/backups/backups.com import { BASE_URL } from './shared/types/configuration'; import { AlertComponent } from './alert/component/alert.component'; import { NotificationSettingsComponent } from './management/components/settings/notification-settings/notification-settings.component'; +import { EmailReceiverSettingsComponent } from './management/components/settings/email-receiver-settings/email-receiver-settings.component'; @NgModule({ declarations: [ @@ -40,6 +45,7 @@ import { NotificationSettingsComponent } from './management/components/settings/ BackupsComponent, AlertComponent, NotificationSettingsComponent, + EmailReceiverSettingsComponent, ], imports: [ BrowserModule, @@ -69,7 +75,11 @@ export class AppModule { angleIcon, tagIcon, dataClusterIcon, - filterIcon + filterIcon, + envelopeIcon, + plusIcon, + lockIcon, + trashIcon, ); } } From 6705502ad58f18ea3c88274f9d7f263729bb3dfe Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Wed, 11 Dec 2024 21:59:40 +0100 Subject: [PATCH 06/25] edit email receiver view Signed-off-by: Christoph Klingenberg --- .../email-receiver-settings.component.html | 55 +++++++++---------- 1 file changed, 26 insertions(+), 29 deletions(-) diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html index 7b78e132..eefbb624 100644 --- a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html @@ -1,27 +1,29 @@ - -

Email Alert Recipients

- -
- - -
-
-

All Backups:

+ +
+ + +
+ - + Email @@ -46,7 +48,7 @@

All Backups:

@@ -55,25 +57,20 @@

All Backups:

 - We couldn't find any backups! - + We couldn't find any emails! + {{ email.mail }} {{ email.id }} - - - - +
+
- - - - - -

Add Email Recipient

From 37ee18bb4c3280205fc7e052b2c39ad3b0a14cab Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Wed, 11 Dec 2024 22:02:23 +0100 Subject: [PATCH 07/25] add email receiver service Signed-off-by: Christoph Klingenberg --- .../email-receiver.service.spec.ts | 16 ++++++++++ .../email-receiver/email-receiver.service.ts | 29 +++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 apps/frontend/src/app/management/services/email-receiver/email-receiver.service.spec.ts create mode 100644 apps/frontend/src/app/management/services/email-receiver/email-receiver.service.ts diff --git a/apps/frontend/src/app/management/services/email-receiver/email-receiver.service.spec.ts b/apps/frontend/src/app/management/services/email-receiver/email-receiver.service.spec.ts new file mode 100644 index 00000000..bf276287 --- /dev/null +++ b/apps/frontend/src/app/management/services/email-receiver/email-receiver.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { EmailReceiverService } from './email-receiver.service'; + +describe('EmailReceiverService', () => { + let service: EmailReceiverService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(EmailReceiverService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/apps/frontend/src/app/management/services/email-receiver/email-receiver.service.ts b/apps/frontend/src/app/management/services/email-receiver/email-receiver.service.ts new file mode 100644 index 00000000..eee63b5a --- /dev/null +++ b/apps/frontend/src/app/management/services/email-receiver/email-receiver.service.ts @@ -0,0 +1,29 @@ +import { Inject, Injectable } from '@angular/core'; +import { BASE_URL } from '../../../shared/types/configuration'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; +import { EmailType } from '../../../shared/types/email'; + +@Injectable({ + providedIn: 'root', +}) +export class EmailReceiverService { + constructor( + @Inject(BASE_URL) private readonly baseUrl: string, + private readonly http: HttpClient + ) {} + + getAllEmailReceiver(): Observable { + return this.http.get(`${this.baseUrl}/mail`); + } + + updateEmailReceiver(email: EmailType): Observable { + return this.http.post(`${this.baseUrl}/mail`, { + mail: email.mail, + }); + } + + deleteEmail(email: EmailType): Observable { + return this.http.delete(`${this.baseUrl}/mail`); + } +} From 335e207d8d8a452eee5e66e2b32ef8501dd7c509 Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Wed, 11 Dec 2024 22:02:56 +0100 Subject: [PATCH 08/25] add filter interface Signed-off-by: Christoph Klingenberg --- .../email-receiver-settings/emailfilter.ts | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 apps/frontend/src/app/management/components/settings/email-receiver-settings/emailfilter.ts diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/emailfilter.ts b/apps/frontend/src/app/management/components/settings/email-receiver-settings/emailfilter.ts new file mode 100644 index 00000000..753d69ff --- /dev/null +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/emailfilter.ts @@ -0,0 +1,39 @@ +import { ClrDatagridFilterInterface } from '@clr/angular'; +import { EmailType } from 'apps/frontend/src/app/shared/types/email'; +import { Subject } from 'rxjs'; + +export class CustomEmailFilter implements ClrDatagridFilterInterface { + public ranges: { + mail: string | null; + id: string | null; + } = { + mail: null, + id: null, + }; + + public changes = new Subject(); + public filterType: 'mail' | 'id'; + + constructor(filterType: 'mail' | 'id') { + this.filterType = filterType; + } + + isActive(): boolean { + if (this.filterType === 'mail') { + return !!(this.ranges.mail || this.ranges.mail); + } else if (this.filterType === 'id') { + return !!(this.ranges.id || this.ranges.id); + } else { + return !!this.ranges.id; + } + } + + accepts(backup: EmailType): boolean { + return true; + } + + updateRanges(ranges: Partial): void { + Object.assign(this.ranges, ranges); + this.changes.next(true); + } +} From 85e12ed91deea529b7c90c5c4aa2474ef1b90743 Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Wed, 11 Dec 2024 22:03:15 +0100 Subject: [PATCH 09/25] fix files structure Signed-off-by: Christoph Klingenberg --- .../email-receiver-settings.component.ts | 17 ++++++----------- .../notification-settings.component.ts | 2 +- .../notification.service.spec.ts | 4 ++-- .../notification.service.ts | 4 ++-- 4 files changed, 11 insertions(+), 16 deletions(-) rename apps/frontend/src/app/management/services/{ => alert-notification}/notification.service.spec.ts (96%) rename apps/frontend/src/app/management/services/{ => alert-notification}/notification.service.ts (84%) diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts index af9c593f..6a84e031 100644 --- a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { EmailType } from 'apps/frontend/src/app/shared/types/email'; import { BehaviorSubject, Observable, Subject, takeUntil } from 'rxjs'; -import { EmailReceiverService } from '../../../services/email/email-receiver.service'; +import { EmailReceiverService } from '../../../services/email-receiver/email-receiver.service'; import { CustomEmailFilter } from './emailfilter'; @Component({ @@ -14,6 +14,7 @@ export class EmailReceiverSettingsComponent { isLoading = false; emailForm: FormGroup; showEmailModal = false; + protected readonly selectedEmails: EmailType[] = []; protected emailsSubject$ = new BehaviorSubject([]); private readonly destroy$ = new Subject(); @@ -40,11 +41,10 @@ export class EmailReceiverSettingsComponent { loadEmailReceiver(): void { this.isLoading = true; this.emailService - .getAllEmails() + .getAllEmailReceiver() .pipe(takeUntil(this.destroy$)) .subscribe({ next: (emails) => { - console.log(emails); this.emailsSubject$.next(emails); this.isLoading = false; }, @@ -55,8 +55,6 @@ export class EmailReceiverSettingsComponent { addEmail() { if (this.emailForm.valid) { - // hier muss ich die communication mit backend einbauen. wiederhole eingabe, - //wenn email bereits in Liste vorhanden, oder die eingabe keine korrekte email ist this.isLoading = true; const newEmail = { email: this.emailForm.get('email')?.value, @@ -64,17 +62,14 @@ export class EmailReceiverSettingsComponent { const currentEmails = this.emailsSubject$.getValue(); - //this.emailsSubject$.next([...currentEmails, newEmail]); this.emailForm.reset(); this.showEmailModal = false; } } - removeEmail(emailToRemove: EmailType) { - this.emailService.deleteEmail(emailToRemove); - /* this.emailsSubject$.next( - currentEmails.filter((email) => email.id !== emailToRemove.id) - ); */ + removeEmail(emailToRemove: EmailType[]) { + // implement forkjion ... + //this.emailService.deleteEmail(emailToRemove); } saveChanges() {} diff --git a/apps/frontend/src/app/management/components/settings/notification-settings/notification-settings.component.ts b/apps/frontend/src/app/management/components/settings/notification-settings/notification-settings.component.ts index 0e34694e..3da3d0a7 100644 --- a/apps/frontend/src/app/management/components/settings/notification-settings/notification-settings.component.ts +++ b/apps/frontend/src/app/management/components/settings/notification-settings/notification-settings.component.ts @@ -1,7 +1,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormArray, FormBuilder, FormGroup } from '@angular/forms'; import { BehaviorSubject, forkJoin, Subject, takeUntil } from 'rxjs'; -import { NotificationService } from '../../../services/notification.service'; +import { NotificationService } from '../../../services/alert-notification/notification.service'; import { AlertType } from '../../../../shared/types/alertType'; import { AlertServiceService } from '../../../../alert/service/alert-service.service'; diff --git a/apps/frontend/src/app/management/services/notification.service.spec.ts b/apps/frontend/src/app/management/services/alert-notification/notification.service.spec.ts similarity index 96% rename from apps/frontend/src/app/management/services/notification.service.spec.ts rename to apps/frontend/src/app/management/services/alert-notification/notification.service.spec.ts index a5d84617..08080c78 100644 --- a/apps/frontend/src/app/management/services/notification.service.spec.ts +++ b/apps/frontend/src/app/management/services/alert-notification/notification.service.spec.ts @@ -2,8 +2,8 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'; import { HttpClient } from '@angular/common/http'; import { NotificationService } from './notification.service'; import { of } from 'rxjs'; -import { AlertType } from '../../shared/types/alertType'; -import { SeverityType } from '../../shared/enums/severityType'; +import { AlertType } from '../../../shared/types/alertType'; +import { SeverityType } from '../../../shared/enums/severityType'; describe('NotificationService', () => { let service: NotificationService; diff --git a/apps/frontend/src/app/management/services/notification.service.ts b/apps/frontend/src/app/management/services/alert-notification/notification.service.ts similarity index 84% rename from apps/frontend/src/app/management/services/notification.service.ts rename to apps/frontend/src/app/management/services/alert-notification/notification.service.ts index 42246c99..6c89b395 100644 --- a/apps/frontend/src/app/management/services/notification.service.ts +++ b/apps/frontend/src/app/management/services/alert-notification/notification.service.ts @@ -1,8 +1,8 @@ import { Inject, Injectable } from '@angular/core'; -import { BASE_URL } from '../../shared/types/configuration'; +import { BASE_URL } from '../../../shared/types/configuration'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; -import { AlertType } from '../../shared/types/alertType'; +import { AlertType } from '../../../shared/types/alertType'; @Injectable({ providedIn: 'root', From d3facf4328134c12d729c44fa56dcaa4c407c5eb Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Thu, 12 Dec 2024 21:39:16 +0100 Subject: [PATCH 10/25] display only mail name Signed-off-by: Christoph Klingenberg --- .../email-receiver-settings.component.css | 4 ++++ .../email-receiver-settings.component.html | 18 +++++++++++++----- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.css b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.css index e69de29b..3bf31e62 100644 --- a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.css +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.css @@ -0,0 +1,4 @@ +.clr-dg-cell { + text-align: center ; +} + diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html index eefbb624..d81147f3 100644 --- a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html @@ -16,7 +16,12 @@

Email Alert Recipients

New - @@ -39,7 +44,7 @@

Email Alert Recipients

- + We couldn't find any emails! - {{ email.mail }} - {{ email.id }} + {{ email.mail }} + @@ -83,6 +88,9 @@

Add Email Recipient

>Please enter a valid email address +
+ {{ modalError }} +
From ecc43246950ce949881152db7890ba9c97092810 Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Thu, 12 Dec 2024 21:39:35 +0100 Subject: [PATCH 11/25] add request error handling Signed-off-by: Christoph Klingenberg --- .../email-receiver/email-receiver.service.ts | 35 ++++++++++++++----- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/apps/frontend/src/app/management/services/email-receiver/email-receiver.service.ts b/apps/frontend/src/app/management/services/email-receiver/email-receiver.service.ts index eee63b5a..bfa6f0b8 100644 --- a/apps/frontend/src/app/management/services/email-receiver/email-receiver.service.ts +++ b/apps/frontend/src/app/management/services/email-receiver/email-receiver.service.ts @@ -1,7 +1,7 @@ import { Inject, Injectable } from '@angular/core'; import { BASE_URL } from '../../../shared/types/configuration'; -import { HttpClient } from '@angular/common/http'; -import { Observable } from 'rxjs'; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { catchError, Observable, throwError } from 'rxjs'; import { EmailType } from '../../../shared/types/email'; @Injectable({ @@ -17,13 +17,32 @@ export class EmailReceiverService { return this.http.get(`${this.baseUrl}/mail`); } - updateEmailReceiver(email: EmailType): Observable { - return this.http.post(`${this.baseUrl}/mail`, { - mail: email.mail, - }); + updateEmailReceiver(email: Partial): Observable { + return this.http + .post(`${this.baseUrl}/mail`, { + mail: email.mail, + }) + .pipe(catchError(this.handleError)); } - deleteEmail(email: EmailType): Observable { - return this.http.delete(`${this.baseUrl}/mail`); + deleteEmail(id: string): Observable { + return this.http + .delete(`${this.baseUrl}/mail/${id}`) + .pipe(catchError(this.handleError)); + } + + private handleError(error: HttpErrorResponse) { + let errorMessage = 'An error occurred'; + if (error.error instanceof ErrorEvent) { + // Client-side error + errorMessage = error.error.message; + } else { + // Server-side error + errorMessage = + error.status === 409 + ? 'Email already exists' + : `Error Code: ${error.status}\nMessage: ${error.message}`; + } + return throwError(() => error); } } From 12c316fc6385f70095b8bebbe45ce31bd7f20c1f Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Thu, 12 Dec 2024 21:41:22 +0100 Subject: [PATCH 12/25] add save() and remove() emails Signed-off-by: Christoph Klingenberg --- .../email-receiver-settings.component.ts | 80 +++++++++++++++---- 1 file changed, 65 insertions(+), 15 deletions(-) diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts index 6a84e031..0425ffb3 100644 --- a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts @@ -1,7 +1,14 @@ import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { EmailType } from 'apps/frontend/src/app/shared/types/email'; -import { BehaviorSubject, Observable, Subject, takeUntil } from 'rxjs'; +import { + BehaviorSubject, + from, + mergeMap, + Observable, + Subject, + takeUntil, +} from 'rxjs'; import { EmailReceiverService } from '../../../services/email-receiver/email-receiver.service'; import { CustomEmailFilter } from './emailfilter'; @@ -14,6 +21,7 @@ export class EmailReceiverSettingsComponent { isLoading = false; emailForm: FormGroup; showEmailModal = false; + modalError = ''; protected readonly selectedEmails: EmailType[] = []; protected emailsSubject$ = new BehaviorSubject([]); @@ -53,27 +61,69 @@ export class EmailReceiverSettingsComponent { }); } - addEmail() { + removeEmail(emailsToRemove: EmailType[]) { + if (!emailsToRemove.length) return; + + this.isLoading = true; + + // Using forkJoin to handle multiple delete requests + from(emailsToRemove) + .pipe( + mergeMap((email) => this.emailService.deleteEmail(email.id)), + takeUntil(this.destroy$) + ) + .subscribe({ + next: () => { + const currentEmails = this.emailsSubject$.getValue(); + const updatedEmails = currentEmails.filter( + (email) => + !emailsToRemove.some((toRemove) => toRemove.id === email.id) + ); + this.emailsSubject$.next(updatedEmails); + this.isLoading = false; + }, + error: (error) => { + console.error('Failed to delete emails:', error); + this.isLoading = false; + }, + complete: () => { + this.selectedEmails.length = 0; // Clear selection + }, + }); + } + + saveChanges() { if (this.emailForm.valid) { this.isLoading = true; - const newEmail = { - email: this.emailForm.get('email')?.value, - }; + this.modalError = ''; - const currentEmails = this.emailsSubject$.getValue(); + const newEmail: Partial = { + mail: this.emailForm.get('email')?.value, + }; - this.emailForm.reset(); - this.showEmailModal = false; + this.emailService + .updateEmailReceiver(newEmail) + .pipe(takeUntil(this.destroy$)) + .subscribe({ + next: (createdEmail) => { + const currentEmails = this.emailsSubject$.getValue(); + this.emailsSubject$.next([...currentEmails, createdEmail]); + this.emailForm.reset(); + this.showEmailModal = false; + this.isLoading = false; + }, + error: (error) => { + console.error('Failed to create email:', error); + this.modalError = + error.status === 409 + ? 'This email already exists' + : 'Failed to create email. Please try again.'; + this.isLoading = false; + }, + }); } } - removeEmail(emailToRemove: EmailType[]) { - // implement forkjion ... - //this.emailService.deleteEmail(emailToRemove); - } - - saveChanges() {} - ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); From 6597a6230a0f0552d7a56ce81e11027292b61c34 Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Thu, 12 Dec 2024 21:48:36 +0100 Subject: [PATCH 13/25] add tests Signed-off-by: Christoph Klingenberg --- .../email-receiver-settings.component.spec.ts | 125 ++++++++++++++++-- .../email-receiver-settings.component.ts | 2 +- 2 files changed, 114 insertions(+), 13 deletions(-) diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.spec.ts b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.spec.ts index e34aab05..24eb1d88 100644 --- a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.spec.ts +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.spec.ts @@ -1,23 +1,124 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - +import { describe, it, expect, beforeEach, vi } from 'vitest'; import { EmailReceiverSettingsComponent } from './email-receiver-settings.component'; +import { EmailReceiverService } from '../../../services/email-receiver/email-receiver.service'; +import { FormBuilder } from '@angular/forms'; +import { of, throwError } from 'rxjs'; describe('EmailReceiverSettingsComponent', () => { let component: EmailReceiverSettingsComponent; - let fixture: ComponentFixture; + let emailServiceMock: any; + + const mockEmails = [ + { id: 1, mail: 'test1@example.com' }, + { id: 2, mail: 'test2@example.com' }, + ]; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [EmailReceiverSettingsComponent] - }) - .compileComponents(); + beforeEach(() => { + emailServiceMock = { + getAllEmailReceiver: vi.fn().mockReturnValue(of(mockEmails)), + deleteEmail: vi.fn().mockReturnValue(of({})), + updateEmailReceiver: vi + .fn() + .mockReturnValue(of({ id: 3, mail: 'new@example.com' })), + }; - fixture = TestBed.createComponent(EmailReceiverSettingsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); + component = new EmailReceiverSettingsComponent( + new FormBuilder(), + emailServiceMock + ); }); - it('should create', () => { + it('should create component', () => { expect(component).toBeTruthy(); }); + + it('should load email receivers on init', () => { + component.ngOnInit(); + expect(emailServiceMock.getAllEmailReceiver).toHaveBeenCalled(); + expect(component['emailsSubject$'].getValue()).toEqual(mockEmails); + }); + + it('should handle error when loading emails', () => { + emailServiceMock.getAllEmailReceiver = vi + .fn() + .mockReturnValue(throwError(() => new Error('Failed to load'))); + component.ngOnInit(); + expect(component.isLoading).toBeFalsy(); + }); + + it('should remove selected emails', () => { + const emailsToRemove = [ + { ...mockEmails[0], id: mockEmails[0].id.toString() }, + ]; + component['emailsSubject$'].next( + mockEmails.map((email) => ({ ...email, id: email.id.toString() })) + ); + + component.removeEmail(emailsToRemove); + + expect(emailServiceMock.deleteEmail).toHaveBeenCalledWith( + emailsToRemove[0].id + ); + expect(component['emailsSubject$'].getValue()).toEqual([ + { ...mockEmails[1], id: mockEmails[1].id.toString() }, + ]); + }); + it('should handle error when removing emails', () => { + emailServiceMock.deleteEmail = vi + .fn() + .mockReturnValue(throwError(() => new Error('Failed to delete'))); + + const consoleSpy = vi.spyOn(console, 'error'); + component.removeEmail([ + { ...mockEmails[0], id: mockEmails[0].id.toString() }, + ]); + + expect(consoleSpy).toHaveBeenCalled(); + expect(component.isLoading).toBeFalsy(); + }); + it('should save new email when form is valid', () => { + const newEmail = 'new@example.com'; + component.emailForm.patchValue({ email: newEmail }); + + component.saveChanges(); + + expect(emailServiceMock.updateEmailReceiver).toHaveBeenCalledWith({ + mail: newEmail, + }); + expect(component.showEmailModal).toBeFalsy(); + }); + + it('should handle duplicate email error', () => { + emailServiceMock.updateEmailReceiver = vi + .fn() + .mockReturnValue(throwError(() => ({ status: 409 }))); + + component.emailForm.patchValue({ email: 'duplicate@example.com' }); + component.saveChanges(); + + expect(component.modalError).toBe('This email already exists'); + }); + + it('should handle generic error when saving email', () => { + emailServiceMock.updateEmailReceiver = vi + .fn() + .mockReturnValue(throwError(() => new Error('Failed to save'))); + + component.emailForm.patchValue({ email: 'test@example.com' }); + component.saveChanges(); + + expect(component.modalError).toBe( + 'Failed to create email. Please try again.' + ); + }); + + it('should clean up subscriptions on destroy', () => { + const nextSpy = vi.spyOn(component['destroy$'], 'next'); + const completeSpy = vi.spyOn(component['destroy$'], 'complete'); + + component.ngOnDestroy(); + + expect(nextSpy).toHaveBeenCalled(); + expect(completeSpy).toHaveBeenCalled(); + }); }); diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts index 0425ffb3..bc3f6710 100644 --- a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.ts @@ -87,7 +87,7 @@ export class EmailReceiverSettingsComponent { this.isLoading = false; }, complete: () => { - this.selectedEmails.length = 0; // Clear selection + this.selectedEmails.length = 0; }, }); } From 31bc407832baa0b07537fb740f5b4d2e0db944c2 Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Fri, 13 Dec 2024 17:04:46 +0100 Subject: [PATCH 14/25] initial confirm-dialog Signed-off-by: Christoph Klingenberg --- apps/frontend/src/app/app.module.ts | 2 ++ .../confirm-dialog.component.css | 0 .../confirm-dialog.component.html | 1 + .../confirm-dialog.component.spec.ts | 23 +++++++++++++++++++ .../confirm-dialog.component.ts | 10 ++++++++ .../service/confirm-dialog.service.spec.ts | 16 +++++++++++++ .../service/confirm-dialog.service.ts | 9 ++++++++ 7 files changed, 61 insertions(+) create mode 100644 apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.css create mode 100644 apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.html create mode 100644 apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.spec.ts create mode 100644 apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.ts create mode 100644 apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.spec.ts create mode 100644 apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.ts diff --git a/apps/frontend/src/app/app.module.ts b/apps/frontend/src/app/app.module.ts index 0ac98e73..49f20c86 100644 --- a/apps/frontend/src/app/app.module.ts +++ b/apps/frontend/src/app/app.module.ts @@ -36,6 +36,7 @@ import { BASE_URL } from './shared/types/configuration'; import { AlertComponent } from './alert/component/alert.component'; import { NotificationSettingsComponent } from './management/components/settings/notification-settings/notification-settings.component'; import { EmailReceiverSettingsComponent } from './management/components/settings/email-receiver-settings/email-receiver-settings.component'; +import { ConfirmDialogComponent } from './shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component'; @NgModule({ declarations: [ @@ -46,6 +47,7 @@ import { EmailReceiverSettingsComponent } from './management/components/settings AlertComponent, NotificationSettingsComponent, EmailReceiverSettingsComponent, + ConfirmDialogComponent, ], imports: [ BrowserModule, diff --git a/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.css b/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.css new file mode 100644 index 00000000..e69de29b diff --git a/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.html b/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.html new file mode 100644 index 00000000..27b8ebba --- /dev/null +++ b/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.html @@ -0,0 +1 @@ +

confirm-dialog works!

diff --git a/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.spec.ts b/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.spec.ts new file mode 100644 index 00000000..3f225f68 --- /dev/null +++ b/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ConfirmDialogComponent } from './confirm-dialog.component'; + +describe('ConfirmDialogComponent', () => { + let component: ConfirmDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ConfirmDialogComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ConfirmDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.ts b/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.ts new file mode 100644 index 00000000..2be355e8 --- /dev/null +++ b/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-confirm-dialog', + templateUrl: './confirm-dialog.component.html', + styleUrl: './confirm-dialog.component.css' +}) +export class ConfirmDialogComponent { + +} diff --git a/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.spec.ts b/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.spec.ts new file mode 100644 index 00000000..f91f71f3 --- /dev/null +++ b/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ConfirmDialogService } from './confirm-dialog.service'; + +describe('ConfirmDialogService', () => { + let service: ConfirmDialogService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ConfirmDialogService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.ts b/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.ts new file mode 100644 index 00000000..9c0a05ad --- /dev/null +++ b/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.ts @@ -0,0 +1,9 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class ConfirmDialogService { + + constructor() { } +} From 779faa52545d65c1f26ca1c6080cc5c9e2ec70dc Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Fri, 13 Dec 2024 18:03:21 +0100 Subject: [PATCH 15/25] implement generic confirm dialog modal Signed-off-by: Christoph Klingenberg --- .../confirm-dialog.component.html | 15 +- .../confirm-dialog.component.ts | 21 ++- .../service/confirm-dialog.service.spec.ts | 154 +++++++++++++++++- .../service/confirm-dialog.service.ts | 79 ++++++++- .../app/shared/types/confirmationOptions.ts | 7 + 5 files changed, 265 insertions(+), 11 deletions(-) create mode 100644 apps/frontend/src/app/shared/types/confirmationOptions.ts diff --git a/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.html b/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.html index 27b8ebba..3220ffb0 100644 --- a/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.html +++ b/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.html @@ -1 +1,14 @@ -

confirm-dialog works!

+ +

{{ title }}

+
+

{{ message }}

+
+
+ + +
+ \ No newline at end of file diff --git a/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.ts b/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.ts index 2be355e8..e07c2b10 100644 --- a/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.ts +++ b/apps/frontend/src/app/shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component.ts @@ -1,10 +1,27 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ selector: 'app-confirm-dialog', templateUrl: './confirm-dialog.component.html', - styleUrl: './confirm-dialog.component.css' + styleUrl: './confirm-dialog.component.css', }) export class ConfirmDialogComponent { + @Input() isOpen = false; + @Input() title = 'Confirm Action'; + @Input() message = 'Are you sure you want to proceed?'; + @Input() confirmText = 'Confirm'; + @Input() cancelText = 'Cancel'; + @Input() confirmButtonClass = 'btn btn-primary'; + @Input() onConfirm: () => void = () => {}; + @Input() onCancel: () => void = () => {}; + confirm() { + this.onConfirm(); + this.isOpen = false; + } + + cancel() { + this.onCancel(); + this.isOpen = false; + } } diff --git a/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.spec.ts b/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.spec.ts index f91f71f3..87ff206c 100644 --- a/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.spec.ts +++ b/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.spec.ts @@ -1,16 +1,160 @@ -import { TestBed } from '@angular/core/testing'; - +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; import { ConfirmDialogService } from './confirm-dialog.service'; +import { ConfirmDialogComponent } from '../component/confirm-dialog/confirm-dialog.component'; +import { + ApplicationRef, + ComponentFactoryResolver, + ComponentRef, + Injector, +} from '@angular/core'; describe('ConfirmDialogService', () => { let service: ConfirmDialogService; + let componentFactoryResolver: ComponentFactoryResolver; + let appRef: ApplicationRef; + let injector: Injector; + let mockComponentRef: Partial>; beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(ConfirmDialogService); + mockComponentRef = { + instance: { + isOpen: false, + title: '', + message: '', + confirmText: '', + cancelText: '', + confirmButtonClass: '', + onConfirm: function (): void { + throw new Error('Function not implemented.'); + }, + onCancel: function (): void { + throw new Error('Function not implemented.'); + }, + confirm: function (): void { + throw new Error('Function not implemented.'); + }, + cancel: function (): void { + throw new Error('Function not implemented.'); + }, + }, + hostView: { + detectChanges: vi.fn(), + markForCheck: vi.fn(), + detach: vi.fn(), + destroy: vi.fn(), + destroyed: false, + onDestroy: function (callback: Function): void { + throw new Error('Function not implemented.'); + }, + checkNoChanges: function (): void { + throw new Error('Function not implemented.'); + }, + reattach: function (): void { + throw new Error('Function not implemented.'); + }, + }, + destroy: vi.fn(), + }; + + componentFactoryResolver = { + resolveComponentFactory: vi.fn().mockReturnValue({ + create: vi.fn().mockReturnValue(mockComponentRef), + }), + } as any; + + appRef = { + attachView: vi.fn(), + detachView: vi.fn(), + } as any; + + injector = {} as Injector; + + service = new ConfirmDialogService( + componentFactoryResolver, + appRef, + injector + ); + }); + afterEach(() => { + vi.clearAllMocks(); }); - it('should be created', () => { + it('should create the service', () => { expect(service).toBeTruthy(); }); + + describe('confirm', () => { + it('should create and show confirmation dialog', async () => { + const confirmPromise = service.confirm({ title: 'Test Title' }); + + expect( + componentFactoryResolver.resolveComponentFactory + ).toHaveBeenCalledWith(ConfirmDialogComponent); + expect(appRef.attachView).toHaveBeenCalled(); + expect(mockComponentRef.instance).toHaveProperty('isOpen', true); + expect(mockComponentRef.instance).toHaveProperty('title', 'Test Title'); + + // Simulate confirmation + (mockComponentRef.instance as any).onConfirm(); + const result = await confirmPromise; + expect(result).toBe(true); + }); + + it('should handle cancellation', async () => { + const confirmPromise = service.confirm(); + + // Simulate cancellation + (mockComponentRef.instance as any).onCancel(); + const result = await confirmPromise; + expect(result).toBe(false); + }); + }); + + describe('handleConfirmation', () => { + it('should execute onConfirm callback when confirmed', async () => { + const onConfirm = vi.fn(); + const onCancel = vi.fn(); + const options = { title: 'Test' }; + + const confirmSpy = vi.spyOn(service, 'confirm').mockResolvedValue(true); + + await service.handleConfirmation(options, onConfirm, onCancel); + + expect(confirmSpy).toHaveBeenCalledWith(options); + expect(onConfirm).toHaveBeenCalled(); + expect(onCancel).not.toHaveBeenCalled(); + }); + + it('should execute onCancel callback when cancelled', async () => { + const onConfirm = vi.fn(); + const onCancel = vi.fn(); + const options = { title: 'Test' }; + + const confirmSpy = vi.spyOn(service, 'confirm').mockResolvedValue(false); + + await service.handleConfirmation(options, onConfirm, onCancel); + + expect(confirmSpy).toHaveBeenCalledWith(options); + expect(onConfirm).not.toHaveBeenCalled(); + expect(onCancel).toHaveBeenCalled(); + }); + + it('should handle errors gracefully', async () => { + const onConfirm = vi.fn(); + const error = new Error('Test error'); + const consoleSpy = vi + .spyOn(console, 'error') + .mockImplementation(() => {}); + + vi.spyOn(service, 'confirm').mockRejectedValue(error); + + await service.handleConfirmation({}, onConfirm); + + expect(consoleSpy).toHaveBeenCalledWith( + 'Error in confirmation flow:', + error + ); + expect(onConfirm).not.toHaveBeenCalled(); + }); + }); }); diff --git a/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.ts b/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.ts index 9c0a05ad..261a6514 100644 --- a/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.ts +++ b/apps/frontend/src/app/shared/components/confirm-dialog/service/confirm-dialog.service.ts @@ -1,9 +1,82 @@ -import { Injectable } from '@angular/core'; +import { + ApplicationRef, + ComponentFactoryResolver, + ComponentRef, + EmbeddedViewRef, + Injectable, + Injector, + Type, +} from '@angular/core'; +import { ConfirmDialogComponent } from '../component/confirm-dialog/confirm-dialog.component'; +import { ConfirmationOptions } from '../../../types/confirmationOptions'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class ConfirmDialogService { + private modalComponentRef: ComponentRef | null = null; - constructor() { } + constructor( + private componentFactoryResolver: ComponentFactoryResolver, + private appRef: ApplicationRef, + private injector: Injector + ) {} + + confirm(options: ConfirmationOptions = {}): Promise { + return new Promise((resolve) => { + this.modalComponentRef = this.createComponent(ConfirmDialogComponent); + Object.assign(this.modalComponentRef.instance, { + isOpen: true, + ...options, + onConfirm: () => { + resolve(true); + this.removeComponent(); + }, + onCancel: () => { + resolve(false); + this.removeComponent(); + }, + }); + }); + } + + private createComponent(component: Type): ComponentRef { + const componentRef = this.componentFactoryResolver + .resolveComponentFactory(component) + .create(this.injector); + + this.appRef.attachView(componentRef.hostView); + + const domElem = (componentRef.hostView as EmbeddedViewRef) + .rootNodes[0]; + document.body.appendChild(domElem); + + return componentRef; + } + + private removeComponent(): void { + if (this.modalComponentRef) { + this.appRef.detachView(this.modalComponentRef.hostView); + this.modalComponentRef.destroy(); + this.modalComponentRef = null; + } + } + + async handleConfirmation( + options: ConfirmationOptions, + onConfirm: () => void, + onCancel?: () => void + ): Promise { + try { + const result = await this.confirm(options); + + if (result) { + await onConfirm(); + } else if (onCancel) { + await onCancel(); + } + } catch (error) { + console.error('Error in confirmation flow:', error); + } + } } diff --git a/apps/frontend/src/app/shared/types/confirmationOptions.ts b/apps/frontend/src/app/shared/types/confirmationOptions.ts new file mode 100644 index 00000000..b186d17e --- /dev/null +++ b/apps/frontend/src/app/shared/types/confirmationOptions.ts @@ -0,0 +1,7 @@ +export interface ConfirmationOptions { + title?: string; + message?: string; + confirmText?: string; + cancelText?: string; + confirmButtonClass?: string; +} From 2c918f4672e5077ebba5d2ff0de1ce1835df073d Mon Sep 17 00:00:00 2001 From: Christoph Klingenberg Date: Fri, 13 Dec 2024 18:04:13 +0100 Subject: [PATCH 16/25] ask to confirm delete emails Signed-off-by: Christoph Klingenberg --- .../email-receiver-settings.component.css | 3 + .../email-receiver-settings.component.html | 28 +------ .../email-receiver-settings.component.ts | 84 +++++++++++-------- 3 files changed, 57 insertions(+), 58 deletions(-) diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.css b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.css index 3bf31e62..c0b32791 100644 --- a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.css +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.css @@ -2,3 +2,6 @@ text-align: center ; } +.error { + color: red; +} \ No newline at end of file diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html index d81147f3..130442d8 100644 --- a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html @@ -44,31 +44,12 @@

Email Alert Recipients

- We couldn't find any emails! {{ email.mail }} - @@ -85,6 +66,9 @@

Add Email Recipient

Please enter a valid email address @@ -94,11 +78,7 @@

Add Email Recipient

-
- - - Email - - - - - - - - + Email We couldn't find any emails! Date: Tue, 17 Dec 2024 17:00:21 +0100 Subject: [PATCH 25/25] remove filter Signed-off-by: Christoph Klingenberg --- .../email-receiver-settings.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html index 09dc125d..78349d8d 100644 --- a/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html +++ b/apps/frontend/src/app/management/components/settings/email-receiver-settings/email-receiver-settings.component.html @@ -28,7 +28,7 @@

Email Alert Recipients

- Email + Email We couldn't find any emails!