build: Use prettier for html
Stop ignoring html files in prettier and fix existing issues.
This commit is contained in:
Ralph Hopman
@@ -1,5 +1,4 @@
|
||||
<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>
|
||||
@@ -22,47 +21,47 @@
|
||||
</ng-template>
|
||||
|
||||
<mat-step [stepControl]="loansAccountDetailsForm">
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
|
||||
|
||||
<ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate}}</ng-template>
|
||||
|
||||
<mifosx-glim-details-step [loansAccountTemplate]="loansAccountTemplate"
|
||||
(loansAccountProductTemplate)="setTemplate($event)" [gsimData]="gsimData">
|
||||
<mifosx-glim-details-step
|
||||
[loansAccountTemplate]="loansAccountTemplate"
|
||||
(loansAccountProductTemplate)="setTemplate($event)"
|
||||
[gsimData]="gsimData"
|
||||
>
|
||||
</mifosx-glim-details-step>
|
||||
|
||||
</mat-step>
|
||||
|
||||
<mat-step [stepControl]="loansAccountTermsForm">
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
|
||||
|
||||
<ng-template matStepLabel>{{"labels.inputs.TERMS" | translate}}</ng-template>
|
||||
|
||||
<mifosx-glim-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
|
||||
[loansAccountTemplate] = "loansAccountTemplate">
|
||||
<mifosx-glim-terms-step
|
||||
[loansAccountProductTemplate]="loansAccountProductTemplate"
|
||||
[loansAccountTemplate]="loansAccountTemplate"
|
||||
>
|
||||
</mifosx-glim-terms-step>
|
||||
|
||||
</mat-step>
|
||||
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
|
||||
|
||||
<ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate}}</ng-template>
|
||||
|
||||
<mifosx-glim-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
|
||||
<mifosx-glim-charges-step
|
||||
[loansAccountProductTemplate]="loansAccountProductTemplate"
|
||||
[loansAccountTemplate]="loansAccountTemplate"
|
||||
[activeClientMembers]="activeClientMembers"
|
||||
>
|
||||
[activeClientMembers]="activeClientMembers"
|
||||
>
|
||||
</mifosx-glim-charges-step>
|
||||
|
||||
</mat-step>
|
||||
|
||||
<mat-step state="preview" *ngIf="loansAccountFormValid" completed>
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
|
||||
|
||||
<ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate}}</ng-template>
|
||||
|
||||
<mifosx-loans-account-preview-step [loansAccountTemplate]="loansAccountTemplate"
|
||||
[loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" (submitEvent)="submit()">
|
||||
<mifosx-loans-account-preview-step
|
||||
[loansAccountTemplate]="loansAccountTemplate"
|
||||
[loansAccountProductTemplate]="loansAccountProductTemplate"
|
||||
[loansAccount]="loansAccount"
|
||||
(submitEvent)="submit()"
|
||||
>
|
||||
</mifosx-loans-account-preview-step>
|
||||
|
||||
</mat-step>
|
||||
|
||||
</mat-horizontal-stepper>
|
||||
|
||||
</div>
|
||||
|
||||
+168
-151
@@ -1,169 +1,186 @@
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
|
||||
<mat-select #charge>
|
||||
<mat-option *ngFor="let charge of chargeData" [value]="charge">
|
||||
{{ charge.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{"labels.inputs.Charge" | translate}}</mat-label>
|
||||
<mat-select #charge>
|
||||
<mat-option *ngFor="let charge of chargeData" [value]="charge">
|
||||
{{ charge.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div fxFlex="48%" fxFlexAlign="center">
|
||||
<button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Add' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div fxFlex="48%" fxFlexAlign="center">
|
||||
<button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{"labels.buttons.Add" | translate}}
|
||||
</button>
|
||||
</div>
|
||||
<table
|
||||
fxFlex="98%"
|
||||
class="mat-elevation-z1"
|
||||
mat-table
|
||||
[dataSource]="chargesDataSource"
|
||||
[hidden]="chargesDataSource.length === 0"
|
||||
>
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.name + ', ' + charge.currency.displaySymbol }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
|
||||
<ng-container matColumnDef="chargeCalculationType">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.chargeCalculationType.value }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.amount }}
|
||||
<button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
|
||||
<fa-icon icon="pen"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="chargeTimeType">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.chargeTimeType.value }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="date">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
<span
|
||||
*ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
|
||||
>
|
||||
{{ (charge.dueDate | dateFormat) || 'Unassigned' }}
|
||||
</span>
|
||||
<span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
|
||||
{{ (charge.feeOnMonthDay | dateFormat) || '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'
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ 'labels.inputs.N/A' | translate }}
|
||||
</span>
|
||||
<button
|
||||
mat-icon-button
|
||||
color="primary"
|
||||
*ngIf="
|
||||
charge.chargeTimeType.value === 'Weekly Fee' ||
|
||||
charge.chargeTimeType.value === 'Annual Fee' ||
|
||||
charge.chargeTimeType.value === 'Specified due date'
|
||||
"
|
||||
(click)="editChargeDate(charge)"
|
||||
>
|
||||
<fa-icon icon="pen"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="repaymentsEvery">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.feeInterval || 'Not Provided' }}
|
||||
<button
|
||||
mat-icon-button
|
||||
color="primary"
|
||||
*ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
|
||||
(click)="editChargeFeeInterval(charge)"
|
||||
>
|
||||
<fa-icon icon="pen"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
<button mat-icon-button color="warn" (click)="deleteCharge(charge)">
|
||||
<fa-icon icon="trash"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
|
||||
<div fxFlex="98%" *ngIf="activeClientMembers">
|
||||
<table fxFlex="98%" mat-table [dataSource]="dataSource">
|
||||
<!-- Check Column -->
|
||||
<ng-container matColumnDef="check">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Position Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.name + ', ' + charge.currency.displaySymbol }}
|
||||
</td>
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="chargeCalculationType">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.chargeCalculationType.value }}
|
||||
<!-- Weight Column -->
|
||||
<ng-container matColumnDef="purpose">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Purpose' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-form-field>
|
||||
<mat-label>{{ 'labels.inputs.Select Purpose' | translate }}</mat-label>
|
||||
<mat-select [(ngModel)]="element.loanPurposeId">
|
||||
<mat-option *ngFor="let purpose of loanPurposeOptions" [value]="purpose.id">
|
||||
{{ purpose.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Symbol Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.amount }}
|
||||
<button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
|
||||
<fa-icon icon="pen"></fa-icon>
|
||||
</button>
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-form-field>
|
||||
<input type="number" matInput [(ngModel)]="element.principal" />
|
||||
</mat-form-field>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="chargeTimeType">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.chargeTimeType.value }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="date">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
<span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
|
||||
{{(charge.dueDate | dateFormat) || 'Unassigned'}}
|
||||
</span>
|
||||
<span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
|
||||
{{(charge.feeOnMonthDay | dateFormat) || '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')">
|
||||
{{"labels.inputs.N/A" | translate}}
|
||||
</span>
|
||||
<button mat-icon-button color="primary"
|
||||
*ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
|
||||
|| charge.chargeTimeType.value === 'Specified due date'"
|
||||
(click)="editChargeDate(charge)">
|
||||
<fa-icon icon="pen"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="repaymentsEvery">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.feeInterval || 'Not Provided' }}
|
||||
<button mat-icon-button color="primary"
|
||||
*ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
|
||||
(click)="editChargeFeeInterval(charge)">
|
||||
<fa-icon icon="pen"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
<button mat-icon-button color="warn" (click)="deleteCharge(charge)">
|
||||
<fa-icon icon="trash"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
|
||||
</table>
|
||||
|
||||
<div fxFlex="98%" *ngIf="activeClientMembers">
|
||||
<table fxFlex="98%" mat-table [dataSource]="dataSource">
|
||||
|
||||
<!-- Check Column -->
|
||||
<ng-container matColumnDef="check">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Position Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client ID" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Name" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.displayName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Weight Column -->
|
||||
<ng-container matColumnDef="purpose">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Purpose" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-form-field>
|
||||
<mat-label>{{"labels.inputs.Select Purpose" | translate}}</mat-label>
|
||||
<mat-select [(ngModel)]="element.loanPurposeId">
|
||||
<mat-option *ngFor="let purpose of loanPurposeOptions" [value]="purpose.id">
|
||||
{{ purpose.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Symbol Column -->
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-form-field>
|
||||
<input type="number" matInput [(ngModel)]="element.principal">
|
||||
</mat-form-field>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumn;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
</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" class="m-r-10"></fa-icon>
|
||||
{{"labels.buttons.Previous" | translate}}
|
||||
</button>
|
||||
<button mat-raised-button matStepperNext>
|
||||
{{"labels.buttons.Next" | translate}}
|
||||
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
|
||||
<button mat-raised-button matStepperPrevious>
|
||||
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Previous' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button matStepperNext>
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
+85
-79
@@ -1,88 +1,94 @@
|
||||
<form [formGroup]="loansAccountDetailsForm">
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Product Name' | translate }}</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>
|
||||
{{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Loan officer' | translate }}</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>{{"labels.inputs.Product Name" | translate}}</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>
|
||||
{{"labels.inputs.Product Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Fund' | translate }}</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>{{"labels.inputs.Loan officer" | translate}}</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%" (click)="submitPicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Submitted on' | translate }}</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')">
|
||||
{{ 'labels.inputs.Submitted on' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Disbursement on' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="loansAccountDetailsForm.value.submittedOnDate"
|
||||
[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')">
|
||||
{{ 'labels.inputs.Disbursement on' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{"labels.inputs.Fund" | translate}}</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-divider fxFlex="98%"></mat-divider>
|
||||
|
||||
<mat-form-field fxFlex="48%" (click)="submitPicker.open()">
|
||||
<mat-label>{{"labels.inputs.Submitted on" | translate}}</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')">
|
||||
{{"labels.inputs.Submitted on" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Savings Linkage' | translate }}</h3>
|
||||
|
||||
<mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
|
||||
<mat-label>{{"labels.inputs.Disbursement on" | translate}}</mat-label>
|
||||
<input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [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')">
|
||||
{{"labels.inputs.Disbursement on" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Link savings' | translate }}</mat-label>
|
||||
<mat-select formControlName="linkAccountId">
|
||||
<mat-option *ngFor="let savingaccount of gsimData" [value]="savingaccount.id">
|
||||
{{ savingaccount.accountNumber }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<mat-divider fxFlex="98%"></mat-divider>
|
||||
|
||||
<h3 class="mat-h3" fxFlexFill>{{"labels.heading.Savings Linkage" | translate}}</h3>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{"labels.inputs.Link savings" | translate}}</mat-label>
|
||||
<mat-select formControlName="linkAccountId">
|
||||
<mat-option *ngFor="let savingaccount of gsimData" [value]="savingaccount.id">
|
||||
{{ savingaccount.accountNumber }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
|
||||
</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" class="m-r-10"></fa-icon>
|
||||
{{"labels.buttons.Previous" | translate}}
|
||||
</button>
|
||||
<button mat-raised-button matStepperNext>
|
||||
{{"labels.buttons.Next" | translate}}
|
||||
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
|
||||
<button mat-raised-button matStepperPrevious disabled>
|
||||
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Previous' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button matStepperNext>
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
+294
-269
@@ -1,275 +1,300 @@
|
||||
<div fxLayout="row wrap" fxLayout.lt-md="column">
|
||||
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
|
||||
|
||||
<h3 class="mat-h3" fxFlexFill>{{"labels.heading.Details" | translate}}</h3>
|
||||
|
||||
<mat-divider fxFlexFill></mat-divider>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{"labels.inputs.Product" | translate}}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.productId | find:loansAccountTemplate.productOptions:'id':'name' }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.loanOfficerId">
|
||||
<span fxFlex="40%">{{"labels.inputs.Loan officer" | translate}}:</span>
|
||||
<span
|
||||
fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'displayName'}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.loanPurposeId">
|
||||
<span fxFlex="40%">{{"labels.inputs.Loan purpose" | translate}}:</span>
|
||||
<span
|
||||
fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.fundId">
|
||||
<span fxFlex="40%">{{"labels.inputs.Fund" | translate}}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.fundId | find:loansAccountProductTemplate.fundOptions:'id':'name'}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{"labels.inputs.Submitted on" | translate}}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.submittedOnDate | dateFormat }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{"labels.inputs.Disbursement on" | translate}}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.expectedDisbursementDate | dateFormat }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.externalId">
|
||||
<span fxFlex="40%">{{"labels.inputs.External id" | translate}}:</span>
|
||||
<span fxFlex="60%">
|
||||
<mifosx-external-identifier externalId="{{loansAccount.externalId}}"></mifosx-external-identifier>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 class="mat-h3" fxFlexFill>{{"labels.heading.Terms" | translate}}</h3>
|
||||
|
||||
<mat-divider fxFlexFill></mat-divider>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{"labels.inputs.Principal" | translate}}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.principal }} {{loansAccountProductTemplate.currency.DisplaySymbol}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{"labels.inputs.Loan term" | translate}}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.loanTermFrequency }}
|
||||
{{loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{"labels.inputs.Number of repayments" | translate}}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{"labels.inputs.Repaid every" | translate}}:</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 *ngIf="loansAccount.repaymentsStartingFromDate">
|
||||
<span fxFlex="40%">{{"labels.inputs.First repayment on" | translate}}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate | dateFormat }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
|
||||
<span fxFlex="40%">{{"labels.inputs.Interest charged from" | translate}}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.interestChargedFromDate | dateFormat }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
|
||||
<span fxFlex="40%">{{"labels.inputs.Nominal interest rate" | translate}}:</span>
|
||||
<span
|
||||
fxFlex="60%">{{loansAccount.interestRatePerPeriod}} {{loansAccountProductTemplate.interestRateFrequencyType.value}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.interestType">
|
||||
<span fxFlex="40%">{{"labels.inputs.Interest method" | translate}}: </span>
|
||||
<span fxFlex="60%">{{loansAccount.interestType}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
|
||||
<span fxFlex="40%">{{"labels.inputs.Is Equal Amortization" | translate}}:</span>
|
||||
<span fxFlex="60%">{{loansAccount.isEqualAmortization}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{"labels.inputs.Amortization" | translate}}</span>
|
||||
<span
|
||||
fxFlex="60%">{{ loansAccount.amortizationType | find:loansAccountProductTemplate.amortizationTypeOptions:'id':'value' }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{"labels.inputs.Interest calculation period" | translate}}: </span>
|
||||
<span
|
||||
fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountProductTemplate.interestCalculationPeriodTypeOptions:'id':'value' }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
|
||||
<span fxFlex="40%">{{"labels.inputs.Calculate interest for exact days in partial period" | translate}}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
|
||||
<span fxFlex="40%">{{"labels.inputs.Arrears tolerance" | translate}}: </span>
|
||||
<span
|
||||
fxFlex="60%">{{loansAccount.inArrearsTolerance}} {{loansAccountProductTemplate.currency.displaySymbol}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
|
||||
<span fxFlex="40%">{{"labels.inputs.Interest free period" | translate}}: </span>
|
||||
<span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{"labels.inputs.Repayment strategy" | translate}}: </span>
|
||||
<span
|
||||
fxFlex="60%">{{ loansAccount.transactionProcessingStrategyCode | find:loansAccountTemplate.transactionProcessingStrategyOptions:'code':'name' }}</span>
|
||||
</div>
|
||||
|
||||
<h3 class="mat-h3" fxFlexFill>{{"labels.heading.Moratorium" | translate}}</h3>
|
||||
|
||||
<mat-divider fxFlexFill></mat-divider>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
|
||||
<span fxFlex="40%">{{"labels.inputs.On principal payment" | translate}}: </span>
|
||||
<span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
|
||||
<span fxFlex="40%">{{"labels.inputs.On interest payment" | translate}}: </span>
|
||||
<span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
|
||||
<span fxFlex="40%">{{"labels.inputs.On Arrears Aging" | translate}}: </span>
|
||||
<span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.isTopup">
|
||||
<span fxFlex="40%">{{"labels.inputs.Is Topup Loan" | translate}}? </span>
|
||||
<span fxFlex="60%">{{ loansAccount.isTopup }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{"labels.inputs.Recalculate Interest" | translate}}: </span>
|
||||
<span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled| yesNo }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
|
||||
<span fxFlex="40%">{{"labels.inputs.Days in month" | translate}}: </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>{{"labels.heading.Charges" | translate}}</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> {{"labels.inputs.name" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.name + ', ' + charge.currency.displaySymbol }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="chargeCalculationType">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.chargeCalculationType.value }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.amount }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="chargeTimeType">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.chargeTimeType.value }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="date">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
<span
|
||||
*ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
|
||||
{{(charge.dueDate | dateFormat) || 'Unassigned'}}
|
||||
</span>
|
||||
<span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
|
||||
{{(charge.feeOnMonthDay | dateFormat) || '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')">
|
||||
{{"labels.inputs.N/A" | translate}}
|
||||
</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">{{"labels.heading.Overdue Charges" | translate}}</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> {{"labels.inputs.name" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge"> {{ charge.name }},{{ charge.currency.displaySymbol }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="type">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="collectedon">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate}} </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>
|
||||
<mat-divider fxFlexFill></mat-divider>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.productId | find: loansAccountTemplate.productOptions : 'id' : 'name' }}</span>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
|
||||
<button mat-raised-button matStepperPrevious>
|
||||
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
|
||||
{{"labels.buttons.Previous" | translate}}
|
||||
</button>
|
||||
<button mat-raised-button [routerLink]="['../']">
|
||||
{{"labels.buttons.Cancel" | translate}}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="submitEvent.emit()">
|
||||
{{"labels.buttons.Submit" | translate}}
|
||||
</button>
|
||||
<div fxFlexFill *ngIf="loansAccount.loanOfficerId">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Loan officer' | translate }}:</span>
|
||||
<span fxFlex="60%">{{
|
||||
loansAccount.loanOfficerId | find: loansAccountProductTemplate.loanOfficerOptions : 'id' : 'displayName'
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.loanPurposeId">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Loan purpose' | translate }}:</span>
|
||||
<span fxFlex="60%">{{
|
||||
loansAccount.loanPurposeId | find: loansAccountProductTemplate.loanPurposeOptions : 'id' : 'name'
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.fundId">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Fund' | translate }}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.fundId | find: loansAccountProductTemplate.fundOptions : 'id' : 'name' }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Submitted on' | translate }}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.submittedOnDate | dateFormat }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Disbursement on' | translate }}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.expectedDisbursementDate | dateFormat }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.externalId">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.External id' | translate }}:</span>
|
||||
<span fxFlex="60%">
|
||||
<mifosx-external-identifier externalId="{{ loansAccount.externalId }}"></mifosx-external-identifier>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
|
||||
|
||||
<mat-divider fxFlexFill></mat-divider>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Principal' | translate }}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.principal }} {{ loansAccountProductTemplate.currency.DisplaySymbol }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Loan term' | translate }}:</span>
|
||||
<span fxFlex="60%"
|
||||
>{{ loansAccount.loanTermFrequency }}
|
||||
{{
|
||||
loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions : 'id' : 'name'
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Number of repayments' | translate }}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Repaid every' | translate }}:</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 *ngIf="loansAccount.repaymentsStartingFromDate">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.First repayment on' | translate }}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate | dateFormat }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Interest charged from' | translate }}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.interestChargedFromDate | dateFormat }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Nominal interest rate' | translate }}:</span>
|
||||
<span fxFlex="60%"
|
||||
>{{ loansAccount.interestRatePerPeriod }} {{
|
||||
loansAccountProductTemplate.interestRateFrequencyType.value
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.interestType">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Interest method' | translate }}: </span>
|
||||
<span fxFlex="60%">{{ loansAccount.interestType }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Is Equal Amortization' | translate }}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.isEqualAmortization }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Amortization' | translate }}</span>
|
||||
<span fxFlex="60%">{{
|
||||
loansAccount.amortizationType | find: loansAccountProductTemplate.amortizationTypeOptions : 'id' : 'value'
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Interest calculation period' | translate }}: </span>
|
||||
<span fxFlex="60%">{{
|
||||
loansAccount.interestCalculationPeriodType
|
||||
| find: loansAccountProductTemplate.interestCalculationPeriodTypeOptions : 'id' : 'value'
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Calculate interest for exact days in partial period' | translate }}:</span>
|
||||
<span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Arrears tolerance' | translate }}: </span>
|
||||
<span fxFlex="60%"
|
||||
>{{ loansAccount.inArrearsTolerance }} {{ loansAccountProductTemplate.currency.displaySymbol }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Interest free period' | translate }}: </span>
|
||||
<span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Repayment strategy' | translate }}: </span>
|
||||
<span fxFlex="60%">{{
|
||||
loansAccount.transactionProcessingStrategyCode
|
||||
| find: loansAccountTemplate.transactionProcessingStrategyOptions : 'code' : 'name'
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Moratorium' | translate }}</h3>
|
||||
|
||||
<mat-divider fxFlexFill></mat-divider>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.On principal payment' | translate }}: </span>
|
||||
<span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.On interest payment' | translate }}: </span>
|
||||
<span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.On Arrears Aging' | translate }}: </span>
|
||||
<span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccount.isTopup">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Is Topup Loan' | translate }}? </span>
|
||||
<span fxFlex="60%">{{ loansAccount.isTopup }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill>
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Recalculate Interest' | translate }}: </span>
|
||||
<span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled | yesNo }}</span>
|
||||
</div>
|
||||
|
||||
<div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
|
||||
<span fxFlex="40%">{{ 'labels.inputs.Days in month' | translate }}: </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>{{ 'labels.heading.Charges' | translate }}</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>{{ 'labels.inputs.name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.name + ', ' + charge.currency.displaySymbol }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="chargeCalculationType">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.chargeCalculationType.value }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.amount }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="chargeTimeType">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.chargeTimeType.value }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="date">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
<span
|
||||
*ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
|
||||
>
|
||||
{{ (charge.dueDate | dateFormat) || 'Unassigned' }}
|
||||
</span>
|
||||
<span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
|
||||
{{ (charge.feeOnMonthDay | dateFormat) || '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'
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ 'labels.inputs.N/A' | translate }}
|
||||
</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">{{ 'labels.heading.Overdue Charges' | translate }}</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>{{ 'labels.inputs.name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">{{ charge.name }},{{ charge.currency.displaySymbol }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="type">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">{{ charge.chargeCalculationType.value }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">{{ charge.amount | formatNumber }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="collectedon">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</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" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Previous' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button [routerLink]="['../']">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="submitEvent.emit()">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
+126
-111
@@ -1,129 +1,144 @@
|
||||
<form [formGroup]="loansAccountTermsForm">
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
<h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Term Options' | translate }}</h4>
|
||||
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Loan Term' | translate }}</mat-label>
|
||||
<input matInput required formControlName="loanTermFrequency" />
|
||||
<mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequency.hasError('required')">
|
||||
{{ 'labels.inputs.Loan Term' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Term Options" | translate}}</h4>
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
|
||||
<mat-select required formControlName="loanTermFrequencyType">
|
||||
<mat-option *ngFor="let type of termFrequencyTypeData" [value]="type.id">
|
||||
{{ type.value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
|
||||
{{ 'labels.inputs.Frequency' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{"labels.inputs.Loan Term" | translate}}</mat-label>
|
||||
<input matInput required formControlName="loanTermFrequency">
|
||||
<mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequency.hasError('required')">
|
||||
{{"labels.inputs.Loan Term" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Number of repayments' | translate }}</mat-label>
|
||||
<input type="number" matInput formControlName="numberOfRepayments" />
|
||||
<mat-error *ngIf="loansAccountTermsForm.controls.numberOfRepayments.hasError('required')">
|
||||
{{ 'labels.inputs.Number of repayments' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{"labels.inputs.Frequency" | translate}}</mat-label>
|
||||
<mat-select required formControlName="loanTermFrequencyType">
|
||||
<mat-option *ngFor="let type of termFrequencyTypeData" [value]="type.id">
|
||||
{{ type.value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
|
||||
{{"labels.inputs.Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="48%" (click)="repaymentsPicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.First repayment on' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="repaymentsPicker"
|
||||
formControlName="repaymentsStartingFromDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="repaymentsPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #repaymentsPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{"labels.inputs.Number of repayments" | translate}}</mat-label>
|
||||
<input type="number" matInput formControlName="numberOfRepayments">
|
||||
<mat-error *ngIf="loansAccountTermsForm.controls.numberOfRepayments.hasError('required')">
|
||||
{{"labels.inputs.Number of repayments" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Repaid Every' | translate }}</h4>
|
||||
|
||||
<mat-form-field fxFlex="48%" (click)="repaymentsPicker.open()">
|
||||
<mat-label>{{"labels.inputs.First repayment on" | translate}}</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentsPicker"
|
||||
formControlName="repaymentsStartingFromDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="repaymentsPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #repaymentsPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Repaid every' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
required
|
||||
formControlName="repaymentEvery"
|
||||
[disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery"
|
||||
/>
|
||||
<mat-error *ngIf="loansAccountTermsForm.controls.repaymentEvery.hasError('required')">
|
||||
{{ 'labels.inputs.Repaid every' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every" | translate}}</h4>
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
|
||||
<mat-select
|
||||
formControlName="repaymentFrequencyType"
|
||||
required
|
||||
[disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery"
|
||||
>
|
||||
<mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData" [value]="repaymentFrequencyType.id">
|
||||
{{ repaymentFrequencyType.value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{"labels.inputs.Repaid every" | translate}}</mat-label>
|
||||
<input matInput required formControlName="repaymentEvery"
|
||||
[disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery">
|
||||
<mat-error *ngIf="loansAccountTermsForm.controls.repaymentEvery.hasError('required')">
|
||||
{{"labels.inputs.Repaid every" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
|
||||
<mat-label>{{ 'labels.inputs.Select On' | translate }}</mat-label>
|
||||
<mat-select formControlName="repaymentFrequencyNthDayType">
|
||||
<mat-option
|
||||
*ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
|
||||
[value]="repaymentFrequencyNthDayType.id"
|
||||
>
|
||||
{{ repaymentFrequencyNthDayType.value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{"labels.inputs.Frequency" | translate}}</mat-label>
|
||||
<mat-select formControlName="repaymentFrequencyType" required
|
||||
[disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery">
|
||||
<mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData"
|
||||
[value]="repaymentFrequencyType.id">
|
||||
{{ repaymentFrequencyType.value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
|
||||
<mat-label>{{ 'labels.inputs.Select Day' | translate }}</mat-label>
|
||||
<mat-select formControlName="repaymentFrequencyDayOfWeekType">
|
||||
<mat-option
|
||||
*ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
|
||||
[value]="repaymentFrequencyDayOfWeekType.id"
|
||||
>
|
||||
{{ repaymentFrequencyDayOfWeekType.value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
|
||||
<mat-label>{{"labels.inputs.Select On" | translate}}</mat-label>
|
||||
<mat-select formControlName="repaymentFrequencyNthDayType">
|
||||
<mat-option
|
||||
*ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
|
||||
[value]="repaymentFrequencyNthDayType.id">
|
||||
{{ repaymentFrequencyNthDayType.value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
|
||||
<mat-label>{{"labels.inputs.Select Day" | translate}}</mat-label>
|
||||
<mat-select formControlName="repaymentFrequencyDayOfWeekType">
|
||||
<mat-option
|
||||
*ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
|
||||
[value]="repaymentFrequencyDayOfWeekType.id">
|
||||
{{ repaymentFrequencyDayOfWeekType.value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%" (click)="interestPicker.open()">
|
||||
<mat-label>{{"labels.inputs.Interest charged from" | translate}}</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker"
|
||||
formControlName="interestChargedFromDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="interestPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #interestPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="48%" (click)="interestPicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Interest charged from' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="interestPicker"
|
||||
formControlName="interestChargedFromDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="interestPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #interestPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<ng-container *ngIf="!loansAccountProductTemplate?.isLoanProductLinkedToFloatingRate">
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{"labels.inputs.Nominal interest rate" | translate}}</mat-label>
|
||||
<input type="number" matInput formControlName="interestRatePerPeriod">
|
||||
<mat-label>{{ 'labels.inputs.Nominal interest rate' | translate }}</mat-label>
|
||||
<input type="number" matInput formControlName="interestRatePerPeriod" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{"labels.inputs.Interest method" | translate}}</mat-label>
|
||||
<mat-select [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestType"
|
||||
formControlName="interestType">
|
||||
<mat-option *ngFor="let interestType of interestTypeData"
|
||||
[value]="interestType.id">
|
||||
{{ interestType.value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Interest method' | translate }}</mat-label>
|
||||
<mat-select
|
||||
[disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestType"
|
||||
formControlName="interestType"
|
||||
>
|
||||
<mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
|
||||
{{ interestType.value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
|
||||
<button mat-raised-button matStepperPrevious>
|
||||
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
|
||||
{{"labels.buttons.Previous" | translate}}
|
||||
</button>
|
||||
<button mat-raised-button matStepperNext>
|
||||
{{"labels.buttons.Next" | translate}}
|
||||
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
||||
</button>
|
||||
</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" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Previous' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button matStepperNext>
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
<mat-card class="loan-card">
|
||||
|
||||
<mat-card-content>
|
||||
|
||||
<h2> {{"labels.heading.GLIM Account Overview" | translate}}</h2>
|
||||
<h2>{{ 'labels.heading.GLIM Account Overview' | translate }}</h2>
|
||||
|
||||
<table mat-table [dataSource]="dataSource">
|
||||
|
||||
<ng-container matColumnDef="loanId">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Id" | translate}} </th>
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Id' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
{{element.childLoanId}} </td>
|
||||
{{ element.childLoanId }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="clientId">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client ID" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let element">{{element.clientId}} </td>
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.clientId }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="clientName">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Name" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let element">{{element.clientName}} </td>
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.clientName }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="loanAccountNumber">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account Number" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.childLoanAccountNo}} </td>
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Account Number' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.childLoanAccountNo }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="clientPrincipalLoan">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Principal Loan" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let element" > {{element.childPrincipalAmount}} </td>
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Principal Loan' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.childPrincipalAmount }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="groupPrincipalLoan">
|
||||
<th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Group Principal Loan" | translate}} </th>
|
||||
<td mat-cell *matCellDef="let element" > {{element.parentPrincipalAmount}} </td>
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Group Principal Loan' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.parentPrincipalAmount }}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row [routerLink]="['../../', row.childLoanId, 'general']" *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
|
||||
<tr
|
||||
mat-row
|
||||
[routerLink]="['../../', row.childLoanId, 'general']"
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
></tr>
|
||||
</table>
|
||||
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
Reference in New Issue
Block a user