feat: add client charge payment component (#690)

Fixes: #689
2020-07-15 17:13:39 +05:30
parent bf98074b71
commit 3fbe2815a0
9 changed files with 198 additions and 2 deletions
@@ -0,0 +1,34 @@
+<div class="tab-container mat-typography">
+
+  <form [formGroup]="transactionForm" (ngSubmit)="submit()">
+
+    <div fxLayout="column">
+
+      <mat-form-field>
+        <mat-label> Amount </mat-label>
+        <input matInput required autofocus formControlName="amount">
+        <mat-error *ngIf="transactionForm.controls.amount.hasError('required')">
+          Amount <strong>is required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-label> Transaction date </mat-label>
+        <input matInput [min]="minDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+        <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #transactionDatePicker></mat-datepicker>
+        <mat-error *ngIf="transactionForm.controls.transactionDate.hasError('required')">
+          Transaction date <strong>is required</strong>
+        </mat-error>
+      </mat-form-field>
+
+    </div>
+
+    <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button type="button" mat-raised-button [routerLink]="['../','general']">Cancel</button>
+      <button mat-raised-button color="primary" [disabled]="!transactionForm.valid">Submit</button>
+    </div>
+
+  </form>
+
+</div>
@@ -0,0 +1,4 @@
+.tab-container {
+    padding: 1%;
+    margin: 1%;
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClientPayChargesComponent } from './client-pay-charges.component';
+
+describe('ClientPayChargesComponent', () => {
+  let component: ClientPayChargesComponent;
+  let fixture: ComponentFixture<ClientPayChargesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ClientPayChargesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClientPayChargesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,77 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services. */
+import { ClientsService } from 'app/clients/clients.service';
+
+/**
+ * Client Pay Charge component.
+ */
+@Component({
+  selector: 'mifosx-client-pay-charges',
+  templateUrl: './client-pay-charges.component.html',
+  styleUrls: ['./client-pay-charges.component.scss']
+})
+export class ClientPayChargesComponent implements OnInit {
+
+  /** Transaction Form. */
+  transactionForm: any;
+  /** Transaction Data. */
+  transactionData: any;
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+
+    /**
+     * Retrieves the charge data from `resolve`.
+     * @param {ClientService} clientService Products Service.
+     * @param {FormBuilder} formBuilder Form Builder.
+     * @param {ActivatedRoute} route Activated Route.
+     * @param {Router} router Router for navigation.
+     */
+  constructor(
+    private clientsService: ClientsService,
+    private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private datePipe: DatePipe
+  ) {
+    this.route.data.subscribe((data: { transactionData: any }) => {
+      this.transactionData = data.transactionData;
+    });
+  }
+
+  ngOnInit() {
+    this.setTransactionForm();
+  }
+
+  /**
+   * Set Transaction Form.
+   */
+  setTransactionForm() {
+    this.transactionForm = this.formBuilder.group({
+      'amount': [this.transactionData.amount, Validators.required],
+      'transactionDate': [new Date(), Validators.required]
+    });
+  }
+
+  /**
+   * Submits Transaction form.
+   */
+  submit() {
+    const transactionDate = this.transactionForm.value.transactionDate;
+    const dateFormat = 'yyyy-MM-dd';
+    this.transactionForm.patchValue({
+      transactionDate: this.datePipe.transform(transactionDate, dateFormat)
+    });
+    const transactions = this.transactionForm.value;
+    transactions.locale = 'en';
+    transactions.dateFormat = dateFormat;
+    this.clientsService.payClientCharge(this.transactionData.clientId, this.transactionData.id, transactions).subscribe(() => {
+      this.router.navigate(['../', 'general']);
+    });
+  }
+
+}
@@ -157,6 +157,7 @@
    <tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: openLoansColumns;"
      [routerLink]="['../', 'loans', row.id, 'general']" class="select-row"></tr>
+    <tr mat-row *matRowDef="let row; columns: openLoansColumns;" [routerLink]="['../paycharge',row.id]"></tr>
  </table>

  <!-- Closed Loan Accounts -->