From be9d6f4ea76cfc90852237ff916bac8b4a7e99d3 Mon Sep 17 00:00:00 2001
From: mdelez <60604010+mdelez@users.noreply.github.com>
Date: Thu, 11 Nov 2021 16:50:28 +0100
Subject: [PATCH] fix(text-value): resource-instance-form and display-edit
 components now correctly display a paragraph text with line breaks (#584)

---
 .../switch-properties.component.html              |  2 +-
 .../switch-properties.component.ts                | 15 ++++++++++-----
 .../text-value-as-string.component.html           |  2 +-
 src/assets/style/_viewer.scss                     |  4 ++++
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.html b/src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.html
index d489424e7e..eff4ced169 100644
--- a/src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.html
+++ b/src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.html
@@ -1,5 +1,5 @@
 <span [ngSwitch]="property.objectType">
-    <app-text-value-as-string #createVal *ngSwitchCase="'ReadTextValueAsString'" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName" [textArea]="textArea"></app-text-value-as-string>
+    <app-text-value-as-string #createVal *ngSwitchCase="'ReadTextValueAsString'" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName" [guiElement]="textValueGuiEle"></app-text-value-as-string>
     <app-text-value-as-xml #createVal *ngSwitchCase="'ReadTextValueAsXml'" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-text-value-as-xml>
     <app-int-value #createVal *ngSwitchCase="constants.IntValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-int-value>
     <app-boolean-value #createVal *ngSwitchCase="constants.BooleanValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName" [moreSpace]="true"></app-boolean-value>
diff --git a/src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.ts b/src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.ts
index cf961107f6..a7ef3589cd 100644
--- a/src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.ts
+++ b/src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Constants, ReadResource, ResourcePropertyDefinition } from '@dasch-swiss/dsp-js';
 import { BaseValueDirective } from 'src/app/main/directive/base-value.directive';
+import { ValueService } from '../../../services/value.service';
 
 @Component({
     selector: 'app-switch-properties',
@@ -23,19 +24,23 @@ export class SwitchPropertiesComponent implements OnInit {
     @Input() isRequiredProp: boolean;
 
     mode = 'create';
-    textArea = false;
+
+    // gui element in case of textValue
+    textValueGuiEle: 'simpleText' | 'textArea' | 'richText';
+
     constants = Constants;
 
-    constructor() { }
+    constructor(
+        private _valueService: ValueService
+    ) { }
 
     ngOnInit(): void {
 
         // the input isRequiredProp provided by KeyValuePair is stored as a number
         // a conversion from a number to a boolean is required by the input valueRequiredValidator
         this.isRequiredProp = !!+this.isRequiredProp;
-        if(this.property.guiElement === Constants.SalsahGui + Constants.HashDelimiter + 'Textarea') {
-            this.textArea = true;
-        }
+
+        this.textValueGuiEle = this._valueService.getTextValueGuiEle(this.property.guiElement);
     }
 
     saveNewValue() {
diff --git a/src/app/workspace/resource/values/text-value/text-value-as-string/text-value-as-string.component.html b/src/app/workspace/resource/values/text-value/text-value-as-string/text-value-as-string.component.html
index c05e42d72f..9adb08071b 100644
--- a/src/app/workspace/resource/values/text-value/text-value-as-string/text-value-as-string.component.html
+++ b/src/app/workspace/resource/values/text-value/text-value-as-string/text-value-as-string.component.html
@@ -1,5 +1,5 @@
 <span *ngIf="mode === 'read'; else showForm" class="read-mode-view">
-    <span class="rm-value" [innerHtml]="valueFormControl.value | appLinkify"></span>
+    <span class="rm-value text-value" [innerHtml]="valueFormControl.value | appLinkify" style="white-space: pre-wrap;"></span>
     <span class="rm-comment" *ngIf="shouldShowComment">{{commentFormControl.value}}</span>
 </span>
 <ng-template #showForm>
diff --git a/src/assets/style/_viewer.scss b/src/assets/style/_viewer.scss
index 36242d470b..9a72bc15d3 100644
--- a/src/assets/style/_viewer.scss
+++ b/src/assets/style/_viewer.scss
@@ -6,6 +6,10 @@
     display: block;
     margin: 0px;
   }
+
+  .rm-value.text-value {
+    white-space: pre-wrap;
+  }
 }
 
 .child-value-component,