[player] Read stored `unitState` to reload a session

Merge the `unitDefinition` with the `unitState.dataParts` to insert the
saved values

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;
+}

projects/player/src/app/app.component.ts

 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 => {
   };

projects/player/src/app/components/form.component.ts

 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 });