feat: add edit loan accounts (#1131)

Fixes: #220

src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts

@@ -59,6 +59,11 @@ export class LoansAccountDetailsStepComponent implements OnInit {
         this.loansAccountDetailsForm.patchValue({
           'productId': this.loansAccountTemplate.loanProductId,
           'submittedOnDate': this.loansAccountTemplate.timeline.submittedOnDate && new Date(this.loansAccountTemplate.timeline.submittedOnDate),
+          'loanOfficerId': this.loansAccountTemplate.loanOfficerId,
+          'loanPurposeId': this.loansAccountTemplate.loanPurposeId,
+          'fundId': this.loansAccountTemplate.fundId,
+          'expectedDisbursementDate': this.loansAccountTemplate.timeline.expectedDisbursementDate && new Date(this.loansAccountTemplate.timeline.expectedDisbursementDate),
+          'externalId': this.loansAccountTemplate.externalId
         });
       }
     }

src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html

@@ -9,19 +9,19 @@
     <span fxFlex="60%">{{ loansAccount.productId | find:loansAccountTemplate.productOptions:'id':'name' }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccountProductTemplate">
-    <span fxFlex="40%">Loan officer: :</span>
+  <div fxFlexFill *ngIf="loansAccount.loanOfficerId">
+    <span fxFlex="40%">Loan officer:</span>
     <span
-      fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'name'}}</span>
+      fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'displayName'}}</span>
   </div>
 
-  <div fxFlexFill>
+  <div fxFlexFill *ngIf="loansAccount.loanPurposeId">
     <span fxFlex="40%">Loan purpose:</span>
     <span
       fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
   </div>
 
-  <div fxFlexFill>
+  <div fxFlexFill *ngIf="loansAccount.fundId">
     <span fxFlex="40%">Fund:</span>
     <span fxFlex="60%">{{ loansAccount.fundId | find:loansAccountProductTemplate.fundOptions:'id':'name'}}</span>
   </div>
@@ -36,8 +36,8 @@
     <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate | date }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">External id</span>
+  <div fxFlexFill *ngIf="loansAccount.externalId">
+    <span fxFlex="40%">External id:</span>
     <span fxFlex="60%">{{ loansAccount.externalId }}</span>
   </div>
 
@@ -57,74 +57,74 @@
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Number of repayments</span>
+    <span fxFlex="40%">Number of repayments:</span>
     <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Repaid every</span>
+    <span fxFlex="40%">Repaid every:</span>
     <span fxFlex="60%">{{loansAccount.repaymentEvery}}
       {{loansAccount.repaymentFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}
       {{loansAccount.repaymentFrequencyNthDayType | find: loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions:'id': 'name'}}
       {{loansAccount.repaymentFrequencyDayOfWeekType | find: loansAccountProductTemplate.repaymentFrequencyDaysOfWeekTypeOptions:'id': 'name'}}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">First repayment on</span>
+  <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
+    <span fxFlex="40%">First repayment on:</span>
     <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate | date }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">Interest charged from</span>
+  <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
+    <span fxFlex="40%">Interest charged from:</span>
     <span fxFlex="60%">{{ loansAccount.interestChargedFromDate | date }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">Nominal interest rate</span>
+  <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
+    <span fxFlex="40%">Nominal interest rate:</span>
     <span
       fxFlex="60%">{{loansAccount.interestRatePerPeriod}}&nbsp;&nbsp;{{loansAccountProductTemplate.interestRateFrequencyType.value}}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">Interest method </span>
+  <div fxFlexFill *ngIf="loansAccount.interestType">
+    <span fxFlex="40%">Interest method: </span>
     <span fxFlex="60%">{{loansAccount.interestType}}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">Is Equal Amortization</span>
+  <div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
+    <span fxFlex="40%">Is Equal Amortization:</span>
     <span fxFlex="60%">{{loansAccount.isEqualAmortization}}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">Amortization</span>
     <span
-      fxFlex="60%">{{ loansAccount.amortizationType | find:loansAccountTemplate.amortizationTypeOptions:'id':'name' }}</span>
+      fxFlex="60%">{{ loansAccount.amortizationType | find:loansAccountProductTemplate.amortizationTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest calculation period </span>
+    <span fxFlex="40%">Interest calculation period: </span>
     <span
-      fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountTemplate.interestCalculationPeriodTypeOptions:'id':'name'  }}</span>
+      fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountProductTemplate.interestCalculationPeriodTypeOptions:'id':'value'  }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">Calculate interest for exact days in partial period</span>
+  <div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
+    <span fxFlex="40%">Calculate interest for exact days in partial period:</span>
     <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">Arrears tolerance </span>
+  <div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
+    <span fxFlex="40%">Arrears tolerance: </span>
     <span
       fxFlex="60%">{{loansAccount.inArrearsTolerance}}&nbsp;{{loansAccountProductTemplate.currency.displaySymbol}}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">Interest free period </span>
+  <div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
+    <span fxFlex="40%">Interest free period: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Repayment strategy </span>
+    <span fxFlex="40%">Repayment strategy: </span>
     <span
       fxFlex="60%">{{ loansAccount.transactionProcessingStrategyId | find:loansAccountTemplate.transactionProcessingStrategyOptions:'id':'name' }}</span>
   </div>
@@ -133,33 +133,33 @@
 
   <mat-divider fxFlexFill></mat-divider>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">On principal payment </span>
