updated to work with data reference case

Author: mohas22

packages/angular-sdk-components/src/lib/_bridge/helpers/sdk-pega-component-map.ts

@@ -201,6 +201,7 @@ const pegaSdkComponentMap = {
   NarrowWideForm: NarrowWideFormComponent,
   //   'NarrowWidePage': NarrowWidePage,
   NavBar: NavbarComponent,
+  ObjectPage: CaseViewComponent,
   ObjectReference: ObjectReferenceComponent,
   OneColumn: OneColumnComponent,
   OneColumnPage: OneColumnPageComponent,

packages/angular-sdk-components/src/lib/_components/infra/defer-load/defer-load.component.ts

@@ -97,7 +97,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
 
   getViewOptions = () => ({
     viewContext: this.resourceType,
-    pageClass: this.loadViewCaseID ? '' : this.pConn$.getDataObject().pyPortal.classID,
+    pageClass: this.loadViewCaseID ? '' : this.pConn$.getDataObject()?.pyPortal?.classID,
     container: this.isContainerPreview ? 'preview' : undefined,
     containerName: this.isContainerPreview ? 'preview' : undefined,
     updateData: this.isContainerPreview

packages/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.html

@@ -1,7 +1,7 @@
 <div class="psdk-case-view" id="case-view">
   <div class="psdk-case-view-info">
     <mat-toolbar color="primary" class="psdk-case-view-toolbar">
-      <mat-toolbar-row style="padding-left: 1rem">
+      <mat-toolbar-row class="psdk-case-view-toolbar-row">
         <div class="psdk-case-icon-div">
           <img class="psdk-case-svg-icon" src="{{ svgCase$ }}" />
         </div>

packages/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.scss

@@ -105,3 +105,9 @@ h1 {
 button {
   margin: 0rem 0.3125rem;
 }
+
+.psdk-case-view-toolbar-row {
+  padding-left: 1rem;
+  white-space: normal;
+  height: auto;
+}

packages/angular-sdk-components/src/lib/_components/template/data-reference/data-reference.component.html

@@ -2,17 +2,15 @@
   <component-mapper name="SearchForm" [props]="{ pConn$: pConn$, formGroup$, searchSelectCacheKey: '' }"></component-mapper>
 </div>
 <ng-template #notadvancedSearch>
-  <div *ngIf="childrenToRender && childrenToRender.length > 0">
-    <div *ngIf="!displayMultiRef">
-      <div *ngFor="let kid of childrenToRender">
-        <component-mapper [name]="kid?.getPConnect().getComponentName()" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
-      </div>
-    </div>
-    <div *ngIf="displaySingleRef">
-      <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$: firstChildPConnect() }"></component-mapper>
-    </div>
-    <div *ngIf="displayMultiRef">
-      <component-mapper name="MultiReferenceReadOnly" [props]="{ pConn$: firstChildPConnect() }"></component-mapper>
+  <div *ngIf="displaySingleRef">
+    <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$: firstChildPConnect(), dataRelationshipContext }"></component-mapper>
+  </div>
+  <div *ngIf="displayMultiRef">
+    <component-mapper name="MultiReferenceReadOnly" [props]="{ pConn$: firstChildPConnect() }"></component-mapper>
+  </div>
+  <div *ngIf="displayChild && childrenToRender && childrenToRender.length > 0">
+    <div *ngFor="let kid of childrenToRender">
+      <component-mapper [name]="kid?.getPConnect().getComponentName()" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
   </div>
 </ng-template>

packages/angular-sdk-components/src/lib/_components/template/data-reference/data-reference.component.ts

@@ -54,6 +54,8 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
   showAdvancedSearch: boolean;
   pyID: any;
   allowImplicitRefresh: any;
+  displayChild = false;
+  dataRelationshipContext: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -135,6 +137,8 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     this.viewName = this.rawViewMetadata.name;
     this.firstChildMeta = this.rawViewMetadata.children[0];
     this.refList = this.rawViewMetadata.config.referenceList;
+    this.dataRelationshipContext =
+      this.rawViewMetadata.config.contextClass && this.rawViewMetadata.config.name ? this.rawViewMetadata.config.name : null;
     this.canBeChangedInReviewMode = theConfigProps.allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
     // this.childrenToRender = this.children;
     this.isDisplayModeEnabled = ['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(displayMode);
@@ -177,6 +181,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
       }
 
       this.generateChildrenToRender();
+      this.displayChild = !(this.displaySingleRef || this.displayMultiRef);
     }
   }
 

packages/angular-sdk-components/src/lib/_components/template/single-reference-readonly/single-reference-readonly.component.ts

@@ -14,6 +14,7 @@ import { CommonModule } from '@angular/common';
 export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
+  @Input() dataRelationshipContext?: any;
 
   angularPConnectData: AngularPConnectData = {};
   configProps: any;
@@ -64,7 +65,7 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const displayAs = this.configProps.displayAs ?? 'readonly';
     const dataRelationshipContext = (rawViewMetadata?.config as any)?.displayField
       ? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField)
-      : null;
+      : this.dataRelationshipContext;
     this.label = propsToUse.label;
 
     const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown', 'RadioButtons'];