WEB-446: Validation of re-Age amount during submission

src/app/directives/format-amount.directive.ts

@@ -42,6 +42,9 @@ export class FormatAmountDirective implements OnInit {
   ) {}
 
   parse(value: any) {
+    if (value == '') {
+      return '' + this.sufix;
+    }
     return formatCurrency(value, this.locale, this.displaySymbol, this.currencyCode, this.digitsInfo) + this.sufix;
   }
 }

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

@@ -1,8 +1,18 @@
 <div class="container mat-elevation-z8">
   <mat-card>
-    <form [formGroup]="reagingLoanForm" (ngSubmit)="submit()">
+    <form [formGroup]="reagingLoanForm" (ngSubmit)="submit()" *ngIf="loanTransactionData !== null">
       <mat-card-content>
         <div class="layout-column">
+          <mifosx-input-amount
+            [currency]="loanTransactionData.currency"
+            [isRequired]="false"
+            [inputFormControl]="reagingLoanForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'"
+            [minVal]="0.01"
+            [maxVal]="loanTransactionData.amount"
+          >
+          </mifosx-input-amount>
+
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Number of Installments' | translate }}</mat-label>
             <input type="number" matInput required formControlName="numberOfInstallments" />

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

@@ -9,13 +9,16 @@ 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';
+import { InputAmountComponent } from 'app/shared/input-amount/input-amount.component';
+import { LoanTransactionTemplate } from 'app/loans/models/loan-transaction-type.model';
 
 @Component({
   selector: 'mifosx-loan-reaging',
   templateUrl: './loan-reaging.component.html',
   styleUrls: ['./loan-reaging.component.scss'],
   imports: [
-    ...STANDALONE_SHARED_IMPORTS
+    ...STANDALONE_SHARED_IMPORTS,
+    InputAmountComponent
   ]
 })
 export class LoanReagingComponent implements OnInit {
@@ -34,7 +37,7 @@ export class LoanReagingComponent implements OnInit {
   /** Maximum Date allowed. */
   maxDate = new Date();
 
-  currencyCode: string = '';
+  loanTransactionData: LoanTransactionTemplate | null = null;
 
   constructor(
     private formBuilder: UntypedFormBuilder,
@@ -49,17 +52,13 @@ export class LoanReagingComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.loanTransactionData = this.dataObject;
+
     this.maxDate = this.settingsService.maxFutureDate;
 
     this.reAgeReasonOptions = this.dataObject.reAgeReasonOptions;
     this.reAgeInterestHandlingOptions = this.dataObject.reAgeInterestHandlingOptions;
     this.periodFrequencyOptions = this.dataObject.periodFrequencyOptions;
-
-    const loanDetailsData = this.route.parent?.parent?.snapshot.data['loanDetailsData'];
-    if (loanDetailsData?.currency?.code) {
-      this.currencyCode = loanDetailsData.currency.code;
-    }
-
     this.createReagingLoanForm();
   }
 
@@ -84,6 +83,10 @@ export class LoanReagingComponent implements OnInit {
       reAgeInterestHandling: [
         this.reAgeInterestHandlingOptions[0]
       ],
+      transactionAmount: [
+        this.loanTransactionData.amount,
+        [Validators.max(this.loanTransactionData.amount)]
+      ],
       note: '',
       externalId: '',
       reasonCodeValueId: null
@@ -116,7 +119,7 @@ export class LoanReagingComponent implements OnInit {
 
     this.loanService.getReAgePreview(this.loanId, data).subscribe({
       next: (response: RepaymentSchedule) => {
-        const currencyCode = response.currency?.code || this.currencyCode;
+        const currencyCode = response.currency?.code || this.loanTransactionData.currency.code;
 
         if (!currencyCode) {
           console.error('Currency code is not available in API response or loan details');

src/app/loans/models/loan-transaction-type.model.ts

@@ -1,3 +1,6 @@
+import { CodeValue, Currency } from 'app/shared/models/general.model';
+import { OptionData } from 'app/shared/models/option-data.model';
+
 export interface LoanTransactionType {
   id: number;
   code: string;
@@ -41,3 +44,17 @@ export interface LoanTransactionType {
   buyDownFeeAdjustment: boolean;
   buyDownFeeAmortizationAdjustment: boolean;
 }
+
+export interface LoanTransactionTemplate {
+  loanId: number;
+  externalLoanId: string;
+  type: LoanTransactionType;
+  date: number[];
+  currency: Currency;
+  amount: number;
+  netDisbursalAmount: number;
+  manuallyReversed: boolean;
+  reAgeReasonOptions: CodeValue[];
+  periodFrequencyOptions: string[];
+  reAgeInterestHandlingOptions: OptionData[];
+}

src/app/shared/input-amount/input-amount.component.html

@@ -20,6 +20,12 @@
   <mat-hint class="right-hint" *ngIf="displayHint">{{
     inputFormControl.value | currency: currency.code : currency.displaySymbol : '1.2-2'
   }}</mat-hint>
+  <mat-error *ngIf="minVal && inputFormControl.hasError('min')">
+    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.Must be at least' | translate }} {{ minVal }}
+  </mat-error>
+  <mat-error *ngIf="maxVal && inputFormControl.hasError('max')">
+    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.Must be less or equal to' | translate }} {{ maxVal }}
+  </mat-error>
 </mat-form-field>
 <mat-form-field appearance="fill" class="flex-100" *ngIf="!isRequired">
   <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
@@ -37,4 +43,10 @@
   <mat-hint class="right-hint" *ngIf="displayHint">{{
     inputFormControl.value | currency: currency.code : currency.displaySymbol : '1.2-2'
   }}</mat-hint>
+  <mat-error *ngIf="minVal && inputFormControl.hasError('min')">
+    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.Must be at least' | translate }} {{ minVal }}
+  </mat-error>
+  <mat-error *ngIf="maxVal && inputFormControl.hasError('max')">
+    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.Must be less or equal to' | translate }} {{ maxVal }}
+  </mat-error>
 </mat-form-field>

src/app/shared/input-amount/input-amount.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input } from '@angular/core';
 import { Currency } from '../models/general.model';
-import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import { NgIf, CurrencyPipe } from '@angular/common';
-import { MatFormField, MatLabel, MatError, MatHint, MatSuffix } from '@angular/material/form-field';
+import { UntypedFormControl } from '@angular/forms';
+import { CurrencyPipe } from '@angular/common';
+import { MatHint } from '@angular/material/form-field';
 import { FormatAmountDirective } from '../../directives/format-amount.directive';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -22,6 +22,8 @@ export class InputAmountComponent {
   @Input() currency: Currency;
   @Input() inputLabel: string;
   @Input() inputFormControl: UntypedFormControl;
+  @Input() minVal: number;
+  @Input() maxVal: number;
 
   displayHint = false;
 
@@ -39,12 +41,4 @@ export class InputAmountComponent {
     }
     return true;
   }
-
-  inputBlur(): void {
-    this.displayHint = false;
-  }
-
-  inputFocus(): void {
-    this.displayHint = true;
-  }
 }