New input control for Transaction Amounts

src/app/directives/directives.module.ts

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 
 /** Custom Directives */
 import { HasPermissionDirective } from './has-permission/has-permission.directive';
+import { FormatAmountDirective } from './format-amount.directive';
 
 /**
  *  Directives Module
@@ -14,7 +15,7 @@ import { HasPermissionDirective } from './has-permission/has-permission.directiv
   imports: [
     CommonModule
   ],
-  declarations: [HasPermissionDirective],
-  exports: [HasPermissionDirective]
+  declarations: [HasPermissionDirective, FormatAmountDirective],
+  exports: [HasPermissionDirective, FormatAmountDirective]
 })
 export class DirectivesModule { }

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

@@ -0,0 +1,46 @@
+import { Directive, HostListener, ElementRef, Input, OnInit, Inject } from '@angular/core';
+import { formatCurrency } from '@angular/common';
+import { NgControl } from '@angular/forms';
+import { LOCALE_ID } from '@angular/core';
+
+@Directive({
+    selector: '[mifosxFormatAmount]',
+})
+export class FormatAmountDirective implements OnInit {
+    format = 'N0';
+    digitsInfo = '1.0-0';
+    currencyCode: string;
+    displaySymbol: string;
+    @Input() sufix = '';
+
+    @Input('mifosxFormatAmount') set _(values: string) {
+        const parts: string[] = values.split(':');
+        this.currencyCode = parts[0];
+        this.displaySymbol = (parts.length > 1) ? parts[1] : '$';
+        this.digitsInfo = (parts.length > 2) ? parts[2] : '1.2-2';
+    }
+
+    @HostListener('blur', ['$event.target']) blur(target: any) {
+        target.value = this.parse(target.value);
+    }
+    @HostListener('focus', ['$event.target']) focus(target: any) {
+        target.value = this.control.value;
+    }
+
+    ngOnInit() {
+        setTimeout(() => {
+            this.el.nativeElement.value = this.parse(this.el.nativeElement.value);
+        });
+    }
+
+    constructor(
+        @Inject(LOCALE_ID) private locale: string,
+        private el: ElementRef,
+        private control: NgControl
+    ) { }
+
+    parse(value: any) {
+        return formatCurrency(value, this.locale, this.displaySymbol, this.currencyCode, this.digitsInfo) + this.sufix;
+    }
+
+}

src/app/loans/loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component.html

@@ -19,13 +19,10 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
-            <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
-            <input matInput type="number" required formControlName="transactionAmount">
-            <mat-error *ngIf="disbursementForm.controls.transactionAmount.hasError('required')">
-              {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
+          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+            [inputFormControl]="disbursementForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'">
+          </mifosx-input-amount>
 
           <mat-form-field *ngIf="dataObject.fixedEmiAmount">
             <mat-label>{{"labels.inputs.Fixed EMI amount" | translate}}</mat-label>

src/app/loans/loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 import { LoansService } from 'app/loans/loans.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Currency } from 'app/shared/models/general.model';
 
 @Component({
   selector: 'mifosx-disburse-to-savings-account',
@@ -20,6 +21,7 @@ export class DisburseToSavingsAccountComponent implements OnInit {
   maxDate = new Date();
   /** Disbursement Loan form. */
   disbursementForm: UntypedFormGroup;
+  currency: Currency;
 
   /**
    * Get data from `Resolver`.
@@ -40,6 +42,9 @@ export class DisburseToSavingsAccountComponent implements OnInit {
   ngOnInit() {
     this.maxDate = this.settingsService.businessDate;
     this.setDisbursementToSavingsForm();
+    if (this.dataObject.currency) {
+      this.currency = this.dataObject.currency;
+    }
   }
 
   /**
@@ -73,6 +78,7 @@ export class DisburseToSavingsAccountComponent implements OnInit {
       locale
     };
     const loanId = this.route.snapshot.params['loanId'];
+    data['transactionAmount'] = data['transactionAmount'] * 1;
     this.loanService.loanActionButtons(loanId, 'disbursetosavings', data).subscribe((response: any) => {
       this.router.navigate(['../../general'], { relativeTo: this.route });
     });

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

@@ -19,13 +19,10 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
-            <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
-            <input matInput required formControlName="transactionAmount">
-            <mat-error *ngIf="disbursementLoanForm.controls.transactionAmount.hasError('required')">
-              {{"labels.inputs.Transaction Amount" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
+          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+            [inputFormControl]="disbursementLoanForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'">
+          </mifosx-input-amount>
 
           <mat-form-field>
             <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>

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

@@ -7,6 +7,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { LoansService } from 'app/loans/loans.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Disburse Loan Option
@@ -31,6 +32,7 @@ export class DisburseComponent implements OnInit {
   maxDate = new Date();
   /** Disbursement Loan Form */
   disbursementLoanForm: UntypedFormGroup;
