frontend: Added console pages to library

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

@@ -1,21 +1,16 @@
 <mat-toolbar color="primary">
-	<!-- Botón de menú (Izquierda) -->
 	<button mat-icon-button aria-label="Menu icon" (click)="toggleSideMenu()">
 		<mat-icon>menu</mat-icon>
 	</button>
 
-	<!-- Título centrado -->
 	<span class="toolbar-title">OpenVidu Console</span>
 
-	<!-- Espaciador para separar el título de los botones de la derecha -->
 	<span class="toolbar-spacer"></span>
 
-	<!-- Botón de perfil (Derecha) -->
 	<button mat-icon-button aria-label="Profile">
 		<mat-icon>account_circle</mat-icon>
 	</button>
 
-	<!-- Botón de logout (Derecha) -->
 	<button mat-icon-button (click)="onLogoutClicked.emit()" aria-label="Logout">
 		<mat-icon>logout</mat-icon>
 	</button>
@@ -44,17 +39,13 @@
 					</span>
 				</a>
 			</ng-container>
-
-			<!-- Añade enlaces dinamicamente aqui -->
 		</mat-nav-list>
 	</mat-sidenav>
 
-	<!-- Contenido principal -->
+	<!-- Main content -->
 	<mat-sidenav-content>
-		<!-- Contenido de la página -->
 		<div class="page-content">
-			<!-- Aquí va el contenido de cada página -->
-			<router-outlet></router-outlet> <!-- Aquí se mostrará el contenido basado en la ruta -->
+			<router-outlet></router-outlet>
 		</div>
 	</mat-sidenav-content>
 </mat-sidenav-container>

frontend/projects/shared-call-components/src/lib/pages/console/about/about.component.html

@@ -0,0 +1 @@
+<p>Non implemented!</p>

frontend/projects/shared-call-components/src/lib/pages/console/about/about.component.spec.ts

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

frontend/projects/shared-call-components/src/lib/pages/console/about/about.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ov-about',
+  standalone: true,
+  imports: [],
+  templateUrl: './about.component.html',
+  styleUrl: './about.component.scss'
+})
+export class AboutComponent {
+
+}

frontend/projects/shared-call-components/src/lib/pages/console/access-permissions/access-permissions.component.html

@@ -0,0 +1 @@
+<p>Non implemented!</p>

frontend/src/app/pages/console/appearance/appearance.component.html → frontend/projects/shared-call-components/src/lib/pages/console/appearance/appearance.component.html

@@ -7,4 +7,6 @@
 		[cardBackgroundColor]="'#ffffff'"
 	>
 	</ov-logo-card>
+
+	<ng-content></ng-content>
 </ov-dynamic-grid>

