feat: add create loan account (#1050)

Fixes: #220 Co-authored-by: Abhijeet Singh <abhijeet40308@gmail.com>
2020-07-10 15:50:02 +05:30
parent 11d74bd665
commit 843e4ed981
35 changed files with 2105 additions and 20 deletions
@@ -0,0 +1,101 @@
+<form [formGroup]="loansAccountDetailsForm">
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Product Name</mat-label>
+      <mat-select formControlName="productId" required>
+        <mat-option *ngFor="let product of productData" [value]="product.id">
+          {{ product.name }}
+        </mat-option>
+      </mat-select>
+      <mat-error>
+        Product Name is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Loan officer</mat-label>
+      <mat-select formControlName="loanOfficerId">
+        <mat-option *ngFor="let loanOfficer of loanOfficerOptions" [value]="loanOfficer.id">
+          {{ loanOfficer.displayName }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Loan purpose</mat-label>
+      <mat-select formControlName="loanPurposeId">
+        <mat-option *ngFor="let loanPurpose of loanPurposeOptions" [value]="loanPurpose.id">
+          {{ loanPurpose.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Fund</mat-label>
+      <mat-select formControlName="fundId">
+        <mat-option *ngFor="let fund of fundOptions" [value]="fund.id">
+          {{ fund.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Submitted on</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" required
+        formControlName="submittedOnDate">
+      <mat-datepicker-toggle matSuffix [for]="submitPicker"></mat-datepicker-toggle>
+      <mat-datepicker #submitPicker></mat-datepicker>
+      <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
+        Submitted on is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Disbursement on</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="disbursementPicker" required
+        formControlName="expectedDisbursementDate">
+      <mat-datepicker-toggle matSuffix [for]="disbursementPicker"></mat-datepicker-toggle>
+      <mat-datepicker #disbursementPicker></mat-datepicker>
+      <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
+        Disbursement on is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>External id</mat-label>
+      <input matInput formControlName="externalId">
+    </mat-form-field>
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
+    <h3 class="mat-h3" fxFlexFill>Savings Linkage</h3>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Link savings</mat-label>
+      <mat-select formControlName="linkAccountId">
+        <mat-option *ngFor="let savingaccount of accountLinkingOptions" [value]="savingaccount.id">
+          {{ savingaccount.productName }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-checkbox fxFlex="48%" formControlName="createStandingInstructionAtDisbursement">
+      <p>Create standing instructions at disbursement</p>
+    </mat-checkbox>
+
+  </div>
+
+  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+    <button mat-raised-button matStepperPrevious disabled>
+      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      Previous
+    </button>
+    <button mat-raised-button matStepperNext>
+      Next&nbsp;&nbsp;
+      <fa-icon icon="arrow-right"></fa-icon>
+    </button>
+  </div>
+
+</form>
@@ -0,0 +1,24 @@
+h4 {
+  font-weight: 500;
+  margin: 1em 0;
+}
+
+h3 {
+  font-weight: 500;
+}
+
+mat-divider {
+  margin: 1em 0 2em 0;
+}
+
+.margin-v {
+  margin: 1em 0;
+}
+
+.margin-b {
+  margin: 0 0 1em 0;
+}
+
+.margin-t {
+  margin-top: 1em;
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoansAccountDetailsStepComponent } from './loans-account-details-step.component';
+
+describe('LoansAccountDetailsStepComponent', () => {
+  let component: LoansAccountDetailsStepComponent;
+  let fixture: ComponentFixture<LoansAccountDetailsStepComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoansAccountDetailsStepComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoansAccountDetailsStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,111 @@
+/** Angular Imports */
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+/** Custom Services */
+import { LoansService } from '../../loans.service';
+import { DatePipe } from '@angular/common';
+import { ReportsRoutingModule } from 'app/reports/reports-routing.module';
+
+/**
+ * Loans Account Details Step
+ */
+@Component({
+  selector: 'mifosx-loans-account-details-step',
+  templateUrl: './loans-account-details-step.component.html',
+  styleUrls: ['./loans-account-details-step.component.scss']
+})
+export class LoansAccountDetailsStepComponent implements OnInit {
+
+  /** Loans Account Template */
+  @Input() loansAccountTemplate: any;
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Product Data */
+  productData: any;
+  /** Loan Officer Data */
+  loanOfficerOptions: any;
+  /** Loan Purpose Options */
+  loanPurposeOptions: any;
+  /** Fund Options */
+  fundOptions: any;
+  /** Account Linking Options */
+  accountLinkingOptions: any;
+  /** For edit loan accounts form */
+  isFieldOfficerPatched = false;
+  /** Loans Account Details Form */
+  loansAccountDetailsForm: FormGroup;
+
+  /** Loans Account Template with product data  */
+  @Output() loansAccountProductTemplate = new EventEmitter();
+  /**
+   * Sets loans account details form.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {LoansService} loansService Loans Service.
+   */
+  constructor(private formBuilder: FormBuilder,
+    private loansService: LoansService,
+    private datePipe: DatePipe) {
+    this.createLoansAccountDetailsForm();
+  }
+
+  ngOnInit() {
+    this.buildDependencies();
+    if (this.loansAccountTemplate) {
+      this.productData = this.loansAccountTemplate.productOptions;
+      if (this.loansAccountTemplate.loanProductId) {
+        this.loansAccountDetailsForm.patchValue({
+          'productId': this.loansAccountTemplate.loanProductId,
+          'submittedOnDate': this.loansAccountTemplate.timeline.submittedOnDate && new Date(this.loansAccountTemplate.timeline.submittedOnDate),
+        });
+      }
+    }
+  }
+
+  /**
+   * Creates loans account details form.
+   */
+  createLoansAccountDetailsForm() {
+    this.loansAccountDetailsForm = this.formBuilder.group({
+      'productId': ['', Validators.required],
+      'loanOfficerId': [''],
+      'loanPurposeId': [''],
+      'fundId': [''],
+      'submittedOnDate': ['', Validators.required],
+      'expectedDisbursementDate': ['', Validators.required],
+      'externalId': [''],
+      'linkAccountId': [''],
+      'createStandingInstructionAtDisbursement': ['']
+    });
+  }
+
+  /**
+   * Fetches loans account product template on productId value changes
+   */
+  buildDependencies() {
+    const clientId = this.loansAccountTemplate.clientId;
+    this.loansAccountDetailsForm.get('productId').valueChanges.subscribe((productId: string) => {
+      this.loansService.getLoansAccountTemplateResource(clientId, productId).subscribe((response: any) => {
+        this.loansAccountProductTemplate.emit(response);
+        this.loanOfficerOptions = response.loanOfficerOptions;
+        this.loanPurposeOptions = response.loanPurposeOptions;
+        this.fundOptions = response.fundOptions;
+        this.accountLinkingOptions = response.accountLinkingOptions;
+        if (response.createStandingInstructionAtDisbursement) {
+          this.loansAccountDetailsForm.get('createStandingInstructionAtDisbursement').patchValue(response.createStandingInstructionAtDisbursement);
+        }
+      });
+    });
+  }
+
+  /**
+   * Returns loans account details form value.
+   */
+  get loansAccountDetails() {
+    return this.loansAccountDetailsForm.value;
+  }
+
+}