refactor: reports module (#1227)

Fixes: #1196

src/app/loans/common-resolvers/loans-transaction-reciept.resolver.ts

@@ -30,7 +30,7 @@ export class LoansTransactionRecieptResolver implements Resolve<Object> {
       'output-type':	'PDF',
       R_transactionId:	transactionId
     };
-    return this.reportsService.getPentahoRunReportData({name: 'Loan Transaction Receipt'}, data, 'default', 'en', 'dd MMMM yyyy');
+    return this.reportsService.getPentahoRunReportData('Loan Transaction Receipt', data, 'default', 'en', 'dd MMMM yyyy');
   }
 
 }

src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.ts

@@ -74,7 +74,7 @@ export class ExportTransactionsComponent implements OnInit {
       R_endDate:	this.datePipe.transform(this.transactionsReportForm.value.toDate, 'yyyy-MM-dd'),
       R_selectLoan:	this.loansAccountId
     };
-    this.reportsService.getPentahoRunReportData({ name: 'Client Loan Account Schedule'}, data, 'default', 'en', 'dd MMMM yyyy')
+    this.reportsService.getPentahoRunReportData('Client Loan Account Schedule', data, 'default', 'en', 'dd MMMM yyyy')
       .subscribe( (res: any) => {
         const contentType = res.headers.get('Content-Type');
         const file = new Blob([res.body], {type: contentType});

src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.ts

@@ -83,32 +83,34 @@ export class EditBusinessRuleParametersComponent implements OnChanges {
         } else { // Child Parameter
           const parent: ReportParameter = this.paramData
             .find((entry: any) => entry.name === param.parentParameterName);
-          // TODO: Refactor once Report Parameter Model is updated for multi-child support.
+            parent.childParameters.push(param);
-          if (parent.childParameter instanceof Array) {
+            this.updateParentParameters(parent);
-            parent.childParameter.push(param);
-          } else {
-            parent.childParameter = [];
-            parent.childParameter.push(param);
-          }
-          const parentNames = this.parentParameters.map(parameter => parameter.name);
-          if (!parentNames.includes(parent.name)) {
-            this.parentParameters.push(parent);
-          } else {
-            const index = parentNames.indexOf(parent.name);
-            this.parentParameters[index] = parent;
-          }
         }
       });
     this.setChildControls();
   }
 
