feat: add loan actions (loan-screen-reports) (#1143)

Fixes: #850

src/app/loans/common-resolvers/loan-action-button.resolver.ts

@@ -54,6 +54,8 @@ export class LoanActionButtonResolver implements Resolve<Object> {
             return this.loansService.getGuarantorTemplate(loanId);
         } else if (loanActionButton === 'disburse') {
             return this.loansService.getLoanActionTemplate(loanId, 'disburse');
+        } else if (loanActionButton === 'loan-screen-reports') {
+            return this.loansService.getLoanScreenReportsData();
         } else {
             return undefined;
         }

src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html

@@ -19,5 +19,6 @@
     <mifosx-withdrawn-by-client *ngIf="actions.withdrawn_by_client"></mifosx-withdrawn-by-client>
     <mifosx-add-collateral [dataObject]="actionButtonData" *ngIf="actions.add_collateral"></mifosx-add-collateral>
     <mifosx-undo-disbursal *ngIf="actions.undo_disbursal"></mifosx-undo-disbursal>
+    <mifosx-loan-screen-reports [dataObject]="actionButtonData" *ngIf="actions.loan_screen_reports"></mifosx-loan-screen-reports>
   </mat-card>
 </div>

src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts

@@ -31,7 +31,8 @@ export class LoanAccountActionsComponent {
             create_guarantor: boolean,
             disburse: boolean,
             withdrawn_by_client: boolean,
-            undo_disbursal: boolean } = {
+            undo_disbursal: boolean,
+            loan_screen_reports: boolean } = {
               close: false,
               undo_approval: false,
               write_off: false,
@@ -50,7 +51,9 @@ export class LoanAccountActionsComponent {
               create_guarantor: false,
               disburse: false,
               withdrawn_by_client: false,
-              undo_disbursal: false };
+              undo_disbursal: false,
+              loan_screen_reports: false };
+
   actionButtonData: any;
   actionName: any;
 

src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html

@@ -0,0 +1,57 @@
+<div class="container m-b-20">
+
+    <mat-card>
+
+        <form [formGroup]="loanScreenReportForm" (ngSubmit)="generate()">
+
+            <mat-card-content>
+
+                <div>
+
+                    <mat-form-field fxFlex>
+                        <mat-label>Loan Screen Reports</mat-label>
+                        <mat-select formControlName="templateId">
+                            <mat-option *ngFor="let template of templatesData" [value]="template.id">
+                                {{ template.name }}
+                            </mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="loanScreenReportForm.controls.templateId.hasError('required')">
+                            Screen Report is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                </div>
+
+            </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" [disabled]="!loanScreenReportForm.valid">
+                    <fa-icon icon="cogs" size="sm"></fa-icon>&nbsp;&nbsp;Generate Report
+                </button>
+            </mat-card-actions>
+
+        </form>
+
+    </mat-card>
+
+</div>
+
+<div #output class="container">
+
+    <mat-card fxLayout="column" fxLayoutGap="3%">
+
+        <div fxLayoutAlign="end">
+            <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
+                <fa-icon icon="file"></fa-icon>&nbsp;&nbsp;
+                Print
+            </button>
+        </div>
+
+        <div #screenReport class="screen-report">
+            <p>Please select a screen report.</p>
+        </div>
+
+    </mat-card>
+
+</div>

src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.scss

@@ -0,0 +1,9 @@
+.container {
+  max-width: 37rem;
+  .print {
+    align-self: flex-end;
+  }
+  .screen-report {
+      text-align: center;
+  }
+}

src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.spec.ts

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

src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.ts

@@ -0,0 +1,91 @@
+/** Angular Imports */
+import { Component, OnInit, Renderer2, ViewChild, ElementRef, SecurityContext, Input } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { LoansService } from 'app/loans/loans.service';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/**
+ * Loans Screen Reports Component.
+ */
+@Component({
+  selector: 'mifosx-loan-screen-reports',
+  templateUrl: './loan-screen-reports.component.html',
+  styleUrls: ['./loan-screen-reports.component.scss']
+})
+export class LoanScreenReportsComponent implements OnInit {
+
+  @Input() dataObject: any;
+  /** Loan Screen Reportform. */
+  loanScreenReportForm: FormGroup;
+  /** Templates Data */
+  templatesData: any;
+  /** Loan Id */
+  loanId: any;
+  /** HTML Template */
+  template: any;
+
+  /** Screen report output reference */
+  @ViewChild('screenReport') screenReportRef: ElementRef;
+
+  /**
+   * Fetches Loan Action Data from `resolve`
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {LoansService} loansService Loans Service
+   * @param {ActivatedRoute} route Activated Route
+   * @param {DomSanitizer} sanitizer DOM Sanitizer
+   * @param {Renderer2} renderer Renderer 2
+   */
+  constructor(private formBuilder: FormBuilder,
+    private loansService: LoansService,
+    private route: ActivatedRoute,
+    private sanitizer: DomSanitizer,
+    private renderer: Renderer2) {
+    this.loanId = this.route.parent.snapshot.params['loanId'];
+  }
+
+  /**
+   * Creates the loan screen report form.
+   */
+  ngOnInit() {
+    this.templatesData = this.dataObject;
+    this.createLoanScreenReportForm();
+    console.log('templateData: ', this.templatesData);
+  }
+
+  /**
+   * Creates the loan screen report form.
+   */
+  createLoanScreenReportForm() {
+    this.loanScreenReportForm = this.formBuilder.group({
+      'templateId': ['']
+    });
+  }
+
+  /**
+   * Prints loan screen report
+   */
+  print() {
+    const templateWindow = window.open('', 'Screen Report', 'height=400,width=600');
+    templateWindow.document.write('<html><head>');
+    templateWindow.document.write('</head><body>');
+    templateWindow.document.write(this.template);
+    templateWindow.document.write('</body></html>');
+    templateWindow.print();
+    templateWindow.close();
+  }
+
+  /**
+   * Submits the form and generates screen report for the loan.
+   */
+  generate() {
+    const templateId = this.loanScreenReportForm.get('templateId').value;
+    this.loansService.getTemplateData(templateId, this.loanId).subscribe((response: any) => {
+      this.template = this.sanitizer.sanitize(SecurityContext.HTML, response);
+      this.renderer.setProperty(this.screenReportRef.nativeElement, 'innerHTML', this.template);
+    });
+  }
+
+}

src/app/loans/loans.module.ts

@@ -59,6 +59,7 @@ import { LoansConfirmationDialogBoxComponent } from './custom-dialog/loans-confi
 import { LoanAccountLoadDocumentsDialogComponent } from './custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component';
 import { StandingInstructionsTabComponent } from './loans-view/standing-instructions-tab/standing-instructions-tab.component';
 import { EditLoansAccountComponent } from './edit-loans-account/edit-loans-account.component';
+import { LoanScreenReportsComponent } from './loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component';
 
 /**
  * Loans Module
@@ -116,6 +117,7 @@ import { EditLoansAccountComponent } from './edit-loans-account/edit-loans-accou
     LoanAccountLoadDocumentsDialogComponent,
     StandingInstructionsTabComponent,
     EditLoansAccountComponent,
+    LoanScreenReportsComponent
   ],
   entryComponents: [
     LoansAccountAddCollateralDialogComponent,

src/app/loans/loans.service.ts

@@ -154,6 +154,12 @@ export class LoansService {
     return this.http.post(`/loans/${loanId}/transactions`, data, {params: httpParams});
   }
 
+  getLoanScreenReportsData(): Observable<any> {
+    const httpParams = new HttpParams().set('entityId', '1')
+                                       .set('typeId', '0');
+    return this.http.get(`/templates`, {params: httpParams});
+  }
+
   /**
    * Get Loan Datatables
    */
@@ -331,4 +337,9 @@ export class LoansService {
     return this.http.put(`/loans/${loanId}`, loanData);
   }
 
+  getTemplateData(templateId: any, loanId: any): Observable<any> {
+    const httpParams = new HttpParams().set('loanId', loanId);
+    return this.http.post(`/templates/${templateId}`, {}, { params: httpParams, responseType: 'text'});
+  }
+
 }