WEB-331: Introduce loan reaging preview

Author: oleksii-novikov-onix

src/app/loans/loans-view/loan-account-actions/loan-reaging/loan-reaging.component.html

@@ -84,6 +84,16 @@
           >
             {{ 'labels.buttons.Submit' | translate }}
           </button>
+          <button
+            type="button"
+            mat-raised-button
+            color="accent"
+            [disabled]="!reagingLoanForm.valid"
+            *mifosxHasPermission="'REAGING_LOAN'"
+            (click)="preview()"
+          >
+            {{ 'labels.buttons.Preview' | translate }}
+          </button>
         </mat-card-actions>
       </mat-card-content>
     </form>

src/app/loans/loans-view/loan-account-actions/loan-reaging/loan-reaging.component.ts

@@ -1,11 +1,13 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
 import { Dates } from 'app/core/utils/dates';
 import { LoansService } from 'app/loans/loans.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { OptionData } from 'app/shared/models/option-data.model';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { ReAgePreviewDialogComponent } from './re-age-preview-dialog/re-age-preview-dialog.component';
 
 @Component({
   selector: 'mifosx-loan-reaging',
@@ -37,7 +39,8 @@ export class LoanReagingComponent implements OnInit {
     private router: Router,
     private settingsService: SettingsService,
     private loanService: LoansService,
-    private dateUtils: Dates
+    private dateUtils: Dates,
+    private dialog: MatDialog
   ) {
     this.loanId = this.route.snapshot.params['loanId'];
   }
@@ -80,6 +83,33 @@ export class LoanReagingComponent implements OnInit {
     });
   }
 
+  preview(): void {
+    const reagingLoanFormData = this.reagingLoanForm.value;
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    const startDate: Date = this.reagingLoanForm.value.startDate;
+    if (reagingLoanFormData.startDate instanceof Date) {
+      reagingLoanFormData.startDate = this.dateUtils.formatDate(startDate, dateFormat);
+    }
+    const data = {
+      ...reagingLoanFormData,
+      dateFormat,
+      locale
+    };
+
+    this.loanService.getReAgePreview(this.loanId, data).subscribe((response: any) => {
+      this.dialog.open(ReAgePreviewDialogComponent, {
+        data: {
+          repaymentSchedule: response,
+          currencyCode: response.currency?.code || 'USD'
+        },
+        width: '95%',
+        maxWidth: '1400px',
+        height: '90vh'
+      });
+    });
+  }
+
   submit(): void {
     const reagingLoanFormData = this.reagingLoanForm.value;
     const locale = this.settingsService.language.code;

src/app/loans/loans-view/loan-account-actions/loan-reaging/re-age-preview-dialog/re-age-preview-dialog.component.html

@@ -0,0 +1,16 @@
+<h1 mat-dialog-title>{{ 'labels.heading.Repayment Schedule Preview' | translate }}</h1>
+
+<mat-dialog-content class="mat-typography">
+  <mifosx-repayment-schedule-tab
+    [repaymentScheduleDetails]="repaymentSchedule"
+    [currencyCode]="currencyCode"
+    [forEditing]="false"
+  >
+  </mifosx-repayment-schedule-tab>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-raised-button (click)="close()">
+    {{ 'labels.buttons.Go back' | translate }}
+  </button>
+</mat-dialog-actions>

src/app/loans/loans-view/loan-account-actions/loan-reaging/re-age-preview-dialog/re-age-preview-dialog.component.scss

@@ -0,0 +1,17 @@
+[mat-dialog-title] {
+  font-size: 20px;
+  font-weight: 500;
+  margin: 0;
+  padding: 24px 24px 16px;
+}
+
+mat-dialog-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+mat-dialog-actions {
+  padding: 16px 24px;
+  margin: 0;
+}

src/app/loans/loans-view/loan-account-actions/loan-reaging/re-age-preview-dialog/re-age-preview-dialog.component.ts

@@ -0,0 +1,41 @@
+import { Component, Inject } from '@angular/core';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions
+} from '@angular/material/dialog';
+import { MatButton } from '@angular/material/button';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { RepaymentScheduleTabComponent } from '../../../repayment-schedule-tab/repayment-schedule-tab.component';
+
+@Component({
+  selector: 'mifosx-re-age-preview-dialog',
+  templateUrl: './re-age-preview-dialog.component.html',
+  styleUrls: ['./re-age-preview-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatButton,
+    RepaymentScheduleTabComponent
+  ]
+})
+export class ReAgePreviewDialogComponent {
+  repaymentSchedule: any;
+  currencyCode: string;
+
+  constructor(
+    public dialogRef: MatDialogRef<ReAgePreviewDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.repaymentSchedule = data.repaymentSchedule;
+    this.currencyCode = data.currencyCode;
+  }
+
+  close(): void {
+    this.dialogRef.close();
+  }
+}

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.ts

