CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: view loan product component (#442)

Browse Source 
Fixes: #438
This commit is contained in:
Abhay Chawla
2019-12-01 23:20:51 +03:00
parent 4281a19c6c
commit 636ccb74b0
10 changed files with 867 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/products/loan-products/loan-product.resolver.ts
+31
View File
@@ -0,0 +1,31 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
/** rxjs Imports */
import { Observable } from 'rxjs';
/** Custom Services */
import { ProductsService } from '../products.service';
/**
* Loan Product data resolver.
*/
@Injectable()
export class LoanProductResolver implements Resolve<Object> {
/**
* @param {ProductsService} productsService Products service.
*/
constructor(private productsService: ProductsService) {}
/**
* Returns the loan product data.
* @returns {Observable<any>}
*/
resolve(route: ActivatedRouteSnapshot): Observable<any> {
const id = route.paramMap.get('id');
return this.productsService.getLoanProduct(id);
}
}
src/app/products/loan-products/loan-products.component.html
+1 -1
View File
@@ -43,7 +43,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
</table>
src/app/products/loan-products/loan-products.component.scss
+4
View File
@@ -1,3 +1,7 @@
table {
width: 100%;
.select-row:hover {
cursor: pointer;
}
}
src/app/products/loan-products/view-loan-product/view-loan-product.component.html
+736
View File
@@ -0,0 +1,736 @@
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
<button mat-raised-button color="primary">
<fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
Edit
</button>
</div>
<div class="container">
<mat-card>
<mat-card-content>
<div fxLayout="row wrap" fxLayout.lt-md="column">
<h2 class="mat-h2" fxFlexFill>{{ loanProduct.name }}</h2>
<mat-divider [inset]="true"></mat-divider>
<h3 class="mat-h3" fxFlexFill>Details</h3>
<mat-divider [inset]="true"></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">Short Name:</span>
<span fxFlex="60%">{{ loanProduct.shortName }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.fundId">
<span fxFlex="40%">Fund Name:</span>
<span fxFlex="60%">{{ loanProduct.fundName }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Include in Customer Loan Counter:</span>
<span fxFlex="60%">{{ loanProduct.includeInBorrowerCycle ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.startDate">
<span fxFlex="40%">Start Date:</span>
<span fxFlex="60%">{{ loanProduct.startDate | date }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.closeDate">
<span fxFlex="40%">Close Date:</span>
<span fxFlex="60%">{{ loanProduct.closeDate | date }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.description">
<span fxFlex="40%">Description:</span>
<span fxFlex="60%">{{ loanProduct.description }}</span>
</div>
<h3 class="mat-h3" fxFlexFill>Currency</h3>
<mat-divider [inset]="true"></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">Currency:</span>
<span fxFlex="60%">{{ loanProduct.currency.name }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Decimal Places:</span>
<span fxFlex="60%">{{ loanProduct.currency.decimalPlaces }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Currency in multiples of:</span>
<span fxFlex="60%">{{ loanProduct.currency.inMultiplesOf }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Installment in multiples of:</span>
<span fxFlex="60%">{{ loanProduct.installmentAmountInMultiplesOf }}</span>
</div>
<h3 class="mat-h3" fxFlexFill>Terms</h3>
<mat-divider [inset]="true"></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">Principal:</span>
<span fxFlex="60%">{{ loanProduct.principal + ' (Min: ' + (loanProduct.minPrincipal ? loanProduct.minPrincipal : loanProduct.principal) + ', Max: ' + (loanProduct.maxPrincipal ? loanProduct.maxPrincipal : loanProduct.principal) + ')' }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Number of Repayments:</span>
<span fxFlex="60%">{{ loanProduct.numberOfRepayments + ' (Min: ' + (loanProduct.minNumberOfRepayments ? loanProduct.minNumberOfRepayments : loanProduct.numberOfRepayments) + ', Max: ' + (loanProduct.maxNumberOfRepayments ? loanProduct.maxNumberOfRepayments : loanProduct.numberOfRepayments) + ')' }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Linked to floating interest rates:</span>
<span fxFlex="60%">{{ loanProduct.isLinkedToFloatingInterestRates ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill *ngIf="!loanProduct.isLinkedToFloatingInterestRates">
<span fxFlex="40%">Nominal interest rate:</span>
<span fxFlex="60%">{{ loanProduct.interestRatePerPeriod + ' (Min: ' + (loanProduct.minInterestRatePerPeriod ? loanProduct.minInterestRatePerPeriod : loanProduct.interestRatePerPeriod) + ', Max: ' + (loanProduct.maxInterestRatePerPeriod ? loanProduct.maxInterestRatePerPeriod : loanProduct.interestRatePerPeriod) + ')' + ' ' + loanProduct.interestRateFrequencyType.value }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.isLinkedToFloatingInterestRates" fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Floating Lending Interest Rate:</span>
<span fxFlex="60%">{{ loanProduct.floatingRateName }}</span>
<span fxFlex="40%">Interest Rate Differential:</span>
<span fxFlex="60%">{{ loanProduct.interestRateDifferential }}</span>
<span fxFlex="40%">Floating Interest Rate Calculation Allowed:</span>
<span fxFlex="60%">{{ loanProduct.isFloatingInterestRateCalculationAllowed ? 'Yes' : 'No' }}</span>
<span fxFlex="40%">Floating Interest Rate:</span>
<span fxFlex="60%">{{ loanProduct.defaultDifferentialLendingRate + ' (Min: ' + (loanProduct.minDifferentialLendingRate ? loanProduct.minDifferentialLendingRate : loanProduct.defaultDifferentialLendingRate) + ', Max: ' + (loanProduct.maxDifferentialLendingRate ? loanProduct.maxDifferentialLendingRate : loanProduct.defaultDifferentialLendingRate) + ')' }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Terms vary based on loan cycle:</span>
<span fxFlex="60%">{{ loanProduct.useBorrowerCycle ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.principalVariationsForBorrowerCycle?.length">
<h4 class="mat-h4" fxFlexFill>Principal by loan cycle</h4>
<table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.principalVariationsForBorrowerCycle">
<ng-container matColumnDef="valueConditionType">
<th mat-header-cell *matHeaderCellDef> Condition </th>
<td mat-cell *matCellDef="let variation">
{{ variation.valueConditionType.value }}
</td>
</ng-container>
<ng-container matColumnDef="borrowerCycleNumber">
<th mat-header-cell *matHeaderCellDef> Loan Cycle </th>
<td mat-cell *matCellDef="let variation">
{{ variation.borrowerCycleNumber }}
</td>
</ng-container>
<ng-container matColumnDef="minValue">
<th mat-header-cell *matHeaderCellDef> Minimum </th>
<td mat-cell *matCellDef="let variation">
{{ variation.minValue }}
</td>
</ng-container>
<ng-container matColumnDef="defaultValue">
<th mat-header-cell *matHeaderCellDef> Default </th>
<td mat-cell *matCellDef="let variation">
{{ variation.defaultValue }}
</td>
</ng-container>
<ng-container matColumnDef="maxValue">
<th mat-header-cell *matHeaderCellDef> Maximum </th>
<td mat-cell *matCellDef="let variation">
{{ variation.maxValue }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns;"></tr>
</table>
</div>
<div fxFlexFill *ngIf="loanProduct.numberOfRepaymentVariationsForBorrowerCycle?.length">
<h4 class="mat-h4" fxFlexFill>Number of Repayments by loan cycle</h4>
<table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.numberOfRepaymentVariationsForBorrowerCycle">
<ng-container matColumnDef="valueConditionType">
<th mat-header-cell *matHeaderCellDef> Condition </th>
<td mat-cell *matCellDef="let variation">
{{ variation.valueConditionType.value }}
</td>
</ng-container>
<ng-container matColumnDef="borrowerCycleNumber">
<th mat-header-cell *matHeaderCellDef> Loan Cycle </th>
<td mat-cell *matCellDef="let variation">
{{ variation.borrowerCycleNumber }}
</td>
</ng-container>
<ng-container matColumnDef="minValue">
<th mat-header-cell *matHeaderCellDef> Minimum </th>
<td mat-cell *matCellDef="let variation">
{{ variation.minValue }}
</td>
</ng-container>
<ng-container matColumnDef="defaultValue">
<th mat-header-cell *matHeaderCellDef> Default </th>
<td mat-cell *matCellDef="let variation">
{{ variation.defaultValue }}
</td>
</ng-container>
<ng-container matColumnDef="maxValue">
<th mat-header-cell *matHeaderCellDef> Maximum </th>
<td mat-cell *matCellDef="let variation">
{{ variation.maxValue }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns;"></tr>
</table>
</div>
<div fxFlexFill *ngIf="loanProduct.interestRateVariationsForBorrowerCycle?.length">
<h4 class="mat-h4" fxFlexFill>Nominal Interest Rate by loan cycle</h4>
<table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.interestRateVariationsForBorrowerCycle">
<ng-container matColumnDef="valueConditionType">
<th mat-header-cell *matHeaderCellDef> Condition </th>
<td mat-cell *matCellDef="let variation">
{{ variation.valueConditionType.value }}
</td>
</ng-container>
<ng-container matColumnDef="borrowerCycleNumber">
<th mat-header-cell *matHeaderCellDef> Loan Cycle </th>
<td mat-cell *matCellDef="let variation">
{{ variation.borrowerCycleNumber }}
</td>
</ng-container>
<ng-container matColumnDef="minValue">
<th mat-header-cell *matHeaderCellDef> Minimum </th>
<td mat-cell *matCellDef="let variation">
{{ variation.minValue }}
</td>
</ng-container>
<ng-container matColumnDef="defaultValue">
<th mat-header-cell *matHeaderCellDef> Default </th>
<td mat-cell *matCellDef="let variation">
{{ variation.defaultValue }}
</td>
</ng-container>
<ng-container matColumnDef="maxValue">
<th mat-header-cell *matHeaderCellDef> Maximum </th>
<td mat-cell *matCellDef="let variation">
{{ variation.maxValue }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns;"></tr>
</table>
</div>
<div fxFlexFill>
<span fxFlex="40%">Repay Every:</span>
<span fxFlex="60%">{{ loanProduct.repaymentEvery + ' ' + loanProduct.repaymentFrequencyType.value }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment">
<span fxFlex="40%">Minimum days between disbursal and first repayment date:</span>
<span fxFlex="60%">{{ loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment }}</span>
</div>
<h3 class="mat-h3" fxFlexFill>Settings</h3>
<mat-divider [inset]="true"></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">Amortization:</span>
<span fxFlex="60%">{{ loanProduct.amortizationType.value }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Is Equal Amortization:</span>
<span fxFlex="60%">{{ loanProduct.isEqualAmortization ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Interest Method:</span>
<span fxFlex="60%">{{ loanProduct.interestType.value }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Interest Calculation Period:</span>
<span fxFlex="60%">{{ loanProduct.interestCalculationPeriodType.value }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.interestCalculationPeriodType.id === 1">
<span fxFlex="40%">Allow Partial Interest Calculation with same as repayment:</span>
<span fxFlex="60%">{{ loanProduct.allowPartialPeriodInterestCalcualtion ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Repayment Strategy:</span>
<span fxFlex="60%">{{ loanProduct.transactionProcessingStrategyName }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.graceOnPrincipalPayment">
<span fxFlex="40%">Grace on principal payment:</span>
<span fxFlex="60%">{{ loanProduct.graceOnPrincipalPayment }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.graceOnInterestPayment">
<span fxFlex="40%">Grace on interest payment:</span>
<span fxFlex="60%">{{ loanProduct.graceOnInterestPayment }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.graceOnInterestCharged">
<span fxFlex="40%">Interest free period:</span>
<span fxFlex="60%">{{ loanProduct.graceOnInterestCharged }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.inArrearsTolerance">
<span fxFlex="40%">Arrears tolerance:</span>
<span fxFlex="60%">{{ loanProduct.inArrearsTolerance }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Days in year:</span>
<span fxFlex="60%">{{ loanProduct.daysInYearType.value }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Days in month:</span>
<span fxFlex="60%">{{ loanProduct.daysInMonthType.value }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Allow fixing of the installment amount:</span>
<span fxFlex="60%">{{ loanProduct.canDefineInstallmentAmount ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.graceOnArrearsAgeing">
<span fxFlex="40%">Number of days a loan may be overdue before moving into arrears:</span>
<span fxFlex="60%">{{ loanProduct.graceOnArrearsAgeing }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.overdueDaysForNPA">
<span fxFlex="40%">Maximum number of days a loan may be overdue before becoming a NPA (non performing asset):</span>
<span fxFlex="60%">{{ loanProduct.overdueDaysForNPA }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Account moves out of NPA only after all arrears have been cleared:</span>
<span fxFlex="60%">{{ loanProduct.accountMovesOutOfNPAOnlyOnArrearsCompletion ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.principalThresholdForLastInstallment">
<span fxFlex="40%">Principal Threshold (%) for Last Instalment:</span>
<span fxFlex="60%">{{ loanProduct.principalThresholdForLastInstallment }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Variable Installments allowed:</span>
<span fxFlex="60%">{{ loanProduct.allowVariableInstallments ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.allowVariableInstallments">
<span fxFlex="40%">Variable Installments:</span>
<span fxFlex="60%">{{ '(Min: ' + loanProduct.minimumGap + ', Max: ' + (loanProduct.maximumGap ? loanProduct.maximumGap : loanProduct.minimumGap) + ')' }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Allowed to be used for providing Topup Loans:</span>
<span fxFlex="60%">{{ loanProduct.canUseForTopup ? 'Yes' : 'No' }}</span>
</div>
<h3 class="mat-h3" fxFlexFill>Interest Recalculation</h3>
<mat-divider [inset]="true"></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">Recalculate Interest:</span>
<span fxFlex="60%">{{ loanProduct.isInterestRecalculationEnabled ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.isInterestRecalculationEnabled" fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Pre-closure interest calculation rule:</span>
<span fxFlex="60%">{{ loanProduct.interestRecalculationData.preClosureInterestCalculationStrategy.value }}</span>
<span fxFlex="40%">Advance payments adjustment type:</span>
<span fxFlex="60%">{{ loanProduct.interestRecalculationData.rescheduleStrategyType.value }}</span>
<span fxFlex="40%">Interest recalculation compounding on:</span>
<span fxFlex="60%">{{ loanProduct.interestRecalculationData.interestRecalculationCompoundingType.value }}</span>
<div fxFlexFill *ngIf="loanProduct.interestRecalculationData.interestRecalculationCompoundingType.id !== 0" fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Frequency for compounding:</span>
<span fxFlex="60%">
{{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.value }}
<span *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay">&nbsp;&nbsp;{{ 'on ' + loanProduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay.value }}</span>
<span *ngIf="(loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 && !loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay) || loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 3">&nbsp;&nbsp;{{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value }}</span>
<span *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay">&nbsp;&nbsp;{{ 'on day ' + loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay }}</span>
</span>
<div fxFlexFill *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id !== 1" fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Frequency Interval for compounding:</span>
<span fxFlex="60%">{{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyInterval }}</span>
<div fxFlexFill *ngIf="loanProduct.recalculationCompoundingFrequencyDate">
<span fxFlex="40%">Compounding Frequency Date:</span>
<span fxFlex="60%">{{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyDate }}</span>
</div>
</div>
</div>
<div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Frequency for recalculate Outstanding Principal:</span>
<span fxFlex="60%">
{{ loanProduct.interestRecalculationData.recalculationRestFrequencyType.value }}
<span *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationRestFrequencyNthDay">&nbsp;&nbsp;{{ 'on ' + loanProduct.interestRecalculationData.recalculationRestFrequencyNthDay.value }}</span>
<span *ngIf="(loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 && !loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay) || loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 3">&nbsp;&nbsp;{{ loanProduct.interestRecalculationData.recalculationRestFrequencyWeekday.value }}</span>
<span *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay">&nbsp;&nbsp;{{ 'on day ' + loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay }}</span>
</span>
</div>
<div fxFlexFill *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id !== 1" fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Frequency Interval for recalculation:</span>
<span fxFlex="60%">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyInterval }}</span>
<div fxFlexFill *ngIf="loanProduct.recalculationRestFrequencyDate">
<span fxFlex="40%">Rest Frequency Date:</span>
<span fxFlex="60%">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyDate }}</span>
</div>
</div>
<div fxFlexFill>
<span fxFlex="40%">Is Arrears recognization based on original schedule:</span>
<span fxFlex="60%">{{ loanProduct.isArrearsBasedOnOriginalSchedule ? 'Yes' : 'No' }}</span>
</div>
</div>
<h3 class="mat-h3" fxFlexFill>Guarantee Requirements</h3>
<mat-divider [inset]="true"></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">Place Guarantee Funds On-Hold:</span>
<span fxFlex="60%">{{ loanProduct.holdGuaranteeFunds ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.holdGuaranteeFunds" fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Mandatory Guarantee(%):</span>
<span fxFlex="60%">{{ loanProduct.productGuaranteeData.mandatoryGuarantee }}</span>
<div fxFlexFill *ngIf="loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds">
<span fxFlex="40%">Minimum Guarantee from Own Funds(%):</span>
<span fxFlex="60%">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor">
<span fxFlex="40%">Minimum Guarantee from Guarantor Funds(%):</span>
<span fxFlex="60%">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor }}</span>
</div>
</div>
<h3 class="mat-h3" fxFlexFill>Loan Tranche Details</h3>
<mat-divider [inset]="true"></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">Enable Multiple Disbursals:</span>
<span fxFlex="60%">{{ loanProduct.multiDisburseLoan ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.multiDisburseLoan" fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Maximum Tranche count:</span>
<span fxFlex="60%">{{ loanProduct.maxTrancheCount }}</span>
<div fxFlexFill *ngIf="loanProduct.outstandingLoanBalance">
<span fxFlex="40%">Maximum allowed outstanding balance:</span>
<span fxFlex="60%">{{ loanProduct.outstandingLoanBalance }}</span>
</div>
</div>
<h3 class="mat-h3" fxFlexFill>Configurable Terms and Settings</h3>
<mat-divider [inset]="true"></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">Allow overriding select terms and settings in loan accounts:</span>
<span fxFlex="60%">{{ loanProduct.allowAttributeConfiguration ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.allowAttributeConfiguration" fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Amortization:</span>
<span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.amortizationType ? 'Yes' : 'No' }}</span>
<span fxFlex="40%">Interest method:</span>
<span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.interestType ? 'Yes' : 'No' }}</span>
<span fxFlex="40%">Repayment strategy:</span>
<span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.transactionProcessingStrategyId ? 'Yes' : 'No' }}</span>
<span fxFlex="40%">Interest calculation period:</span>
<span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.interestCalculationPeriodType ? 'Yes' : 'No' }}</span>
<span fxFlex="40%">Arrears tolerance:</span>
<span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.inArrearsTolerance ? 'Yes' : 'No' }}</span>
<span fxFlex="40%">Repaid every:</span>
<span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.repaymentEvery ? 'Yes' : 'No' }}</span>
<span fxFlex="40%">Moratorium:</span>
<span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment ? 'Yes' : 'No' }}</span>
<span fxFlex="40%">Number of days a loan may be overdue before moving into arrears:</span>
<span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnArrearsAgeing ? 'Yes' : 'No' }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
<h3 class="mat-h3" fxFlexFill>Charges</h3>
<mat-divider [inset]="true"></mat-divider>
<table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.charges | chargesPenaltyFilter:false">
<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>
<tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
</table>
<h3 class="mat-h3" fxFlexFill>Overdue Charges</h3>
<mat-divider [inset]="true"></mat-divider>
<table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.charges | chargesPenaltyFilter:true">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let overdueCharge">
{{ overdueCharge.name + ', ' + overdueCharge.currency.displaySymbol }}
</td>
</ng-container>
<ng-container matColumnDef="chargeCalculationType">
<th mat-header-cell *matHeaderCellDef> Type </th>
<td mat-cell *matCellDef="let overdueCharge">
{{ overdueCharge.chargeCalculationType.value }}
</td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef> Amount </th>
<td mat-cell *matCellDef="let overdueCharge">
{{ overdueCharge.amount }}
</td>
</ng-container>
<ng-container matColumnDef="chargeTimeType">
<th mat-header-cell *matHeaderCellDef> Collected On </th>
<td mat-cell *matCellDef="let overdueCharge">
{{ overdueCharge.chargeTimeType.value }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
</table>
</div>
<h3 class="mat-h3" fxFlexFill>Accounting</h3>
<mat-divider [inset]="true"></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">Type:</span>
<span fxFlex="60%">{{ loanProduct.accountingRule.value }}</span>
</div>
<div fxFlexFill *ngIf="loanProduct.accountingRule.id >= 2 && loanProduct.accountingRule.id <= 4" fxLayout="row wrap" fxLayout.lt-md="column">
<h4 fxFlexFill class="mat-h4">Assets</h4>
<div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Fund source:</span>
<span fxFlex="60%">{{ loanProduct.accountingMappings.fundSourceAccount.name }}</span>
<span fxFlex="40%">Loan portfolio:</span>
<span fxFlex="60%">{{ loanProduct.accountingMappings.loanPortfolioAccount.name }}</span>
<div fxFlexFill *ngIf="loanProduct.accountingRule.id === 3 || loanProduct.accountingRule.id === 4" fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Interest Receivable:</span>
<span fxFlex="60%">{{ loanProduct.accountingMappings.receivableInterestAccount.name }}</span>
<span fxFlex="40%">Fees Receivable:</span>
<span fxFlex="60%">{{ loanProduct.accountingMappings.receivableInterestAccount.name }}</span>
<span fxFlex="40%">Penalties Receivable:</span>
<span fxFlex="60%">{{ loanProduct.accountingMappings.receivablePenaltyAccount.name }}</span>
</div>
<span fxFlex="40%">Transfer in suspense:</span>
<span fxFlex="60%">{{ loanProduct.accountingMappings.transfersInSuspenseAccount.name }}</span>
</div>
<h4 fxFlexFill class="mat-h4">Income</h4>
<div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Income from Interest:</span>
<span fxFlex="60%">{{ loanProduct.accountingMappings.interestOnLoanAccount.name }}</span>
<span fxFlex="40%">Income from fees:</span>
<span fxFlex="60%">{{ loanProduct.accountingMappings.incomeFromFeeAccount.name }}</span>
<span fxFlex="40%">Income from penalties:</span>
<span fxFlex="60%">{{ loanProduct.accountingMappings.incomeFromPenaltyAccount.name }}</span>
<span fxFlex="40%">Income from Recovery Repayments:</span>
<span fxFlex="60%">{{ loanProduct.accountingMappings.incomeFromRecoveryAccount.name }}</span>
</div>
<h4 fxFlexFill class="mat-h4">Expenses</h4>
<div fxFlexFill>
<span fxFlex="40%">Losses written off:</span>
<span fxFlex="60%">{{ loanProduct.accountingMappings.writeOffAccount.name }}</span>
</div>
<h4 fxFlexFill class="mat-h4">Liabilities</h4>
<div fxFlexFill>
<span fxFlex="40%">Over payment liability:</span>
<span fxFlex="60%">{{ loanProduct.accountingMappings.overpaymentLiabilityAccount.name }}</span>
</div>
<div *ngIf="loanProduct.paymentChannelToFundSourceMappings?.length || loanProduct.feeToIncomeAccountMappings?.length || loanProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
<h3 class="mat-h3" fxFlexFill>Advanced Accounting Rules</h3>
<mat-divider [inset]="true"></mat-divider>
<div *ngIf="loanProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
<h4 class="mat-h4" fxFlexFill>Fund Sources for Payment Channels</h4>
<table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.paymentChannelToFundSourceMappings">
<ng-container matColumnDef="paymentTypeId">
<th mat-header-cell *matHeaderCellDef> Payment Type </th>
<td mat-cell *matCellDef="let paymentFundSource">
{{ paymentFundSource.paymentType.name }}
</td>
</ng-container>
<ng-container matColumnDef="fundSourceAccountId">
<th mat-header-cell *matHeaderCellDef> Fund Source </th>
<td mat-cell *matCellDef="let paymentFundSource">
{{ paymentFundSource.fundSourceAccount.name }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
</table>
</div>
<div *ngIf="loanProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
<h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
<table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.feeToIncomeAccountMappings">
<ng-container matColumnDef="chargeId">
<th mat-header-cell *matHeaderCellDef> Fees </th>
<td mat-cell *matCellDef="let feesIncome">
{{ feesIncome.charge.name }}
</td>
</ng-container>
<ng-container matColumnDef="incomeAccountId">
<th mat-header-cell *matHeaderCellDef> Income Account </th>
<td mat-cell *matCellDef="let feesIncome">
{{ feesIncome.incomeAccount.name }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
</table>
</div>
<div *ngIf="loanProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
<h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
<table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.penaltyToIncomeAccountMappings">
<ng-container matColumnDef="chargeId">
<th mat-header-cell *matHeaderCellDef> Penalty </th>
<td mat-cell *matCellDef="let penaltyIncome">
{{ penaltyIncome.charge.name }}
</td>
</ng-container>
<ng-container matColumnDef="incomeAccountId">
<th mat-header-cell *matHeaderCellDef> Income Account </th>
<td mat-cell *matCellDef="let penaltyIncome">
{{ penaltyIncome.incomeAccount.name }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
</table>
</div>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
src/app/products/loan-products/view-loan-product/view-loan-product.component.scss
+24
View File
@@ -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-card .mat-divider-horizontal.mat-divider-inset {
margin: 0 0 0.5em 0;
}
.margin-t {
margin-top: 1em;
}
src/app/products/loan-products/view-loan-product/view-loan-product.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ViewLoanProductComponent } from './view-loan-product.component';
describe('ViewLoanProductComponent', () => {
let component: ViewLoanProductComponent;
let fixture: ComponentFixture<ViewLoanProductComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ViewLoanProductComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ViewLoanProductComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/products/loan-products/view-loan-product/view-loan-product.component.ts
+28
View File
@@ -0,0 +1,28 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'mifosx-view-loan-product',
templateUrl: './view-loan-product.component.html',
styleUrls: ['./view-loan-product.component.scss']
})
export class ViewLoanProductComponent implements OnInit {
loanProduct: any;
variationsDisplayedColumns: string[] = ['valueConditionType', 'borrowerCycleNumber', 'minValue', 'defaultValue', 'maxValue'];
chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType'];
paymentFundSourceDisplayedColumns: string[] = ['paymentTypeId', 'fundSourceAccountId'];
feesPenaltyIncomeDisplayedColumns: string[] = ['chargeId', 'incomeAccountId'];
constructor(private route: ActivatedRoute) {
this.route.data.subscribe((data: { loanProduct: any }) => {
this.loanProduct = data.loanProduct;
});
}
ngOnInit() {
this.loanProduct.allowAttributeConfiguration = Object.values(this.loanProduct.allowAttributeOverrides).some((attribute: boolean) => attribute);
}
}
src/app/products/products-routing.module.ts
+11
View File
@@ -12,6 +12,7 @@ import { extract } from '../core/i18n/i18n.service';
import { ProductsComponent } from './products.component';
import { LoanProductsComponent } from './loan-products/loan-products.component';
import { CreateLoanProductComponent } from './loan-products/create-loan-product/create-loan-product.component';
import { ViewLoanProductComponent } from './loan-products/view-loan-product/view-loan-product.component';
import { ManageTaxConfigurationsComponent } from './manage-tax-configurations/manage-tax-configurations.component';
import { RecurringDepositProductsComponent } from './recurring-deposit-products/recurring-deposit-products.component';
import { ChargesComponent } from './charges/charges.component';
@@ -22,6 +23,7 @@ import { ManageTaxComponentsComponent } from './manage-tax-components/manage-tax
/** Custom Resolvers */
import { LoanProductsResolver } from './loan-products/loan-products.resolver';
import { LoanProductsTemplateResolver } from './loan-products/loan-products-template.resolver';
import { LoanProductResolver } from './loan-products/loan-product.resolver';
import { RecurringDepositProductsResolver } from './recurring-deposit-products/recurring-deposit-products.resolver';
import { ChargesResolver } from './charges/charges.resolver';
import { FixedDepositProductsResolver } from './fixed-deposit-products/fixed-deposit-products.resolver';
@@ -57,6 +59,14 @@ const routes: Routes = [
resolve: {
loanProductsTemplate: LoanProductsTemplateResolver
}
},
{
path: ':id',
component: ViewLoanProductComponent,
data: { title: extract('View Loan Product'), routeParamBreadcrumb: 'id' },
resolve: {
loanProduct: LoanProductResolver
}
}
]
},
@@ -126,6 +136,7 @@ const routes: Routes = [
providers: [
LoanProductsResolver,
LoanProductsTemplateResolver,
LoanProductResolver,
RecurringDepositProductsResolver,
ChargesResolver,
FixedDepositProductsResolver,
src/app/products/products.module.ts
+3 -1
View File
@@ -24,6 +24,7 @@ import { ChargesComponent } from './charges/charges.component';
import { FixedDepositProductsComponent } from './fixed-deposit-products/fixed-deposit-products.component';
import { ProductsMixComponent } from './products-mix/products-mix.component';
import { ManageTaxComponentsComponent } from './manage-tax-components/manage-tax-components.component';
import { ViewLoanProductComponent } from './loan-products/view-loan-product/view-loan-product.component';
/**
* Products Module
@@ -52,7 +53,8 @@ import { ManageTaxComponentsComponent } from './manage-tax-components/manage-tax
ChargesComponent,
FixedDepositProductsComponent,
ProductsMixComponent,
ManageTaxComponentsComponent
ManageTaxComponentsComponent,
ViewLoanProductComponent
],
entryComponents: [
],
src/app/products/products.service.ts
+4
View File
@@ -33,6 +33,10 @@ export class ProductsService {
return this.http.get('/loanproducts/template');
}
getLoanProduct(loanProductId: string): Observable<any> {
return this.http.get(`/loanproducts/${loanProductId}`);
}
/**
* @returns {Observable<any>} Recurring deposit products data
*/