Display as plain text (#91)

* feat: add dispayAsPlainText property

* feat: update docs

Author: Sobyt483

docs/readme-generic-ui.md

@@ -58,6 +58,7 @@ Each field definition supports the following properties:
   - `"fontStyle"`: Font style for the value (CSS font-style value)
   - `"textDecoration"`: Text decoration for the value (CSS text-decoration value)
   - `"textTransform"`: Text transformation for the value (CSS text-transform value)
+- `"displayAsPlainText"`: Boolean valu that give you ability to render value as it is, without any built-in transformation.
 - `"dynamicValuesDefinition"`: Configuration for dynamic value loading:
   - `"operation"`: GraphQL operation name
   - `"gqlQuery"`: GraphQL query string

projects/lib/models/models/resource.ts

@@ -23,6 +23,7 @@ export interface FieldDefinition {
     multiline?: boolean;
   };
   labelDisplay?: LabelDisplay | boolean;
+  displayAsPlainText?: boolean;
   dynamicValuesDefinition?: {
     operation: string;
     gqlQuery: string;

projects/wc/src/app/components/generic-ui/detail-view/detail-view.component.html

@@ -48,7 +48,10 @@
               @for (field of field.group.fields; let last = $last; track field.label) {
                 <span [class.multiline]="field.group.multiline ?? true">
                   <span>{{ field.label }}: </span>
-                  <value-cell  [labelDisplay]="field.labelDisplay" [value]="getResourceValueByJsonPath(resource(), field)"></value-cell>
+                  <value-cell
+                    [labelDisplay]="field.labelDisplay"
+                    [displayAsPlainText]="!!field.displayAsPlainText"
+                    [value]="getResourceValueByJsonPath(resource(), field)" />
                 </span>
                 @if (!last && field.group.delimiter) {
                   <span>{{ field.group.delimiter }}</span>
@@ -58,7 +61,10 @@
           } @else {
             <ui5-label>{{ field.label }}</ui5-label>
             <p>
-              <value-cell [labelDisplay]="field.labelDisplay" [value]="getResourceValueByJsonPath(resource(), field)"></value-cell>
+              <value-cell
+                [labelDisplay]="field.labelDisplay"
+                [displayAsPlainText]="!!field.displayAsPlainText"
+                [value]="getResourceValueByJsonPath(resource(), field)" />
             </p>
           }
         </div>

projects/wc/src/app/components/generic-ui/list-view/list-view.component.html

@@ -67,7 +67,10 @@
               @for (field of column.group.fields; let last = $last; track field.label) {
                 <div>
                   <span>{{ field.label }}: </span>
-                  <value-cell [labelDisplay]="field.labelDisplay" [value]="getResourceValueByJsonPath(item, field)"></value-cell>
+                  <value-cell
+                    [labelDisplay]="field.labelDisplay"
+                    [displayAsPlainText]="!!field.displayAsPlainText"
+                    [value]="getResourceValueByJsonPath(item, field)" />
                 </div>
                 @if (!last && column.group.delimiter) {
                   <span>{{ column.group.delimiter }}</span>
@@ -76,7 +79,10 @@
             </ui5-table-cell>
           } @else {
             <ui5-table-cell>
-              <value-cell [labelDisplay]="column.labelDisplay" [value]="getResourceValueByJsonPath(item, column)"></value-cell>
+              <value-cell
+                [labelDisplay]="column.labelDisplay"
+                [displayAsPlainText]="!!column.displayAsPlainText"
+                [value]="getResourceValueByJsonPath(item, column)" />
             </ui5-table-cell>
           }
         }

projects/wc/src/app/components/generic-ui/value-cell/value-cell.component.html

@@ -1,10 +1,13 @@
+@if (displayAsPlainText()) {
+  {{ value() }}
+} @else {
   @if (isBoolLike()) {
     <wc-boolean-value [boolValue]="boolValue()"></wc-boolean-value>
   } @else if (isUrlValue()) {
     <wc-link-value [urlValue]="stringValue()"></wc-link-value>
   } @else if (isLabelValue()) {
     <wc-label-value [labelDisplay]="labelDisplayValue()" [value]="value()"></wc-label-value>
-  }
-  @else {
+  } @else {
     {{ value() }}
   }
+}

projects/wc/src/app/components/generic-ui/value-cell/value-cell.component.ts

@@ -19,6 +19,7 @@ import { LabelDisplay } from '@platform-mesh/portal-ui-lib/models/models';
 export class ValueCellComponent {
   value = input<unknown>();
   labelDisplay = input<LabelDisplay | boolean>();
+  displayAsPlainText = input<boolean>(false);
 
   isLabelValue = computed(() => this.labelDisplayValue() !== undefined);
   isBoolLike = computed(() => this.boolValue() !== undefined);