Fixed the identified issues during adoption testing (#245)

* Fixed issue with percentage and currency values not displaying correctly in read-only mode


---------

Co-authored-by: mashm <[email protected]>

Author: 4manasa

packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.html

@@ -21,7 +21,7 @@
           <a *ngSwitchCase="'email'" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
           <span *ngSwitchCase="'date'" class="psdk-details-text-style">{{ _formatDate(field.config.value, field.type) }}</span>
           <span *ngSwitchCase="'caseoperator'"></span>
-          <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>
+          <span *ngSwitchDefault>{{ _getValue(field.config.value, field) }}</span>
         </div>
       </div>
     </ng-template>

packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.ts

@@ -16,7 +16,10 @@ export class MaterialDetailsFieldsComponent {
   @Input() arFields$: any[];
   @Input() arHighlightedFields: any[];
 
-  _getValue(configValue) {
+  _getValue(configValue, field: any = {}) {
+    if (field?.type === 'userreference') {
+      return configValue.userName;
+    }
     if (configValue && configValue != '') {
       return configValue;
     }

packages/angular-sdk-components/src/lib/_components/field/currency/currency.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$: formattedValue, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">

packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.ts

@@ -9,8 +9,9 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { handleEvent } from '../../../_helpers/event-util';
-import { getCurrencyCharacters } from '../../../_helpers/currency-utils';
+import { getCurrencyCharacters, getCurrencyOptions } from '../../../_helpers/currency-utils';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
+import { format } from '../../../_helpers/formatters';
 
 interface CurrrencyProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Currency here
@@ -55,6 +56,7 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   currDec: string;
   inputMode: any;
   decimalPrecision: number | undefined;
+  formattedValue: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -136,6 +138,11 @@ export class CurrencyComponent implements OnInit, OnDestroy {
     this.currSep = theSymbols.theDigitGroupSeparator;
     this.currDec = theSymbols.theDecimalIndicator;
 
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+      this.formattedValue = format(this.configProps$.value, this.pConn$?.getComponentName()?.toLowerCase(), theCurrencyOptions);
+    }
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {

packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.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$: formattedValue, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">

packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.ts

@@ -9,12 +9,14 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { handleEvent } from '../../../_helpers/event-util';
-import { getCurrencyCharacters } from '../../../_helpers/currency-utils';
+import { getCurrencyCharacters, getCurrencyOptions } from '../../../_helpers/currency-utils';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
+import { format } from '../../../_helpers/formatters';
 
 interface PercentageProps extends PConnFieldProps {
   showGroupSeparators?: string;
   decimalPrecision?: number;
+  currencyISOCode?: string;
   // If any, enter additional props that only exist on Percentage here
 }
 
@@ -53,6 +55,7 @@ export class PercentageComponent implements OnInit, OnDestroy {
   fieldControl = new FormControl<number | null>(null, null);
   actionsApi: Object;
   propName: string;
+  formattedValue: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -121,6 +124,7 @@ export class PercentageComponent implements OnInit, OnDestroy {
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
+    const currencyISOCode = this.configProps$?.currencyISOCode ?? '';
     const showGroupSeparators = this.configProps$.showGroupSeparators;
 
     const theSymbols = getCurrencyCharacters('');
@@ -130,6 +134,11 @@ export class PercentageComponent implements OnInit, OnDestroy {
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
 
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+      this.formattedValue = format(nValue, this.pConn$?.getComponentName()?.toLowerCase(), theCurrencyOptions);
+    }
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {

packages/angular-sdk-components/src/lib/_components/field/text/text.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
@@ -18,6 +19,7 @@ interface TextProps extends PConnFieldProps {
 })
 export class TextComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
   @Input() formatAs$: string;
 
   // Used with AngularPConnect

packages/angular-sdk-components/src/lib/_components/infra/stages/stages.component.scss

@@ -59,13 +59,13 @@
   border-radius: 0.5rem;
   border: 0.0625rem solid var(--app-neutral-light-color);
   overflow: hidden;
-  height: 2rem;
   display: flex;
+  flex-wrap: wrap;
 }
 
 .psdk-stages-chevron {
   position: relative;
-  padding: calc(1rem);
+  padding: calc(0.5rem);
   display: flex;
   justify-content: center;
   align-items: center;

packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.ts

@@ -63,7 +63,7 @@ export class DetailsTwoColumnComponent implements OnInit, OnDestroy {
 
     if (this.showHighlightedData) {
       const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
+      this.highlightedDataArr = highlightedData?.map(field => {
         field.config.displayMode = 'STACKED_LARGE_VAL';
 
         if (field.config.value === '@P .pyStatusWork') {

packages/angular-sdk-components/src/lib/_helpers/formatters/index.ts

@@ -75,6 +75,13 @@ export function format(value, type, options = {}): string {
       break;
     }
 
+    case 'percentage': {
+      const defaultOptions = { locale: getLocale(), decPlaces: 2 };
+      const params = { ...defaultOptions, ...options };
+      formattedValue = Currency.Percentage(value, params);
+      break;
+    }
+
     case 'decimal': {
       const defaultOptions = { locale: getLocale(), decPlaces: 2 };
       const params = { ...defaultOptions, ...options };