Recurring Deposit view account homologation (#1910)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

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

@@ -27,7 +27,7 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="loanProductSelected">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Loan purpose" | translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Loan Purpose" | translate}}</mat-label>
       <mat-select formControlName="loanPurposeId" matTooltip="{{ 'tooltips.Provides an indication' | translate}}">
         <mat-option *ngFor="let loanPurpose of loanPurposeOptions" [value]="loanPurpose.id">
           {{ loanPurpose.name }}

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

@@ -1,8 +1,8 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-  <a mat-button (click)="showRepaymentInfo()">
-    {{"labels.inputs.Repayment Info" | translate}}
-  </a>
+  <button mat-stroked-button color="primary" (click)="showRepaymentInfo()">
+    <fa-icon icon="calendar" class="m-r-10"></fa-icon>{{"labels.inputs.Generate Repayment Schedule" | translate}}
+  </button>
 
   <mifosx-repayment-schedule-tab fxFlex="100%" [repaymentScheduleDetails]="repaymentScheduleDetails"
     [currencyCode]="currencyCode">

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

@@ -19,7 +19,6 @@ export class LoansAccountScheduleStepComponent implements OnInit {
   /** Loans Account Data */
   @Input() loansAccount: any;
 
-  showRepayment = false;
   repaymentScheduleDetails: any = {periods: []};
 
   loanId: any = null;
@@ -34,16 +33,13 @@ export class LoansAccountScheduleStepComponent implements OnInit {
 
   showRepaymentInfo(): void {
     this.repaymentScheduleDetails = {periods: []};
-    this.showRepayment = !this.showRepayment;
-    if (this.showRepayment) {
-      const locale = this.settingsService.language.code;
-      const dateFormat = this.settingsService.dateFormat;
-      const payload = this.loansService.buildLoanRequestPayload(this.loansAccount, this.loansAccountTemplate,
-        this.loansAccountProductTemplate.calendarOptions, locale, dateFormat);
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    const payload = this.loansService.buildLoanRequestPayload(this.loansAccount, this.loansAccountTemplate,
+      this.loansAccountProductTemplate.calendarOptions, locale, dateFormat);
 
-      this.loansService.calculateLoanSchedule(payload).subscribe((response: any) => {
-        this.repaymentScheduleDetails = response;
-      });
-    }
+    this.loansService.calculateLoanSchedule(payload).subscribe((response: any) => {
+      this.repaymentScheduleDetails = response;
+    });
   }
 }

src/app/loans/loans-view/loans-view.component-theme.scss

@@ -1,13 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin loans-view-component-theme($theme) {
-  $primary: map-get($theme, primary);
-
-  mifosx-loans-view {
-    .loan-card {
-      .header {
-        background-color: mat.get-color-from-palette($primary, 500);
-      }
-    }
-  }
-}

src/app/loans/loans-view/loans-view.component.html

@@ -1,4 +1,4 @@
-<mat-card class="loan-card">
+<mat-card class="account-card">
 
   <mat-card-header fxLayout="column" class="header">
 
@@ -12,7 +12,7 @@
         </div>
       </div>
 
-      <div class="mat-typography loan-card-title">
+      <div class="mat-typography account-card-title">
         <mat-card-title>
           <div fxLayout="row" fxLayout.lt-md="column">
 
@@ -46,24 +46,30 @@
             </div>
 
             <div *ngIf="loanDetailsData.summary" class="loans-overview mat-typography" fxFlex="40%">
-              <h3> {{"labels.heading.Loan Account OverView" | translate}} </h3>
-              <span>{{"labels.inputs.Current Balance" | translate}}: {{loanDetailsData.currency.displaySymbol}}
-                {{loanDetailsData.summary.totalOutstanding | formatNumber}}</span><br>
-              <div *ngIf="loanDisplayArrearsDelinquency < 2">
-                <span *ngIf="loanDetailsData.inArrears">{{"labels.inputs.Arrears By" | translate}}:
-                  {{loanDetailsData.summary.totalOverdue | currency:currencyCode:'symbol-narrow':'1.2-2' }}
-                  <span *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">{{"labels.inputs.Not Provided" | translate
-                    }}</span>
-                </span><br>
-                <span *ngIf="loanDetailsData.inArrears">{{"labels.inputs.Arrears Since" | translate}}:
-                  {{loanDetailsData.summary.overdueSinceDate |
-                  dateFormat}}
-                </span>
-                <span *ngIf="loanDetailsData.totalOverpaid && loanDetailsData.totalOverpaid > 0">
-                  {{"labels.inputs.Overpaid By" | translate}}: {{loanDetailsData.currency.displaySymbol}}
-                  {{loanDetailsData.totalOverpaid | formatNumber }}
-                </span>
-              </div>
+              <h3> {{"labels.heading.Account OverView" | translate}} </h3>
+              <table class="account-overview">
+                <tbody>
+                  <tr>
+                    <td>{{"labels.inputs.Current Balance" | translate }}</td>
+                    <td class="r-amount">{{loanDetailsData.summary.totalOutstanding | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  </tr>
+                  <tr *ngIf="loanDisplayArrearsDelinquency < 2">
+                    <td>{{"labels.inputs.Arrears By" | translate }}</td>
+                    <td class="r-amount" *ngIf="loanDetailsData.summary.totalOverdue >= 0">
+                      {{loanDetailsData.summary.totalOverdue | currency:currency.code:'symbol-narrow':'1.2-2'}}
+                    </td>
+                    <td *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">{{"labels.inputs.Not Provided" | translate}}</td>
+                  </tr>
+                  <tr *ngIf="loanDetailsData.inArrears">
+                    <td>{{"labels.inputs.Arrears Since" | translate }}</td>
+                    <td> {{loanDetailsData.summary.overdueSinceDate | dateFormat}} </td>
+                  </tr>
+                  <tr *ngIf="loanDetailsData.totalOverpaid && loanDetailsData.totalOverpaid > 0">
+                    <td>{{"labels.inputs.Overpaid By" | translate }}</td>
+                    <td class="r-amount">{{loanDetailsData.totalOverpaid | currency:currency.code:'symbol-narrow':'1.2-2'}} </td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
 
             <span fxFlex="auto"></span>

src/app/loans/loans-view/loans-view.component.ts

@@ -13,6 +13,7 @@ import { LoansAccountButtonConfiguration } from './loan-accounts-button-config';
 import { ConfirmationDialogComponent } from '../../shared/confirmation-dialog/confirmation-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { LoanStatus } from '../models/loan-status.model';
+import { Currency } from 'app/shared/models/general.model';
 
 @Component({
   selector: 'mifosx-loans-view',
@@ -42,6 +43,7 @@ export class LoansViewComponent implements OnInit {
   disburseTransactionNo = 0;
 
   loanStatus: LoanStatus;
+  currency: Currency;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
@@ -52,6 +54,7 @@ export class LoansViewComponent implements OnInit {
       this.loanDatatables = data.loanDatatables;
       this.loanDisplayArrearsDelinquency = data.loanArrearsDelinquencyConfig.value || 0;
       this.loanStatus = this.loanDetailsData.status;
+      this.currency = this.loanDetailsData.currency;
     });
     this.loanId = this.route.snapshot.params['loanId'];
     this.clientId = this.loanDetailsData.clientId;