+  currency: Currency;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
@@ -57,6 +59,9 @@ export class DisburseComponent implements OnInit {
     this.maxDate = this.settingsService.maxFutureDate;
     this.createDisbursementLoanForm();
     this.setDisbursementLoanDetails();
+    if (this.dataObject.currency) {
+      this.currency = this.dataObject.currency;
+    }
   }
 
   /**
@@ -114,6 +119,7 @@ export class DisburseComponent implements OnInit {
       dateFormat,
       locale
     };
+    data['transactionAmount'] = data['transactionAmount'] * 1;
     this.loanService.loanActionButtons(this.loanId, 'disburse', data )
       .subscribe((response: any) => {
         this.router.navigate(['../../general'], { relativeTo: this.route });

src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html

@@ -19,13 +19,10 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
-            <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
-            <input matInput required formControlName="transactionAmount">
-            <mat-error *ngIf="creditBalanceLoanForm.controls.transactionAmount.hasError('required')">
-              {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
+          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+            [inputFormControl]="creditBalanceLoanForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'">
+          </mifosx-input-amount>
 
           <mat-form-field>
             <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>

src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 import { LoansService } from 'app/loans/loans.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Currency } from 'app/shared/models/general.model';
 
 @Component({
   selector: 'mifosx-loan-credit-balance-refund',
@@ -21,6 +22,7 @@ export class LoanCreditBalanceRefundComponent implements OnInit {
   maxDate = new Date();
   /** Credit Balance Loan Form */
   creditBalanceLoanForm: UntypedFormGroup;
+  currency: Currency;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
@@ -46,6 +48,9 @@ export class LoanCreditBalanceRefundComponent implements OnInit {
     this.maxDate = this.settingsService.businessDate;
     this.createCreditBalanceLoanForm();
     this.setCreditBalanceLoanDetails();
+    if (this.dataObject.currency) {
+      this.currency = this.dataObject.currency;
+    }
   }
 
   /**
@@ -81,6 +86,7 @@ export class LoanCreditBalanceRefundComponent implements OnInit {
       locale
     };
     const command = this.dataObject.type.code.split('.')[1];
+    data['transactionAmount'] = data['transactionAmount'] * 1;
     this.loanService.submitLoanActionButton(this.loanId, data, command)
       .subscribe((response: any) => {
         this.router.navigate(['../../transactions'], { relativeTo: this.route });

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

@@ -53,15 +53,10 @@
             </div>
           </div>
 
-          <mat-form-field appearance="fill">
-            <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
-            <span matTextSuffix class="m-l-10">{{ dataObject.currency.code }}</span>
-            <span fxFlex="auto"></span>
-            <input type="number" matInput required class="right-input" formControlName="transactionAmount">
-            <mat-error *ngIf="repaymentLoanForm.controls.transactionAmount.hasError('required')">
-              {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
+          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+            [inputFormControl]="repaymentLoanForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'">
+          </mifosx-input-amount>
 
           <mat-form-field>
             <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>

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

@@ -7,6 +7,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { LoansService } from 'app/loans/loans.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Loan Make Repayment Component
@@ -31,6 +32,7 @@ export class MakeRepaymentComponent implements OnInit, OnDestroy {
   maxDate = new Date();
   /** Repayment Loan Form */
   repaymentLoanForm: UntypedFormGroup;
