frontend: enhance dialog component with icon support and force confirmation checkbox

frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.html

@@ -0,0 +1,39 @@
+<div class="dialog-container">
+	@if (data.title) {
+		<h2 mat-dialog-title class="dialog-title ov-text-center">
+			@if (data.icon) {
+				<mat-icon class="dialog-icon">{{ data.icon }}</mat-icon>
+			}
+			{{ data.title }}
+		</h2>
+	}
+	<mat-dialog-content>
+		<div class="dialog-message" [innerHTML]="data.message"></div>
+		@if (data.showForceCheckbox) {
+			<div class="force-checkbox-container">
+				<mat-checkbox [(ngModel)]="force" class="force-checkbox" color="warn">
+					<span class="checkbox-text">{{ data.forceCheckboxText }}</span>
+				</mat-checkbox>
+				<div class="checkbox-warning">
+					<mat-icon class="warning-icon">warning</mat-icon>
+					<span class="warning-text">{{ data.forceCheckboxDescription }}</span>
+				</div>
+			</div>
+		}
+	</mat-dialog-content>
+	<mat-dialog-actions class="dialog-action">
+		<button mat-button mat-dialog-close (click)="close('cancel')" class="cancel-button">
+			{{ data.cancelText ?? 'Cancel' }}
+		</button>
+		<button
+			mat-flat-button
+			mat-dialog-close
+			cdkFocusInitial
+			(click)="close('confirm')"
+			class="confirm-button"
+			[class.force]="force"
+		>
+			{{ data.confirmText ?? 'Confirm' }}
+		</button>
+	</mat-dialog-actions>
+</div>

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 state - changes to warning color
-			&.force-delete {
+			&.force {
 				background: var(--ov-meet-color-warning) !important;
 				border-color: var(--ov-meet-color-warning) !important;
 

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],
+	imports: [
-	template: ` <div class="dialog-container">
+		FormsModule,
-		<h2 mat-dialog-title class="dialog-title ov-text-center">
+		MatButtonModule,
-			<mat-icon class="dialog-icon">{{ getDialogIcon() }}</mat-icon>
+		MatIconModule,
-			{{ data.title }}
+		MatCheckboxModule,
-		</h2>
+		MatDialogActions,
-		<mat-dialog-content>
+		MatDialogContent,
-			<div class="dialog-message" [innerHTML]="data.message"></div>
+		MatDialogTitle
-			@if (data.showForceCheckbox) {
+	],
-				<div class="force-checkbox-container">
+	templateUrl: './dialog.component.html',
-					<mat-checkbox
-						[(ngModel)]="forceDelete"
-						class="force-checkbox"
-						color="warn"
-					>
-						<span class="checkbox-text">{{ data.forceCheckboxText }}</span>
-					</mat-checkbox>
-					<div class="checkbox-warning">
-						<mat-icon class="warning-icon">warning</mat-icon>
-						<span class="warning-text">{{ data.forceCheckboxDescription }}</span>
-					</div>
-				</div>
-			}
-		</mat-dialog-content>
-		<mat-dialog-actions class="dialog-action">
-			<button mat-button mat-dialog-close (click)="close('cancel')" class="cancel-button">
-				{{ data.cancelText }}
-			</button>
-			<button
-				mat-flat-button
-				mat-dialog-close
-				cdkFocusInitial
-				(click)="close('confirm')"
-				class="confirm-button"
-				[class.force-delete]="forceDelete"
-			>
-				{{ data.confirmText }}
-			</button>
-		</mat-dialog-actions>
-	</div>`,
 	styleUrl: './dialog.component.scss',
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DialogComponent {
 	readonly dialogRef = inject(MatDialogRef<DialogComponent>);
-	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';
-	}
 }

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;

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 <b>${recording.recordingId}</b>?`,
 			confirmText: 'Delete',
 			cancelText: 'Cancel',
-			title: 'Delete Recording',
-			message: `Are you sure you want to delete the recording <b>${recording.recordingId}</b>?`,
 			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 <b>${count}</b> recordings?`,
 			confirmText: 'Delete all',
 			cancelText: 'Cancel',
-			title: 'Delete Recordings',
-			message: `Are you sure you want to delete <b>${count}</b> recordings?`,
 			confirmCallback: bulkDeleteCallback
 		});
 	}

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 <b>${recording.recordingId}</b>?`,
 			confirmText: 'Delete',
 			cancelText: 'Cancel',
-			title: 'Delete Recording',
-			message: `Are you sure you want to delete the recording <b>${recording.recordingId}</b>?`,
 			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 <b>${count}</b> recordings?`,
 			confirmText: 'Delete all',
 			cancelText: 'Cancel',
-			title: 'Delete Recordings',
-			message: `Are you sure you want to delete <b>${count}</b> recordings?`,
 			confirmCallback: bulkDeleteCallback
 		});
 	}