feat: add create loan account (#1050)

Fixes: #220 
Co-authored-by: Abhijeet Singh <abhijeet40308@gmail.com>

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

@@ -0,0 +1,273 @@
+<div fxLayout="row wrap" fxLayout.lt-md="column">
+
+  <h3 class="mat-h3" fxFlexFill>Details</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Product:</span>
+    <span fxFlex="60%">{{ loansAccount.productId | find:loansAccountTemplate.productOptions:'id':'name' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccountProductTemplate">
+    <span fxFlex="40%">Loan officer: :</span>
+    <span
+      fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'name'}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Loan purpose:</span>
+    <span
+      fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Fund:</span>
+    <span fxFlex="60%">{{ loansAccount.fundId | find:loansAccountProductTemplate.fundOptions:'id':'name'}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Submitted on:</span>
+    <span fxFlex="60%">{{ loansAccount.submittedOnDate | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Disbursement on:</span>
+    <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">External id</span>
+    <span fxFlex="60%">{{ loansAccount.externalId }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Principal:</span>
+    <span fxFlex="60%">{{ loansAccount.principal }} {{loansAccountProductTemplate.currency.DisplaySymbol}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Loan term:</span>
+    <span fxFlex="60%">{{ loansAccount.loanTermFrequency }}
+      {{loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Number of repayments</span>
+    <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <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>
+    <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest charged from</span>
+    <span fxFlex="60%">{{ loansAccount.interestChargedFromDate | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <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>
+    <span fxFlex="60%">{{loansAccount.interestType}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <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>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest calculation period </span>
+    <span
+      fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountTemplate.interestCalculationPeriodTypeOptions:'id':'name'  }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <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>
+    <span
+      fxFlex="60%">{{loansAccount.inArrearsTolerance}}&nbsp;{{loansAccountProductTemplate.currency.displaySymbol}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest free period </span>
+    <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Repayment strategy </span>
+    <span
+      fxFlex="60%">{{ loansAccount.transactionProcessingStrategyId | find:loansAccountTemplate.transactionProcessingStrategyOptions:'id':'name' }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Moratorium</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">On principal payment </span>
+    <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">On interest payment </span>
+    <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">On Arrears Aging </span>
+    <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Is Topup Loan? </span>
+    <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Recalculate Interest </span>
+    <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Days in month </span>
+    <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
+
+    <h3 class="mat-h3" fxFlexFill>Charges</h3>
+
+    <mat-divider fxFlexFill></mat-divider>
+
+    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loansAccount.charges">
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.name + ', ' + charge.currency.displaySymbol }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="chargeCalculationType">
+        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.chargeCalculationType.value }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amount }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="chargeTimeType">
+        <th mat-header-cell *matHeaderCellDef> Collected On </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.chargeTimeType.value }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="date">
+        <th mat-header-cell *matHeaderCellDef> Date </th>
+        <td mat-cell *matCellDef="let charge">
+          <span
+            *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
+            {{(charge.dueDate | date) || 'Unassigned'}}
+          </span>
+          <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
+            {{(charge.feeOnMonthDay | date) || 'Unassigned'}}
+          </span>
+          <span
+            *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
+                  || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
+            N/A
+          </span>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
+
+    </table>
+
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccountProductTemplate.overdueCharges.length" fxLayout="row wrap" fxLayout.lt-md="column">
+
+    <h3 fxFlex="98%" class="mat-h3">Overdue Charges</h3>
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
+    <table mat-table class="mat-elevation-z1" [dataSource]="loansAccountProductTemplate.overdueCharges">
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let charge"> {{ charge.name }},{{ charge.currency.displaySymbol }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="type">
+        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <td mat-cell *matCellDef="let charge"> {{ charge.amount| number }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="collectedon">
+        <th mat-header-cell *matHeaderCellDef> Collected On </th>
+        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="overdueChargesDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns;"></tr>
+    </table>
+  </div>
+
+</div>
+
+<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <button mat-raised-button matStepperPrevious>
+    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    Previous
+  </button>
+  <button mat-raised-button [routerLink]="['../']">
+    Cancel
+  </button>
+  <button mat-raised-button color="primary" (click)="submit.emit()">
+    Submit
+  </button>
+</div>

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

@@ -0,0 +1,24 @@
+table {
+  width: 100%;
+}
+
+.mat-elevation-z1 {
+  margin: 1em 0 1.5em 0;
+}
+
+h2, h3, h4 {
+  margin: 0;
+  font-weight: 500;
+}
+
+span {
+  margin: 0.5em 0;
+}
+
+mat-divider {
+  margin: 0 0 0.5em 0;
+}
+
+.margin-t {
+  margin-top: 1em;
+}

src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.spec.ts

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

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

@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+/**
+ * Create Loans Account Preview Step
+ */
+@Component({
+  selector: 'mifosx-loans-account-preview-step',
+  templateUrl: './loans-account-preview-step.component.html',
+  styleUrls: ['./loans-account-preview-step.component.scss']
+})
+export class LoansAccountPreviewStepComponent implements OnInit {
+
+  /** Loans Account Template */
+  @Input() loansAccountTemplate: any;
+  /** Loans Account Product Template */
+  @Input() loansAccountProductTemplate: any;
+  /** Loans Account Data */
+  @Input() loansAccount: any;
+  /** Submit Loans Account */
+  @Output() submit = new EventEmitter();
+
+  /** Charges Displayed Columns */
+  chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date'];
+  /** Overdue Charges Displayed Columns */
+  overdueChargesDisplayedColumns: string[] = ['name', 'type', 'amount', 'collectedon'];
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}