fix: User Referece readOnly is not working as expected (#294)

Author: tumms2021389

packages/angular-sdk-components/src/lib/_components/designSystemExtension/operator/operator.component.html

@@ -1,4 +1,4 @@
-<div class="psdk-operator psdk-double">
+<div class="psdk-operator psdk-double" [ngClass]="{ 'flex-row': displayLabel }">
   <div class="psdk-label">
     {{ label$ }}
   </div>

packages/angular-sdk-components/src/lib/_components/designSystemExtension/operator/operator.component.scss

@@ -1,9 +1,18 @@
 .psdk-operator {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   font-size: 0.8rem;
   color: var(--app-neutral-color);
+  padding-left: 0.625rem;
+  margin: 16px 0 8px 0;
+}
+
+.psdk-operator.flex-row {
+  flex-direction: row;
   align-items: center;
+  text-align: center;
+  padding-left: 0;
+  margin: 0;
 }
 
 .psdk-operator-popover {
@@ -35,7 +44,6 @@
 
 .psdk-double {
   column-gap: 1rem;
-  text-align: center;
 }
 
 .psdk-top-pad {

packages/angular-sdk-components/src/lib/_components/designSystemExtension/operator/operator.component.ts

@@ -13,10 +13,11 @@ import { Utils } from '../../../_helpers/utils';
 export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() displayLabel;
+  @Input() name$?: string;
+
   fields$: any[] = [];
   bShowPopover$: boolean;
   date$: string;
-  name$: string;
   label$: string;
   id$: string;
   constructor(
@@ -40,7 +41,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnChanges(changes: SimpleChanges): void {
     const { pConn$ } = changes;
-    if (pConn$.previousValue !== pConn$.currentValue) {
+    if (pConn$ && pConn$.previousValue !== pConn$.currentValue) {
       this.updateSelf();
     }
   }
@@ -69,7 +70,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
       this.id$ = configProps$.resolveOperator.userId;
       this.label$ = configProps$.resolveLabel;
     } else {
-      this.name$ = configProps$?.value.userName;
+      this.name$ = this.name$ || configProps$?.value.userName;
       this.id$ = configProps$?.value.userId;
       this.label$ = configProps$.label;
     }

packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.html

@@ -4,8 +4,8 @@
   </div>
   <ng-template #noDisplayMode>
     <div class="psdk-user-reference">
-      <div *ngIf="type === 'operator'">
-        <component-mapper name="Operator" [props]="{ pConn$ }"></component-mapper>
+      <div *ngIf="this.userID$ && type === 'operator'">
+        <component-mapper name="Operator" [props]="{ pConn$, name$: userName$ }"></component-mapper>
       </div>
       <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
         <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">

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

@@ -184,12 +184,8 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       } else {
         // if same user ref field is referred in view as editable & readonly formatted text
         // referenced users won't be available, so get user details from dx api
-        const { getOperatorDetails } = PCore.getUserApi();
-        getOperatorDetails(this.userID$).then((resp: any) => {
-          if (resp.data && resp.data.pyOperatorInfo && resp.data.pyOperatorInfo.pyUserName) {
-            this.userName$ = resp.data.pyOperatorInfo.pyUserName;
-          }
-        });
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        this.userName$ = await getUserName(this.pConn$, this.userID$);
       }
     } else if (displayAs === DROPDOWN_LIST || displayAs === SEARCH_BOX) {
       const queryPayload = {
@@ -257,3 +253,66 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     return errMessage;
   }
 }
+
+const buildColumnForDisplayValue = dataObj => {
+  if (dataObj.columns) {
+    dataObj.columns = dataObj.columns.map(column => {
+      const tempColObj = { ...column };
+      if (tempColObj.key === 'true') {
+        tempColObj.useForSearch = true;
+      } else {
+        tempColObj.useForSearch = false;
+      }
+      return tempColObj;
+    });
+  }
+};
+
+function getUserName(pConn, userId = ''): Promise<string> {
+  return new Promise(resolve => {
+    const { parameters = {}, referenceList } = pConn.getConfigProps();
+    const contextName = pConn.getContextName();
+
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const OPERATORS_DP = referenceList || PCore.getEnvironmentInfo().getDefaultOperatorDP() || '';
+
+    const columns = [
+      {
+        value: 'pyUserName',
+        display: 'true',
+        useForSearch: true,
+        primary: 'true'
+      },
+      {
+        value: 'pyUserIdentifier',
+        setProperty: 'Associated property',
+        key: 'true',
+        display: 'true',
+        secondary: 'true',
+        useForSearch: true
+      }
+    ];
+
+    const dataConfig: any = {
+      dataSource: OPERATORS_DP,
+      parameters,
+      matchPosition: 'equals',
+      listType: 'datapage',
+      columns,
+      cacheLifeSpan: 'form',
+      deferDatasource: false,
+      maxResultsDisplay: '1',
+      ignoreCase: true
+    };
+
+    PCore.getDataApi()
+      .init(dataConfig, contextName)
+      .then(dataApiObj => {
+        buildColumnForDisplayValue(dataApiObj);
+        dataApiObj.registerForBufferedCall({ waitTime: 50 });
+        dataApiObj.fetchData(userId).then((response: any) => {
+          resolve(response.data?.[0]?.pyUserName || userId);
+        });
+      });
+  });
+}