From 4f6eb1d7e37db40700584dbe8bccde132874b2de Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Mon, 17 Mar 2025 17:31:02 +0100
Subject: [PATCH] frontend: Add RoomFormComponent with routing and basic
 structure

---
 .../console-nav/console-nav.component.scss    |   5 +-
 .../rooms/room-form/room-form.component.html  |   1 +
 .../rooms/room-form/room-form.component.scss  |   0
 .../room-form/room-form.component.spec.ts     |  23 +++
 .../rooms/room-form/room-form.component.ts    |  12 ++
 .../pages/console/rooms/rooms.component.html  |  33 +++--
 .../pages/console/rooms/rooms.component.scss  |   7 +-
 .../pages/console/rooms/rooms.component.ts    | 139 ++++++++++--------
 .../src/lib/pages/index.ts                    |   1 +
 .../src/lib/routes/base-routes.ts             |   9 +-
 10 files changed, 146 insertions(+), 84 deletions(-)
 create mode 100644 frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.html
 create mode 100644 frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.scss
 create mode 100644 frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.spec.ts
 create mode 100644 frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.ts

diff --git a/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss b/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss
index ecd8578..3118d78 100644
--- a/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss
+++ b/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss
@@ -4,8 +4,8 @@ mat-sidenav-container {
 }
 
 .page-content {
-	height: 100%;
-	padding: 15px;
+	height: calc(100% - (64px + 40px));
+	padding: 20px;
 }
 .toolbar-title {
 	font-size: 1.5rem;
@@ -55,7 +55,6 @@ mat-sidenav {
 
 	.centeredEntry {
 		justify-content: center !important;
-
 	}
 }
 
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.html b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.html
new file mode 100644
index 0000000..9ac5509
--- /dev/null
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.html
@@ -0,0 +1 @@
+<p>room-form works!</p>
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.spec.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.spec.ts
new file mode 100644
index 0000000..7a4e5dc
--- /dev/null
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoomFormComponent } from './room-form.component';
+
+describe('RoomFormComponent', () => {
+  let component: RoomFormComponent;
+  let fixture: ComponentFixture<RoomFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RoomFormComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RoomFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.ts
new file mode 100644
index 0000000..09ad3ea
--- /dev/null
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ov-room-form',
+  standalone: true,
+  imports: [],
+  templateUrl: './room-form.component.html',
+  styleUrl: './room-form.component.scss'
+})
+export class RoomFormComponent {
+
+}
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.html b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.html
index 5f60ffb..c407811 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.html
@@ -30,13 +30,14 @@
 </div> -->
 <h1>Rooms</h1>
 
-<ov-dynamic-grid [maxColumns]="2" [withHeader]="true" [gutter]="'10px'" [layoutMode]="'grid'">
-	<!-- Custom Header-->
-	<div header></div>
+<!-- <ov-dynamic-grid [maxColumns]="2" [withHeader]="true" [gutter]="'10px'" [layoutMode]="'grid'"> -->
+<!-- Custom Header-->
+<!-- <div header></div> -->
 
+@if (!isInRoomForm()) {
 	<mat-list class="grid-item" [attr.data-span]="2">
 		<div mat-subheader class="item-subheader">
-			<h3>Active Rooms</h3>
+			<h3>Rooms</h3>
 			<div class="subheader-button">
 				<button mat-flat-button color="primary" (click)="createRoom()">
 					<mat-icon class="icon-left">add</mat-icon>
@@ -53,7 +54,7 @@
 				<div matListItemLine class="item-details">
 					<div>
 						<mat-icon class="icon">auto_delete</mat-icon>
-						<p>{{ item.expirationDate | date: 'dd/MM/yyyy' }}</p>
+						<p>Expires: {{ item.expirationDate | date: 'dd/MM/yyyy' }}</p>
 					</div>
 				</div>
 
@@ -71,9 +72,10 @@
 			<p class="empty-rooms-message">No rooms created yet</p>
 		}
 	</mat-list>
