feat: add XBRL report page (#629)

Fixes: #628

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

@@ -0,0 +1,79 @@
+<div class="container form">
+
+  <mat-card *ngIf="isCollapsed">
+
+    <form [formGroup]="xbrlForm" (ngSubmit)="runreport()">
+
+      <mat-card-content fxLayout="column">
+
+        <mat-form-field fxFlex>
+          <mat-label>Start Date</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" formControlName="startDate">
+          <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #startDatePicker></mat-datepicker>
+        </mat-form-field>
+
+        <mat-form-field fxFlex>
+          <mat-label>End Date</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate">
+          <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #endDatePicker></mat-datepicker>
+        </mat-form-field>
+
+      </mat-card-content>
+
+      <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">Run Report</button>
+      </mat-card-actions>
+
+    </form>
+    
+  </mat-card>
+
+</div>
+
+<div class="container">
+
+  <mat-card *ngIf="!isCollapsed">
+
+    <button mat-raised-button color="primary" (click)="isCollapsed = !isCollapsed">
+      Parameters
+    </button>
+
+    <div class="m-t-20">
+
+      <table mat-table [dataSource]="dataSource" matSort>
+
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+          <td mat-cell *matCellDef="let entry"> {{ entry.name }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="dimension">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Dimension </th>
+          <td mat-cell *matCellDef="let entry"> {{ entry.dimension }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="value">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+          <td mat-cell *matCellDef="let entry"> <input [formControl]="entry.value"></td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
+
+      </table>
+
+      <div class="container m-t-20" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px">
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <a [href]="submit()" download="file.xml">
+        <button mat-raised-button color="primary">Submit</button>
+        </a>
+      </div>
+
+    </div>
+
+  </mat-card>
+
+</div>

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

@@ -0,0 +1,3 @@
+.form {
+  max-width: 37rem;
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { XBRLReportComponent } from './xbrl-report.component';
+
+describe('XBRLReportComponent', () => {
+  let component: XBRLReportComponent;
+  let fixture: ComponentFixture<XBRLReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ XBRLReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(XBRLReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,125 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl} from '@angular/forms';
+import { MatTableDataSource } from '@angular/material';
+import { DatePipe } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/** Custom Services */
+import { ReportsService } from '../reports.service';
+
+/**
+ * XBRL Report Component
+ */
+@Component({
+  selector: 'mifosx-xbrl-report',
+  templateUrl: './xbrl-report.component.html',
+  styleUrls: ['./xbrl-report.component.scss']
+})
+export class XBRLReportComponent implements OnInit {
+
+  /** Minimum Due Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Due Date allowed. */
+  maxDate = new Date();
+  /** XBRL Form */
+  xbrlForm: FormGroup;
+  /** XML response from API */
+  rawXml: any;
+  /** Parsed xml data */
+  xmlData: any[] = [];
+  /** Collapsing Boolean */
+  isCollapsed = true;
+  /** Trusted url resource for xml download */
+  fileUrl: any;
+  /** Columns to be displayed in XBRL reports table */
+  displayedColumns: string[] = ['name', 'dimension', 'value'];
+  /** Data source for XBRL reports table */
+  dataSource = new MatTableDataSource();
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private reportService: ReportsService,
+              private formBuilder: FormBuilder,
+              private datePipe: DatePipe,
+              private sanitizer: DomSanitizer) {}
+
+ /**
+  * Creates the XBRL form.
+  */
+  ngOnInit() {
+    this.createXbrlForm();
+  }
+
+  createXbrlForm() {
+    this.xbrlForm = this.formBuilder.group({
+    'startDate': ['', Validators.required],
+    'endDate': ['', Validators.required],
+    });
+  }
+
+  /**
+   * Parses XML for mat-table data
+   * @param {any} response XML API response
+   */
+  buildXMLTable(response: any) {
+    const parser = new DOMParser();
+    const xml = parser.parseFromString(response, 'text/xml');
+    xml.querySelectorAll('[contextRef]').forEach( (element: HTMLElement) => {
+      const contextId = element.getAttribute('contextRef');
+      const scenario = xml.querySelector(`#${contextId}`).querySelector('scenario');
+      const context = scenario ? scenario.textContent : undefined;
+      const entry = {
+        name: element.tagName,
+        dimension: context,
+        value: new FormControl(element.textContent)
+      };
+      this.xmlData.push(entry);
+    });
+  }
+
+  /**
+   * 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 dateFormat = 'yyyy-MM-dd';
+    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) => {
+      this.rawXml = response;
+      this.buildXMLTable(response);
+      this.dataSource = new MatTableDataSource(this.xmlData);
+      this.isCollapsed = false;
+    });
+  }
+
+  /**
+   * Outputs XML File with desired changes to entry values.
+   */
+  submit() {
+    const parser = new DOMParser();
+    const xmlDOM = parser.parseFromString(this.rawXml, 'text/xml');
+    xmlDOM.querySelectorAll('[contextRef]').forEach( (element: HTMLElement) => {
+      this.xmlData.forEach( (entry: any) => {
+        if (entry.name === element.tagName) {
+          element.textContent = entry.value.value;
+        }
+      });
+    });
+    const serializer = new XMLSerializer();
+    const xml = serializer.serializeToString(xmlDOM);
+    const blob = new Blob([xml], { type: 'application/octet-stream' });
+    this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
+    return this.fileUrl;
+  }
+
+}