@@ -128,12 +128,14 @@ export class RepaymentScheduleTabComponent implements OnInit, OnChanges {
     private dateUtils: Dates,
     private dialog: MatDialog
   ) {
-    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
-      if (data.loanDetailsData) {
-        this.currencyCode = data.loanDetailsData.currency.code;
-      }
-      this.loanDetailsDataRepaymentSchedule = data.loanDetailsData ? data.loanDetailsData.repaymentSchedule : [];
-    });
+    if (this.route.parent) {
+      this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
+        if (data.loanDetailsData) {
+          this.currencyCode = data.loanDetailsData.currency.code;
+        }
+        this.loanDetailsDataRepaymentSchedule = data.loanDetailsData ? data.loanDetailsData.repaymentSchedule : [];
+      });
+    }
     this.businessDate = this.settingsService.businessDate;
   }
 

src/app/loans/loans.service.ts

@@ -241,6 +241,16 @@ export class LoansService {
     return this.http.post(`/loans/${loanId}/transactions`, data, { params: httpParams });
   }
 
+  /**
+   * Get Re-Age preview with repayment schedule
+   * @param loanId Loan Id
+   * @param data Re-Age data
+   * @returns Observable with repayment schedule preview
+   */
+  getReAgePreview(loanId: string, data: any): Observable<any> {
+    return this.http.post(`/loans/${loanId}/transactions/reage-preview`, data);
+  }
+
   getLoanScreenReportsData(): Observable<any> {
     const httpParams = new HttpParams().set('entityId', '1').set('typeId', '0');
     return this.http.get(`/templates`, { params: httpParams });

src/assets/translations/cs-CS.json

@@ -423,6 +423,7 @@
       "GSIM Application": "Aplikace GSIM",
       "Generate Report": "Vygenerovat zprávu",
       "Get Parameters": "Získat parametry",
+      "Go back": "Vrátit se",
       "Go to next step": "Přejděte k dalšímu kroku",
       "Group Loan Application": "Žádost o skupinovou půjčku",
       "Group Saving Application": "Aplikace pro ukládání skupin",
@@ -457,6 +458,7 @@
       "Pie Chart": "Koláčový graf",
       "Post Dividend": "Vyplácet dividendu",
       "Previous": "Předchozí",
+      "Preview": "Náhled",
       "Print": "Tisk",
       "Proceed": "Pokračovat",
       "Productive Collection Sheet": "Produktivní kolekce list",
@@ -1067,6 +1069,7 @@
       "Reject Checker": "Odmítnout kontrolu",
       "Release Amount": "Částka uvolnění",
       "Repaid Every": "Splaceno každý",
+      "Repayment Schedule Preview": "Náhled splátkového kalendáře",
       "Report Parameter": "Parametr sestavy",
       "Reschedule Loan": "Přeplánovací půjčka",
       "Revert Transaction": "Vrátit transakci",

src/assets/translations/de-DE.json

@@ -423,6 +423,7 @@
       "GSIM Application": "GSIM-Anwendung",
       "Generate Report": "Bericht generieren",
       "Get Parameters": "Parameter abrufen",
+      "Go back": "Zurück",
       "Go to next step": "Gehen Sie zum nächsten Schritt",
       "Group Loan Application": "Gruppenkreditantrag",
       "Group Saving Application": "Gruppenspeicheranwendung",
@@ -457,6 +458,7 @@
       "Pie Chart": "Kuchendiagramm",
       "Post Dividend": "Post-Dividende",
       "Previous": "Vorherige",
+      "Preview": "Vorschau",
       "Print": "Drucken",
       "Proceed": "Fortfahren",
       "Productive Collection Sheet": "Produktives Sammlungsblatt",
@@ -1068,6 +1070,7 @@
       "Reject Checker": "Überprüfung ablehnen",
       "Release Amount": "Freigabebetrag",
       "Repaid Every": "Alle zurückgezahlt",
+      "Repayment Schedule Preview": "Rückzahlungsplan Vorschau",
       "Report Parameter": "Berichtsparameter",
       "Reschedule Loan": "Darlehen neu plant",
       "Revert Transaction": "Transaktion rückgängig machen",

src/assets/translations/en-US.json

@@ -424,6 +424,7 @@
       "GSIM Application": "GSIM Application",
       "Generate Report": "Generate Report",
       "Get Parameters": "Get Parameters",
+      "Go back": "Go back",
       "Go to next step": "Go to next step",
       "Group Loan Application": "Group Loan Application",
       "Group Saving Application": "Group Saving Application",
@@ -458,6 +459,7 @@
       "Pie Chart": "Pie Chart",
       "Post Dividend": "Post Dividend",
       "Previous": "Previous",
+      "Preview": "Preview",
       "Print": "Print",
       "Proceed": "Proceed",
       "Productive Collection Sheet": "Productive Collection Sheet",
@@ -1073,6 +1075,7 @@
       "Reject Checker": "Reject Checker",
       "Release Amount": "Release Amount",
       "Repaid Every": "Repaid Every",
+      "Repayment Schedule Preview": "Repayment Schedule Preview",
       "Report Parameter": "Report Parameter",
       "Reschedule Loan": "Reschedule Loan",
       "Revert Transaction": "Revert Transaction",