+}
 
-	<!-- Recording Toggle -->
-	<ov-toggle-card
+<!-- Recording Toggle -->
+<!-- <ov-toggle-card
 		[title]="'Recording'"
 		[description]="'Allow record your rooms for later use'"
 		[icon]="'radio_button_checked'"
@@ -82,10 +84,10 @@
 		[toggleValue]="recordingEnabled"
 		(onToggleValueChanged)="onRecordingToggle($event)"
 	>
-	</ov-toggle-card>
+	</ov-toggle-card> -->
 
-	<!-- Chat Toggle -->
-	<ov-toggle-card
+<!-- Chat Toggle -->
+<!-- <ov-toggle-card
 		[title]="'Chat'"
 		[description]="'Allow participants to communicate via chat'"
 		[icon]="'message'"
@@ -94,9 +96,9 @@
 		[toggleValue]="chatEnabled"
 		(onToggleValueChanged)="onChatToggle($event)"
 	>
-	</ov-toggle-card>
+	</ov-toggle-card> -->
 
-	<ov-toggle-card
+<!-- <ov-toggle-card
 		[title]="'Backgrounds'"
 		[description]="'Allow participants to change their backgrounds'"
 		[icon]="'blur_on'"
@@ -105,5 +107,8 @@
 		[toggleValue]="backgroundsEnabled"
 		(onToggleValueChanged)="onVirtualBackgroundToggle($event)"
 	>
