From 9641667359968da1a7452d6ca800f024dd2f3a62 Mon Sep 17 00:00:00 2001 From: juancarmore Date: Tue, 2 Sep 2025 11:47:06 +0200 Subject: [PATCH] frontend: enhance dialog component with icon support and force confirmation checkbox --- .../basic-dialog/dialog.component.html | 39 ++++++++++ .../basic-dialog/dialog.component.scss | 4 +- .../dialogs/basic-dialog/dialog.component.ts | 76 +++++-------------- .../src/lib/models/notification.model.ts | 5 +- .../recordings/recordings.component.ts | 10 ++- .../room-recordings.component.ts | 10 ++- 6 files changed, 76 insertions(+), 68 deletions(-) create mode 100644 frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.html diff --git a/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.html b/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.html new file mode 100644 index 0000000..be32a9e --- /dev/null +++ b/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.html @@ -0,0 +1,39 @@ +
+ @if (data.title) { +

+ @if (data.icon) { + {{ data.icon }} + } + {{ data.title }} +

+ } + +
+ @if (data.showForceCheckbox) { +
+ + {{ data.forceCheckboxText }} + +
+ warning + {{ data.forceCheckboxDescription }} +
+
+ } + + + + + +
diff --git a/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.scss b/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.scss index ae61849..a7625e2 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.scss @@ -156,8 +156,8 @@ transform: translateY(0); } - // Force delete state - changes to warning color - &.force-delete { + // Force state - changes to warning color + &.force { background: var(--ov-meet-color-warning) !important; border-color: var(--ov-meet-color-warning) !important; diff --git a/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.ts b/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.ts index 0c0cc2f..7e2d326 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.ts @@ -2,66 +2,43 @@ import { ChangeDetectionStrategy, Component, Inject, inject } from '@angular/cor import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatCheckboxModule } from '@angular/material/checkbox'; +import { + MAT_DIALOG_DATA, + MatDialogActions, + MatDialogContent, + MatDialogRef, + MatDialogTitle +} from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; -import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog'; import type { DialogOptions } from '@lib/models'; @Component({ selector: 'ov-dialog', standalone: true, - imports: [FormsModule, MatButtonModule, MatIconModule, MatCheckboxModule, MatDialogActions, MatDialogContent, MatDialogTitle], - template: `
-

- {{ getDialogIcon() }} - {{ data.title }} -

- -
- @if (data.showForceCheckbox) { -
- - {{ data.forceCheckboxText }} - -
- warning - {{ data.forceCheckboxDescription }} -
-
- } - - - - - -
`, + imports: [ + FormsModule, + MatButtonModule, + MatIconModule, + MatCheckboxModule, + MatDialogActions, + MatDialogContent, + MatDialogTitle + ], + templateUrl: './dialog.component.html', styleUrl: './dialog.component.scss', changeDetection: ChangeDetectionStrategy.OnPush }) export class DialogComponent { readonly dialogRef = inject(MatDialogRef); - forceDelete = false; + force = false; constructor(@Inject(MAT_DIALOG_DATA) public data: DialogOptions) {} close(type: 'confirm' | 'cancel'): void { this.dialogRef.close(); + if (type === 'confirm') { - if (this.forceDelete && this.data.forceConfirmCallback) { + if (this.force && this.data.forceConfirmCallback) { this.data.forceConfirmCallback(); } else if (this.data.confirmCallback) { this.data.confirmCallback(); @@ -70,17 +47,4 @@ export class DialogComponent { this.data.cancelCallback(); } } - - getDialogIcon(): string { - if (this.data.title?.toLowerCase().includes('delete')) { - return 'delete_outline'; - } - if (this.data.title?.toLowerCase().includes('warning')) { - return 'warning'; - } - if (this.data.title?.toLowerCase().includes('error')) { - return 'error_outline'; - } - return 'help_outline'; - } } diff --git a/frontend/projects/shared-meet-components/src/lib/models/notification.model.ts b/frontend/projects/shared-meet-components/src/lib/models/notification.model.ts index 17e52a9..a2da2bf 100644 --- a/frontend/projects/shared-meet-components/src/lib/models/notification.model.ts +++ b/frontend/projects/shared-meet-components/src/lib/models/notification.model.ts @@ -1,11 +1,12 @@ export interface DialogOptions { title?: string; + icon?: string; message: string; confirmText?: string; cancelText?: string; - cancelCallback?: () => void; confirmCallback?: () => void; - // Force delete options + cancelCallback?: () => void; + // Force options showForceCheckbox?: boolean; forceCheckboxText?: string; forceCheckboxDescription?: string; diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts index 7435732..13a9c0a 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts @@ -167,10 +167,11 @@ export class RecordingsComponent implements OnInit { }; this.notificationService.showDialog({ + title: 'Delete Recording', + icon: 'delete_outline', + message: `Are you sure you want to delete the recording ${recording.recordingId}?`, confirmText: 'Delete', cancelText: 'Cancel', - title: 'Delete Recording', - message: `Are you sure you want to delete the recording ${recording.recordingId}?`, confirmCallback: deleteCallback }); } @@ -216,10 +217,11 @@ export class RecordingsComponent implements OnInit { const count = recordings.length; this.notificationService.showDialog({ + title: 'Delete Recordings', + icon: 'delete_outline', + message: `Are you sure you want to delete ${count} recordings?`, confirmText: 'Delete all', cancelText: 'Cancel', - title: 'Delete Recordings', - message: `Are you sure you want to delete ${count} recordings?`, confirmCallback: bulkDeleteCallback }); } diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts index a55d46f..6cfd588 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts @@ -179,10 +179,11 @@ export class RoomRecordingsComponent implements OnInit { }; this.notificationService.showDialog({ + title: 'Delete Recording', + icon: 'delete_outline', + message: `Are you sure you want to delete the recording ${recording.recordingId}?`, confirmText: 'Delete', cancelText: 'Cancel', - title: 'Delete Recording', - message: `Are you sure you want to delete the recording ${recording.recordingId}?`, confirmCallback: deleteCallback }); } @@ -228,10 +229,11 @@ export class RoomRecordingsComponent implements OnInit { const count = recordings.length; this.notificationService.showDialog({ + title: 'Delete Recordings', + icon: 'delete_outline', + message: `Are you sure you want to delete ${count} recordings?`, confirmText: 'Delete all', cancelText: 'Cancel', - title: 'Delete Recordings', - message: `Are you sure you want to delete ${count} recordings?`, confirmCallback: bulkDeleteCallback }); }