[player] Adopt the order of `UnitPages` for form

* Since always visible pages are removed from the order, form
arrays must be rearranged
* Refactor getter as properties in `PlayerStateComponent`. Getter
work like functions and are executed every time Angular change
detection runs.

projects/common/form.ts

@@ -21,4 +21,5 @@ export interface ChildFormGroup {
   formGroup: FormGroup;
   parentForm: FormGroup;
   parentArray: 'pages' | 'sections' | 'elements'
+  parentArrayIndex: number;
 }

projects/player/src/app/components/element-overlay.component.ts

@@ -27,6 +27,7 @@ import { FormService } from '../../../../common/form.service';
 export class ElementOverlayComponent implements OnInit, OnDestroy {
   @Input() elementModel!: UnitUIElement;
   @Input() parentForm!: FormGroup;
+  @Input() parentArrayIndex!: number;
   private elementForm!: FormGroup;
 
   @ViewChild('elementComponentContainer',
@@ -72,7 +73,8 @@ export class ElementOverlayComponent implements OnInit, OnDestroy {
     this.formService.registerFormGroup({
       formGroup: this.elementForm,
       parentForm: this.parentForm,
-      parentArray: 'elements'
+      parentArray: 'elements',
+      parentArrayIndex: this.parentArrayIndex
     });
   }
 

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

@@ -84,7 +84,11 @@ export class FormComponent implements OnDestroy {
 
   private addGroup = (group: ChildFormGroup): void => {
     const formArray: FormArray = group.parentForm.get(group.parentArray) as FormArray;
-    formArray.push(group.formGroup);
+    if (group.parentArrayIndex < formArray.length) {
+      formArray.insert(group.parentArrayIndex, group.formGroup);
+    } else {
+      formArray.push(group.formGroup);
+    }
   };
 
   private onElementValueChanges = (value: ValueChangeElement): void => {

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

@@ -10,6 +10,7 @@ import { FormService } from '../../../../common/form.service';
   template: `
       <app-section *ngFor="let section of page.sections"
                    [parentForm]="pageForm"
+                   [parentArrayIndex]="parentArrayIndex"
                    [section]="section"
                    [ngStyle]="{
                 position: 'relative',
@@ -25,6 +26,7 @@ import { FormService } from '../../../../common/form.service';
 export class PageComponent implements OnInit {
   @Input() page!: UnitPage;
   @Input() parentForm!: FormGroup;
+  @Input() parentArrayIndex!: number;
   pageForm!: FormGroup;
 
   constructor(private formService: FormService, private formBuilder: FormBuilder) {}
@@ -37,7 +39,8 @@ export class PageComponent implements OnInit {
     this.formService.registerFormGroup({
       formGroup: this.pageForm,
       parentForm: this.parentForm,
-      parentArray: 'pages'
+      parentArray: 'pages',
+      parentArrayIndex: this.parentArrayIndex
     });
   }
 }

projects/player/src/app/components/player-state/player-state.component.html

 <div *ngIf="!running" class='stopped-overlay'></div>
 <div fxLayout="row">
-  <mat-tab-group [fxFlex]="pageWidth" [(selectedIndex)]="currentIndex"
+  <mat-tab-group *ngIf="hasScrollPages" [fxFlex]="pageWidth" [(selectedIndex)]="currentIndex"
                  (selectedIndexChange)="onSelectedIndexChange()"
                  mat-align-tabs="start">
-    <mat-tab *ngFor="let page of scrollPages; let i = index" label="{{'pageIndication' | translate: {index: i + 1} }}">
-      <app-page class="page" [parentForm]="parenForm" [page]="page"></app-page>
-    </mat-tab>
+    <ng-container *ngFor="let page of pages; let i = index">
+      <mat-tab *ngIf="!page.alwaysVisible" label="{{'pageIndication' | translate: {index: pageIndices[i] + 1} }}">
+        <app-page class="page" [parentArrayIndex]="i" [parentForm]="parenForm" [page]="page"></app-page>
+      </mat-tab>
+    </ng-container>
   </mat-tab-group>
-  <div *ngIf="alwaysVisiblePage" fxFlex="50">
+  <div *ngIf="alwaysVisiblePage" [fxFlex]="pageWidth">
     <div class="mat-tab-label">{{'alwaysVisiblePage' | translate}}</div>
-    <app-page class="page" [parentForm]="parenForm" [page]="alwaysVisiblePage"></app-page>
+    <app-page class="page" [parentArrayIndex]="alwaysVisiblePageIndex" [parentForm]="parenForm" [page]="alwaysVisiblePage"></app-page>
   </div>
 </div>

projects/player/src/app/components/player-state/player-state.component.ts

@@ -21,8 +21,17 @@ import { VeronaPostService } from '../../services/verona-post.service';
 export class PlayerStateComponent implements OnInit, OnDestroy {
   @Input() parenForm!: FormGroup;
   @Input() pages!: UnitPage[];
+
   currentIndex: number = 0;
+  pageIndices!: number[];
+  scrollPages!: UnitPage[];
+  hasScrollPages!: boolean;
+  pageWidth!: number;
+  validPages!: Record<string, string> [];
+  alwaysVisiblePage!: UnitPage | undefined;
+  alwaysVisiblePageIndex!: number;
   running: boolean = true;
+
   private ngUnsubscribe = new Subject<void>();
 
   constructor(private veronaSubscriptionService: VeronaSubscriptionService,
@@ -30,29 +39,9 @@ export class PlayerStateComponent implements OnInit, OnDestroy {
               private translateService: TranslateService) {
   }
 
-  private get state(): RunningState {
-    return this.running ? 'running' : 'stopped';
-  }
-
-  get pageWidth(): number {
-    return this.alwaysVisiblePage ? 50 : 100;
-  }
-
-  get validPages():Record<string, string>[] {
-    return this.scrollPages.map((page: UnitPage, index: number): Record<string, string> => (
-      { [page.id]: `${this.translateService.instant('pageIndication', { index: index + 1 })}` }));
-  }
-
-  get alwaysVisiblePage(): UnitPage | undefined {
-    return this.pages.find((page: UnitPage): boolean => page.alwaysVisible);
-  }
-
-  get scrollPages(): UnitPage[] {
-    return this.pages.filter((page: UnitPage): boolean => !page.alwaysVisible);
-  }
-
   ngOnInit(): void {
     this.initSubscriptions();
+    this.initPageState();
     this.sendVopStateChangedNotification();
   }
 
@@ -71,6 +60,28 @@ export class PlayerStateComponent implements OnInit, OnDestroy {
       .subscribe((message: VopGetStateRequest): void => this.onGetStateRequest(message));
   }
 
+  private initPageState() {
+    this.alwaysVisiblePageIndex = this.pages.findIndex((page: UnitPage): boolean => page.alwaysVisible);
+    this.alwaysVisiblePage = this.pages[this.alwaysVisiblePageIndex];
+    this.scrollPages = this.pages.filter((page: UnitPage): boolean => !page.alwaysVisible);
+    this.hasScrollPages = this.scrollPages && this.scrollPages.length > 0;
+    this.pageWidth = !this.alwaysVisiblePage || !this.hasScrollPages ? 100 : 50;
+    this.validPages = this.scrollPages.map((page: UnitPage, index: number): Record<string, string> => (
+      { [page.id]: `${this.translateService.instant('pageIndication', { index: index + 1 })}` }));
+    this.pageIndices = this.pages.map(
+      (page: UnitPage, index: number): number => {
+        if (index === this.alwaysVisiblePageIndex) {
+          return this.pages.length - 1;
+        }
+        return (this.alwaysVisiblePageIndex < 0 || index < this.alwaysVisiblePageIndex) ? index : index - 1;
+      }
+    );
+  }
+
+  private get state(): RunningState {
+    return this.running ? 'running' : 'stopped';
+  }
+
   onSelectedIndexChange(): void {
     this.sendVopStateChangedNotification();
   }

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

@@ -11,7 +11,8 @@ import { FormService } from '../../../../common/form.service';
     <app-element-overlay
         *ngFor="let element of section.elements"
         [elementModel]="element"
-        [parentForm]="sectionForm">
+        [parentForm]="sectionForm"
+        [parentArrayIndex]="parentArrayIndex">
     </app-element-overlay>
   `
 })
@@ -19,8 +20,10 @@ export class SectionComponent implements OnInit {
   @Input() parentForm!: FormGroup;
   @Input() section!: UnitPageSection;
   @Input() sectionForm!: FormGroup;
+  @Input() parentArrayIndex!: number;
 
-  constructor(private formService: FormService, private formBuilder: FormBuilder) {}
+  constructor(private formService: FormService, private formBuilder: FormBuilder) {
+  }
 
   ngOnInit(): void {
     this.sectionForm = new FormGroup({
@@ -29,7 +32,8 @@ export class SectionComponent implements OnInit {
     this.formService.registerFormGroup({
       formGroup: this.sectionForm,
       parentForm: this.parentForm,
-      parentArray: 'sections'
+      parentArray: 'sections',
+      parentArrayIndex: this.parentArrayIndex
     });
   }
 }