+  /**
+   * Updates the array of parent parameters.
+   * @param {ReportParameter} parent Parent report parameter
+   */
+  updateParentParameters(parent: ReportParameter) {
+    const parentNames = this.parentParameters.map(parameter => parameter.name);
+    if (!parentNames.includes(parent.name)) { // Parent's first child.
+      this.parentParameters.push(parent);
+    } else { // Parent already has a child
+      const index = parentNames.indexOf(parent.name);
+      this.parentParameters[index] = parent;
+    }
+  }
+
   /**
    * Subscribes to changes in parent parameters value, builds child parameter vis-a-vis parent's value.
    */
   setChildControls() {
     this.parentParameters.forEach((param: ReportParameter) => {
       this.ReportForm.get(param.name).valueChanges.subscribe((option: any) => {
-        param.childParameter.forEach((child: ReportParameter) => {
+        param.childParameters.forEach((child: ReportParameter) => {
           if (child.displayType === 'none') {
             this.ReportForm.addControl(child.name, new FormControl(child.defaultVal));
           } else {
@@ -183,10 +185,10 @@ export class EditBusinessRuleParametersComponent implements OnChanges {
    * TODO: Replace report object with report name once reports service is refactored.
    */
   getResponseHeaders() {
-    const report = { name: this.paramValue.reportName };
+    const reportName = this.paramValue.reportName;
     delete this.paramValue.reportName;
     const formattedResponse = this.formatUserResponse(this.paramValue, true);
-    this.reportsService.getRunReportData(report, formattedResponse).subscribe(
+    this.reportsService.getRunReportData(reportName, formattedResponse).subscribe(
       (response: any) => {
         this.templateParameters.emit(response.columnHeaders);
       },

src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/business-rule-parameters/business-rule-parameters.component.ts

@@ -69,7 +69,7 @@ export class BusinessRuleParametersComponent implements OnChanges {
   createRunReportForm() {
     this.paramData.forEach(
       (param: any) => {
-        if (!param.parentParameterName) { // Non Child Parameter
+        if (!param.parentParameterName) { // Non-Child Parameter
           this.ReportForm.addControl(param.name, new FormControl('', Validators.required));
           if (param.displayType === 'select') {
             this.fetchSelectOptions(param, param.name);
@@ -77,32 +77,34 @@ export class BusinessRuleParametersComponent implements OnChanges {
         } else { // Child Parameter
           const parent: ReportParameter = this.paramData
             .find((entry: any) => entry.name === param.parentParameterName);
-          // TODO: Refactor once Report Parameter Model is updated for multi-child support.
+          parent.childParameters.push(param);
-          if (parent.childParameter instanceof Array) {
+          this.updateParentParameters(parent);
-            parent.childParameter.push(param);
-          } else {
-            parent.childParameter = [];
-            parent.childParameter.push(param);
-          }
-          const parentNames = this.parentParameters.map(parameter => parameter.name);
-          if (!parentNames.includes(parent.name)) {
-            this.parentParameters.push(parent);
-          } else {
-            const index = parentNames.indexOf(parent.name);
-            this.parentParameters[index] = parent;
-          }
         }
       });
     this.setChildControls();
   }
 
+  /**
+   * Updates the array of parent parameters.
+   * @param {ReportParameter} parent Parent report parameter
+   */
+  updateParentParameters(parent: ReportParameter) {
+    const parentNames = this.parentParameters.map(parameter => parameter.name);
+    if (!parentNames.includes(parent.name)) { // Parent's first child.
+      this.parentParameters.push(parent);
+    } else { // Parent already has a child
+      const index = parentNames.indexOf(parent.name);
+      this.parentParameters[index] = parent;
+    }
+  }
+
    /**
     * Subscribes to changes in parent parameters value, builds child parameter vis-a-vis parent's value.
     */
   setChildControls() {
     this.parentParameters.forEach((param: ReportParameter) => {
       this.ReportForm.get(param.name).valueChanges.subscribe((option: any) => {
-        param.childParameter.forEach((child: ReportParameter) => {
+        param.childParameters.forEach((child: ReportParameter) => {
           if (child.displayType === 'none') {
             this.ReportForm.addControl(child.name, new FormControl(child.defaultVal));
           } else {
@@ -168,7 +170,7 @@ export class BusinessRuleParametersComponent implements OnChanges {
    */
   getResponseHeaders() {
     const formattedresponse = this.formatUserResponse(this.ReportForm.value, true);
-    this.reportsService.getRunReportData({ name: this.reportName }, formattedresponse).subscribe(
+    this.reportsService.getRunReportData(this.reportName, formattedresponse).subscribe(
       (response: any) => {
         this.templateParameters.emit(response.columnHeaders);
       },

src/app/pipes/url-to-string.pipe.ts

@@ -12,11 +12,12 @@ export class UrlToStringPipe implements PipeTransform {
 
   transform(url: string): any {
     url = decodeURIComponent(url);
-    if (url.includes('search?query')) {
-      const query = url.substring(url.indexOf('=') + 1, url.indexOf('&'));
-      return 'Search ' + query;
-    }
     const urlSubstrings: string[] = url.slice(1).split('/');
+    if (url.includes('?')) { // Query params URL.
+      const query = urlSubstrings.pop();
+      const prefix = query.slice(0, query.indexOf('?'));
+      urlSubstrings.push(prefix);
+    }
     const stringRepresentation =
       urlSubstrings
         .map((path: string) => {

src/app/reports/common-models/report-parameter.model.ts

@@ -12,7 +12,7 @@ export class ReportParameter {
     parentParameterName: string;
     inputName: string;
     selectOptions: any[] = [];
-    childParameter: any;
+    childParameters: any[] = [];
     pentahoName: any;
 
     constructor(options: any[]) {

src/app/reports/common-resolvers/run-report.resolver.ts

@@ -20,11 +20,11 @@ export class RunReportResolver implements Resolve<Object> {
   constructor(private reportsService: ReportsService) {}
 
   /**
-   * Returns the reports data.
+   * Returns the report parameters data.
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    return this.reportsService.getReportParams(route.params['report-name']);
+    return this.reportsService.getReportParams(route.params['name']);
   }
 
 }

src/app/reports/reports-routing.module.ts

@@ -33,35 +33,20 @@ const routes: Routes = [
       children: [
         {
           path: '',
-          component: ReportsComponent,
+          component: ReportsComponent
         },
         {
           path: ':filter',
           data: { routeParamBreadcrumb: 'filter' },
-          component: ReportsComponent,
+          component: ReportsComponent
-        }
-      ]
-    },
-    {
-      path: 'run-report',
-      data: { title: extract('Reports'), breadcrumb: 'Reports' },
-      children: [
-        {
-          path: '',
-          redirectTo: '/reports', pathMatch: 'full'
         },
         {
-          path: ':report-name/:report-type/:report-id',
+          path: 'run/:name',
-          data: { title: extract('Run Report'), routeParamBreadcrumb: 'report-name' },
+          data: { title: extract('Reports'), routeParamBreadcrumb: 'name' },
-          children: [
+          component: RunReportComponent,
-            {
+          resolve: {
-              path: '',
+            reportParameters: RunReportResolver
-              component: RunReportComponent,
+          }
-              resolve: {
-                params: RunReportResolver
-              }
-            }
-          ]
         }
       ]
     },

src/app/reports/reports.component.html

@@ -28,7 +28,7 @@
 
       
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="['/run-report', row.reportName, row.reportType, row.id]"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="['/reports','run', row.reportName]" [queryParams]="{ type: row.reportType, id: row.id }"></tr>
 
     </table>
 

src/app/reports/reports.service.ts

@@ -57,7 +57,7 @@ export class ReportsService {
    * @param {any} dates start date and end date
    * @returns {Observable<any>} Mix Report
    */
-  getMixReport(dates: any) {
+  getMixReport(dates: any): Observable<any> {
     const httpParams = new HttpParams()
       .set('startDate', dates.startDate)
       .set('endDate', dates.endDate);
@@ -98,40 +98,40 @@ export class ReportsService {
 
   /**
    * Run Report Data for Table and SMS.
-   * @param {any} report report object containing 'id', 'name' & 'type' attributes.
+   * @param {any} reportName report name
    * @param {object} formData Form Data.
    * @returns {Observable<any>}
    */
-  getRunReportData(report: any, formData: object): Observable<any> {
+  getRunReportData(reportName: string, formData: object): Observable<any> {
     let httpParams = new HttpParams();
     for (const [key, value] of Object.entries(formData)) {
       httpParams = httpParams.set(key, value);
     }
-    return this.http.get(`/runreports/${report.name}`, {params: httpParams});
+    return this.http.get(`/runreports/${reportName}`, {params: httpParams});
   }
 
   /**
    * Run Report Data for Charts.
-   * @param {any} report report object containing 'id', 'name' & 'type' attributes.
+   * @param {any} reportName report name
    * @param {object} formData Form Data.
    * @returns {Observable<ChartData>}
    */
-  getChartRunReportData(report: any, formData: object): Observable<ChartData> {
+  getChartRunReportData(reportName: string, formData: object): Observable<ChartData> {
     let httpParams = new HttpParams();
     for (const [key, value] of Object.entries(formData)) {
       httpParams = httpParams.set(key, value);
     }
-    return this.http.get(`/runreports/${report.name}`, {params: httpParams})
+    return this.http.get(`/runreports/${reportName}`, {params: httpParams})
     .pipe(map((response: any) => new ChartData(response)));
   }
 
   /**
    * Run Report Data for Pentaho.
-   * @param {any} report report object containing 'id', 'name' & 'type' attributes.
+   * @param {any} reportName report name
    * @param {object} formData Form Data.
    * @returns {Observable<any>}
    */
-  getPentahoRunReportData(report: any, formData: object, tenantIdentifier: string, locale: string, dateFormat: string): Observable<any> {
+  getPentahoRunReportData(reportName: string, formData: object, tenantIdentifier: string, locale: string, dateFormat: string): Observable<any> {
     let httpParams = new HttpParams()
         .set('tenantIdentifier', tenantIdentifier)
         .set('locale', locale)
@@ -139,7 +139,7 @@ export class ReportsService {
     for (const [key, value] of Object.entries(formData)) {
       httpParams = httpParams.set(key, value);
     }
-    return this.http.get(`/runreports/${report.name}`, {responseType: 'arraybuffer', observe: 'response', params: httpParams});
+    return this.http.get(`/runreports/${reportName}`, {responseType: 'arraybuffer', observe: 'response', params: httpParams});
   }
 
 }

src/app/reports/run-report/chart/chart.component.ts

@@ -43,7 +43,7 @@ export class ChartComponent implements OnChanges {
   }
 
   getRunReportData() {
-    this.reportsService.getChartRunReportData(this.dataObject.reportData, this.dataObject.formData)
+    this.reportsService.getChartRunReportData(this.dataObject.report.name, this.dataObject.formData)
     .subscribe((response: ChartData) => {
       this.inputData = response;
       this.setPieChart(this.inputData);

src/app/reports/run-report/pentaho/pentaho.component.ts

@@ -39,7 +39,7 @@ export class PentahoComponent implements OnChanges {
   }
 
   getRunReportData() {
-    this.reportsService.getPentahoRunReportData(this.dataObject.reportData, this.dataObject.formData, 'default', 'en', 'dd MMMM yyyy')
+    this.reportsService.getPentahoRunReportData(this.dataObject.report.name, this.dataObject.formData, 'default', 'en', 'dd MMMM yyyy')
       .subscribe( (res: any) => {
         const contentType = res.headers.get('Content-Type');
         const file = new Blob([res.body], {type: contentType});

src/app/reports/run-report/run-report.component.html

@@ -2,85 +2,76 @@
 
   <mat-card *ngIf="!isCollapsed">
 
-    <form [formGroup]="ReportForm" (ngSubmit)="run()">
+    <form [formGroup]="reportForm" (ngSubmit)="run()">
       
-      <mat-card-content>
+      <mat-card-content fxLayout="column">
 
-        <div fxLayout="column" *ngFor="let param of paramData">
+        <ng-container  *ngFor="let param of paramData" [ngSwitch]="param.displayType">
   
-          <div [ngSwitch]="param.displayType">
+          <ng-container *ngIf="reportForm.contains(param.name)">
   
-            <div *ngIf="ReportForm.contains(param.name)">
+            <mat-form-field fxFlex *ngSwitchCase="'text'">
-              <mat-form-field fxFlex="100%" *ngSwitchCase="'text'">
+              <mat-label>{{param.label}}</mat-label>
-                <mat-label>{{param.label}}</mat-label>
+              <input matInput required [formControlName]="param.name">
-                <input matInput required [formControlName]="param.name">
+              <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
-                <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
+                {{param.label}} is <strong>required</strong>
-                  {{param.label}} is <strong>required</strong>
+              </mat-error>
-                </mat-error>
+            </mat-form-field>
-              </mat-form-field>
-            </div>
     
-            <div *ngIf="ReportForm.contains(param.name)">
+            <mat-form-field fxFlex *ngSwitchCase="'date'">
-              <mat-form-field fxFlex="100%" *ngSwitchCase="'date'">
+              <mat-label>{{param.label}}</mat-label>
-                <mat-label>{{param.label}}</mat-label>
+              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="runReportDatePicker" required
-                <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="runReportDatePicker" required [formControlName]="param.name">
+                [formControlName]="param.name">
-                <mat-datepicker-toggle matSuffix [for]="runReportDatePicker"></mat-datepicker-toggle>
+              <mat-datepicker-toggle matSuffix [for]="runReportDatePicker"></mat-datepicker-toggle>
-                <mat-datepicker #runReportDatePicker></mat-datepicker>
+              <mat-datepicker #runReportDatePicker></mat-datepicker>
-                <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
+              <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
-                  {{param.label}} is <strong>required</strong>
+                {{param.label}} is <strong>required</strong>
-                </mat-error>
+              </mat-error>
-              </mat-form-field>
+            </mat-form-field>
-            </div>
     
-            <div *ngIf="ReportForm.contains(param.name) ">
+            <mat-form-field fxFlex *ngSwitchCase="'select'">
-              <mat-form-field fxFlex="100%" *ngSwitchCase="'select'" >
+              <mat-label>{{param.label}}</mat-label>
-                <mat-label>{{param.label}}</mat-label>
+              <mat-select required [formControlName]="param.name">
-                <mat-select required [formControlName]="param.name">
+                <mat-option *ngFor="let option of param.selectOptions" [value]="option">
-                  <mat-option *ngFor="let option of param.selectOptions" [value]="option" >
                   {{option.name}}
-                  </mat-option>
+                </mat-option>
-                </mat-select>
+              </mat-select>
-                <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
+              <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
-                  {{param.label}} is <strong>required</strong>
+                {{param.label}} is <strong>required</strong>
-                </mat-error>
+              </mat-error>
-              </mat-form-field>
+            </mat-form-field>
-            </div>
   
-          </div>
+          </ng-container>
   
-        </div>
+        </ng-container>
   
-        <div>
+        <mat-form-field fxFlex>
-          <mat-form-field fxFlex="100%">
+          <mat-label>Decimal Places</mat-label>
-            <mat-label>Decimal Places</mat-label>
+          <mat-select [formControl]="decimalChoice">
-            <mat-select [formControl]="decimalChoice">
+            <mat-option value="0">0</mat-option>
-              <mat-option value="0">0</mat-option>
+            <mat-option value="1">1</mat-option>
-              <mat-option value="1">1</mat-option>
+            <mat-option value="2">2</mat-option>
-              <mat-option value="2">2</mat-option>
+            <mat-option value="3">3</mat-option>
-              <mat-option value="3">3</mat-option>
+            <mat-option value="4">4</mat-option>
-              <mat-option value="4">4</mat-option>
+          </mat-select>
-            </mat-select>
+        </mat-form-field>
-          </mat-form-field>
-        </div>
   
-        <div *ngIf="report.type === 'Pentaho' && ReportForm.contains('outputType')">
+        <mat-form-field fxFlex *ngIf="report.type === 'Pentaho' && reportForm.contains('outputType')">
-          <mat-form-field fxFlex="100%">
+          <mat-label>Output Type</mat-label>
-            <mat-label>Output Type</mat-label>
+          <mat-select formControlName="outputType" value="HTML">
-            <mat-select formControlName="outputType" value="HTML">
+            <mat-option value="HTML">Normal format</mat-option>
-              <mat-option value="HTML">Normal format</mat-option>
+            <mat-option value="XLS">Excel format</mat-option>
-              <mat-option value="XLS">Excel format</mat-option>
+            <mat-option value="XLSX">Excel 2007 format</mat-option>
-              <mat-option value="XLSX">Excel 2007 format</mat-option>
+            <mat-option value="CSV">CSV format</mat-option>
-              <mat-option value="CSV">CSV format</mat-option>
+            <mat-option value="PDF">PDF format</mat-option>
-              <mat-option value="PDF">PDF format</mat-option>
+          </mat-select>
-            </mat-select>
+        </mat-form-field>
-          </mat-form-field>
-        </div>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['/reports']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!ReportForm.valid" id="runReport">
+        <button mat-raised-button color="primary" [disabled]="!reportForm.valid" id="runReport">
           <fa-icon icon="cogs"></fa-icon>
           &nbsp; Run Report
         </button>

src/app/reports/run-report/run-report.component.ts

@@ -25,20 +25,23 @@ export class RunReportComponent implements OnInit {
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
   maxDate = new Date();
+
   /** Contains report specifications i.e: name, type and id */
   report: any = {};
   /** Formatted data post labeling of report parameters fetched from API */
-  paramData: any = [];
+  paramData: ReportParameter[] = [];
   /** Array of all parent parameters */
   parentParameters: any[] = [];
   /** Parameter data to configure pentaho output */
   pentahoReportParameters: any[] = [];
   /** Data to be passed on to component selectors */
   dataObject: any;
-  /** Initializes new form group 'ReportForm */
+
-  ReportForm = new FormGroup({});
+  /** Initializes new form group eportForm */
+  reportForm = new FormGroup({});
   /** Static Form control for decimal places in output */
   decimalChoice = new FormControl();
+
   /** Toggles Report form */
   isCollapsed = false;
   /** Toggles  Table output. */
@@ -51,18 +54,19 @@ export class RunReportComponent implements OnInit {
   /**
    * Fetches report specifications from route params and retrieves report parameters data from `resolve`.
    * @param {ActivatedRoute} route ActivatedRoute.
-   * @param {DomSanitizer} sanitizer DomSanitizer.
    * @param {ReportsService} reportsService ReportsService
    * @param {DatePipe} datePipe Date Pipe
    */
   constructor(private route: ActivatedRoute,
               private reportsService: ReportsService,
               private datePipe: DatePipe) {
-    this.report.name = this.route.snapshot.params['report-name'];
+    this.report.name = this.route.snapshot.params['name'];
-    this.report.type = this.route.snapshot.params['report-type'];
+    this.route.queryParams.subscribe((queryParams: { type: any, id: any }) => {
-    this.report.id = this.route.snapshot.params['report-id'];
+      this.report.type = queryParams.type;
-    this.route.data.subscribe((data: any) => {
+      this.report.id = queryParams.id;
-      this.paramData = data.params;
+    });
+    this.route.data.subscribe((data: { reportParameters: ReportParameter[] }) => {
+      this.paramData = data.reportParameters;
     });
   }
 
@@ -79,39 +83,39 @@ export class RunReportComponent implements OnInit {
    */
   createRunReportForm() {
     this.paramData.forEach(
-      (param: any) => {
+      (param: ReportParameter) => {
-        if (!param.parentParameterName) {
+        if (!param.parentParameterName) { // Non Child Parameter
-          this.ReportForm.addControl(param.name, new FormControl('', Validators.required));
+          this.reportForm.addControl(param.name, new FormControl('', Validators.required));
           if (param.displayType === 'select') {
             this.fetchSelectOptions(param, param.name);
           }
-        } else {
+        } else { // Child Parameter
           const parent: ReportParameter = this.paramData
             .find((entry: any) => entry.name === param.parentParameterName);
-          parent.childParameter = param;
+          parent.childParameters.push(param);
-          this.parentParameters.push(parent);
+          this.updateParentParameters(parent);
         }
       });
     if (this.report.type === 'Pentaho') {
-      this.ReportForm.addControl('outputType', new FormControl(''));
+      this.reportForm.addControl('outputType', new FormControl(''));
       this.mapPentahoParams();
     }
     this.decimalChoice.patchValue('0');
     this.setChildControls();
   }
 
- /**
+  /**
-  * Fetches Select Dropdown options for param type "Select".
+   * Updates the array of parent parameters.
-  * @param {ReportParameter} param Parameter for which dropdown options are required.
+   * @param {ReportParameter} parent Parent report parameter
-  * @param {string} inputstring url substring for API call.
+   */
-  */
+  updateParentParameters(parent: ReportParameter) {
-  fetchSelectOptions(param: ReportParameter, inputstring: string) {
+    const parentNames = this.parentParameters.map(parameter => parameter.name);
-    this.reportsService.getSelectOptions(inputstring).subscribe((options: SelectOption[]) => {
+    if (!parentNames.includes(parent.name)) { // Parent's first child.
-      param.selectOptions = options;
+      this.parentParameters.push(parent);
-      if (param.selectAll === 'Y') {
+    } else { // Parent already has a child
-        param.selectOptions.push({id: '-1', name: 'All'});
+      const index = parentNames.indexOf(parent.name);
-      }
+      this.parentParameters[index] = parent;
-    });
+    }
   }
 
   /**
@@ -132,16 +136,36 @@ export class RunReportComponent implements OnInit {
    */
   setChildControls() {
     this.parentParameters.forEach((param: ReportParameter) => {
-      this.ReportForm.get(param.name).valueChanges.subscribe((option: any) => {
+      this.reportForm.get(param.name).valueChanges.subscribe((option: any) => {
-        this.ReportForm.addControl(param.childParameter.name, new FormControl('', Validators.required));
+        param.childParameters.forEach((child: ReportParameter) => {
-        if (param.childParameter.displayType === 'select') {
+          if (child.displayType === 'none') {
-          const inputstring = `${param.childParameter.name}?${param.inputName}=${option.id}`;
+            this.reportForm.addControl(child.name, new FormControl(child.defaultVal));
-          this.fetchSelectOptions(param.childParameter, inputstring);
+          } else {
-        }
+            this.reportForm.addControl(child.name, new FormControl('', Validators.required));
+          }
+          if (child.displayType === 'select') {
+            const inputstring = `${child.name}?${param.inputName}=${option.id}`;
+            this.fetchSelectOptions(child, inputstring);
+          }
+        });
       });
     });
   }
 
+  /**
+   * Fetches Select Dropdown options for param type "Select".
+   * @param {ReportParameter} param Parameter for which dropdown options are required.
+   * @param {string} inputstring url substring for API call.
+   */
+  fetchSelectOptions(param: ReportParameter, inputstring: string) {
+    this.reportsService.getSelectOptions(inputstring).subscribe((options: SelectOption[]) => {
+      param.selectOptions = options;
+      if (param.selectAll === 'Y') {
+        param.selectOptions.push({id: '-1', name: 'All'});
+      }
+    });
+  }
+
   /**
    * Formats user response and readies it for utilization by run report function.
    * @param {any} response Object containing formcontrol values.
@@ -168,6 +192,9 @@ export class RunReportComponent implements OnInit {
           const dateFormat = 'yyyy-MM-dd';
           formattedResponse[newKey] = this.datePipe.transform(value, dateFormat);
           break;
+        case 'none':
+          formattedResponse[newKey] = value;
+          break;
       }
     }
     return formattedResponse;
@@ -178,10 +205,10 @@ export class RunReportComponent implements OnInit {
    */
   run() {
     this.isCollapsed = true;
-    const userResponse = this.formatUserResponse(this.ReportForm.value);
+    const userResponse = this.formatUserResponse(this.reportForm.value);
     this.dataObject = {
       formData: userResponse,
-      reportData: this.report,
+      report: this.report,
       decimalChoice: this.decimalChoice.value
     };
     switch (this.report.type) {

src/app/reports/run-report/table-and-sms/table-and-sms.component.html

@@ -1,6 +1,6 @@
 <div *ngIf = "!hideOutput">
 
-  <div class="m-b-10" *ngIf = "dataObject.reportData.type === 'Table'" fxLayoutAlign="end">
+  <div class="m-b-10" *ngIf = "dataObject.report.type === 'Table'" fxLayoutAlign="end">
     <button mat-raised-button color="primary" (click)="downloadCSV()" >
       Export CSV
     </button>

src/app/reports/run-report/table-and-sms/table-and-sms.component.ts

@@ -52,7 +52,7 @@ export class TableAndSmsComponent implements OnChanges {
   }
 
   getRunReportData() {
-    this.reportsService.getRunReportData(this.dataObject.reportData, this.dataObject.formData)
+    this.reportsService.getRunReportData(this.dataObject.report.name, this.dataObject.formData)
     .subscribe( (res: any) => {
       this.csvData = res.data;
       this.setOutputTable(res.data);
@@ -85,7 +85,7 @@ export class TableAndSmsComponent implements OnChanges {
     csv = csv.join('\r\n');
     const link = document.createElement('a');
     link.setAttribute('href', encodeURI(csv));
-    link.setAttribute('download', `${this.dataObject.reportData.name}.csv`);
+    link.setAttribute('download', `${this.dataObject.report.name}.csv`);
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);

src/app/reports/xbrl/xbrl.component.ts

@@ -44,7 +44,7 @@ export class XBRLComponent implements OnInit, AfterViewInit {
               private reportService: ReportsService) {
     this.route.data.subscribe(( data: { mixtaxonomy: any, mixmapping: any, glAccounts: any }) => {
       this.mixtaxonomyArray = data.mixtaxonomy;
-      this.mixMappingJson = data.mixmapping.config;
+      this.mixMappingJson = data.mixmapping.config || JSON.stringify({});
       this.glAccounts = data.glAccounts;
     });
   }
@@ -67,7 +67,7 @@ export class XBRLComponent implements OnInit, AfterViewInit {
   * Subscribe to taxonomy's value changes and filters options accordingly.
   */
   ngAfterViewInit() {
-    this.mixtaxonomyArray.forEach( (taxonomy: any) => {
+    this.mixtaxonomyArray.forEach((taxonomy: any) => {
       taxonomy.mapping?.valueChanges.subscribe( (value: string) => {
         this.filteredGlAccounts = this.applyFilter(value);
       });
@@ -78,13 +78,11 @@ export class XBRLComponent implements OnInit, AfterViewInit {
    * Maps Taxonomy to it's value and add's formcontrol.
    */
   createMappings() {
-    if (this.mixMappingJson !== undefined && this.mixMappingJson.length > 0) {
+    this.mixtaxonomyArray.forEach((taxonomy: any) => {
-      this.mixtaxonomyArray.forEach( (taxonomy: any) => {
+      const mapping = JSON.parse(this.mixMappingJson)[taxonomy.id];
-        const mapping = JSON.parse(this.mixMappingJson)[taxonomy.id];
+        taxonomy.mapping = new FormControl('');
-          taxonomy.mapping = new FormControl('');
+        taxonomy.mapping.value = mapping || '';
-          taxonomy.mapping.value = mapping;
+    });
-      });
-    }
   }
 
   /**

src/app/savings/common-resolvers/savings-transaction-reciept.resolver.ts

@@ -30,7 +30,7 @@ export class SavingsTransactionRecieptResolver implements Resolve<Object> {
       'output-type':	'PDF',
       R_transactionId:	transactionId
     };
-    return this.reportsService.getPentahoRunReportData({name: 'Savings Transaction Receipt'}, data, 'default', 'en', 'dd MMMM yyyy');
+    return this.reportsService.getPentahoRunReportData('Savings Transaction Receipt', data, 'default', 'en', 'dd MMMM yyyy');
   }
 
 }

src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.ts

@@ -74,7 +74,7 @@ export class ExportTransactionsComponent implements OnInit {
       R_endDate:	this.datePipe.transform(this.transactionsReportForm.value.toDate, 'yyyy-MM-dd'),
       R_savingsAccountId:	this.savingsAccountId
     };
-    this.reportsService.getPentahoRunReportData({name: 'Client Saving Transactions'}, data, 'default', 'en', 'dd MMMM yyyy')
+    this.reportsService.getPentahoRunReportData('Client Saving Transactions', data, 'default', 'en', 'dd MMMM yyyy')
       .subscribe( (res: any) => {
         const contentType = res.headers.get('Content-Type');
         const file = new Blob([res.body], {type: contentType});