Updated DataReference and Semantic Link to display as label and value (#337)

* Updated DataReference and Semantic Link to display as label and value

* Handling label in single reference component

---------

Co-authored-by: mohas22 <[email protected]>
Co-authored-by: tumms2021389 <[email protected]>

Author: 3 people

packages/angular-sdk-components/src/lib/_components/field/semantic-link/semantic-link.component.html

@@ -1,5 +1,4 @@
-<div *ngIf="bVisible$ !== false" [ngClass]="label$.length > 0 ? 'psdk-grid-filter' : 'psdk-container-nolabels'">
-  <div class="psdk-grid-label">{{ label$ }}</div>
+<div *ngIf="bVisible$ !== false">
   <a *ngIf="!isLinkTextEmpty; else noLink" class="psdk-value" href="#" (click)="openLinkClick($event)">{{ value$ || '---' }}</a>
 </div>
 <ng-template #noLink>

packages/angular-sdk-components/src/lib/_components/field/semantic-link/semantic-link.component.scss

@@ -1,20 +1,3 @@
-.psdk-grid-filter {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  column-gap: calc(2 * 0.5rem);
-  row-gap: calc(2 * 0.5rem);
-  align-items: start;
-}
-
-.psdk-container-nolabels {
-  align-items: start;
-  padding-block: 8px;
-}
-
-.psdk-label {
-  margin: 8px 0px;
-}
-
 .psdk-value {
   margin: 8px 0px;
 }

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

@@ -1 +1,4 @@
-<component-mapper name="SemanticLink" [props]="{ pConn$: newPconn, formGroup$ }"></component-mapper>
+<div [ngClass]="displayMode ? 'psdk-grid-display' : 'psdk-grid-nondisplay'">
+  <div *ngIf="label" class="psdk-grid-label">{{ label }}</div>
+  <component-mapper name="SemanticLink" [props]="{ pConn$: newPconn, formGroup$ }"></component-mapper>
+</div>

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

@@ -0,0 +1,21 @@
+.psdk-grid-display {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.psdk-grid-nondisplay {
+  margin-top: 1rem;
+}
+
+.psdk-label {
+  color: var(--app-label-color);
+  margin: 8px 0px;
+}
+
+.psdk-value {
+  margin: 8px 0px;
+}

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

@@ -21,6 +21,7 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
   component: any;
   label: string;
   newPconn: typeof PConnect;
+  displayMode: string;
 
   constructor(private angularPConnect: AngularPConnectService) {}
 
@@ -55,9 +56,11 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
   updateSelf() {
     this.configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     const rawViewMetadata = this.pConn$.getRawMetadata();
-    const propsToUse = { ...this.pConn$.getInheritedProps(), ...this.configProps };
+    const label = this.configProps.label;
+    const showLabel = this.configProps.showLabel;
+    const propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
     const type = (rawViewMetadata?.config as any)?.componentType;
-    const displayMode = this.configProps.displayMode;
+    this.displayMode = this.configProps.displayMode;
     const targetObjectType = this.configProps.targetObjectType;
     const referenceType = targetObjectType === 'case' ? 'Case' : 'Data';
     const hideLabel = this.configProps.hideLabel;
@@ -66,12 +69,16 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const dataRelationshipContext = (rawViewMetadata?.config as any)?.displayField
       ? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField)
       : this.dataRelationshipContext;
+    if (propsToUse.showLabel === false) {
+      propsToUse.label = '';
+    }
     this.label = propsToUse.label;
 
     const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown', 'RadioButtons'];
     const config: any = {
       ...rawViewMetadata?.config,
-      primaryField: (rawViewMetadata?.config as any)?.displayField
+      primaryField: (rawViewMetadata?.config as any)?.displayField,
+      label: this.label
     };
 
     const activeViewRuleClass = (rawViewMetadata?.config as any)?.targetObjectClass;
@@ -93,7 +100,7 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
         type: 'SemanticLink',
         config: {
           ...config,
-          displayMode,
+          displayMode: this.displayMode,
           referenceType,
           hideLabel,
           dataRelationshipContext