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

Loan Repayment Schedule edition to have variations (#1608)

Browse Source 
Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
This commit is contained in:
José Alberto Hernández
2022-12-27 22:22:11 -06:00
committed by GitHub
co-authored by Jose Alberto Hernandez
parent 25ca2b7bb0
commit 6431ede355
19 changed files with 319 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html
+75 -5
View File
@@ -1,6 +1,6 @@
<div class="container">
<table mat-table [dataSource]="repaymentScheduleDetails.periods">
<table mat-table [dataSource]="repaymentScheduleDetails.periods" *ngIf="!forEditing">
<ng-container matColumnDef="number">
<th mat-header-cell class="center" *matHeaderCellDef> # </th>
@@ -16,7 +16,7 @@
<ng-container matColumnDef="date">
<th mat-header-cell class="center" *matHeaderCellDef> Date </th>
<td mat-cell class="center" *matCellDef="let ele"> {{ ele.dueDate | dateFormat}} </td>
<td mat-cell class="m-r-5" *matCellDef="let ele"> {{ ele.dueDate | dateFormat}} </td>
<td mat-footer-cell *matFooterCellDef> </td>
</ng-container>
@@ -29,7 +29,7 @@
<ng-container matColumnDef="check">
<th mat-header-cell *matHeaderCellDef> &nbsp; </th>
<td mat-cell class="center" *matCellDef="let ele">
<span *ngIf="ele.obligationsMetOnDate"> <i class='fa fa-check'></i> </span>
<span *ngIf="ele.obligationsMetOnDate"> <i class="fa fa-check"></i> </span>
</td>
<td mat-footer-cell *matFooterCellDef> </td>
</ng-container>
@@ -133,6 +133,76 @@
</table>
</div>
<!-- Repayment Schedule to be Edited -->
<div *ngIf="forEditing" fxLayout="column" fxFlex="100%" >
<!-- <p>It works</p> -->
<table mat-table [dataSource]="repaymentScheduleDetails.periods">
<ng-container matColumnDef="number">
<th mat-header-cell class="center" *matHeaderCellDef> # </th>
<td mat-cell *matCellDef="let ele"> {{ ele.period }} </td>
<td mat-footer-cell *matFooterCellDef> &nbsp; </td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell class="center" *matHeaderCellDef> Date </th>
<td mat-cell class="m-r-10" *matCellDef="let ele"> {{ ele.dueDate | dateFormat}} </td>
<td mat-footer-cell *matFooterCellDef> </td>
</ng-container>
<ng-container matColumnDef="balanceOfLoan">
<th mat-header-cell class="r-amount" *matHeaderCellDef> Balance Of Loan </th>
<td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | number }} </td>
<td mat-footer-cell class="r-amount" *matFooterCellDef> &nbsp; </td>
</ng-container>
<ng-container matColumnDef="principalDue">
<th mat-header-cell class="r-amount" *matHeaderCellDef> Principal Due </th>
<td mat-cell class="check r-amount" *matCellDef="let ele"> {{ ele.principalDue | number }} </td>
<td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | currency }}</b> </td>
</ng-container>
<ng-container matColumnDef="interest">
<th mat-header-cell class="r-amount" *matHeaderCellDef> Interest </th>
<td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.interestOriginalDue | number}} </td>
<td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | currency }} </b> </td>
</ng-container>
<ng-container matColumnDef="fees">
<th mat-header-cell class="r-amount" *matHeaderCellDef> Fees </th>
<td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.feeChargesDue | number}} </td>
<td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | currency }} </b> </td>
</ng-container>
<ng-container matColumnDef="due">
<th mat-header-cell class="r-amount" *matHeaderCellDef> Installment Amount </th>
<td mat-cell class="r-amount" *matCellDef="let ele">
<span *ngIf="!ele.changed">
{{ ele.totalDueForPeriod | number}}
</span>
<span *ngIf="ele.changed" class="amount-changed">
<b>{{ ele.totalDueForPeriod | number}}</b>
</span>
</td>
<td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | currency }} </b> </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell class="center" *matCellDef="let ele">
<button *ngIf="ele.period" type="button" color="primary" mat-icon-button matTooltip="Edit" matTooltipPosition="above" (click)="editPeriod(ele)">
<fa-icon icon="edit" size="lg"></fa-icon>
</button>
</td>
<td mat-footer-cell *matFooterCellDef> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsEdit"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsEdit;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumnsEdit"></tr>
</table>
</div>
</div>