Merge pull request #57 from pegasystems/bug/tor/-BUG-826668

Visibility condition not working for readonly values
pegasystems · Sep 18, 2023 · 2da8bb3 · 2da8bb3
2 parents ab82a26 + 67feb78
commit 2da8bb3
Show file tree

Hide file tree

Showing 22 changed files with 54 additions and 38 deletions.
diff --git a/...gular-sdk-components/src/app/_components/field/auto-complete/auto-complete.component.html b/...gular-sdk-components/src/app/_components/field/auto-complete/auto-complete.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$, hideLabel }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$, hideLabel }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -29,5 +29,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
diff --git a/packages/angular-sdk-components/src/app/_components/field/check-box/check-box.component.html b/packages/angular-sdk-components/src/app/_components/field/check-box/check-box.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -38,5 +38,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
diff --git a/packages/angular-sdk-components/src/app/_components/field/currency/currency.component.html b/packages/angular-sdk-components/src/app/_components/field/currency/currency.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -26,5 +26,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
diff --git a/packages/angular-sdk-components/src/app/_components/field/date-time/date-time.component.html b/packages/angular-sdk-components/src/app/_components/field/date-time/date-time.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -22,5 +22,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'date-time' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'date-time' }"></component-mapper>
 </ng-template>
diff --git a/packages/angular-sdk-components/src/app/_components/field/date/date.component.html b/packages/angular-sdk-components/src/app/_components/field/date/date.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -29,5 +29,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'date' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'date' }"></component-mapper>
 </ng-template>
diff --git a/packages/angular-sdk-components/src/app/_components/field/decimal/decimal.component.html b/packages/angular-sdk-components/src/app/_components/field/decimal/decimal.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -26,5 +26,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
diff --git a/packages/angular-sdk-components/src/app/_components/field/dropdown/dropdown.component.html b/packages/angular-sdk-components/src/app/_components/field/dropdown/dropdown.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$, hideLabel }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$, hideLabel }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -23,5 +23,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
diff --git a/packages/angular-sdk-components/src/app/_components/field/email/email.component.html b/packages/angular-sdk-components/src/app/_components/field/email/email.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -24,5 +24,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
diff --git a/packages/angular-sdk-components/src/app/_components/field/integer/integer.component.html b/packages/angular-sdk-components/src/app/_components/field/integer/integer.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -25,5 +25,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
diff --git a/...ges/angular-sdk-components/src/app/_components/field/percentage/percentage.component.html b/...ges/angular-sdk-components/src/app/_components/field/percentage/percentage.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -26,5 +26,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
diff --git a/packages/angular-sdk-components/src/app/_components/field/phone/phone.component.html b/packages/angular-sdk-components/src/app/_components/field/phone/phone.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -23,5 +23,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
diff --git a/...gular-sdk-components/src/app/_components/field/radio-buttons/radio-buttons.component.html b/...gular-sdk-components/src/app/_components/field/radio-buttons/radio-buttons.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
     <div [formGroup]="formGroup$" *ngIf="bVisible$">

diff --git a/...gular-sdk-components/src/app/_components/field/semantic-link/semantic-link.component.html b/...gular-sdk-components/src/app/_components/field/semantic-link/semantic-link.component.html
@@ -1,9 +1,9 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 
 <ng-template #noDisplayMode>
-  <div *ngIf="label$ !== undefined" class="psdk-grid-filter">
+  <div *ngIf="label$ !== undefined && bVisible$ !== false" class="psdk-grid-filter">
     <div class="psdk-grid-label">{{ label$ }}</div>
     <div class="psdk-value">{{ value$ || '---' }}</div>
   </div>