-	</ov-toggle-card>
-</ov-dynamic-grid>
+	</ov-toggle-card> -->
+<!-- </ov-dynamic-grid> -->
+<div>
+	<router-outlet></router-outlet>
+</div>
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.scss
index 9f8186e..a2a9aeb 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.scss
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.scss
@@ -1,5 +1,6 @@
 .grid-item {
-	padding: 0 0 10px;
+	padding: 0px;
+	border: 1px solid #e9ecef;
 
 	.empty-rooms-message {
 		padding: 10px;
@@ -13,9 +14,13 @@
 		margin: 0;
 		display: flex;
 		justify-content: space-between;
+		border: 1px solid #e9ecef;
 
 		.subheader-button {
 			align-content: center;
+			button {
+				border-radius: 4px !important;
+			}
 		}
 	}
 
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts
index 5aaeb6c..12349e4 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts
@@ -9,6 +9,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListItem, MatListModule } from '@angular/material/list';
 import { OpenViduMeetRoom } from 'projects/shared-meet-components/src/lib/typings/ce/room';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 
 @Component({
 	selector: 'ov-room-preferences',
@@ -20,14 +21,15 @@ import { OpenViduMeetRoom } from 'projects/shared-meet-components/src/lib/typing
 		MatCardModule,
 		DatePipe,
 		MatButtonModule,
-		MatIconModule
+		MatIconModule,
+		RouterModule
 	],
 	templateUrl: './rooms.component.html',
 	styleUrl: './rooms.component.scss'
 })
 export class RoomsComponent implements OnInit {
 	createdRooms: OpenViduMeetRoom[] = [];
-	private roomPreferences!: RoomPreferences;
+	// private roomPreferences!: RoomPreferences;
 	recordingEnabled = false;
 	chatEnabled = false;
 	backgroundsEnabled = false;
@@ -37,31 +39,38 @@ export class RoomsComponent implements OnInit {
 	constructor(
 		protected loggerService: LoggerService,
 		private roomService: RoomService,
-		private notificationService: NotificationService
+		private notificationService: NotificationService,
+		protected router: Router,
+		protected route: ActivatedRoute
 	) {
 		this.log = this.loggerService.get('OpenVidu Meet - RoomService');
 	}
 
 	async ngOnInit() {
 		try {
-			const [rooms] = await Promise.all([this.roomService.listRooms(), this.loadRoomPreferences()]);
-			console.log('Rooms:', rooms);
+			const rooms = await this.roomService.listRooms();
 			this.createdRooms = rooms;
 		} catch (error) {
 			console.error('Error fetching room preferences', error);
 		}
 	}
 
+	isInRoomForm(): boolean {
+		return this.route.snapshot.firstChild !== null; // Verifica si hay un hijo en la ruta
+	}
+
 	async createRoom() {
-		try {
-			const room = await this.roomService.createRoom();
-			this.notificationService.showSnackbar('Room created');
-			this.log.d('Room created:', room);
-			this.createdRooms.push(room);
-		} catch (error) {
-			this.notificationService.showAlert('Error creating room');
-			this.log.e('Error creating room:', error);
-		}
+		//TODO: Go to room details page
+		await  this.router.navigate(['new'], { relativeTo: this.route });
+		// try {
+		// 	const room = await this.roomService.createRoom();
+		// 	this.notificationService.showSnackbar('Room created');
+		// 	this.log.d('Room created:', room);
+		// 	this.createdRooms.push(room);
+		// } catch (error) {
+		// 	this.notificationService.showAlert('Error creating room');
+		// 	this.log.e('Error creating room:', error);
+		// }
 	}
 
 	openRoom(roomName: string) {
@@ -79,72 +88,74 @@ export class RoomsComponent implements OnInit {
 		}
 	}
 
-	onRoomClicked(room: OpenViduMeetRoom) {
+	async onRoomClicked(room: OpenViduMeetRoom) {
 		console.log('Room clicked:', room);
+		//TODO: Go to room details page
+		await this.router.navigate([room.roomName, 'edit'], { relativeTo: this.route });
 	}
 
-	async onRecordingToggle(enabled: boolean) {
-		console.log('Recording toggled', enabled);
+	// async onRecordingToggle(enabled: boolean) {
+	// 	console.log('Recording toggled', enabled);
 
-		try {
-			this.roomPreferences.recordingPreferences.enabled = enabled;
-			await this.roomService.saveRoomPreferences(this.roomPreferences);
-			this.recordingEnabled = enabled;
+	// 	try {
+	// 		this.roomPreferences.recordingPreferences.enabled = enabled;
+	// 		await this.roomService.saveRoomPreferences(this.roomPreferences);
+	// 		this.recordingEnabled = enabled;
 
-			// TODO: Show a toast message
-		} catch (error) {
-			console.error('Error saving recording preferences', error);
-			// TODO: Show a toast message
-		}
-	}
+	// 		// TODO: Show a toast message
+	// 	} catch (error) {
+	// 		console.error('Error saving recording preferences', error);
+	// 		// TODO: Show a toast message
+	// 	}
+	// }
 
-	async onChatToggle(enabled: boolean) {
-		console.log('Chat toggled', enabled);
+	// async onChatToggle(enabled: boolean) {
+	// 	console.log('Chat toggled', enabled);
 
-		try {
-			this.roomPreferences.chatPreferences.enabled = enabled;
-			await this.roomService.saveRoomPreferences(this.roomPreferences);
-			this.chatEnabled = enabled;
-			// TODO: Show a toast message
-		} catch (error) {
-			console.error('Error saving chat preferences', error);
-			// TODO: Show a toast message
-		}
-	}
+	// 	try {
+	// 		this.roomPreferences.chatPreferences.enabled = enabled;
+	// 		await this.roomService.saveRoomPreferences(this.roomPreferences);
+	// 		this.chatEnabled = enabled;
+	// 		// TODO: Show a toast message
+	// 	} catch (error) {
+	// 		console.error('Error saving chat preferences', error);
+	// 		// TODO: Show a toast message
+	// 	}
+	// }
 
-	async onVirtualBackgroundToggle(enabled: boolean) {
-		console.log('Virtual background toggled', enabled);
+	// async onVirtualBackgroundToggle(enabled: boolean) {
+	// 	console.log('Virtual background toggled', enabled);
 
-		try {
-			this.roomPreferences.virtualBackgroundPreferences.enabled = enabled;
-			await this.roomService.saveRoomPreferences(this.roomPreferences);
-			this.backgroundsEnabled = enabled;
-			// TODO: Show a toast message
-		} catch (error) {
-			console.error('Error saving virtual background preferences', error);
-			// TODO: Show a toast message
-		}
-	}
+	// 	try {
+	// 		this.roomPreferences.virtualBackgroundPreferences.enabled = enabled;
+	// 		await this.roomService.saveRoomPreferences(this.roomPreferences);
+	// 		this.backgroundsEnabled = enabled;
+	// 		// TODO: Show a toast message
+	// 	} catch (error) {
+	// 		console.error('Error saving virtual background preferences', error);
+	// 		// TODO: Show a toast message
+	// 	}
+	// }
 
 	/**
 	 * Loads the room preferences from the global preferences service and assigns them to the component's properties.
 	 *
 	 * @returns {Promise<void>} A promise that resolves when the room preferences have been loaded and assigned.
 	 */
-	private async loadRoomPreferences() {
-		const preferences = await this.roomService.getRoomPreferences();
-		this.roomPreferences = preferences;
+	// private async loadRoomPreferences() {
+	// 	const preferences = await this.roomService.getRoomPreferences();
+	// 	this.roomPreferences = preferences;
 
-		console.log('Room preferences:', preferences);
+	// 	console.log('Room preferences:', preferences);
 
-		// Destructures the `preferences` object to extract the enabled status of various features.
-		const {
-			recordingPreferences: { enabled: recordingEnabled },
-			chatPreferences: { enabled: chatEnabled },
-			virtualBackgroundPreferences: { enabled: backgroundsEnabled }
-		} = preferences;
+	// 	// Destructures the `preferences` object to extract the enabled status of various features.
+	// 	const {
+	// 		recordingPreferences: { enabled: recordingEnabled },
+	// 		chatPreferences: { enabled: chatEnabled },
+	// 		virtualBackgroundPreferences: { enabled: backgroundsEnabled }
+	// 	} = preferences;
 
-		// Assigns the extracted values to the component's properties.
-		Object.assign(this, { recordingEnabled, chatEnabled, backgroundsEnabled });
-	}
+	// 	// Assigns the extracted values to the component's properties.
+	// 	Object.assign(this, { recordingEnabled, chatEnabled, backgroundsEnabled });
+	// }
 }
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/index.ts b/frontend/projects/shared-meet-components/src/lib/pages/index.ts
index abec4ee..24e34a4 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/index.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/index.ts
@@ -1,5 +1,6 @@
 export * from './console/console.component';
 export * from './console/rooms/rooms.component';
+export * from './console/rooms/room-form/room-form.component';
 export * from './console/recordings/recordings.component';
 export * from './console/access-permissions/access-permissions.component';
 export * from './console/appearance/appearance.component';
diff --git a/frontend/projects/shared-meet-components/src/lib/routes/base-routes.ts b/frontend/projects/shared-meet-components/src/lib/routes/base-routes.ts
index f79af54..6ec0866 100644
--- a/frontend/projects/shared-meet-components/src/lib/routes/base-routes.ts
+++ b/frontend/projects/shared-meet-components/src/lib/routes/base-routes.ts
@@ -23,7 +23,8 @@ import {
 	RecordingsComponent,
 	RoomsComponent,
 	SecurityPreferencesComponent,
-	VideoRoomComponent
+	VideoRoomComponent,
+	RoomFormComponent
 } from '../pages';
 import { LoginComponent } from '@lib/pages/login/login.component';
 import { Role } from '@lib/typings/ce';
@@ -74,7 +75,11 @@ export const baseRoutes: Routes = [
 			},
 			{
 				path: 'rooms',
-				component: RoomsComponent
+				component: RoomsComponent,
+				children: [
+					{ path: 'new', component: RoomFormComponent },
+					{ path: ':roomName/edit', component: RoomFormComponent }
+				]
 			},
 			{
 				path: 'recordings',