frontend: update room basic creation component to use wizard service for form management

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.html

@@ -12,14 +12,14 @@
 
 	<!-- Form Section -->
 	<main class="page-content">
-		<form [formGroup]="roomCreationForm" class="room-basic-creation-form" (ngSubmit)="onCreateRoom()">
+		<form [formGroup]="roomDetailsForm" class="room-basic-creation-form" (ngSubmit)="onCreateRoom()">
 			<!-- Room Field -->
 			<mat-form-field appearance="outline" class="form-field">
 				<mat-label>Room Name</mat-label>
 				<input matInput formControlName="roomName" placeholder="e.g. Demo Room" />
 				<mat-icon matSuffix class="ov-settings-icon">label</mat-icon>
 				<mat-hint>Enter a custom room name, or leave blank to use the default name "Room".</mat-hint>
-				@if (roomCreationForm.get('roomName')?.hasError('maxlength')) {
+				@if (roomDetailsForm.get('roomName')?.hasError('maxlength')) {
 					<mat-error>Room name cannot exceed 50 characters</mat-error>
 				}
 			</mat-form-field>

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.ts

@@ -1,10 +1,12 @@
-import { Component, EventEmitter, OnDestroy, Output } from '@angular/core';
+import { Component, effect, EventEmitter, OnDestroy, Output } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { RoomWizardStateService } from '@lib/services';
+import { MeetRoomOptions } from '@lib/typings/ce';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
@@ -25,15 +27,22 @@ export class RoomBasicCreationComponent implements OnDestroy {
 	@Output() createRoom = new EventEmitter<string | undefined>();
 	@Output() openAdvancedMode = new EventEmitter<void>();
 
-	roomCreationForm = new FormGroup({
+	roomDetailsForm = new FormGroup({
 		roomName: new FormControl('Room', [Validators.maxLength(50)])
 	});
 
 	private destroy$ = new Subject<void>();
 
-	constructor() {
+	constructor(private wizardService: RoomWizardStateService) {
-		this.roomCreationForm.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+		effect(() => {
-			// Optional: Save form data to local storage or service if needed
+			const steps = this.wizardService.steps();
+			if (steps.length !== 0) {
+				this.roomDetailsForm = steps[0].formGroup;
+
+				this.roomDetailsForm.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+					this.saveFormData(value);
+				});
+			}
 		});
 	}
 
@@ -42,9 +51,16 @@ export class RoomBasicCreationComponent implements OnDestroy {
 		this.destroy$.complete();
 	}
 
+	private saveFormData(formValue: any) {
+		const stepData: Partial<MeetRoomOptions> = {
+			roomName: formValue.roomName
+		};
+		this.wizardService.updateStepData('roomDetails', stepData);
+	}
+
 	onCreateRoom() {
-		if (this.roomCreationForm.valid) {
+		if (this.roomDetailsForm.valid) {
-			const formValue = this.roomCreationForm.value;
+			const formValue = this.roomDetailsForm.value;
 			this.createRoom.emit(formValue.roomName || undefined);
 		}
 	}
@@ -54,6 +70,6 @@ export class RoomBasicCreationComponent implements OnDestroy {
 	}
 
 	get isFormValid(): boolean {
-		return this.roomCreationForm.valid && !this.roomCreationForm.pending;
+		return this.roomDetailsForm.valid && !this.roomDetailsForm.pending;
 	}
 }

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.ts

@@ -9,12 +9,12 @@ import { StepIndicatorComponent, WizardNavComponent } from '@lib/components';
 import { WizardNavigationConfig, WizardStep } from '@lib/models';
 import { NavigationService, NotificationService, RoomService, RoomWizardStateService } from '@lib/services';
 import { MeetRoomOptions } from '@lib/typings/ce';
-import { RoomWizardRoomDetailsComponent } from './steps/room-details/room-details.component';
+import { RoomBasicCreationComponent } from '../room-basic-creation/room-basic-creation.component';
 import { RecordingLayoutComponent } from './steps/recording-layout/recording-layout.component';
 import { RecordingPreferencesComponent } from './steps/recording-preferences/recording-preferences.component';
 import { RecordingTriggerComponent } from './steps/recording-trigger/recording-trigger.component';
+import { RoomWizardRoomDetailsComponent } from './steps/room-details/room-details.component';
 import { RoomPreferencesComponent } from './steps/room-preferences/room-preferences.component';
-import { RoomBasicCreationComponent } from '../room-basic-creation/room-basic-creation.component';
 
 @Component({
 	selector: 'ov-room-wizard',