Fixed Raptor Issue

Space for chart is not adjusted dynamically and Invisible Form fields are visible on Run Report Page

Issue-ID: PORTAL-939
Change-Id: I675fac7a0df1e2b7cb5df072df1c7d686f70854d
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>

3 files changed, 16 insertions, 10 deletions

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.html
index dc6ef1cd..60eb927f 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.html
@@ -21,12 +21,12 @@
         <div *ngIf="!showformFiledSpinner" class="stdForm">
             <div *ngIf="formFieldList" class="wrapper">
                 <div *ngFor="let item of formFieldList; let i = index;">
-                    <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE'"
+                    <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE' && item.visible"
                          class="fieldWidth">
                         <label class="labelWidth">{{item.fieldDisplayName}} :</label> <textarea placement="right" ngbTooltip="comma seperated"
                                                                                                 [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"   [(ngModel)]="formFieldListValueArr[i]" class="defaultFontSizeTextArea" id="item.fieldId"></textarea>
                     </div>
-                    <div *ngIf="item.fieldType == 'LIST_BOX'" class="fieldWidth">
+                    <div *ngIf="item.fieldType == 'LIST_BOX' && item.visible" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
                         <select  [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
                                  class="browser-default custom-select defaultFontSize" required="required"
@@ -35,7 +35,7 @@
                                     class="defaultFontSize" value="{{listItem.id}}">{{listItem.name}}</option>
                         </select>
                     </div>
-                    <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT'" class="fieldWidth">
+                    <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT' && item.visible" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
                         <mat-form-field>
                             <mat-select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" multiple>
@@ -44,7 +44,7 @@
                             </mat-select>
                         </mat-form-field>
                     </div>
-                    <div *ngIf="item.validationType == 'DATE'" class="fieldWidth">
+                    <div *ngIf="item.validationType == 'DATE' && item.visible" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
                         <mat-form-field><input  [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
                                                 [matDatepicker]="picker"
@@ -71,11 +71,11 @@
 
             <div *ngIf="formFieldList" class="wrapper">
                 <div *ngFor="let item of toggleFormFieldRenderArr; let i = index;">
-                    <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE'" class="fieldWidth">
+                    <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE' && item.visible" class="fieldWidth">
                         <label class="labelWidth">{{item.fieldDisplayName}} :</label><textarea placement="right" ngbTooltip="comma seperated"
                                                                                                [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" class="defaultFontSizeTextArea" id="item.fieldId"></textarea>
                     </div>
-                    <div *ngIf="item.fieldType == 'LIST_BOX'" class="fieldWidth">
+                    <div *ngIf="item.fieldType == 'LIST_BOX' && item.visible" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
                         <select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
                                 class="browser-default custom-select defaultFontSize" required="required"
@@ -85,7 +85,7 @@
                         </select>
 
                     </div>
-                    <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT'" class="fieldWidth">
+                    <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT' && item.visible" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
                         <mat-form-field>
                             <mat-select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
@@ -97,7 +97,7 @@
 
                         <br/>
                     </div>
-                    <div *ngIf="item.validationType == 'DATE'" class="fieldWidth">
+                    <div *ngIf="item.validationType == 'DATE' && item.visible" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
                         <mat-form-field><input [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" [matDatepicker]="picker"
                                                class="defaultFontSize"
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
index 4b647528..69de20bf 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
@@ -33,7 +33,7 @@
 </div>
 <span *ngIf="download_in_progress" class="ecomp-small-spinner"></span>
 <div *ngIf="!showDashboardReport">
-    <div *ngIf="error == false" [hidden]="isChartAvailable == false" align="center">
+    <div *ngIf="error == false && showChart" [hidden]="isChartAvailable == false" align="center">
         <iframe #iframe height="500" style="border: none" width="70%"></iframe>
     </div>
    
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts
index a2163054..7e0ac549 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts
@@ -90,6 +90,7 @@ export class RunReportComponent implements OnInit, AfterViewInit {
     timeTaken = '...';
     saveResponseObj: any;
     showBackButton = false;
+    showChart: boolean = false;
 
     constructor(private _http: HttpClient,
         private _route: ActivatedRoute,
@@ -361,7 +362,9 @@ export class RunReportComponent implements OnInit, AfterViewInit {
 
         if (response['chartWizardAvailable'] === true) {
             this.isChartAvailable = true;
-            this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
+            if(this.iframe){
+                this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
+            }
         }
 
         let totalCnt = 0;
@@ -437,6 +440,9 @@ export class RunReportComponent implements OnInit, AfterViewInit {
         }
         this.dataSource.data = this.displayedRowObj;
         this.dataSource.sort = this.sort;
+        if(this.totalRecords >0){
+            this.showChart = true;
+        }
 
     }