Support additional export table report options (#1780)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

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

@@ -20,6 +20,7 @@ import { RunReportResolver } from './common-resolvers/run-report.resolver';
 import { MixTaxonomyResolver } from './common-resolvers/mixtaxonomy.resolver';
 import { MixMappingsResolver } from './common-resolvers/mixmappings.resolver';
 import { GlAccountsResolver } from '../accounting/common-resolvers/gl-accounts.resolver';
+import { GlobalConfigurationsResolver } from 'app/system/configurations/global-configurations-tab/global-configurations.resolver';
 
 /** Reports Routes */
 const routes: Routes = [
@@ -45,7 +46,8 @@ const routes: Routes = [
           data: { title: extract('Reports'), routeParamBreadcrumb: 'name' },
           component: RunReportComponent,
           resolve: {
-            reportParameters: RunReportResolver
+            reportParameters: RunReportResolver,
+            configurations: GlobalConfigurationsResolver
           }
         }
       ]

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

@@ -6,7 +6,7 @@
 
       <mat-card-content fxLayout="column">
 
-        <ng-container  *ngFor="let param of paramData" [ngSwitch]="param.displayType">
+        <ng-container *ngFor="let param of paramData" [ngSwitch]="param.displayType">
 
           <ng-container *ngIf="reportForm.contains(param.name)">
 
@@ -17,7 +17,7 @@
                 {{param.label}} is <strong>required</strong>
               </mat-error>
             </mat-form-field>
-    
+
             <mat-form-field fxFlex *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
               <mat-label>{{param.label}}</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="runReportDatePicker" required
@@ -46,7 +46,7 @@
         </ng-container>
 
         <mat-form-field fxFlex>
-          <mat-label>Decimal Places</mat-label>
+          <mat-label>{{ 'Decimal Places' | translate }}</mat-label>
           <mat-select [formControl]="decimalChoice">
             <mat-option value="0">0</mat-option>
             <mat-option value="1">1</mat-option>
@@ -56,14 +56,27 @@
           </mat-select>
         </mat-form-field>
 
-        <mat-form-field fxFlex *ngIf="report.type === 'Pentaho' && reportForm.contains('outputType')">
-          <mat-label>Output Type</mat-label>
-          <mat-select formControlName="outputType" value="HTML">
-            <mat-option value="HTML">Normal format</mat-option>
-            <mat-option value="XLS">Excel format</mat-option>
-            <mat-option value="XLSX">Excel 2007 format</mat-option>
-            <mat-option value="CSV">CSV format</mat-option>
-            <mat-option value="PDF">PDF format</mat-option>
+        <mat-form-field fxFlex *ngIf="isPentahoReport() && reportForm.contains('outputType')">
+          <mat-label>{{ 'Output Type' | translate }}</mat-label>
+          <mat-select required [formControlName]="outputType">
+            <mat-option *ngFor="let option of outputTypeOptions" [value]="option.value">
+              {{option.name | translate}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <div fxFlex="98%" *ngIf="exportToS3Allowed"  >
+          <mat-checkbox labelPosition="after" formControlName="exportOutputToS3">
+            Export output data to S3 repository [{{exportToS3Repository}}]
+          </mat-checkbox>
+        </div>
+
+        <mat-form-field fxFlex *ngIf="report.type === 'Table' && reportForm.contains('exportAsType')">
+          <mat-label>{{ 'Export output as' | translate }}</mat-label>
+          <mat-select required formControlName="exportAsType">
+            <mat-option *ngFor="let option of outputTypeOptions" [value]="option.value">
+              {{option.name | translate}}
+            </mat-option>
           </mat-select>
         </mat-form-field>
 
@@ -72,8 +85,8 @@
       <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">
-          <fa-icon icon="cogs"></fa-icon>
-          &nbsp; Run Report
+          <fa-icon icon="file-export" class="m-r-10"></fa-icon>
+          {{ 'Run Report' | translate }}
         </button>
       </mat-card-actions>
 
@@ -89,12 +102,12 @@
 
     <div class="m-b-20">
       <button mat-raised-button color="primary" (click)="isCollapsed = false">
-        Parameters
+        {{ 'Parameters' | translate }}
       </button>
     </div>
 
     <div>
-      <mifosx-table-and-sms *ngIf="!hideTable"[dataObject]="dataObject"></mifosx-table-and-sms>
+      <mifosx-table-and-sms *ngIf="!hideTable" [dataObject]="dataObject"></mifosx-table-and-sms>
       <mifosx-chart *ngIf="!hideChart" [dataObject]="dataObject"></mifosx-chart>
       <mifosx-pentaho *ngIf="!hidePentaho" [dataObject]="dataObject"></mifosx-pentaho>
     </div>

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

@@ -11,6 +11,7 @@ import { SettingsService } from 'app/settings/settings.service';
 import { ReportParameter } from '../common-models/report-parameter.model';
 import { SelectOption } from '../common-models/select-option.model';
 import { Dates } from 'app/core/utils/dates';
+import { GlobalConfiguration } from 'app/system/configurations/global-configurations-tab/configuration.model';
 
 /**
  * Run report component.
@@ -53,6 +54,10 @@ export class RunReportComponent implements OnInit {
   hidePentaho = true;
   /** Report uses dates */
   reportUsesDates = false;
+  exportToS3Allowed = false;
+  reportToBeExportedInRepository: any;
+  exportToS3Repository: string;
+  outputTypeOptions: any[] = [];
 
   /**
    * Fetches report specifications from route params and retrieves report parameters data from `resolve`.
@@ -70,16 +75,32 @@ export class RunReportComponent implements OnInit {
       this.report.type = queryParams.type;
       this.report.id = queryParams.id;
     });
-    this.route.data.subscribe((data: { reportParameters: ReportParameter[] }) => {
+    this.route.data.subscribe((data: { reportParameters: ReportParameter[], configurations: any }) => {
       this.paramData = data.reportParameters;
+      if (this.isTableReport()) {
+        data.configurations.globalConfiguration.forEach((config: GlobalConfiguration) => {
+          if (config.name === 'report-export-s3-folder-name') {
+            this.exportToS3Allowed = config.enabled;
+            this.exportToS3Repository = config.stringValue;
+          }
+        });
+      }
     });
   }
 
+  isTableReport(): boolean {
+    return (this.report.type === 'Table');
+  }
+
+  isPentahoReport(): boolean {
+    return (this.report.type === 'Pentaho');
+  }
+
   /**
    * Creates and sets the run report form.
    */
   ngOnInit() {
-    this.maxDate = this.settingsService.businessDate;
+    this.maxDate = this.settingsService.maxAllowedDate;
     this.createRunReportForm();
   }
 
@@ -102,10 +123,20 @@ export class RunReportComponent implements OnInit {
           this.updateParentParameters(parent);
         }
       });
