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

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

Browse Source
This commit is contained in:
juancarmore 2025-08-14 16:37:27 +02:00
parent 41e39bc3bd
commit 1e1eaa7bf5
3 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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() {
this.roomCreationForm.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
// Optional: Save form data to local storage or service if needed
constructor(private wizardService: RoomWizardStateService) {
effect(() => {
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) {
const formValue = this.roomCreationForm.value;
if (this.roomDetailsForm.valid) {
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;
}
}

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

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