+  currency: Currency | null = null;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
@@ -56,6 +58,9 @@ export class MakeRepaymentComponent implements OnInit, OnDestroy {
     this.maxDate = this.settingsService.businessDate;
     this.createRepaymentLoanForm();
     this.setRepaymentLoanDetails();
+    if (this.dataObject.currency) {
+      this.currency = this.dataObject.currency;
+    }
   }
 
   ngOnDestroy(): void {
@@ -117,6 +122,7 @@ export class MakeRepaymentComponent implements OnInit, OnDestroy {
       locale
     };
     const command = this.dataObject.type.code.split('.')[1];
+    data['transactionAmount'] = data['transactionAmount'] * 1;
     this.loanService.submitLoanActionButton(this.loanId, data, command)
       .subscribe((response: any) => {
         this.router.navigate(['../../transactions'], { relativeTo: this.route });

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

@@ -53,15 +53,10 @@
             </div>
           </div>
 
-          <mat-form-field appearance="fill">
-            <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
-            <span matTextSuffix class="m-l-10">{{ prepayData.currency.code }}</span>
-            <span fxFlex="auto"></span>
-            <input type="number" matInput required class="right-input" formControlName="transactionAmount">
-            <mat-error *ngIf="prepayLoanForm.controls.transactionAmount.hasError('required')">
-              {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
+          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+            [inputFormControl]="prepayLoanForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'">
+          </mifosx-input-amount>
 
           <mat-form-field>
             <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>

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

@@ -7,6 +7,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { LoansService } from 'app/loans/loans.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Currency } from 'app/shared/models/general.model';
 
 
 /**
@@ -38,6 +39,7 @@ export class PrepayLoanComponent implements OnInit, OnDestroy {
   prepayLoanForm: UntypedFormGroup;
 
   prepayData: any;
+  currency: Currency | null = null;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
@@ -64,6 +66,9 @@ export class PrepayLoanComponent implements OnInit, OnDestroy {
     this.createprepayLoanForm();
     this.setPrepayLoanDetails();
     this.prepayData = this.dataObject;
+    if (this.dataObject.currency) {
+      this.currency = this.dataObject.currency;
+    }
   }
 
   ngOnDestroy(): void {
@@ -139,6 +144,7 @@ export class PrepayLoanComponent implements OnInit, OnDestroy {
       dateFormat,
       locale
     };
+    data['transactionAmount'] = data['transactionAmount'] * 1;
     this.loanService.submitLoanActionButton(this.loanId, data, 'repayment')
       .subscribe((response: any) => {
         this.router.navigate(['../../general'], { relativeTo: this.route });

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

@@ -19,15 +19,10 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
-            <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
-            <span matTextSuffix class="m-l-10" *ngIf="dataObject.currency">{{ dataObject.currency.code }}</span>
-            <span fxFlex="auto"></span>
-            <input type="number" matInput required class="right-input" formControlName="transactionAmount">
-            <mat-error *ngIf="recoveryRepaymentLoanForm.controls.transactionAmount.hasError('required')">
-              {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
+          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+            [inputFormControl]="recoveryRepaymentLoanForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'">
+          </mifosx-input-amount>
 
           <mat-form-field>
             <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>

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

@@ -7,6 +7,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { LoansService } from 'app/loans/loans.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Loan Recovery Repayment Action
@@ -31,6 +32,7 @@ export class RecoveryRepaymentComponent implements OnInit {
   maxDate = new Date();
   /** Recovery Repayment Loan Form */
   recoveryRepaymentLoanForm: UntypedFormGroup;
+  currency: Currency | null = null;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
@@ -56,6 +58,9 @@ export class RecoveryRepaymentComponent implements OnInit {
     this.maxDate = this.settingsService.businessDate;
     this.createRecoveryRepaymentLoanForm();
     this.setRecoveryRepaymentLoanDetails();
+    if (this.dataObject.currency) {
+      this.currency = this.dataObject.currency;
+    }
   }
 
   /**
@@ -114,6 +119,7 @@ export class RecoveryRepaymentComponent implements OnInit {
       dateFormat,
       locale
     };
+    data['transactionAmount'] = data['transactionAmount'] * 1;
     this.loanService.submitLoanActionButton(this.loanId, data, 'recoverypayment')
       .subscribe((response: any) => {
         this.router.navigate(['../../general'], { relativeTo: this.route });

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

@@ -19,13 +19,10 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
-            <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
-            <input matInput required formControlName="transactionAmount">
-            <mat-error *ngIf="loanInterestForm.controls.transactionAmount.hasError('required')">
-              {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
+          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+            [inputFormControl]="loanInterestForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'">
+          </mifosx-input-amount>
 
           <mat-form-field>
             <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>

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

@@ -7,6 +7,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { LoansService } from 'app/loans/loans.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Waive Interest component.
@@ -26,6 +27,7 @@ export class WaiveInterestComponent implements OnInit {
   minDate = new Date(2000, 0, 1);
   /** Maximum Date allowed. */
   maxDate = new Date();
+  currency: Currency;
 
   /**
    * Get data from `Resolver`.
@@ -44,6 +46,9 @@ export class WaiveInterestComponent implements OnInit {
   ngOnInit() {
     this.maxDate = this.settingsService.businessDate;
     this.setLoanInterestForm();
+    if (this.dataObject.currency) {
+      this.currency = this.dataObject.currency;
+    }
   }
 
   /**
@@ -73,6 +78,7 @@ export class WaiveInterestComponent implements OnInit {
       dateFormat,
       locale
     };
+    data['transactionAmount'] = data['transactionAmount'] * 1;
     const loanId = this.route.snapshot.params['loanId'];
     this.loanService.submitLoanActionButton(loanId, data, 'waiveinterest').subscribe((response: any) => {
       this.router.navigate(['../../general'], {relativeTo: this.route});

src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.html

@@ -17,13 +17,10 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
-          <input type="number" formControlName="transactionAmount" required matInput />
-          <mat-error *ngIf="editTransactionForm.controls.transactionAmount.hasError('required')">
-            {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} <strong> {{"labels.commons.required" | translate}} </strong>
-          </mat-error>
-        </mat-form-field>
+        <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          [inputFormControl]="editTransactionForm.controls.transactionAmount"
+          [inputLabel]="'Transaction Amount'">
+        </mifosx-input-amount>
 
         <mat-form-field>
           <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>

src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.ts

@@ -7,6 +7,7 @@ import { Dates } from 'app/core/utils/dates';
 /** Custom Services */
 import { LoansService } from 'app/loans/loans.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Edit Transaction component.
@@ -38,6 +39,7 @@ export class EditTransactionComponent implements OnInit {
   loanAccountId: string;
   /** Transaction Template */
   transactionTemplateData: any;
+  currency: Currency;
 
   /**
    * Retrieves the Loan Account transaction template data from `resolve`.
@@ -56,6 +58,9 @@ export class EditTransactionComponent implements OnInit {
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { loansAccountTransactionTemplate: any }) => {
       this.transactionTemplateData = data.loansAccountTransactionTemplate;
+      if (data.loansAccountTransactionTemplate.currency) {
+        this.currency = data.loansAccountTransactionTemplate.currency;
+      }
       this.paymentTypeOptions = this.transactionTemplateData.paymentTypeOptions;
     });
     this.loanAccountId = this.route.snapshot.params['loanId'];
@@ -123,6 +128,7 @@ export class EditTransactionComponent implements OnInit {
       dateFormat,
       locale
     };
+    data['transactionAmount'] = data['transactionAmount'] * 1;
     this.loansService.executeLoansAccountTransactionsCommand(this.loanAccountId, 'modify', data, this.transactionTemplateData.id)
       .subscribe((res: any) => {
         this.router.navigate(['../'], { relativeTo: this.route });

src/app/pipes/format-number.pipe.ts

@@ -15,10 +15,9 @@ export class FormatNumberPipe implements PipeTransform {
     if (!value) {
       return defaultValue ? defaultValue : '';
     }
-    const locale = this.settingsService.language.code;
     const decimals = this.settingsService.decimals;
     const format = `1.${decimals}-${decimals}`;
-    return this.decimalFormat.transform(value, format, locale);
+    return this.decimalFormat.transform(value, format);
   }
 
 }

src/app/pipes/translate.pipe.spec.ts

@@ -1,11 +0,0 @@
-/* tslint:disable:no-unused-variable */
-
-import { TestBed, async } from '@angular/core/testing';
-import { TranslatePipe } from './translate.pipe';
-
-describe('Pipe: Translatee', () => {
-  it('create an instance', () => {
-    let pipe = new TranslatePipe();
-    expect(pipe).toBeTruthy();
-  });
-});

src/app/savings/common-resolvers/savings-account-actions.resolver.ts

@@ -34,6 +34,7 @@ export class SavingsAccountActionsResolver implements Resolve<Object> {
         return this.savingsService.getSavingsChargeTemplateResource(savingAccountId);
       case 'Withdrawal':
       case 'Deposit':
+      case 'Hold Amount':
         return this.savingsService.getSavingsTransactionTemplateResource(savingAccountId);
       case 'Close':
         return forkJoin([

src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html

@@ -31,13 +31,10 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="transactionType.holdamount">
-          <mat-label>{{'labels.inputs.Transaction Amount' | translate}}</mat-label>
-          <input type="number" formControlName="transactionAmount" required matInput />
-          <mat-error *ngIf="manageSavingsAccountForm.controls.transactionAmount.hasError('required')">
-            {{'labels.inputs.Transaction Amount' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
-          </mat-error>
-        </mat-form-field>
+        <mifosx-input-amount [currency]="currency" [isRequired]="true" *ngIf="transactionType.holdamount"
+          [inputFormControl]="manageSavingsAccountForm.controls.transactionAmount"
+          [inputLabel]="'Transaction Amount'">
+        </mifosx-input-amount>
 
       </mat-card-content>
 

src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 import { SavingsService } from 'app/savings/savings.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Currency } from 'app/shared/models/general.model';
 import { SystemService } from 'app/system/system.service';
 
 @Component({
@@ -13,6 +14,7 @@ import { SystemService } from 'app/system/system.service';
 })
 export class ManageSavingsAccountComponent implements OnInit {
 
+  @Input() currency: Currency;
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -127,6 +129,7 @@ export class ManageSavingsAccountComponent implements OnInit {
         locale
       };
       command = 'holdAmount';
+      payload['transactionAmount'] = payload['transactionAmount'] * 1;
 
       this.savingsService.executeSavingsAccountTransactionsCommand(this.savingAccountId, command, payload).subscribe((response: any) => {
         this.router.navigate(['../../transactions'], { relativeTo: this.route });

src/app/savings/saving-account-actions/saving-account-actions.component.html

@@ -7,7 +7,9 @@
 <mifosx-savings-account-unassign-staff *ngIf="actions['Unassign Staff']"></mifosx-savings-account-unassign-staff>
 <mifosx-withdraw-by-client-savings-account *ngIf="actions['Withdrawn by Client']"></mifosx-withdraw-by-client-savings-account>
 <mifosx-add-charge-savings-account *ngIf="actions['Add Charge']"></mifosx-add-charge-savings-account>
-<mifosx-savings-transactions [currencyCode]="currencyCode" *ngIf="actions['Withdrawal'] || actions['Deposit']"></mifosx-savings-transactions>
+<mifosx-savings-transactions *ngIf="actions['Withdrawal'] || actions['Deposit']"></mifosx-savings-transactions>
 <mifosx-close-savings-account *ngIf="actions['Close']"></mifosx-close-savings-account>
 <mifosx-apply-annual-fees-savings-account *ngIf="actions['Apply Annual Fees']"></mifosx-apply-annual-fees-savings-account>
-<mifosx-manage-savings-account *ngIf="actions['Hold Amount'] || actions['Block Account'] || actions['Block Deposit'] || actions['Block Withdrawal']"></mifosx-manage-savings-account>
+<mifosx-manage-savings-account [currency]="currency"
+    *ngIf="actions['Hold Amount'] || actions['Block Account'] || actions['Block Deposit'] || actions['Block Withdrawal']">
+</mifosx-manage-savings-account>

src/app/savings/saving-account-actions/saving-account-actions.component.ts

@@ -1,6 +1,7 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Savings account actions component.
@@ -57,7 +58,7 @@ export class SavingAccountActionsComponent {
     'Unblock Withdrawal': false
   };
 
-  currencyCode: string;
+  currency: Currency;
 
   /**
    * @param {ActivatedRoute} route Activated Route
@@ -65,7 +66,7 @@ export class SavingAccountActionsComponent {
   constructor(private route: ActivatedRoute) {
     this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
       if (data.savingsAccountActionData) {
-        this.currencyCode = data.savingsAccountActionData.currency.code;
+        this.currency = data.savingsAccountActionData.currency;
       }
     });
     const name = this.route.snapshot.params['name'];

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html

@@ -20,15 +20,10 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field appearance="fill">
-          <mat-label>{{'labels.inputs.Transaction Amount' | translate}}</mat-label>
-          <span matTextSuffix class="m-l-10">{{ currencyCode }}</span>
-          <span fxFlex="auto"></span>
-          <input type="number" class="right-input" formControlName="transactionAmount" required matInput />
-          <mat-error *ngIf="savingAccountTransactionForm.controls.transactionAmount.hasError('required')">
-            {{'labels.inputs.Transaction Amount' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
-          </mat-error>
-        </mat-form-field>
+        <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          [inputFormControl]="savingAccountTransactionForm.controls.transactionAmount"
+          [inputLabel]="'Transaction Amount'">
+        </mifosx-input-amount>
 
         <mat-form-field>
           <mat-label>{{'labels.inputs.Payment Type' | translate}}</mat-label>

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -7,6 +7,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { SavingsService } from '../../savings.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Create savings account transactions component.
@@ -18,8 +19,6 @@ import { Dates } from 'app/core/utils/dates';
 })
 export class SavingsAccountTransactionsComponent implements OnInit {
 
-  @Input() currencyCode: string;
-
   /** Minimum Due Date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum Due Date allowed. */
@@ -42,6 +41,7 @@ export class SavingsAccountTransactionsComponent implements OnInit {
   transactionCommand: string;
   /** saving account's Id */
   savingAccountId: string;
+  currency: Currency | null = null;
 
   /**
    * Retrieves the Saving Account transaction template data from `resolve`.
@@ -60,6 +60,9 @@ export class SavingsAccountTransactionsComponent implements OnInit {
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
       this.paymentTypeOptions = data.savingsAccountActionData.paymentTypeOptions;
+      if (data.savingsAccountActionData.currency) {
+        this.currency = data.savingsAccountActionData.currency;
+      }
     });
     this.transactionCommand = this.route.snapshot.params['name'].toLowerCase();
     this.transactionType[this.transactionCommand] = true;
@@ -122,6 +125,7 @@ export class SavingsAccountTransactionsComponent implements OnInit {
       dateFormat,
       locale
     };
+    data['transactionAmount'] = data['transactionAmount'] * 1;
     this.savingsService.executeSavingsAccountTransactionsCommand(this.savingAccountId, this.transactionCommand, data).subscribe(res => {
       this.router.navigate(['../../transactions'], { relativeTo: this.route });
     });

src/app/savings/savings-account-view/custom-dialogs/release-amount-dialog/release-amount-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Release Amount</h1>
+<h1 mat-dialog-title>{{'labels.heading.Release Amount' | translate}}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to release this amount ?</p>
+  <p>{{'labels.text.Are you sure you want to release this amount' | translate}}</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
 </mat-dialog-actions>

src/app/savings/savings-account-view/custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Undo Transaction</h1>
+<h1 mat-dialog-title>{{'labels.heading.Undo Transaction' | translate}}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to undo this transaction ?</p>
+  <p>{{'labels.text.Are you sure you want to undo this transaction' | translate}}</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
 </mat-dialog-actions>

src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.html

@@ -17,13 +17,10 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Transaction Amount</mat-label>
-          <input type="number" formControlName="transactionAmount" required matInput />
-          <mat-error *ngIf="editTransactionForm.controls.transactionAmount.hasError('required')">
-            Transaction Amount is <strong>required</strong>
-          </mat-error>
-        </mat-form-field>
+        <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          [inputFormControl]="editTransactionForm.controls.transactionAmount"
+          [inputLabel]="'Transaction Amount'">
+        </mifosx-input-amount>
 
         <mat-form-field>
           <mat-label>Payment Type</mat-label>

src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.ts

@@ -7,6 +7,7 @@ import { Dates } from 'app/core/utils/dates';
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Edit Transaction component.
@@ -38,6 +39,7 @@ export class EditTransactionComponent implements OnInit {
   savingAccountId: string;
   /** Transaction Template */
   transactionTemplateData: any;
+  currency: Currency;
 
   /**
    * Retrieves the Saving Account transaction template data from `resolve`.
@@ -56,6 +58,9 @@ export class EditTransactionComponent implements OnInit {
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { savingsAccountTransactionTemplate: any }) => {
       this.transactionTemplateData = data.savingsAccountTransactionTemplate;
+      if (data.savingsAccountTransactionTemplate.currency) {
+        this.currency = data.savingsAccountTransactionTemplate.currency;
+      }
       this.paymentTypeOptions = this.transactionTemplateData.paymentTypeOptions;
     });
     this.savingAccountId = this.route.snapshot.params['savingAccountId'];

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

@@ -0,0 +1,21 @@
+<mat-form-field appearance="fill" fxFlex="100%" *ngIf="isRequired">
+    <mat-label>{{'labels.inputs.' + inputLabel | translate}}</mat-label>
+    <span matTextSuffix class="m-l-10">{{ currency.code }}</span>
+    <span fxFlex="auto"></span>
+    <input mifosxFormatAmount="{{currency.code}}:{{currency.displaySymbol}}" class="right-input"
+        [formControl]="inputFormControl"  (keypress)="numberOnly($event)"
+        required matInput (blur)="displayHint = false;" (focus)="displayHint = true;" />
+    <mat-error *ngIf="inputFormControl.hasError('required')">
+        {{'labels.inputs.' + inputLabel | translate}} {{ "labels.commons.is" | translate}} <strong>{{
+            "labels.commons.required" | translate}}</strong>
+    </mat-error>
+    <mat-hint class="right-hint" *ngIf="displayHint">{{inputFormControl.value | currency:currency.code:currency.displaySymbol:'1.2-2'}}</mat-hint>
+</mat-form-field>
+<mat-form-field appearance="fill" fxFlex="100%" *ngIf="!isRequired">
+    <mat-label>{{'labels.inputs.' + inputLabel | translate}}</mat-label>
+    <span matTextSuffix class="m-l-10">{{ currency.code }}</span>
+    <span fxFlex="auto"></span>
+    <input mifosxFormatAmount="{{currency.code}}:{{currency.displaySymbol}}" class="right-input"
+        [formControl]="inputFormControl"  (keypress)="numberOnly($event)" matInput (blur)="displayHint = false;" (focus)="displayHint = true;" />
+    <mat-hint class="right-hint" *ngIf="displayHint">{{inputFormControl.value | currency:currency.code:currency.displaySymbol:'1.2-2'}}</mat-hint>
+</mat-form-field>

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

@@ -0,0 +1,21 @@
+.expandcollapsebutton {
+    margin-top: -7px;
+}
+
+.container {
+    max-width: 37rem;
+}
+
+.right-input {
+    text-align: right;
+}
+
+.right-label {
+    padding-right: 25px !important;
+}
+
+.right-hint {
+    min-width: 100%;
+    text-align: right;
+    font-weight: 500;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputAmountComponent } from './input-amount.component';
+
+describe('InputAmountComponent', () => {
+  let component: InputAmountComponent;
+  let fixture: ComponentFixture<InputAmountComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InputAmountComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InputAmountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,45 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Currency } from '../models/general.model';
+import { UntypedFormControl } from '@angular/forms';
+
+@Component({
+  selector: 'mifosx-input-amount',
+  templateUrl: './input-amount.component.html',
+  styleUrls: ['./input-amount.component.scss']
+})
+export class InputAmountComponent implements OnInit {
+
+  @Input() isRequired = false;
+  @Input() currency: Currency;
+  @Input() inputLabel: string;
+  @Input() inputFormControl: UntypedFormControl;
+
+  displayHint = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  numberOnly(event: any): boolean {
+    const charCode = (event.which) ? event.which : event.keyCode;
+    if (charCode === 46) {
+      if (!(this.inputFormControl.value.indexOf('.') > -1)) {
+        return true;
+      }
+      return false;
+    } else if (charCode > 31 && (charCode < 48 || charCode > 57)) {
+      return false;
+    }
+    return true;
+  }
+
+  inputBlur(): void {
+    this.displayHint = false;
+  }
+
+  inputFocus(): void {
+    this.displayHint = true;
+  }
+
+}

src/app/shared/shared.module.ts

@@ -49,6 +49,7 @@ import { ViewSavingsAccountingDetailsComponent } from './accounting/view-savings
 import { ThemeToggleComponent } from './theme-toggle/theme-toggle.component';
 import { LongTextComponent } from './long-text/long-text.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
+import { InputAmountComponent } from './input-amount/input-amount.component';
 
 /**
  * Shared Module
@@ -104,7 +105,8 @@ import { DropdownComponent } from './dropdown/dropdown.component';
     ViewSavingsAccountingDetailsComponent,
     ThemeToggleComponent,
     LongTextComponent,
-    DropdownComponent
+    DropdownComponent,
+    InputAmountComponent
   ],
   exports: [
     FileUploadComponent,
@@ -137,7 +139,9 @@ import { DropdownComponent } from './dropdown/dropdown.component';
     GlAccountDisplayComponent,
     ViewSavingsAccountingDetailsComponent,
     ThemeToggleComponent,
-    LongTextComponent
+    LongTextComponent,
+    DropdownComponent,
+    InputAmountComponent
   ]
 })
 export class SharedModule { }