Fix FieldGroup issues, add support for highlighted fields and display modes (#192)

Author: vishalshrm539

src/app/_components/_forms/auto-complete/auto-complete.component.html

@@ -1,3 +1,7 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <app-field-value-list [label$]="label$" [value$]="value$" [displayMode$]="displayMode$"></app-field-value-list>
+</div>
+<ng-template #noDisplayMode>
 <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
   <div [formGroup]="formGroup$" *ngIf="bVisible$">
     <mat-form-field class="psdk-full-width">
@@ -23,6 +27,7 @@
     </mat-form-field>
   </div>
 </div>
+</ng-template>
 <ng-template #noEdit>
   <app-text [pConn$]="pConn$" [formatAs$]="'text'"></app-text>
 </ng-template>

src/app/_components/_forms/auto-complete/auto-complete.component.ts

@@ -24,6 +24,7 @@ export class AutoCompleteComponent implements OnInit {
   bReadonly$: boolean = false;
   bDisabled$: boolean = false;
   bVisible$: boolean = true;
+  displayMode$: string = '';
   controlName$: string;
   bHasForm$: boolean = true;
   options$: Array<any>;
@@ -101,6 +102,7 @@ export class AutoCompleteComponent implements OnInit {
 
     this.testId = this.configProps$['testId'];
     this.label$ = this.configProps$['label'];
+    this.displayMode$ = this.configProps$['displayMode'];
     this.listType = this.configProps$['listType'];
     const displayMode = this.configProps$['displayMode'];
     const datasource = this.configProps$['datasource'];

src/app/_components/_forms/check-box/check-box.component.html

@@ -1,3 +1,7 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <app-field-value-list [label$]="label$" [value$]="value$" [displayMode$]="displayMode$"></app-field-value-list>
+</div>
+<ng-template #noDisplayMode>
 <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
   <div [formGroup]="formGroup$" *ngIf="bVisible$">
     <div class="mat-form-field-infix" *ngIf="showLabel$">
@@ -29,6 +33,7 @@
     </div>
   </div>
 </div>
+</ng-template>
 <ng-template #noEdit>
   <app-text [pConn$]="pConn$" [formatAs$]="'text'"></app-text>
 </ng-template>

src/app/_components/_forms/check-box/check-box.component.ts

@@ -27,6 +27,7 @@ export class CheckBoxComponent implements OnInit {
   bReadonly$: boolean = false;
   bDisabled$: boolean = false;
   bVisible$: boolean = true;
+  displayMode$: string = '';
   controlName$: string;
   bHasForm$: boolean = true;
   componentReference: string = '';
@@ -93,7 +94,7 @@ export class CheckBoxComponent implements OnInit {
     }
     this.testId = this.configProps$['testId'];
     this.label$ = this.configProps$['label'];
-
+    this.displayMode$ = this.configProps$['displayMode'];
     this.caption$ = this.configProps$['caption'];
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError

src/app/_components/_forms/currency/currency.component.html

@@ -1,3 +1,7 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <app-field-value-list [label$]="label$" [value$]="value$" [displayMode$]="displayMode$"></app-field-value-list>
+</div>
+<ng-template #noDisplayMode>
 <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
   <div [formGroup]="formGroup$" *ngIf="bVisible$">
     <mat-form-field class="psdk-full-width">
@@ -20,6 +24,7 @@
     </mat-form-field>
   </div>
 </div>
+</ng-template>
 <ng-template #noEdit>
   <app-text [pConn$]="pConn$" [formatAs$]="'text'"></app-text>
 </ng-template>

src/app/_components/_forms/currency/currency.component.ts

@@ -23,6 +23,7 @@ export class CurrencyComponent implements OnInit {
   bReadonly$: boolean = false;
   bDisabled$: boolean = false;
   bVisible$: boolean = true;
+  displayMode$: string = '';
   controlName$: string;
   bHasForm$: boolean = true;
   componentReference: string = '';
@@ -88,6 +89,7 @@ export class CurrencyComponent implements OnInit {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     this.testId = this.configProps$['testId'];
     this.label$ = this.configProps$['label'];
+    this.displayMode$ = this.configProps$['displayMode'];
     let nValue = this.configProps$['value'];
     this.value$ = nValue && typeof nValue == 'string' ? parseFloat(nValue) : nValue;
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError

src/app/_components/_forms/date-time/date-time.component.html

@@ -1,3 +1,7 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <app-field-value-list [label$]="label$" [value$]="value$" [displayMode$]="displayMode$"></app-field-value-list>
+</div>
+<ng-template #noDisplayMode>
 <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
   <div [formGroup]="formGroup$" *ngIf="bVisible$">
     <mat-form-field class="psdk-full-width">
@@ -18,6 +22,7 @@
     </mat-form-field>
   </div>
 </div>
+</ng-template>
 <ng-template #noEdit>
   <app-text [pConn$]="pConn$" [formatAs$]="'date-time'"></app-text>
 </ng-template>

src/app/_components/_forms/date-time/date-time.component.ts

@@ -23,6 +23,7 @@ export class DateTimeComponent implements OnInit {
   bReadonly$: boolean = false;
   bDisabled$: boolean = false;
   bVisible$: boolean = true;
+  displayMode$: string = '';
   controlName$: string;
   bHasForm$: boolean = true;
   componentReference: string = '';
@@ -84,6 +85,7 @@ export class DateTimeComponent implements OnInit {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
 
     this.label$ = this.configProps$['label'];
+    this.displayMode$ = this.configProps$['displayMode'];
     this.testId = this.configProps$['testId'];
     if (this.configProps$['value'] != undefined) {
       const value = this.configProps$['value'];

src/app/_components/_forms/date/date.component.html

@@ -1,3 +1,7 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <app-field-value-list [label$]="label$" [value$]="value$" [displayMode$]="displayMode$"></app-field-value-list>
+</div>
+<ng-template #noDisplayMode>
 <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
   <div [formGroup]="formGroup$" *ngIf="bVisible$">
     <mat-form-field class="psdk-full-width">
@@ -22,6 +26,7 @@
     </mat-form-field>
   </div>
 </div>
+</ng-template>
 <ng-template #noEdit>
   <app-text [pConn$]="pConn$" [formatAs$]="'date'"></app-text>
 </ng-template>

src/app/_components/_forms/date/date.component.ts

@@ -22,6 +22,7 @@ export class DateComponent implements OnInit {
   bReadonly$: boolean = false;
   bDisabled$: boolean = false;
   bVisible$: boolean = true;
+  displayMode$: string = '';
   controlName$: string;
   bHasForm$: boolean = true;
   componentReference: string = '';
@@ -101,6 +102,7 @@ export class DateComponent implements OnInit {
     }
     this.testId = this.configProps$['testId'];
     this.label$ = this.configProps$['label'];
+    this.displayMode$ = this.configProps$['displayMode'];
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {