feat: client actions (screen-reports) (#1141)

Fixes: #1140

src/app/clients/clients-view/client-actions/client-actions.component.html

@@ -13,3 +13,4 @@
 <mifosx-undo-client-rejection *ngIf="actions['Undo Rejection']"></mifosx-undo-client-rejection>
 <mifosx-add-client-charge *ngIf="actions['Add Charge']"></mifosx-add-client-charge>
 <mifosx-take-survey *ngIf="actions['Take Survey']"></mifosx-take-survey>
+<mifosx-client-screen-reports *ngIf="actions['Client Screen Reports']"></mifosx-client-screen-reports>

src/app/clients/clients-view/client-actions/client-actions.component.ts

@@ -28,6 +28,7 @@ export class ClientActionsComponent {
     'Undo Rejection': boolean
     'Add Charge': boolean
     'Take Survey': boolean
+    'Client Screen Reports': boolean
   } = {
     'Assign Staff': false,
     'Close': false,
@@ -42,7 +43,8 @@ export class ClientActionsComponent {
     'Reactivate': false,
     'Undo Rejection': false,
     'Add Charge': false,
-    'Take Survey': false
+    'Take Survey': false,
+    'Client Screen Reports': false
   };
 
   /**

src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html

@@ -0,0 +1,56 @@
+<div class="container m-b-20">
+
+  <mat-card>
+
+    <form [formGroup]="clientScreenReportForm" (ngSubmit)="generate()">
+
+      <mat-card-content>
+
+        <div>
+
+          <mat-form-field fxFlex>
+            <mat-label>Client 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="clientScreenReportForm.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]="!clientScreenReportForm.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 fxLayoutAlign="center">
+      <p>Please select a screen report.</p>
+    </div>
+
+  </mat-card>
+
+</div>

src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.scss

@@ -0,0 +1,6 @@
+.container {
+  max-width: 37rem;
+  .print {
+    align-self: flex-end;
+  }
+}

src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.spec.ts

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

src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.ts

@@ -0,0 +1,91 @@
+/** Angular Imports */
+import { Component, OnInit, Renderer2, ViewChild, ElementRef, SecurityContext } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { ClientsService } from 'app/clients/clients.service';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/**
+ * Client Screen Reports Component.
+ */
+@Component({
+  selector: 'mifosx-client-screen-reports',
+  templateUrl: './client-screen-reports.component.html',
+  styleUrls: ['./client-screen-reports.component.scss']
+})
+export class ClientScreenReportsComponent implements OnInit {
+
+  /** Client Screen Reportform. */
+  clientScreenReportForm: FormGroup;
+  /** Templates Data */
+  templatesData: any;
+  /** Client Id */
+  clientId: any;
+  /** HTML Template */
+  template: any;
+
+  /** Screen report output reference */
+  @ViewChild('screenReport') screenReportRef: ElementRef;
+
+  /**
+   * Fetches Client Action Data from `resolve`
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {ClientsService} clientsService Clients Service
+   * @param {ActivatedRoute} route Activated Route
+   * @param {DomSanitizer} sanitizer DOM Sanitizer
+   * @param {Renderer2} renderer Renderer 2
+   */
+  constructor(private formBuilder: FormBuilder,
+              private clientsService: ClientsService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer,
+              private renderer: Renderer2) {
+    this.route.data.subscribe((data: { clientActionData: any }) => {
+      this.templatesData = data.clientActionData;
+    });
+    this.clientId = this.route.parent.snapshot.params['clientId'];
+  }
+
+  /**
+   * Creates the client screen report form.
+   */
+  ngOnInit() {
+    this.createClientScreenReportForm();
+  }
+
+  /**
+   * Creates the client screen report form.
+   */
+  createClientScreenReportForm() {
+    this.clientScreenReportForm = this.formBuilder.group({
+      'templateId': ['']
+    });
+  }
+
+  /**
+   * Prints client 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 client.
+   */
+  generate() {
+    const templateId = this.clientScreenReportForm.get('templateId').value;
+    this.clientsService.retrieveClientReportTemplate(templateId, this.clientId).subscribe((response: any) => {
+      this.template = this.sanitizer.sanitize(SecurityContext.HTML, response);
+      this.renderer.setProperty(this.screenReportRef.nativeElement, 'innerHTML', this.template);
+    });
+  }
+
+}

src/app/clients/clients-view/clients-view.component.html

@@ -51,6 +51,7 @@
         <button mat-menu-item (click)="doAction('Delete Signature')"> Delete Signature </button>
         <button mat-menu-item (click)="doAction('View Signature')"> View Signature </button>
         <button mat-menu-item (click)="doAction('Upload Image')"> Upload Image </button>
+        <button mat-menu-item (click)="doAction('Client Screen Reports')"> Client Screen Reports </button>
         <span *ngIf="clientImage"><button mat-menu-item (click)="doAction('Delete Image')"> Delete Image </button></span>
         <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item (click)="doAction('Undo Transfer')">Undo Transfer</button></span>
         <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item (click)="doAction('Accept Transfer')">Accept Transfer</button></span>

src/app/clients/clients-view/clients-view.component.ts

@@ -71,6 +71,7 @@ export class ClientsViewComponent implements OnInit {
       case 'Reactivate':
       case 'Undo Rejection':
       case 'Add Charge':
+      case 'Client Screen Reports':
         this.router.navigate([`actions/${name}`], { relativeTo: this.route });
         break;
        case 'Unassign Staff':

src/app/clients/clients.module.ts

@@ -48,6 +48,7 @@ import { ViewSignatureDialogComponent } from './clients-view/custom-dialogs/view
 import { UploadSignatureDialogComponent } from './clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component';
 import { DeleteSignatureDialogComponent } from './clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component';
 import { UploadImageDialogComponent } from './clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component';
+import { ClientScreenReportsComponent } from './clients-view/client-actions/client-screen-reports/client-screen-reports.component';
 
 
 /**
@@ -101,7 +102,8 @@ import { UploadImageDialogComponent } from './clients-view/custom-dialogs/upload
     ViewSignatureDialogComponent,
     UploadSignatureDialogComponent,
     DeleteSignatureDialogComponent,
-    UploadImageDialogComponent
+    UploadImageDialogComponent,
+    ClientScreenReportsComponent
   ],
   entryComponents: [
     UploadDocumentDialogComponent,

src/app/clients/clients.service.ts

@@ -301,6 +301,18 @@ export class ClientsService {
     return this.http.post(`/clients/${clientId}/charges`, charge);
   }
 
+  getClientReportTemplates() {
+    const httpParams = new HttpParams()
+          .set('entityId', '0')
+          .set('typeId', '0');
+    return this.http.get('/templates', { params: httpParams });
+  }
+
+  retrieveClientReportTemplate(templateId: string, clientId: string) {
+    const httpParams = new HttpParams().set('clientId', clientId);
+    return this.http.post(`/templates/${templateId}`, {}, { params: httpParams, responseType: 'text' });
+  }
+
   /**
    * @returns {Observable<any>} Offices data
    */

src/app/clients/common-resolvers/client-actions.resolver.ts

@@ -28,9 +28,6 @@ export class ClientActionsResolver implements Resolve<Object> {
     const actionName = route.paramMap.get('name');
     const clientId = route.paramMap.get('clientId') || route.parent.parent.paramMap.get('clientId');
     switch (actionName) {
-      case 'Assign Staff':
-      case 'Update Default Savings':
-        return this.clientsService.getClientDataAndTemplate(clientId);
       case 'Survey':
         return this.clientsService.getSurveys(clientId);
       case 'Take Survey':
@@ -43,12 +40,17 @@ export class ClientActionsResolver implements Resolve<Object> {
         return this.clientsService.getClientCommandTemplate('withdraw');
       case 'Transfer Client':
         return this.clientsService.getOffices();
+      case 'Add Charge':
+        return this.clientsService.getClientChargeTemplate(clientId);
+      case 'Client Screen Reports':
+        return this.clientsService.getClientReportTemplates();
+      case 'Assign Staff':
+      case 'Update Default Savings':
+        return this.clientsService.getClientDataAndTemplate(clientId);
       case 'Undo Transfer':
       case 'Accept Transfer':
       case 'Reject Transfer':
         return this.clientsService.getClientTransferProposalDate(clientId);
-      case 'Add Charge':
-        return this.clientsService.getClientChargeTemplate(clientId);
       default:
         return undefined;
     }