-    if (this.report.type === 'Pentaho') {
+    if (this.isPentahoReport()) {
       this.reportForm.addControl('outputType', new FormControl(''));
+      this.outputTypeOptions = [
+        { 'name': 'Normal format', 'value': 'HTML' },
+        { 'name': 'Excel format', 'value': 'XLS' },
+        { 'name': 'Excel 2007 format', 'value': 'XLSX' },
+        { 'name': 'CSV format', 'value': 'CSV' },
+        { 'name': 'PDF format', 'value': 'PDF' }
+      ];
       this.mapPentahoParams();
     }
+    if (this.exportToS3Allowed) {
+      this.reportForm.addControl('exportOutputToS3', new FormControl(false));
+    }
     this.decimalChoice.patchValue('0');
     this.setChildControls();
   }
@@ -179,14 +210,19 @@ export class RunReportComponent implements OnInit {
   formatUserResponse(response: any) {
     const formattedResponse: any = {};
     let newKey: string;
+    this.reportToBeExportedInRepository = false;
     for (const [key, value] of Object.entries(response)) {
       if (key === 'outputType') {
         formattedResponse['output-type'] = value;
         continue;
+      } else if (key === 'exportOutputToS3') {
+        this.reportToBeExportedInRepository = value;
+        continue;
       }
+
       const param: ReportParameter = this.paramData
         .find((_entry: any) => _entry.name === key);
-      newKey = this.report.type === 'Pentaho' ? param.pentahoName : param.inputName;
+      newKey = this.isPentahoReport() ? param.pentahoName : param.inputName;
       switch (param.displayType) {
         case 'text':
           formattedResponse[newKey] = value;
@@ -223,6 +259,9 @@ export class RunReportComponent implements OnInit {
         dateFormat: this.settingsService.dateFormat
       };
     }
+    if (this.reportToBeExportedInRepository) {
+      formData['exportS3'] = true;
+    }
     this.dataObject = {
       formData: formData,
       report: this.report,

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

@@ -1,12 +1,12 @@
 <div *ngIf = "!hideOutput">
 
   <div class="m-b-10" *ngIf = "dataObject.report.type === 'Table'" fxLayoutAlign="end">
-    <button mat-raised-button color="primary" (click)="downloadCSV()" >
+    <button mat-raised-button color="primary" (click)="downloadCSV()"  [disabled]="notExistsReportData">
       Export CSV
     </button>
   </div>
 
-  <div class="table-output">
+  <div class="table-output" [hidden]="notExistsReportData">
     <table mat-table [dataSource]="dataSource">
       <div *ngFor= "let column of displayedColumns index as i">
         <ng-container [matColumnDef]="column">
@@ -23,4 +23,10 @@
     <mat-paginator [pageSizeOptions]="[100, 200, 300]" showFirstLastButtons></mat-paginator>
   </div>
 
+  <div class="alert" [hidden]="!notExistsReportData">
+    <div class="message">
+      <i class="fa fa-exclamation-circle alert-check"></i>
+      No report data was generated
+    </div>
+  </div>
 </div>

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

@@ -2,7 +2,7 @@
 import { Component, Input, ViewChild, OnChanges } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
-import { DecimalPipe } from '@angular/common';
+import { DecimalPipe, NumberSymbol, getLocaleNumberSymbol } from '@angular/common';
 
 /** Custom Servies */
 import { ReportsService } from '../../reports.service';
@@ -30,6 +30,7 @@ export class TableAndSmsComponent implements OnChanges {
   hideOutput = true;
   /** Data to be converted into CSV file */
   csvData: any;
+  notExistsReportData = false;
 
   /** Paginator for run-report table. */
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -55,6 +56,7 @@ export class TableAndSmsComponent implements OnChanges {
     this.reportsService.getRunReportData(this.dataObject.report.name, this.dataObject.formData)
     .subscribe( (res: any) => {
       this.csvData = res.data;
+      this.notExistsReportData = (res.data.length === 0);
       this.setOutputTable(res.data);
       res.columnHeaders.forEach((header: any) => {
         this.columnTypes.push(header.columnDisplayType);
@@ -79,9 +81,14 @@ export class TableAndSmsComponent implements OnChanges {
    * Generates the CSV file dynamically for run report data.
    */
   downloadCSV() {
+    const userLang = navigator.language;
     const headers = this.displayedColumns;
-    let csv = this.csvData.map((object: any) => object.row.join());
-    csv.unshift(`data:text/csv;charset=utf-8,${headers.join()}`);
+    let delimiter = ',';
+    if (getLocaleNumberSymbol(userLang, NumberSymbol.CurrencyDecimal) !== '.') {
+      delimiter = ';';
+    }
+    let csv = this.csvData.map((object: any) => object.row.join(delimiter));
+    csv.unshift(`data:text/csv;charset=utf-8,${headers.join(delimiter)}`);
     csv = csv.join('\r\n');
     const link = document.createElement('a');
     link.setAttribute('href', encodeURI(csv));