Fix User Reference works as expected(i.e. Read only) in Details templ…

…ate (#170)

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

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

@@ -1,48 +1,53 @@
 <div class="psdk-user-reference">
-  <div *ngIf="type === 'operator'">
-    <component-mapper name="Operator" [props]="{ pConn$ }"></component-mapper>
-  </div>
-  <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
-    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-      <mat-select
-        [value]="value$"
-        [required]="bRequired$"
-        [formControl]="fieldControl"
-        [attr.data-test-id]="testId"
-        (selectionChange)="fieldOnChange($event)"
-      >
-        <mat-option *ngFor="let opt of options$" [value]="opt.key">
-          {{ opt.value }}
-        </mat-option>
-      </mat-select>
-      <mat-label>{{ label$ }}</mat-label>
-      <mat-error *ngIf="fieldControl.invalid">
-        {{ getErrorMessage() }}
-      </mat-error>
-    </mat-form-field>
-  </div>
-  <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
-    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-      <mat-label>{{ label$ }}</mat-label>
-      <input
-        matInput
-        [placeholder]="placeholder"
-        [formControl]="fieldControl"
-        [value]="value$"
-        [required]="bRequired$"
-        [matAutocomplete]="auto"
-        [attr.data-test-id]="testId"
-        (change)="fieldOnChange($event)"
-        (blur)="fieldOnBlur($event)"
-      />
-      <mat-autocomplete #auto="matAutocomplete">
-        <mat-option *ngFor="let opt of options$" [value]="opt.value">
-          <span>{{ opt.value }}</span>
-        </mat-option>
-      </mat-autocomplete>
-      <mat-error *ngIf="fieldControl.invalid">
-        {{ getErrorMessage() }}
-      </mat-error>
-    </mat-form-field>
+  <div *ngIf="displayMode$; else noDisplayMode">
+    <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
   </div>
+  <ng-template #noDisplayMode>
+    <div *ngIf="type === 'operator'">
+      <component-mapper name="Operator" [props]="{ pConn$ }"></component-mapper>
+    </div>
+    <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-select
+          [value]="value$"
+          [required]="bRequired$"
+          [formControl]="fieldControl"
+          [attr.data-test-id]="testId"
+          (selectionChange)="fieldOnChange($event)"
+        >
+          <mat-option *ngFor="let opt of options$" [value]="opt.key">
+            {{ opt.value }}
+          </mat-option>
+        </mat-select>
+        <mat-label>{{ label$ }}</mat-label>
+        <mat-error *ngIf="fieldControl.invalid">
+          {{ getErrorMessage() }}
+        </mat-error>
+      </mat-form-field>
+    </div>
+    <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-label>{{ label$ }}</mat-label>
+        <input
+          matInput
+          [placeholder]="placeholder"
+          [formControl]="fieldControl"
+          [value]="value$"
+          [required]="bRequired$"
+          [matAutocomplete]="auto"
+          [attr.data-test-id]="testId"
+          (change)="fieldOnChange($event)"
+          (blur)="fieldOnBlur($event)"
+        />
+        <mat-autocomplete #auto="matAutocomplete">
+          <mat-option *ngFor="let opt of options$" [value]="opt.value">
+            <span>{{ opt.value }}</span>
+          </mat-option>
+        </mat-autocomplete>
+        <mat-error *ngIf="fieldControl.invalid">
+          {{ getErrorMessage() }}
+        </mat-error>
+      </mat-form-field>
+    </div>
+  </ng-template>
 </div>

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

@@ -57,6 +57,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   testId: string;
   helperText: string;
   placeholder: string;
+  displayMode$?: string;
 
   fieldControl = new FormControl('', null);
 
@@ -124,13 +125,14 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     const props = this.pConn$.getConfigProps() as UserReferenceProps;
     this.testId = props.testId;
 
-    const { label, displayAs, value, showAsFormattedText, helperText, placeholder } = props;
+    const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode } = props;
 
     this.label$ = label;
     this.showAsFormattedText$ = showAsFormattedText;
     this.displayAs$ = displayAs;
     this.helperText = helperText;
     this.placeholder = placeholder || '';
+    this.displayMode$ = displayMode;
 
     const { readOnly, required } = props;
     [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));