Merge pull request #2835 from alberto-art3ch/WEB-446/validation-of-re-age-amount-during-submission_02

WEB-446: Optional transaction amount on re-age submission

Author: gkbishnoi07

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

@@ -3,16 +3,6 @@
     <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" />
@@ -80,6 +70,30 @@
             <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <input matInput formControlName="note" />
           </mat-form-field>
+
+          <div class="flex-fill">
+            <span
+              class="expandcollapsebutton m-l-10 m-t-5 m-b-5 flex-75"
+              (click)="addTransactionAmount = !addTransactionAmount"
+            >
+              <mat-slide-toggle>
+                <div>
+                  <span class="m-l-10">{{ 'labels.inputs.Transaction Amount' | translate }}</span>
+                </div>
+              </mat-slide-toggle>
+            </span>
+          </div>
+
+          <mifosx-input-amount
+            *ngIf="addTransactionAmount"
+            [currency]="loanTransactionData.currency"
+            [isRequired]="false"
+            [inputFormControl]="reagingLoanForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'"
+            [minVal]="0.01"
+            [maxVal]="loanTransactionData.amount"
+          >
+          </mifosx-input-amount>
         </div>
 
         <mat-card-actions class="layout-row align-center gap-5px responsive-column">

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

@@ -11,14 +11,16 @@ 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';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'mifosx-loan-reaging',
   templateUrl: './loan-reaging.component.html',
   styleUrls: ['./loan-reaging.component.scss'],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
-    InputAmountComponent
+    InputAmountComponent,
+    MatSlideToggle
   ]
 })
 export class LoanReagingComponent implements OnInit {
@@ -38,6 +40,7 @@ export class LoanReagingComponent implements OnInit {
   maxDate = new Date();
 
   loanTransactionData: LoanTransactionTemplate | null = null;
+  addTransactionAmount = false;
 
   constructor(
     private formBuilder: UntypedFormBuilder,
@@ -84,7 +87,7 @@ export class LoanReagingComponent implements OnInit {
         this.reAgeInterestHandlingOptions[0]
       ],
       transactionAmount: [
-        this.loanTransactionData.amount,
+        ,
         [Validators.max(this.loanTransactionData.amount)]
       ],
       note: '',
@@ -143,10 +146,10 @@ export class LoanReagingComponent implements OnInit {
   }
 
   submit(): void {
-    if (this.reagingLoanForm.invalid) {
-      return;
-    }
     const data = this.prepareReagingData();
+    if (data['transactionAmount'] === null) {
+      delete data['transactionAmount'];
+    }
     this.loanService.submitLoanActionButton(this.loanId, data, 'reAge').subscribe({
       next: (response: any) => {
         this.router.navigate(['../../transactions'], { relativeTo: this.route });

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

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>{{ 'labels.heading.Repayment Schedule Preview' | translate }}</h1>
+<h1 class="m-l-30">{{ 'labels.heading.Repayment Schedule Preview' | translate }}</h1>
 
 <mat-dialog-content class="mat-typography">
   <mifosx-repayment-schedule-tab
@@ -9,8 +9,8 @@ <h1 mat-dialog-title>{{ 'labels.heading.Repayment Schedule Preview' | translate
   </mifosx-repayment-schedule-tab>
 </mat-dialog-content>
 
-<mat-dialog-actions align="end">
-  <button mat-raised-button type="button" (click)="close()">
-    {{ 'labels.buttons.Go back' | translate }}
+<mat-dialog-actions align="center">
+  <button mat-raised-button color="primary" type="button" (click)="close()">
+    {{ 'labels.buttons.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.ts

@@ -1,11 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions
-} from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
 import { MatButton } from '@angular/material/button';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 import { RepaymentSchedule } from 'app/loans/models/loan-account.model';
@@ -22,7 +16,6 @@ export interface ReAgePreviewDialogData {
   styleUrls: ['./re-age-preview-dialog.component.scss'],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
-    MatDialogTitle,
     MatDialogContent,
     MatDialogActions,
     MatButton,