feat: savings account transactions (export) (#950)

Fixes: #946

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

@@ -0,0 +1,35 @@
+<form class="m-t-20" fxLayout="column" [formGroup]="transactionsReportForm" (ngSubmit)="generate()">
+
+  <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
+
+    <mat-form-field fxFlex="30%">
+      <mat-label>From Date</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
+      <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #fromDatePicker></mat-datepicker>
+      <mat-error>
+        From date is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="30%">
+      <mat-label>To Date</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
+      <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #toDatePicker></mat-datepicker>
+      <mat-error>
+        To date is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+  </div>
+
+  <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
+    <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+    <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
+    <fa-icon icon="cogs"></fa-icon>&nbsp;&nbsp;Generate Report &nbsp;</button>
+  </div>
+
+</form>
+
+<iframe *ngIf="!hideOutput" [src]="pentahoUrl" frameborder="0" width=100% height="750px;"></iframe>

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

@@ -0,0 +1,5 @@
+.generate-button {
+  max-height: 2%;
+  padding: 1% 0 2% 6%;
+  align-self: center;
+}

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

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

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

@@ -0,0 +1,87 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { FormBuilder, Validators } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+
+/** Custom Services */
+import { ReportsService } from 'app/reports/reports.service';
+
+/**
+ * Export Client Savings Transactions Component
+ */
+@Component({
+  selector: 'mifosx-export-transactions',
+  templateUrl: './export-transactions.component.html',
+  styleUrls: ['./export-transactions.component.scss']
+})
+export class ExportTransactionsComponent implements OnInit {
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Transactions Report Form */
+  transactionsReportForm: any;
+  /** substitute for resolver */
+  hideOutput = true;
+  /** trusted resource url for pentaho output */
+  pentahoUrl: any;
+  /** Savings Account Id */
+  savingsAccountId: any;
+
+  /**
+   * Fetches savings account data from grandparent's `resolve`
+   * @param {DomSanitizer} sanitizer DOM Sanitizer
+   * @param {ReportsService} reportsService Reports Service
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {DatePipe} datePipe Date Pipe
+   * @param {ActivatedRoute} route Activated Route
+   */
+  constructor(private sanitizer: DomSanitizer,
+              private reportsService: ReportsService,
+              private formBuilder: FormBuilder,
+              private datePipe: DatePipe,
+              private route: ActivatedRoute) {
+    this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
+      this.savingsAccountId = data.savingsAccountData.accountNo;
+    });
+  }
+
+
+  ngOnInit() {
+    this.createTransactionsReportForm();
+  }
+
+  /**
+   * Creates the transactions report form.
+   */
+  createTransactionsReportForm() {
+    this.transactionsReportForm = this.formBuilder.group({
+      'fromDate': ['', Validators.required],
+      'toDate': ['', Validators.required],
+    });
+  }
+
+  /**
+   * Generates client savings transactions report.
+   */
+  generate() {
+    const data = {
+      'output-type':	'PDF',
+      R_startDate:	this.datePipe.transform(this.transactionsReportForm.value.fromDate, 'yyyy-MM-dd'),
+      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')
+      .subscribe( (res: any) => {
+        const contentType = res.headers.get('Content-Type');
+        const file = new Blob([res.body], {type: contentType});
+        const filecontent = URL.createObjectURL(file);
+        this.pentahoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(filecontent);
+        this.hideOutput = false;
+      });
+  }
+
+}

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -6,7 +6,7 @@
     </div>
     <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
       <button mat-raised-button color="primary">View Journal Entries</button>
-      <button mat-raised-button color="primary">Export</button>
+      <button mat-raised-button color="primary" [routerLink]="['export']">Export</button>
     </div>
   </div>
 

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

@@ -27,7 +27,7 @@ export class TransactionsTabComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
-    this.route.parent.data.subscribe((data: { savingsAccountData: any }) => {
+    this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
       this.transactionsData = data.savingsAccountData.transactions.filter((transaction: any) => !transaction.reversed);
       this.status = data.savingsAccountData.status.value;
     });

src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.html

@@ -8,4 +8,3 @@
   <iframe [src]="pentahoUrl" frameborder="0" width=100% height="600px;"></iframe>
 
 </mat-card>
-

src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.scss

@@ -5,4 +5,3 @@
     margin-bottom: 2%;
   } 
 }
-