From 0e0e2db776d2e2dc09014073ecb555136b054799 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Sun, 6 Apr 2025 11:42:35 +0200 Subject: [PATCH] fix: bugfixes and optimization in OverlayComponent for improved performance and usability --- src/app/services/overlay.service.ts | 4 ++++ .../contact-form/contact-form.component.html | 10 +++++++++- .../contact-form/contact-form.component.ts | 20 ++++++++++++++++--- .../contact-overlay.component.html | 4 ++-- .../contact-overlay.component.ts | 4 ++-- .../dialog-overlay.component.ts | 4 ++-- .../components/overlay/overlay.component.ts | 17 +++++++++------- .../task-edit-overlay.component.ts | 4 ++-- .../task-overlay/task-overlay.component.html | 2 ++ .../task-overlay/task-overlay.component.ts | 4 ++-- 10 files changed, 52 insertions(+), 21 deletions(-) diff --git a/src/app/services/overlay.service.ts b/src/app/services/overlay.service.ts index 1d79bfc..dff8d6b 100644 --- a/src/app/services/overlay.service.ts +++ b/src/app/services/overlay.service.ts @@ -19,4 +19,8 @@ export class OverlayService { setOverlayData(overlay: string, data: any) { this.overlayDataSubject.next({ overlay, data }); } + + clearOverlayData() { + this.overlayDataSubject.next(null); + } } diff --git a/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html b/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html index 907255f..fd4ac25 100644 --- a/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html +++ b/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html @@ -125,7 +125,7 @@ class="btn-delete" type="button" value="{{ 'contactDialogForm.btnDelete' | translate }}" - (click)="deleteContact(selectedUser.id)" + (click)="toggleConfirmDialog()" > } @else { + + + diff --git a/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.ts b/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.ts index 728b4fb..f2ed8ba 100644 --- a/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.ts +++ b/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.ts @@ -16,11 +16,19 @@ import { ApiService } from '../../../../../services/api.service'; import { ToastNotificationService } from '../../../../../services/toast-notification.service'; import { UpdateNotifierService } from '../../../../../services/update-notifier.service'; import { User } from '../../../../../interfaces/user.interface'; +import { ConfirmDialogComponent } from '../../../confirm-dialog/confirm-dialog.component'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'app-contact-form', standalone: true, - imports: [TranslateModule, FormsModule, FormBtnComponent], + imports: [ + CommonModule, + TranslateModule, + FormsModule, + FormBtnComponent, + ConfirmDialogComponent, + ], templateUrl: './contact-form.component.html', styleUrl: './contact-form.component.scss', }) @@ -30,7 +38,7 @@ export class ContactFormComponent implements OnInit, OnChanges { @Input() newColor: string = ''; @Input() currentColor: string = ''; @Output() initialsEmitter = new EventEmitter(); - @Output() closeDialogEmitter = new EventEmitter(); + @Output() closeDialogEmitter = new EventEmitter(); constructor( public resizeService: ResizeService, @@ -39,6 +47,8 @@ export class ContactFormComponent implements OnInit, OnChanges { private updateNotifierService: UpdateNotifierService ) {} + showConfirmDialog = false; + contactData = { firstName: '', lastName: '', @@ -284,7 +294,11 @@ export class ContactFormComponent implements OnInit, OnChanges { } } + toggleConfirmDialog(): void { + this.showConfirmDialog = !this.showConfirmDialog; + } + closeDialog() { - this.closeDialogEmitter.emit(''); + this.closeDialogEmitter.emit(false); } } diff --git a/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.html b/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.html index d6f8720..4c9cbd4 100644 --- a/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.html +++ b/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.html @@ -1,5 +1,5 @@ @if (overlayData !== "new") { -
+
@@ -36,7 +36,7 @@
} @else { -
+
diff --git a/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.ts b/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.ts index 6bd6902..1cd9ad7 100644 --- a/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.ts +++ b/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.ts @@ -21,7 +21,7 @@ import { ColorPickerModule } from 'ngx-color-picker'; export class ContactOverlayComponent implements OnInit { @Input() overlayData: any = []; @Input() overlayType: string = ''; - @Output() closeDialogEmitter = new EventEmitter(); + @Output() closeDialogEmitter = new EventEmitter(); randomColor: string = this.getRandomColor(); userInitials: string = ''; @@ -52,7 +52,7 @@ export class ContactOverlayComponent implements OnInit { } closeDialog() { - this.closeDialogEmitter.emit(''); + this.closeDialogEmitter.emit(false); } /** diff --git a/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.ts b/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.ts index 5dc0eef..b816ac8 100644 --- a/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.ts +++ b/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.ts @@ -13,7 +13,7 @@ import { TranslateModule } from '@ngx-translate/core'; export class DialogOverlayComponent { @Input() overlayData: string = ''; @Input() overlayType: string = ''; - @Output() closeDialogEmitter = new EventEmitter(); + @Output() closeDialogEmitter = new EventEmitter(); constructor(private router: Router) {} @@ -24,6 +24,6 @@ export class DialogOverlayComponent { */ closeOverlay() { this.router.navigate(['/login']); - this.closeDialogEmitter.emit(''); + this.closeDialogEmitter.emit(false); } } diff --git a/src/app/shared/components/overlay/overlay.component.ts b/src/app/shared/components/overlay/overlay.component.ts index 20f91be..11f2aaf 100644 --- a/src/app/shared/components/overlay/overlay.component.ts +++ b/src/app/shared/components/overlay/overlay.component.ts @@ -14,8 +14,8 @@ import { ContactOverlayComponent } from './contact-overlay/contact-overlay.compo CommonModule, TaskOverlayComponent, TaskEditOverlayComponent, - DialogOverlayComponent, ContactOverlayComponent, + DialogOverlayComponent, ], templateUrl: './overlay.component.html', styleUrl: './overlay.component.scss', @@ -53,23 +53,26 @@ export class OverlayComponent implements OnInit { * If the overlay type is 'dialog', navigates to the login route. * @param emitter The string to be emitted, which will also be set as the overlay data. */ - onCloseOverlay(emitter: string) { - this.overlayType === 'dialog' && this.router.navigate(['/login']); + onCloseOverlay(emitter: boolean) { this.overlayData = emitter; + this.overlayService.clearOverlayData(); } @HostListener('document:click', ['$event']) + /** - * Listens for clicks on the overlay background and closes the overlay if the target element does not have the class 'overlay-content'. - * @param event The click event. + * Checks if a click event occurred within the overlay but outside the content or dialog elements. + * If so, closes the overlay by emitting an event. + * + * @param event The MouseEvent that triggered the check. */ checkOpenContactEdit(event: MouseEvent) { const targetElement = event.target as HTMLElement; if ( targetElement.closest('.overlay') && - !targetElement.closest('.overlay-content') + (!targetElement.closest('.content') || !targetElement.closest('.dialog')) ) { - this.onCloseOverlay(''); + this.onCloseOverlay(false); } } } diff --git a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts index d92191e..3269d36 100644 --- a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts +++ b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts @@ -16,7 +16,7 @@ import { ApiService } from '../../../../services/api.service'; export class TaskEditOverlayComponent { @Input() overlayData: string = ''; @Input() overlayType: string = ''; - @Output() closeDialogEmitter = new EventEmitter(); + @Output() closeDialogEmitter = new EventEmitter(); overlayMobile: boolean = false; @@ -64,7 +64,7 @@ export class TaskEditOverlayComponent { closeDialog() { this.overlayMobile ? this.router.navigate(['/board']) - : this.closeDialogEmitter.emit(''); + : this.closeDialogEmitter.emit(false); this.removeTaskData(); } diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.html b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html index 98e6457..277bad5 100644 --- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.html +++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html @@ -145,6 +145,8 @@
}
+ + (); + @Output() closeDialogEmitter = new EventEmitter(); task: Task | null = null; overlayMobile: boolean = false; @@ -94,7 +94,7 @@ export class TaskOverlayComponent implements OnInit { * can be used to close the overlay from the parent component. */ closeDialog() { - this.closeDialogEmitter.emit(''); + this.closeDialogEmitter.emit(false); } /**