Export report table to CSV file using defined delimiter (#1798)

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

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

@@ -3,7 +3,7 @@
   <div *ngIf="!hideOutput && !toBeExportedToRepo">
 
     <div class="m-b-10" *ngIf="dataObject.report.type === 'Table'" fxLayoutAlign="end">
-      <button mat-raised-button color="primary" (click)="downloadCSV()" [disabled]="notExistsReportData"
+      <button mat-raised-button color="primary" (click)="exportFile()" [disabled]="notExistsReportData"
         matToolTip="Export the data to CSV file">
         Export CSV
       </button>

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

@@ -6,6 +6,13 @@ import { DecimalPipe, NumberSymbol, getLocaleNumberSymbol } from '@angular/commo
 
 /** Custom Servies */
 import { ReportsService } from '../../reports.service';
+import { MatDialog } from '@angular/material/dialog';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { Dates } from 'app/core/utils/dates';
+import { environment } from 'environments/environment';
 
 /**
  * Table and SMS Component
@@ -41,7 +48,9 @@ export class TableAndSmsComponent implements OnChanges {
    * @param {DecimalPipe} decimalPipe Decimal Pipe
    */
   constructor(private reportsService: ReportsService,
-              private decimalPipe: DecimalPipe ) { }
+          public dialog: MatDialog,
+          private decimalPipe: DecimalPipe,
+          private dateUtils: Dates) { }
 
   /**
    * Fetches run report data post changes in run report form.
@@ -85,19 +94,57 @@ export class TableAndSmsComponent implements OnChanges {
   /**
    * Generates the CSV file dynamically for run report data.
    */
-  downloadCSV() {
-    const userLang = navigator.language;
+  exportFile() {
+    const delimiterOptions: any[] = [
+      {name: 'Comma (,)', char: ','},
+      {name: 'Colon (:)', char: ':'},
+      {name: 'SemiColon (;)', char: ';'},
+      {name: 'Pipe (|)', char: '|'},
+      {name: 'Space ( )', char: ' '},
+    ];
+    const fileName = `${this.dataObject.report.name}.csv`;
+    const formfields: FormfieldBase[] = [
+      new SelectBase({
+        controlName: 'delimiter',
+        label: 'Delimiter',
+        value: environment.defaultCharDelimiter,
+        options: { label: 'name', value: 'char', data: delimiterOptions },
+        required: true,
+        order: 1
+      }),
+      new InputBase({
+        controlName: 'fileName',
+        label: 'File Name',
+        value: fileName,
+        type: 'text',
+        required: true,
+        order: 2
+      })
+    ];
+    const data = {
+      title: 'Export data to File',
+      layout: { addButtonText: 'Export to File' },
+      formfields: formfields
+    };
+    const exportDialogRef = this.dialog.open(FormDialogComponent, { data });
+    exportDialogRef.afterClosed().subscribe((response: { data: any }) => {
+      if (response.data) {
+        this.downloadCSV(response.data.value.fileName, response.data.value.delimiter);
+      }
+    });
+  }
+
+  /**
+   * Generates the CSV file dynamically for run report data.
+   */
+  downloadCSV(fileName: string, delimiter: string) {
     const headers = this.displayedColumns;
-    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));
-    link.setAttribute('download', `${this.dataObject.report.name}.csv`);
+    link.setAttribute('download', fileName);
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);