Format date fields without patch form

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

@@ -3,13 +3,13 @@
   <mat-card *ngIf="!isCollapsed">
 
     <form [formGroup]="reportForm" (ngSubmit)="run()">
-      
+
       <mat-card-content fxLayout="column">
 
         <ng-container  *ngFor="let param of paramData" [ngSwitch]="param.displayType">
-  
+
           <ng-container *ngIf="reportForm.contains(param.name)">
-  
+
             <mat-form-field fxFlex *ngSwitchCase="'text'">
               <mat-label>{{param.label}}</mat-label>
               <input matInput required [formControlName]="param.name">
@@ -17,7 +17,7 @@
                 {{param.label}} is <strong>required</strong>
               </mat-error>
             </mat-form-field>
-    
+
             <mat-form-field fxFlex *ngSwitchCase="'date'">
               <mat-label>{{param.label}}</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="runReportDatePicker" required
@@ -28,7 +28,7 @@
                 {{param.label}} is <strong>required</strong>
               </mat-error>
             </mat-form-field>
-    
+
             <mat-form-field fxFlex *ngSwitchCase="'select'">
               <mat-label>{{param.label}}</mat-label>
               <mat-select required [formControlName]="param.name">
@@ -40,11 +40,11 @@
                 {{param.label}} is <strong>required</strong>
               </mat-error>
             </mat-form-field>
-  
+
           </ng-container>
-  
+
         </ng-container>
-  
+
         <mat-form-field fxFlex>
           <mat-label>Decimal Places</mat-label>
           <mat-select [formControl]="decimalChoice">
@@ -55,7 +55,7 @@
             <mat-option value="4">4</mat-option>
           </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">
@@ -71,7 +71,7 @@
 
       <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>
@@ -80,7 +80,7 @@
     </form>
 
   </mat-card>
-  
+
 </div>
 
 <div class="container output" *ngIf="isCollapsed">

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

@@ -2,7 +2,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { ReportsService } from '../reports.service';
@@ -11,6 +10,7 @@ import { SettingsService } from 'app/settings/settings.service';
 /** Custom Models */
 import { ReportParameter } from '../common-models/report-parameter.model';
 import { SelectOption } from '../common-models/select-option.model';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Run report component.
@@ -57,12 +57,12 @@ export class RunReportComponent implements OnInit {
    * @param {ActivatedRoute} route ActivatedRoute.
    * @param {ReportsService} reportsService ReportsService
    * @param {SettingsService} settingsService Settings Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    */
   constructor(private route: ActivatedRoute,
               private reportsService: ReportsService,
                private settingsService: SettingsService,
-              private datePipe: DatePipe) {
+              private dateUtils: Dates) {
     this.report.name = this.route.snapshot.params['name'];
     this.route.queryParams.subscribe((queryParams: { type: any, id: any }) => {
       this.report.type = queryParams.type;
@@ -193,7 +193,7 @@ export class RunReportComponent implements OnInit {
           break;
         case 'date':
           const dateFormat = this.settingsService.dateFormat;
-          formattedResponse[newKey] = this.datePipe.transform(value, dateFormat);
+          formattedResponse[newKey] = this.dateUtils.formatDate(value, dateFormat);
           break;
         case 'none':
           formattedResponse[newKey] = value;

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

@@ -24,11 +24,11 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-        <button mat-raised-button color="primary" id="runReport">Run Report</button>
+        <button mat-raised-button color="primary" id="runreport">Run Report</button>
       </mat-card-actions>
 
     </form>
-    
+
   </mat-card>
 
 </div>

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

@@ -2,12 +2,12 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl} from '@angular/forms';
 import { MatTableDataSource } from '@angular/material/table';
-import { DatePipe } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 
 /** Custom Services */
 import { ReportsService } from '../reports.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * XBRL Report Component
@@ -47,7 +47,7 @@ export class XBRLReportComponent implements OnInit {
   constructor(private reportService: ReportsService,
               private formBuilder: FormBuilder,
               private settingsService: SettingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private sanitizer: DomSanitizer) {}
 
  /**
@@ -88,16 +88,17 @@ export class XBRLReportComponent implements OnInit {
    * Fetches XML Response, parses it and initializes mat-table with parsed data.
    */
   runreport() {
-    const startDate: Date = this.xbrlForm.value.startDate;
-    const endDate: Date = this.xbrlForm.value.endDate;
-    // TODO: Update once language and date settings are setup
+    const xbrlFormData = this.xbrlForm.value;
+    const prevStartDate: Date = this.xbrlForm.value.startDate;
+    const prevEndDate: Date = this.xbrlForm.value.endDate;
     const dateFormat = this.settingsService.dateFormat;
-    this.xbrlForm.patchValue({
-      startDate: this.datePipe.transform(startDate, dateFormat),
-      endDate: this.datePipe.transform(endDate, dateFormat)
-    });
-    const dates = this.xbrlForm.value;
-    this.reportService.getMixReport(dates).subscribe((response: any) => {
+    if (xbrlFormData.startDate instanceof Date) {
+      xbrlFormData.startDate = this.dateUtils.formatDate(prevStartDate, dateFormat);
+    }
+    if (xbrlFormData.endDate instanceof Date) {
+      xbrlFormData.endDate = this.dateUtils.formatDate(prevEndDate, dateFormat);
+    }
+    this.reportService.getMixReport(xbrlFormData).subscribe((response: any) => {
       this.rawXml = response;
       this.buildXMLTable(response);
       this.dataSource = new MatTableDataSource(this.xmlData);