neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
juancarmore 2025-09-02 11:47:06 +02:00
parent 4802f48ba6
commit 9641667359
6 changed files with 76 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.html Normal file
View File

@ -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>

4
frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.scss
View File

@ -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;

76
frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.ts
View File

@ -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: ` <div class="dialog-container">
<h2 mat-dialog-title class="dialog-title ov-text-center">
<mat-icon class="dialog-icon">{{ getDialogIcon() }}</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)]="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>`,
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<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';
}
}

5
frontend/projects/shared-meet-components/src/lib/models/notification.model.ts
View File

@ -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;

10
frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts
View File

@ -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
});
}

10
frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts
View File

@ -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
});
}