fix: Rich text read only in details showing HTML (#161)

pegasystems · May 15, 2024 · 9776770 · 9776770
1 parent 0f37bdd
commit 9776770
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/packages/angular-sdk-components/src/lib/_components/field/rich-text/rich-text.component.html b/packages/angular-sdk-components/src/lib/_components/field/rich-text/rich-text.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$, isHtml$: true }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$; else noEdit">

diff --git a/...-components/src/lib/_components/template/field-value-list/field-value-list.component.html b/...-components/src/lib/_components/template/field-value-list/field-value-list.component.html
@@ -1,15 +1,20 @@
 <div *ngIf="displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL" class="psdk-container-labels-left">
   <div class="psdk-grid-label">{{ label$ }}</div>
   <div class="psdk-val-labels-left">
-    {{ value$ || '---' }}
+    <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>
   </div>
 </div>
 
 <ng-template #STACKED_LARGE_VAL>
   <div *ngIf="displayMode$ === 'STACKED_LARGE_VAL'" class="psdk-container-stacked-large-val">
     <div class="psdk-grid-label">{{ label$ }}</div>
     <div class="psdk-val-stacked">
-      {{ value$ || '---' }}
+      <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>
     </div>
   </div>
 </ng-template>
+
+<ng-template #valueTemplate>
+  <div *ngIf="isHtml$; else valueOnly" id="instruction-text" [innerHTML]="value$ || '---'"></div>
+  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>
+</ng-template>
diff --git a/...dk-components/src/lib/_components/template/field-value-list/field-value-list.component.ts b/...dk-components/src/lib/_components/template/field-value-list/field-value-list.component.ts
@@ -12,4 +12,5 @@ export class FieldValueListComponent {
   @Input() label$: any;
   @Input() value$: any;
   @Input() displayMode$: any;
+  @Input() isHtml$ = false;
 }
diff --git a/...ponents/src/lib/_components/template/simple-table-manual/simple-table-manual.component.ts b/...ponents/src/lib/_components/template/simple-table-manual/simple-table-manual.component.ts
@@ -303,18 +303,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  Nebula and we may not end up using it all.
     this.fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
 
-    if (this.isInitialized) {
-      this.isInitialized = false;
-      if (this.allowEditingInModal) {
-        this.pConn$.getListActions().initDefaultPageInstructions(
-          this.pConn$.getReferenceList(),
-          this.fieldDefs.filter(item => item.name).map(item => item.name)
-        );
-      } else {
-        // @ts-ignore - An argument for 'fields' was not provided
-        this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
-      }
-    }
+    this.initializeDefaultPageInstructions();
 
     // end of from Nebula
 
@@ -364,6 +353,21 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  ties the 3 data structures together.
   }
 
+  initializeDefaultPageInstructions() {
+    if (this.isInitialized) {
+      this.isInitialized = false;
+      if (this.allowEditingInModal) {
+        this.pConn$.getListActions().initDefaultPageInstructions(
+          this.pConn$.getReferenceList(),
+          this.fieldDefs.filter(item => item.name).map(item => item.name)
+        );
+      } else {
+        // @ts-ignore - An argument for 'fields' was not provided
+        this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
+      }
+    }
+  }
+
   getResultsText() {
     const recordsCount = this.readOnlyMode ? this.rowData?.data.length : this.referenceList?.length;
     return `${recordsCount} result${recordsCount > 1 ? 's' : ''}`;