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 --> <!-- Form Section -->
<main class="page-content"> <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 --> <!-- Room Field -->
<mat-form-field appearance="outline" class="form-field"> <mat-form-field appearance="outline" class="form-field">
<mat-label>Room Name</mat-label> <mat-label>Room Name</mat-label>
<input matInput formControlName="roomName" placeholder="e.g. Demo Room" /> <input matInput formControlName="roomName" placeholder="e.g. Demo Room" />
<mat-icon matSuffix class="ov-settings-icon">label</mat-icon> <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> <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-error>Room name cannot exceed 50 characters</mat-error>
} }
</mat-form-field> </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 { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { RoomWizardStateService } from '@lib/services';
import { MeetRoomOptions } from '@lib/typings/ce';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
@ -25,15 +27,22 @@ export class RoomBasicCreationComponent implements OnDestroy {
@Output() createRoom = new EventEmitter<string | undefined>(); @Output() createRoom = new EventEmitter<string | undefined>();
@Output() openAdvancedMode = new EventEmitter<void>(); @Output() openAdvancedMode = new EventEmitter<void>();
roomCreationForm = new FormGroup({ roomDetailsForm = new FormGroup({
roomName: new FormControl('Room', [Validators.maxLength(50)]) roomName: new FormControl('Room', [Validators.maxLength(50)])
}); });
private destroy$ = new Subject<void>(); 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(); this.destroy$.complete();
} }
private saveFormData(formValue: any) {
const stepData: Partial<MeetRoomOptions> = {
roomName: formValue.roomName
};
this.wizardService.updateStepData('roomDetails', stepData);
}
onCreateRoom() { 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); this.createRoom.emit(formValue.roomName || undefined);
} }
} }
@ -54,6 +70,6 @@ export class RoomBasicCreationComponent implements OnDestroy {
} }
get isFormValid(): boolean { 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 { WizardNavigationConfig, WizardStep } from '@lib/models';
import { NavigationService, NotificationService, RoomService, RoomWizardStateService } from '@lib/services'; import { NavigationService, NotificationService, RoomService, RoomWizardStateService } from '@lib/services';
import { MeetRoomOptions } from '@lib/typings/ce'; 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 { RecordingLayoutComponent } from './steps/recording-layout/recording-layout.component';
import { RecordingPreferencesComponent } from './steps/recording-preferences/recording-preferences.component'; import { RecordingPreferencesComponent } from './steps/recording-preferences/recording-preferences.component';
import { RecordingTriggerComponent } from './steps/recording-trigger/recording-trigger.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 { RoomPreferencesComponent } from './steps/room-preferences/room-preferences.component';
import { RoomBasicCreationComponent } from '../room-basic-creation/room-basic-creation.component';
@Component({ @Component({
selector: 'ov-room-wizard', selector: 'ov-room-wizard',