frontend: Added notifications components and services

frontend/projects/shared-call-components/src/lib/components/dialog/dialog.component.html

@@ -0,0 +1,6 @@
+<h2 mat-dialog-title>Delete file</h2>
+<mat-dialog-content> Would you like to delete? </mat-dialog-content>
+<mat-dialog-actions>
+	<button mat-button mat-dialog-close>No</button>
+	<button mat-button mat-dialog-close cdkFocusInitial>Ok</button>
+</mat-dialog-actions>

frontend/projects/shared-call-components/src/lib/components/dialog/dialog.component.scss

@@ -0,0 +1,3 @@
+button {
+	margin-right: 8px;
+}

frontend/projects/shared-call-components/src/lib/components/dialog/dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogComponent } from './dialog.component';
+
+describe('DialogComponent', () => {
+  let component: DialogComponent;
+  let fixture: ComponentFixture<DialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DialogComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/projects/shared-call-components/src/lib/components/dialog/dialog.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogActions, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+	selector: 'ov-dialog',
+	standalone: true,
+	imports: [MatButtonModule, MatDialogActions, MatDialogContent],
+	template: `<h2 mat-dialog-title>Delete file</h2>
+		<mat-dialog-content> Would you like to delete? </mat-dialog-content>
+		<mat-dialog-actions>
+			<button mat-button mat-dialog-close (click)="close()">No</button>
+			<button mat-button mat-dialog-close cdkFocusInitial (click)="close()">Ok</button>
+		</mat-dialog-actions>`,
+	styleUrl: './dialog.component.scss',
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DialogComponent {
+	readonly dialogRef = inject(MatDialogRef<DialogComponent>);
+
+	close(): void {
+		this.dialogRef.close();
+	}
+}

frontend/projects/shared-call-components/src/lib/components/spinner/spinner.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpinnerComponent } from './spinner.component';
+
+describe('SpinnerComponent', () => {
+  let component: SpinnerComponent;
+  let fixture: ComponentFixture<SpinnerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SpinnerComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/projects/shared-call-components/src/lib/components/spinner/spinner.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+@Component({
+	selector: 'ov-spinner',
+	standalone: true,
+	imports: [MatProgressSpinnerModule],
+	template: `<mat-spinner></mat-spinner>`,
+	styleUrl: './spinner.component.scss'
+})
+export class SpinnerComponent {}

frontend/projects/shared-call-components/src/lib/services/index.ts

@@ -1,3 +1,4 @@
 export * from './context/context.service';
 export * from './http/http.service';
 export * from './global-preferences/global-preferences.service';
+export * from './notification/notification.service';

frontend/projects/shared-call-components/src/lib/services/notification/notification.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NotificationService } from './notification.service';
+
+describe('NotificationService', () => {
+  let service: NotificationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NotificationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/projects/shared-call-components/src/lib/services/notification/notification.service.ts

@@ -0,0 +1,75 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { SpinnerComponent } from '../../components/spinner/spinner.component';
+import { DialogComponent } from '../../components/dialog/dialog.component';
+
+export interface DialogOptions {
+	title?: string;
+	message: string;
+	confirmText?: string;
+	cancelText?: string;
+}
+
+@Injectable({
+	providedIn: 'root'
+})
+export class NotificationService {
+	private spinnerRef: any; // Referencia al spinner
+
+	constructor(
+		private snackBar: MatSnackBar,
+		private dialog: MatDialog,
+		private overlay: Overlay
+	) {}
+
+	showSpinner() {
+		if (!this.spinnerRef) {
+			const overlayRef = this.overlay.create({
+				positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+				panelClass: 'spinner-overlay'
+			});
+
+			this.spinnerRef = overlayRef.attach(new ComponentPortal(SpinnerComponent));
+		}
+	}
+	hideSpinner(): void {
+		if (this.spinnerRef) {
+			this.spinnerRef.detach();
+			this.spinnerRef = null;
+		}
+	}
+
+	// Método para mostrar un snackbar
+	showSnackbar(message: string, duration: number = 3000): void {
+		this.snackBar.open(message, 'Cerrar', {
+			duration,
+			verticalPosition: 'top',
+			horizontalPosition: 'right',
+			panelClass: 'custom-snackbar' // Añade tus estilos para el snackbar
+		});
+	}
+
+	// Método para mostrar un diálogo
+	showDialog(options: DialogOptions): void {
+		this.dialog.open(DialogComponent, {
+			data: options, // Pasa las opciones al componente del diálogo
+			width: '400px',
+			disableClose: true // Evita que se cierre haciendo clic fuera del diálogo
+		});
+	}
+
+	// Método para mostrar una alerta
+	showAlert(message: string): void {
+		// this.dialog.open(AlertDialogComponent, {
+		// 	data: {
+		// 		message,
+		// 		confirmText: 'OK'
+		// 	},
+		// 	width: '300px',
+		// 	disableClose: true
+		// });
+	}
+}

frontend/src/app/pages/console/room-preferences/room-preferences.component.ts

@@ -1,6 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { RoomPreferences } from '@openvidu/call-common-types';
-import { DynamicGridComponent, GlobalPreferencesService, ToggleCardComponent } from 'shared-call-components';
+import {
+	DynamicGridComponent,
+	GlobalPreferencesService,
+	NotificationService,
+	ToggleCardComponent
+} from 'shared-call-components';
 
 @Component({
 	selector: 'ov-room-preferences',
@@ -16,7 +21,10 @@ export class RoomPreferencesComponent implements OnInit {
 	chatEnabled = false;
 	backgroundsEnabled = false;
 
-	constructor(private globalPreferencesService: GlobalPreferencesService) {}
+	constructor(
+		private globalPreferencesService: GlobalPreferencesService,
+		private notificationService: NotificationService
+	) {}
 
 	async ngOnInit() {
 		try {