diff --git a/...angular-sdk-components/src/app/_components/field/semantic-link/semantic-link.component.ts b/...angular-sdk-components/src/app/_components/field/semantic-link/semantic-link.component.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { Utils } from '../../../_helpers/utils';
 
 @Component({
   selector: 'app-semantic-link',
@@ -21,8 +22,9 @@ export class SemanticLinkComponent implements OnInit {
   label$: string = '';
   value$: string = '';
   displayMode$: string = '';
+  bVisible$: boolean = true;
 
-  constructor(private angularPConnect: AngularPConnectService) {}
+  constructor(private angularPConnect: AngularPConnectService, private utils: Utils) {}
 
   ngOnInit(): void {
     // First thing in initialization is registering and subscribing to the AngularPConnect service
@@ -52,5 +54,8 @@ export class SemanticLinkComponent implements OnInit {
     this.value$ = this.configProps$['text'] || '---';
     this.displayMode$ = this.configProps$['displayMode'];
     this.label$ = this.configProps$['label'];
+    if (this.configProps$['visibility']) {
+      this.bVisible$ = this.utils.getBooleanValue(this.configProps$['visibility']);
+    }
   }
 }
diff --git a/packages/angular-sdk-components/src/app/_components/field/text-area/text-area.component.html b/packages/angular-sdk-components/src/app/_components/field/text-area/text-area.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -25,5 +25,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
diff --git a/...angular-sdk-components/src/app/_components/field/text-content/text-content.component.html b/...angular-sdk-components/src/app/_components/field/text-content/text-content.component.html
@@ -1,4 +1,4 @@
-<div class="psdk-data-readonly">
+<div class="psdk-data-readonly" *ngIf="bVisible$ !== false">
   <div *ngIf="displayAs$ == 'Paragraph'" class="mat-subtitle-2">{{ content$ }}</div>
   <div *ngIf="displayAs$ == 'Heading 1'" class="mat-h1">{{ content$ }}</div>
   <div *ngIf="displayAs$ == 'Heading 2'" class="mat-h2">{{ content$ }}</div>

diff --git a/...s/angular-sdk-components/src/app/_components/field/text-content/text-content.component.ts b/...s/angular-sdk-components/src/app/_components/field/text-content/text-content.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AngularPConnectService } from '../../../_bridge/angular-pconnect';
+import { Utils } from '../../../_helpers/utils';
 
 @Component({
   selector: 'app-text-content',
@@ -19,8 +20,9 @@ export class TextContentComponent implements OnInit {
   content$: string = '';
   displayAs$: string;
   displayMode$: string = '';
+  bVisible$: boolean = true;
 
-  constructor(private angularPConnect: AngularPConnectService) {}
+  constructor(private angularPConnect: AngularPConnectService, private utils: Utils) {}
 
   ngOnInit(): void {
     // First thing in initialization is registering and subscribing to the AngularPConnect service
@@ -51,6 +53,10 @@ export class TextContentComponent implements OnInit {
     }
     this.displayMode$ = this.configProps$['displayMode'];
 
+    if (this.configProps$['visibility'] != null) {
+      this.bVisible$ = this.utils.getBooleanValue(this.configProps$['visibility']);
+    }
+
     // Any update to content or displayAs will re-render this component.
     //  All rendering logic is in the .html file.
   }

diff --git a/...ges/angular-sdk-components/src/app/_components/field/text-input/text-input.component.html b/...ges/angular-sdk-components/src/app/_components/field/text-input/text-input.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -25,5 +25,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
diff --git a/packages/angular-sdk-components/src/app/_components/field/text/text.component.html b/packages/angular-sdk-components/src/app/_components/field/text/text.component.html
@@ -1,8 +1,8 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div class="psdk-label-infix-readonly">
+  <div class="psdk-label-infix-readonly" *ngIf="bVisible$ !== false">
     <span class="psdk-label-wrapper-readonly">
       <label class="psdk-label-readonly">{{ label$ }}</label>
     </span>

diff --git a/packages/angular-sdk-components/src/app/_components/field/text/text.component.ts b/packages/angular-sdk-components/src/app/_components/field/text/text.component.ts
@@ -69,8 +69,13 @@ export class TextComponent implements OnInit {
       this.value$ = this.configProps$['value'];
     }
 
+    if (this.configProps$['visibility'] != null) {
+      this.bVisible$ = this.utils.getBooleanValue(this.configProps$['visibility']);
+    }
+
     this.label$ = this.configProps$['label'];
     this.displayMode$ = this.configProps$['displayMode'];
+
 
     // TDB - get formats
     switch (this.formatAs$) {

diff --git a/packages/angular-sdk-components/src/app/_components/field/time/time.component.html b/packages/angular-sdk-components/src/app/_components/field/time/time.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -23,5 +23,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
diff --git a/packages/angular-sdk-components/src/app/_components/field/url/url.component.html b/packages/angular-sdk-components/src/app/_components/field/url/url.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -23,5 +23,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'url' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'url' }"></component-mapper>
 </ng-template>