From 7dec1bc6f6992b58ea472a54b1e2fd780a469733 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Fri, 4 Apr 2025 20:17:04 +0200 Subject: [PATCH] feat: create, design, and integrate ConfirmDialogComponent --- .../contact-detail.component.html | 8 +- .../contact-detail.component.ts | 14 ++- .../main-layout/main-layout.component.scss | 2 - .../confirm-dialog.component.html | 17 +++ .../confirm-dialog.component.scss | 112 ++++++++++++++++++ .../confirm-dialog.component.spec.ts | 22 ++++ .../confirm-dialog.component.ts | 24 ++++ src/assets/i18n/de.json | 4 +- src/assets/i18n/en.json | 4 +- 9 files changed, 197 insertions(+), 10 deletions(-) create mode 100644 src/app/shared/components/confirm-dialog/confirm-dialog.component.html create mode 100644 src/app/shared/components/confirm-dialog/confirm-dialog.component.scss create mode 100644 src/app/shared/components/confirm-dialog/confirm-dialog.component.spec.ts create mode 100644 src/app/shared/components/confirm-dialog/confirm-dialog.component.ts diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.html b/src/app/components/contacts/contact-detail/contact-detail.component.html index 7e615bd..6c15fd2 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.html +++ b/src/app/components/contacts/contact-detail/contact-detail.component.html @@ -57,7 +57,7 @@ @if (selectedUser.isContactOnly || currentUser && selectedUser.id !== currentUser.id) { -
+

{{ "contacts.btnDelete0" | translate }} @@ -100,3 +100,9 @@ } + diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.ts b/src/app/components/contacts/contact-detail/contact-detail.component.ts index cb61dcc..88d24ec 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.ts +++ b/src/app/components/contacts/contact-detail/contact-detail.component.ts @@ -14,11 +14,12 @@ import { OverlayService } from '../../../services/overlay.service'; import { ApiService } from '../../../services/api.service'; import { ToastNotificationService } from '../../../services/toast-notification.servic'; import { UpdateNotifierService } from '../../../services/update-notifier.service'; +import { ConfirmDialogComponent } from '../../../shared/components/confirm-dialog/confirm-dialog.component'; @Component({ selector: 'app-contact-detail', standalone: true, - imports: [CommonModule, TranslateModule], + imports: [CommonModule, TranslateModule, ConfirmDialogComponent], templateUrl: './contact-detail.component.html', styleUrl: './contact-detail.component.scss', }) @@ -31,6 +32,9 @@ export class ContactDetailComponent { selectedUser: User | null = null; isMobileNavbarOpen: boolean = false; + showConfirmDialog = false; + userToDeleteId: string | null = null; + constructor( private overlayService: OverlayService, private userService: UserService, @@ -97,9 +101,13 @@ export class ContactDetailComponent { this.isMobileNavbarOpen = false; } - async deleteContact(userId: string) { + toggleConfirmDialog() { + this.showConfirmDialog = !this.showConfirmDialog; + } + + async deleteContact() { try { - await lastValueFrom(this.apiService.deleteUserById(userId)); + await lastValueFrom(this.apiService.deleteUserById(this.selectedUserId!)); this.toastNotificationService.deleteContactSuccessToast(); this.updateNotifierService.notifyUpdate('contact'); this.closeUserDetails(); diff --git a/src/app/components/main-layout/main-layout.component.scss b/src/app/components/main-layout/main-layout.component.scss index 37d9f9f..2d2842f 100644 --- a/src/app/components/main-layout/main-layout.component.scss +++ b/src/app/components/main-layout/main-layout.component.scss @@ -10,7 +10,6 @@ app-header { height: 96px; width: 100%; background-color: var(--white); - z-index: 2; } app-sidebar { @@ -35,7 +34,6 @@ app-sidebar-mobile { padding: 64px; background-color: var(--bgContent); overflow-y: auto; - z-index: 1; } .blur-background { diff --git a/src/app/shared/components/confirm-dialog/confirm-dialog.component.html b/src/app/shared/components/confirm-dialog/confirm-dialog.component.html new file mode 100644 index 0000000..73cb21f --- /dev/null +++ b/src/app/shared/components/confirm-dialog/confirm-dialog.component.html @@ -0,0 +1,17 @@ +

+
+

{{ message }}

+
+
+
+ {{ "confirmDialogComponent.btnCancel" | translate }} +
+
+
+
+ {{ "confirmDialogComponent.btnConfirm" | translate }} +
+
+
+
+
diff --git a/src/app/shared/components/confirm-dialog/confirm-dialog.component.scss b/src/app/shared/components/confirm-dialog/confirm-dialog.component.scss new file mode 100644 index 0000000..4fc4917 --- /dev/null +++ b/src/app/shared/components/confirm-dialog/confirm-dialog.component.scss @@ -0,0 +1,112 @@ +section { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 999; + backdrop-filter: blur(5px); + background-color: rgba($color: #000000, $alpha: 0.2); +} + +.dialog { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: var(--white); + width: 600px; + height: 200px; + border-radius: 26px; + margin: 24px; + border: 2px solid rgba($color: #000000, $alpha: 0.1); + p { + text-align: center; + font-size: 27px; + font-weight: 500; + margin-bottom: 12px; + padding: 0 12px; + } +} + +.btns { + display: flex; + justify-content: center; + align-items: center; +} + +.btn { + display: flex; + flex-direction: column; + align-items: center; + width: 111px; + height: 57px; + margin: 0 24px; +} + +.btn-cancel { + padding: 12px; + margin: 12px 12px; + border-radius: 10px; + border-color: var(--black); + background-color: var(--dark-blue); + color: var(--white); + font-size: 23px; + font-weight: 400; + transition: 125ms ease-in-out; + cursor: pointer; + &:hover { + background-color: var(--light-blue); + box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3); + } +} + +.btn-delete-contact { + padding: 12px; + margin: 12px 12px; + border-radius: 10px; + color: var(--red); + background-color: var(--white); + border: 1px solid var(--red); + font-size: 23px; + font-weight: 400; + transition: 125ms ease-in-out; + cursor: pointer; + &:hover { + color: var(--white); + background-color: var(--red); + border-color: var(--black); + box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3); + } +} + +@media screen and (max-width: 450px) { + .dialog { + p { + font-size: 22px; + } + } +} + +@media screen and (max-width: 350px) { + .dialog { + width: 280px; + p { + font-size: 22px; + } + } + + .btn { + width: 100px; + } + + .btn-delete-contact, + .btn-cancel { + font-size: 18px; + } +} diff --git a/src/app/shared/components/confirm-dialog/confirm-dialog.component.spec.ts b/src/app/shared/components/confirm-dialog/confirm-dialog.component.spec.ts new file mode 100644 index 0000000..dc7f324 --- /dev/null +++ b/src/app/shared/components/confirm-dialog/confirm-dialog.component.spec.ts @@ -0,0 +1,22 @@ +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({ + imports: [ConfirmDialogComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(ConfirmDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/confirm-dialog/confirm-dialog.component.ts b/src/app/shared/components/confirm-dialog/confirm-dialog.component.ts new file mode 100644 index 0000000..85b8f50 --- /dev/null +++ b/src/app/shared/components/confirm-dialog/confirm-dialog.component.ts @@ -0,0 +1,24 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-confirm-dialog', + standalone: true, + imports: [TranslateModule], + templateUrl: './confirm-dialog.component.html', + styleUrl: './confirm-dialog.component.scss', +}) +export class ConfirmDialogComponent { + @Input() message: string = 'Are you sure?'; + @Output() onCancel = new EventEmitter(); + @Output() onConfirm = new EventEmitter(); + + cancel() { + this.onCancel.emit(); + } + + confirm() { + this.cancel(); + this.onConfirm.emit(); + } +} diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index 2b3e2f9..737e17d 100644 --- a/src/assets/i18n/de.json +++ b/src/assets/i18n/de.json @@ -91,10 +91,10 @@ "email": "E-Mail", "phone": "Telefon" }, - "contactDeleteDialog": { + "confirmDialogComponent": { "deleteContact": "Möchten Sie den Kontakt wirklich löschen?", "btnCancel": "Abbrechen", - "btnDelete": "Löschen" + "btnConfirm": "Bestätigen" }, "summary": { "headlineDescription": "Schlüsselmetriken auf einen Blick", diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 655c470..dc4cc84 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -91,10 +91,10 @@ "email": "Email", "phone": "Phone" }, - "contactDeleteDialog": { + "confirmDialogComponent": { "deleteContact": "Do you really want to delete the contact?", "btnCancel": "Cancel", - "btnDelete": "Delete" + "btnConfirm": "Confirm" }, "summary": { "headlineDescription": "Key Metrics at a Glance",