frontend/src/app/pages/console/appearance/appearance.component.ts → frontend/projects/shared-call-components/src/lib/pages/console/appearance/appearance.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { DynamicGridComponent, LogoCardComponent } from 'shared-call-components';
+import { DynamicGridComponent, LogoCardComponent } from '../../..//components';
 
 @Component({
 	selector: 'ov-appearance',

frontend/src/app/pages/console/console.component.ts → frontend/projects/shared-call-components/src/lib/pages/console/console.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { ConsoleNavComponent, ConsoleNavLink } from 'shared-call-components';
+import { ConsoleNavComponent } from '../../components/console-nav/console-nav.component';
+import { ConsoleNavLink } from '../../models/sidenav.model';
 
 @Component({
 	selector: 'app-console',
@@ -10,14 +11,12 @@ import { ConsoleNavComponent, ConsoleNavLink } from 'shared-call-components';
 })
 export class ConsoleComponent {
 	navLinks: ConsoleNavLink[] = [
-		{ label: 'Overview', route: '/', icon: 'dashboard' },
+		{ label: 'Overview', route: 'overview', icon: 'dashboard' },
+		{ label: 'Access & Permissions', route: 'access-permissions', icon: 'lock' },
 		{ label: 'Appearance', route: 'appearance', icon: 'palette' },
 		{ label: 'Room Preferences', route: 'room-preferences', icon: 'video_settings' },
-		{ label: 'Access & Permissions', route: 'access-permissions', icon: 'lock' }
-		// { label: 'Security (PRO)', route: 'security', icon: 'security' },
-		// { label: 'Integrations (PRO)', route: 'integrations', icon: 'integration_instructions' },
-		// { label: 'Support', route: 'support', icon: 'support' },
-		// { label: 'About', route: 'about', icon: 'info' }
+		{ label: 'Security', route: 'security-preferences', icon: 'security' },
+		{ label: 'About', route: 'about', icon: 'info' }
 	];
 
 	constructor() {}

frontend/projects/shared-call-components/src/lib/pages/console/overview/overview.component.html

@@ -0,0 +1 @@
+<p>Non implemented!</p>

frontend/projects/shared-call-components/src/lib/pages/console/overview/overview.component.spec.ts

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

frontend/projects/shared-call-components/src/lib/pages/console/overview/overview.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ov-overview',
+  standalone: true,
+  imports: [],
+  templateUrl: './overview.component.html',
+  styleUrl: './overview.component.scss'
+})
+export class OverviewComponent {
+
+}

frontend/src/app/pages/console/room-preferences/room-preferences.component.ts → frontend/projects/shared-call-components/src/lib/pages/console/room-preferences/room-preferences.component.ts

@@ -1,11 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { RoomPreferences } from '@openvidu/call-common-types';
-import {
-	DynamicGridComponent,
-	GlobalPreferencesService,
-	NotificationService,
-	ToggleCardComponent
-} from 'shared-call-components';
+import { GlobalPreferencesService, NotificationService } from '../../../services';
+import { DynamicGridComponent, ToggleCardComponent } from '../../../components';
+
 
 @Component({
 	selector: 'ov-room-preferences',

frontend/projects/shared-call-components/src/lib/pages/console/security-preferences/security-preferences.component.html

@@ -0,0 +1 @@
+<p>Non implemented!</p>

frontend/projects/shared-call-components/src/lib/pages/console/security-preferences/security-preferences.component.spec.ts

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

frontend/projects/shared-call-components/src/lib/pages/console/security-preferences/security-preferences.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ov-security-preferences',
+  standalone: true,
+  imports: [],
+  templateUrl: './security-preferences.component.html',
+  styleUrl: './security-preferences.component.scss'
+})
+export class SecurityPreferencesComponent {
+
+}

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

@@ -0,0 +1,7 @@
+export * from './console/console.component';
+export * from './console/room-preferences/room-preferences.component';
+export * from './console/access-permissions/access-permissions.component';
+export * from './console/appearance/appearance.component';
+export * from './console/security-preferences/security-preferences.component';
+export * from './console/about/about.component';
+export * from './console/overview/overview.component';

frontend/projects/shared-call-components/src/public-api.ts

@@ -4,4 +4,5 @@
 
 export * from './lib/components/index';
 export * from './lib/services/index';
-export * from './lib/models/index';
+export * from './lib/models/index';
+export * from './lib/pages/index';

frontend/src/app/app.routes.ts

@@ -1,14 +1,20 @@
 import { Routes } from '@angular/router';
 import { HomeComponent } from '@app/pages/home/home.component';
 import { VideoRoomComponent } from '@app/pages/video-room/video-room.component';
-import { ConsoleComponent } from '@app/pages/console/console.component';
 import { roomGuard } from '@app/guards/room.guard';
 import { embeddedGuard } from '@app/guards/embedded.guard';
 import { nonEmbeddedGuard } from '@app/guards/non-embedded.guard';
-import { AppearanceComponent } from '@app/pages/console/appearance/appearance.component';
-import { RoomPreferencesComponent } from '@app/pages/console/room-preferences/room-preferences.component';
-import { AccessPermissionsComponent } from '@app/pages/console/access-permissions/access-permissions.component';
-import { UnauthorizedComponent } from 'shared-call-components';
+
+import {
+	RoomPreferencesComponent,
+	AccessPermissionsComponent,
+	AppearanceComponent,
+	UnauthorizedComponent,
+	ConsoleComponent,
+	AboutComponent,
+	SecurityPreferencesComponent,
+	OverviewComponent
+} from 'shared-call-components';
 export const routes: Routes = [
 	// Embedded mode
 	{
@@ -25,9 +31,13 @@ export const routes: Routes = [
 		component: ConsoleComponent,
 		canActivate: [nonEmbeddedGuard],
 		children: [
+			{ path: '', redirectTo: 'overview', pathMatch: 'full' },
+			{ path: 'overview', component: OverviewComponent },
+			{ path: 'access-permissions', component: AccessPermissionsComponent },
 			{ path: 'appearance', component: AppearanceComponent },
 			{ path: 'room-preferences', component: RoomPreferencesComponent },
-			{ path: 'access-permissions', component: AccessPermissionsComponent }
+			{ path: 'security-preferences', component: SecurityPreferencesComponent },
+			{ path: 'about', component: AboutComponent }
 		]
 	},
 	{ path: ':roomName', component: VideoRoomComponent, canActivate: [roomGuard] },