From 3234ec9bf25004a2713c06708b878495f8c81a41 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Sat, 25 Sep 2021 15:41:23 +0200
Subject: [PATCH] [player] Refactor validation messages

* Fix scrollbar bug
* Remove using of timeout method
* Add Material fonts
---
 .../components/element/element.component.html | 32 +++++++++++++++----
 .../components/section/section.component.html |  3 --
 .../validation-message.component.html         |  4 +--
 .../validation-message.component.ts           | 22 +++++--------
 4 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/projects/player/src/app/components/element/element.component.html b/projects/player/src/app/components/element/element.component.html
index 691a42833..3970878d1 100644
--- a/projects/player/src/app/components/element/element.component.html
+++ b/projects/player/src/app/components/element/element.component.html
@@ -1,10 +1,28 @@
-<app-element-overlay
-    [elementModel]="elementModel"
-    [parentForm]="elementForm"
-    [parentArrayIndex]="parentArrayIndex"
-    [isInputElement]="isInputElement">
-</app-element-overlay>
-<app-validation-message *ngIf="isInputElement && elementForm"
+<ng-container *ngTemplateOutlet="elementModel.dynamicPositioning ? dynamicElement : staticElement"></ng-container>
+
+<ng-template #staticElement>
+  <app-element-overlay
+      [style.display]="'block'"
+      [style.overflow]="'auto'"
+      [style.width.px]="elementModel.width"
+      [style.height.px]="elementModel.height"
+      [elementModel]="elementModel"
+      [parentForm]="elementForm"
+      [parentArrayIndex]="parentArrayIndex"
+      [isInputElement]="isInputElement">
+  </app-element-overlay>
+</ng-template>
+
+<ng-template #dynamicElement>
+  <app-element-overlay
+      [elementModel]="elementModel"
+      [parentForm]="elementForm"
+      [parentArrayIndex]="parentArrayIndex"
+      [isInputElement]="isInputElement">
+  </app-element-overlay>
+</ng-template>
+
+<app-validation-message *ngIf="isInputElement"
                         [ngClass]="{'dynamic-validation-messages' : elementModel.dynamicPositioning}"
                         [parentForm]="elementForm"
                         [elementModel]="elementModel">
diff --git a/projects/player/src/app/components/section/section.component.html b/projects/player/src/app/components/section/section.component.html
index c6ccce401..77b796c1e 100644
--- a/projects/player/src/app/components/section/section.component.html
+++ b/projects/player/src/app/components/section/section.component.html
@@ -3,9 +3,6 @@
 <ng-template #staticElements>
   <ng-container *ngFor="let element of section.elements; let i = index">
     <app-element
-        [style.overflow]="'auto'"
-        [style.width.px]="element.width"
-        [style.height.px]="element.height"
         [style.position]="'absolute'"
         [style.left.px]="element.xPosition"
         [style.top.px]="element.yPosition"
diff --git a/projects/player/src/app/components/validation-message/validation-message.component.html b/projects/player/src/app/components/validation-message/validation-message.component.html
index acfd5d66d..d953e911a 100644
--- a/projects/player/src/app/components/validation-message/validation-message.component.html
+++ b/projects/player/src/app/components/validation-message/validation-message.component.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="formElementControl && formElementControl.touched">
+<div *ngIf="formElementControl?.touched" class="mat-typography">
   <mat-error *ngIf="formElementControl.errors?.required && elementModel.type !== 'checkbox'"
              [ngClass]="{'dynamic-validation-message' : elementModel.dynamicPositioning}" >
     {{requiredMessage}}
@@ -19,4 +19,4 @@
              [ngClass]="{'dynamic-validation-message' : elementModel.dynamicPositioning}" >
     {{patternMessage}}
   </mat-error>
-</ng-container>
+</div>
diff --git a/projects/player/src/app/components/validation-message/validation-message.component.ts b/projects/player/src/app/components/validation-message/validation-message.component.ts
index 7fb39a514..02e7337f1 100644
--- a/projects/player/src/app/components/validation-message/validation-message.component.ts
+++ b/projects/player/src/app/components/validation-message/validation-message.component.ts
@@ -1,5 +1,5 @@
 import {
-  AfterViewInit, Component, Input, OnInit
+  Component, Input, OnInit
 } from '@angular/core';
 import {
   FormControl, FormGroup, ValidatorFn, Validators
@@ -17,7 +17,7 @@ import { FormService } from '../../../../../common/form.service';
   styleUrls: ['./validation-message.component.css']
 })
 
-export class ValidationMessageComponent implements OnInit, AfterViewInit {
+export class ValidationMessageComponent implements OnInit {
   @Input() elementModel!: UnitUIElement;
   @Input() parentForm!: FormGroup;
   formElementControl!: FormControl;
@@ -32,6 +32,12 @@ export class ValidationMessageComponent implements OnInit, AfterViewInit {
 
   ngOnInit(): void {
     this.setErrorMessages();
+    this.formElementControl = this.parentForm.controls[this.elementModel.id] as FormControl;
+    this.formService.setValidators({
+      id: this.elementModel.id,
+      validators: this.validators,
+      formGroup: this.parentForm
+    });
   }
 
   private get validators(): ValidatorFn[] {
@@ -71,16 +77,4 @@ export class ValidationMessageComponent implements OnInit, AfterViewInit {
     this.patternMessage = (this.elementModel as TextFieldElement).patternWarnMessage ||
       this.translateService.instant('validators.wrongPattern');
   }
-
-  ngAfterViewInit(): void {
-    // TODO: Remove timeout
-    setTimeout(() => {
-      this.formElementControl = this.parentForm.controls[this.elementModel.id] as FormControl;
-      this.formService.setValidators({
-        id: this.elementModel.id,
-        validators: this.validators,
-        formGroup: this.parentForm
-      });
-    });
-  }
 }
-- 
GitLab