feat: add edit loan accounts (#1131)

Fixes: #220

src/app/loans/edit-loans-account/edit-loans-account.component.html

@@ -0,0 +1,67 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loansAccountStepper>
+    <ng-template matStepperIcon="number">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="edit">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="done">
+      <fa-icon icon="check" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="error">
+      <fa-icon icon="exclamation-triangle" size="lg"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="preview">
+      <fa-icon icon="eye" size="sm"></fa-icon>
+    </ng-template>
+
+    <mat-step [stepControl]="loansAccountDetailsForm">
+
+      <ng-template matStepLabel>DETAILS</ng-template>
+
+      <mifosx-loans-account-details-step [loansAccountTemplate]="loansAccountAndTemplate"
+        (loansAccountProductTemplate)="setTemplate($event)">
+      </mifosx-loans-account-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="loansAccountTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-loans-account-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
+      [loansAccountTemplate]="loansAccountAndTemplate">
+      </mifosx-loans-account-terms-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-loans-account-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
+        [loansAccountTemplate]="loansAccountAndTemplate" [collateralOptions]="collateralOptions"
+        [loansAccountFormValid]="loansAccountFormValidAndNotPristine">
+      </mifosx-loans-account-charges-step>
+
+    </mat-step>
+
+    <mat-step state="preview" *ngIf="loansAccountFormValidAndNotPristine" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-loans-account-preview-step [loansAccountTemplate]="loansAccountAndTemplate"
+        [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" (submit)="submit()">
+      </mifosx-loans-account-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>

src/app/loans/edit-loans-account/edit-loans-account.component.spec.ts

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

src/app/loans/edit-loans-account/edit-loans-account.component.ts

@@ -0,0 +1,146 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { LoansService } from '../loans.service';
+import { LoansAccountDetailsStepComponent } from '../loans-account-stepper/loans-account-details-step/loans-account-details-step.component';
+import { LoansAccountTermsStepComponent } from '../loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component';
+import { LoansAccountChargesStepComponent } from '../loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component';
+
+@Component({
+  selector: 'mifosx-edit-loans-account',
+  templateUrl: './edit-loans-account.component.html',
+  styleUrls: ['./edit-loans-account.component.scss']
+})
+export class EditLoansAccountComponent implements OnInit {
+
+  @ViewChild(LoansAccountDetailsStepComponent) loansAccountDetailsStep: LoansAccountDetailsStepComponent;
+  @ViewChild(LoansAccountTermsStepComponent) loansAccountTermsStep: LoansAccountTermsStepComponent;
+  @ViewChild(LoansAccountChargesStepComponent) loansAccountChargesStep: LoansAccountChargesStepComponent;
+
+  loansAccountAndTemplate: any;
+  /** Loans Account Product Template */
+  loansAccountProductTemplate: any;
+  /** Collateral Options */
+  collateralOptions: any;
+  /** Loan Id */
+  loanId: any;
+
+  /**
+   * Sets loans account edit form.
+   * @param {route} ActivatedRoute Activated Route.
+   * @param {router} Router Router.
+   * @param {datePipe} DatePipe Date Pipe
+   * @param {loansService} LoansService Loans Service
+   */
+  constructor(private route: ActivatedRoute,
+    private router: Router,
+    private datePipe: DatePipe,
+    private loansService: LoansService
+  ) {
+    this.route.data.subscribe((data: { loansAccountAndTemplate: any }) => {
+      this.loansAccountAndTemplate = data.loansAccountAndTemplate;
+    });
+    this.loanId = this.route.parent.snapshot.params['loanId'];
+  }
+
+  ngOnInit() {
+  }
+
+  /**
+   * Sets loans account product template and collateral template
+   * @param {any} $event API response
+   */
+  setTemplate($event: any) {
+    this.loansAccountProductTemplate = $event;
+    this.loansService.getLoansCollateralTemplateResource(this.loansAccountProductTemplate.loanProductId).subscribe((response: any) => {
+      this.collateralOptions = response.loanCollateralOptions;
+    });
+  }
+
+  /** Get Loans Account Details Form Data */
+  get loansAccountDetailsForm() {
+    return this.loansAccountDetailsStep.loansAccountDetailsForm;
+  }
+
+  /** Get Loans Account Terms Form Data */
+  get loansAccountTermsForm() {
+    return this.loansAccountTermsStep.loansAccountTermsForm;
+  }
+
+  /** Checks wheter all the forms in different steps are valid and not pristine */
+  get loansAccountFormValidAndNotPristine() {
+    return (
+      this.loansAccountDetailsForm.valid &&
+      this.loansAccountTermsForm.valid &&
+      (
+        !this.loansAccountDetailsForm.pristine ||
+        !this.loansAccountTermsForm.pristine ||
+        !this.loansAccountChargesStep.pristine
+      )
+    );
+  }
+
+  /** Retrieves Data of all forms except Currency to submit the data */
+  get loansAccount() {
+    return {
+      ...this.loansAccountDetailsStep.loansAccountDetails,
+      ...this.loansAccountTermsStep.loansAccountTerms,
+      ...this.loansAccountChargesStep.loansAccountCharges,
+    };
+  }
+
+  /**
+   * Submits Data to create loan account
+   */
+  submit() {
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const loanType = 'individual';
+    const loansAccountData = {
+      ...this.loansAccount,
+      clientId: this.loansAccountAndTemplate.clientId,
+      charges: this.loansAccount.charges.map((charge: any) => ({
+        chargeId: charge.id,
+        amount: charge.amount,
+        dueDate: charge.dueDate && this.datePipe.transform(charge.dueDate, dateFormat),
+      })),
+      collateral: this.loansAccount.collateral.map((collateralEle: any) => ({
+        type: collateralEle.type,
+        value: collateralEle.value,
+        description: collateralEle.description
+      })),
+      interestChargedFromDate: this.datePipe.transform(this.loansAccount.interestChargedFromDate, dateFormat),
+      repaymentsStartingFromDate: this.datePipe.transform(this.loansAccount.repaymentsStartingFromDate, dateFormat),
+      submittedOnDate: this.datePipe.transform(this.loansAccount.submittedOnDate, dateFormat),
+      expectedDisbursementDate: this.datePipe.transform(this.loansAccount.expectedDisbursementDate, dateFormat),
+      dateFormat,
+      locale,
+      loanType
+    };
+
+    if (loansAccountData.syncRepaymentsWithMeeting) {
+      loansAccountData.calendarId = this.loansAccountProductTemplate.calendarOptions[0].id;
+      delete loansAccountData.syncRepaymentsWithMeeting;
+    }
+
+    if (loansAccountData.recalculationRestFrequencyDate) {
+      loansAccountData.recalculationRestFrequencyDate = this.datePipe.transform(this.loansAccount.recalculationRestFrequencyDate, dateFormat);
+    }
+
+    if (loansAccountData.recalculationCompoundingFrequencyDate) {
+      loansAccountData.recalculationCompoundingFrequencyDate = this.datePipe.transform(this.loansAccount.recalculationCompoundingFrequencyDate, dateFormat);
+    }
+
+    if (loansAccountData.interestCalculationPeriodType === 0) {
+      loansAccountData.allowPartialPeriodInterestCalcualtion = false;
+    }
+    if (!(loansAccountData.isFloatingInterestRate === false)) {
+      delete loansAccountData.isFloatingInterestRate;
+    }
+
+    this.loansService.updateLoansAccount(this.loanId, loansAccountData).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}