diff --git a/projects/common/form.ts b/projects/common/form.ts index 921d72cd88f9e9313eb12de8690750b2e2221324..8a9c670bf22b243ce1918d4bfe3bac6048b1bb51 100644 --- a/projects/common/form.ts +++ b/projects/common/form.ts @@ -20,6 +20,19 @@ export interface FormControlValidators { export interface ChildFormGroup { formGroup: FormGroup; parentForm: FormGroup; - parentArray: 'pages' | 'sections' | 'elements' + parentArray: 'pages' | 'sections' | 'elements'; parentArrayIndex: number; } + +export interface FormModel { + pages: FormPage[]; +} + +export interface FormSection { + elements: Record<string, string | number | boolean | undefined>[]; +} + +export interface FormPage { + sections: FormSection[]; + id?: string; +} diff --git a/projects/player/src/app/app.component.ts b/projects/player/src/app/app.component.ts index 8b25658c0bbe4a9bfbf7f5bd1b85b62a97aff435..81d7d676e93fc7af6aaef707b9c00ab024c2483b 100644 --- a/projects/player/src/app/app.component.ts +++ b/projects/player/src/app/app.component.ts @@ -1,14 +1,14 @@ import { Component, OnInit } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { TranslateService } from '@ngx-translate/core'; -import { Unit, UnitPage } from '../../../common/unit'; +import { + Unit, UnitPage, UnitPageSection, UnitUIElement +} from '../../../common/unit'; import { VeronaSubscriptionService } from './services/verona-subscription.service'; import { VeronaPostService } from './services/verona-post.service'; import { NativeEventService } from './services/native-event.service'; -import { - PlayerConfig, - VopStartCommand -} from './models/verona'; +import { PlayerConfig, VopStartCommand } from './models/verona'; +import { FormPage } from '../../../common/form'; @Component({ selector: 'player-aspect', @@ -46,12 +46,35 @@ export class AppComponent implements OnInit { private onStart(message: VopStartCommand): void { // eslint-disable-next-line no-console console.log('player: onStart', message); - const unit: Unit = message.unitDefinition ? JSON.parse(message.unitDefinition) : []; - this.pages = unit.pages; + const unitDefinition: Unit = message.unitDefinition ? JSON.parse(message.unitDefinition) : []; + const storedPages: FormPage[] = message.unitState?.dataParts?.pages ? + JSON.parse(message.unitState.dataParts.pages) : {}; + this.pages = this.addStoredValues(unitDefinition.pages, storedPages); this.playerConfig = message.playerConfig || {}; this.veronaPostService.sessionId = message.sessionId; } + private addStoredValues = (unitPages: UnitPage[], storedPages: FormPage[]): UnitPage[] => unitPages + .map((page: UnitPage, pageIndex: number): UnitPage => ({ + ...page, + sections: page.sections.map((section: UnitPageSection, sectionIndex: number): UnitPageSection => ( + { + ...section, + elements: section.elements + .map((element: UnitUIElement): UnitUIElement => { + const storedValueElement: Record<string, string | number | boolean | undefined> = + storedPages?.[pageIndex]?.sections?.[sectionIndex]?.elements?.find( + (storedElement: Record<string, string | number | boolean | undefined>) => Object + .keys(storedElement)[0] === element.id + ) || {}; + return { + ...element, + ...{ value: storedValueElement[Object.keys(storedValueElement)[0]] } + }; + }) + })) + })); + // eslint-disable-next-line @typescript-eslint/no-unused-vars private onScrollY = (y: number): void => { }; diff --git a/projects/player/src/app/components/form.component.ts b/projects/player/src/app/components/form.component.ts index 9d7bc0e298f89f07a8b26ba3d732afe2c3461323..4b9952631bf252ddc9a0a0287882f3e6c5a5e3b9 100644 --- a/projects/player/src/app/components/form.component.ts +++ b/projects/player/src/app/components/form.component.ts @@ -1,7 +1,9 @@ import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { FormArray, FormBuilder, FormGroup } from '@angular/forms'; +import { + FormArray, FormBuilder, FormGroup +} from '@angular/forms'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { TranslateService } from '@ngx-translate/core'; @@ -9,7 +11,11 @@ import { FormService } from '../../../../common/form.service'; import { VeronaSubscriptionService } from '../services/verona-subscription.service'; import { VeronaPostService } from '../services/verona-post.service'; import { - FormControlElement, FormControlValidators, ChildFormGroup, ValueChangeElement + FormControlElement, + FormControlValidators, + ChildFormGroup, + ValueChangeElement, + FormModel } from '../../../../common/form'; import { PlayerConfig, UnitState, VopNavigationDeniedNotification @@ -68,7 +74,7 @@ export class FormComponent implements OnInit, OnDestroy { .subscribe((message: VopNavigationDeniedNotification): void => this.onNavigationDenied(message)); this.form.valueChanges .pipe(takeUntil(this.ngUnsubscribe)) - .subscribe((formValues: { pages: Record<string, string>[] }): void => this.onFormChanges(formValues)); + .subscribe((formModel: FormModel): void => this.onFormChanges(formModel)); } private addControl = (control: FormControlElement): void => { @@ -103,12 +109,12 @@ export class FormComponent implements OnInit, OnDestroy { console.log(`player: onElementValueChanges - ${value.id}: ${value.values[0]} -> ${value.values[1]}`); }; - private onFormChanges(formValues: { pages: Record<string, string>[] }): void { + private onFormChanges(formModel: FormModel): void { // eslint-disable-next-line no-console - console.log('player: onFormChanges', formValues); + console.log('player: onFormChanges', formModel); const unitState: UnitState = { dataParts: { - pages: JSON.stringify(formValues.pages) + pages: JSON.stringify(formModel.pages) } }; this.veronaPostService.sendVopStateChangedNotification({ unitState });