+  <div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
+    <span fxFlex="40%">On principal payment: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">On interest payment </span>
+  <div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
+    <span fxFlex="40%">On interest payment: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">On Arrears Aging </span>
+  <div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
+    <span fxFlex="40%">On Arrears Aging: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
   </div>
 
-  <div fxFlexFill>
+  <div fxFlexFill *ngIf="loansAccount.isTopup">
     <span fxFlex="40%">Is Topup Loan? </span>
     <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Recalculate Interest </span>
+    <span fxFlex="40%">Recalculate Interest: </span>
     <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">Days in month </span>
+  <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
+    <span fxFlex="40%">Days in month: </span>
     <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
   </div>
 

src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html

@@ -48,6 +48,8 @@
         <mat-datepicker #repaymentsPicker></mat-datepicker>
       </mat-form-field>
 
+      <h4 fxFlex="98%" class="mat-h4">Repaid Every</h4>
+
       <mat-form-field fxFlex="48%">
         <mat-label>Repaid every</mat-label>
         <input matInput required formControlName="repaymentEvery"
@@ -152,13 +154,16 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Amortization</mat-label>
-      <mat-select [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.amortizationType"
+      <mat-select required [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.amortizationType"
         formControlName="amortizationType">
         <mat-option *ngFor="let amortizationType of amortizationTypeData"
           [value]="amortizationType.id">
           {{ amortizationType.value }}
         </mat-option>
       </mat-select>
+      <mat-error *ngIf="loansAccountTermsForm.controls.amortizationType.hasError('required')">
+        Amortization Type is <strong>required</strong>
+      </mat-error>
     </mat-form-field>
 
     <h4 fxFlex="98%" class="mat-h4">Interest Calculations</h4>
@@ -196,15 +201,18 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Repayment strategy</mat-label>
-      <mat-select
+      <mat-select required
         [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.transactionProcessingStrategyId"
         formControlName="transactionProcessingStrategyId">
         <mat-option
           *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyData"
           [value]="transactionProcessingStrategy.id">
-          {{ transactionProcessingStrategy.value }}
+          {{ transactionProcessingStrategy.name }}
         </mat-option>
       </mat-select>
+      <mat-error *ngIf="loansAccountTermsForm.controls.transactionProcessingStrategyId.hasError('required')">
+        Repayment Strategy is <strong>required</strong>
+      </mat-error>
     </mat-form-field>
 
     <h4 fxFlex="98%" class="mat-h4">Moratorium</h4>
@@ -245,6 +253,18 @@
         </mat-select>
       </mat-form-field>
 
+      <mat-form-field fxFlex="48%"
+        *ngIf="loansAccountProductTemplate.isInterestRecalculationEnabled && loansAccountProductTemplate.interestRecalculationData.interestRecalculationCompoundingType.id != 0 && loansAccountProductTemplate.interestRecalculationData.recalculationCompoundingFrequencyType.id != 1">
+        <mat-label>Frequency Date for recalculation</mat-label>
+        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recalculationCompoundingFrequencyDatePicker"
+          formControlName="recalculationCompoundingFrequencyDate">
+        <mat-datepicker-toggle matSuffix [for]="recalculationCompoundingFrequencyDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #recalculationCompoundingFrequencyDatePicker></mat-datepicker>
+        <mat-error *ngIf="loansAccountTermsForm.controls.recalculationCompoundingFrequencyDate.hasError('required')">
+          Frequency Data for recalculation is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
     </ng-container>
 
     <mat-divider fxFlex="98%"></mat-divider>

src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /**
@@ -15,6 +15,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
 
   /** Loans Account Product Template */
   @Input() loansAccountProductTemplate: any;
+  /** Loans Account Template */
+  @Input() loansAccountTemplate: any;
 
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
@@ -82,7 +84,15 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
     }
   }
 
-  ngOnInit() { }
+  ngOnInit() {
+    if (this.loansAccountTemplate) {
+      if (this.loansAccountTemplate.loanProductId) {
+        this.loansAccountTermsForm.patchValue({
+          'repaymentsStartingFromDate': this.loansAccountTemplate.expectedFirstRepaymentOnDate && new Date(this.loansAccountTemplate.expectedFirstRepaymentOnDate)
+        });
+      }
+    }
+  }
 
   /** Create Loans Account Terms Form */
   createloansAccountTermsForm() {
@@ -102,19 +112,20 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
       // 'interestRateDifferential': [''],
       'isFloatingInterestRate': [''],
       'isEqualAmortization': [''],
-      'amortizationType': [''],
+      'amortizationType': ['', Validators.required],
       'interestCalculationPeriodType': [''],
       'allowPartialPeriodInterestCalcualtion': [''],
       'inArrearsTolerance': [''],
       'graceOnInterestCharged': [''],
-      'transactionProcessingStrategyId': [''],
+      'transactionProcessingStrategyId': ['', Validators.required],
       'graceOnPrincipalPayment': [''],
       'graceOnInterestPayment': [''],
       'graceOnArrearsAgeing': [''],
       'loanIdToClose': [''],
       'fixedEmiAmount': [''],
       'isTopup': [''],
-      'maxOutstandingLoanBalance': ['']
+      'maxOutstandingLoanBalance': [''],
+      'recalculationCompoundingFrequencyDate': ['']
     });
   }