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

Fixes: #1140
2020-07-19 13:53:28 +05:30
parent 3bc8e41a46
commit c134026030
11 changed files with 207 additions and 8 deletions
@@ -12,4 +12,5 @@
 <mifosx-reactivate-client *ngIf="actions['Reactivate']"></mifosx-reactivate-client>
 <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-take-survey *ngIf="actions['Take Survey']"></mifosx-take-survey>
+<mifosx-client-screen-reports *ngIf="actions['Client Screen Reports']"></mifosx-client-screen-reports>
@@ -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
  };

  /**
@@ -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>
@@ -0,0 +1,6 @@
+.container {
+  max-width: 37rem;
+  .print {
+    align-self: flex-end;
+  }
+}
@@ -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();
+  });
+});
@@ -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);
+    });
+  }
+
+}