Savings account status and substatus management (#1606)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

angular.json

@@ -82,8 +82,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
+                  "maximumWarning": "6kb",
-                  "maximumError": "4kb"
+                  "maximumError": "12kb"
                 }
               ],
               "fileReplacements": [

src/app/account-transfers/make-account-transfers/make-account-transfers.component.html

@@ -22,8 +22,8 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">From Account</span>
-          <span
+          <span fxFlex="60%">{{ accountTransferTemplateData.fromAccount.productName}}&nbsp;-&nbsp;#{{
-            fxFlex="60%">{{ accountTransferTemplateData.fromAccount.productName}}&nbsp;-&nbsp;#{{ accountTransferTemplateData.fromAccount.accountNo }}</span>
+            accountTransferTemplateData.fromAccount.accountNo }}</span>
         </div>
 
         <div fxFlexFill>
@@ -46,6 +46,17 @@
 
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
+          <mat-form-field fxFlex="98%" (click)="transferDatePicker.open()">
+            <mat-label>Transaction Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required
+              formControlName="transferDate">
+            <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #transferDatePicker></mat-datepicker>
+            <mat-error *ngIf="makeAccountTransferForm.controls.transferDate.hasError('required')">
+              Transactions Date is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
           <mat-form-field fxFlex="98%">
             <mat-label>Office</mat-label>
             <mat-select required formControlName="toOfficeId" (selectionChange)="changeEvent()">
@@ -104,20 +115,10 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="98%"  (click)="transferDatePicker.open()">
-            <mat-label>Transaction Date</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required
-              formControlName="transferDate">
-            <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #transferDatePicker></mat-datepicker>
-            <mat-error *ngIf="makeAccountTransferForm.controls.transferDate.hasError('required')">
-              Transactions Date is <strong>required</strong>
-            </mat-error>
-          </mat-form-field>
-
           <mat-form-field fxFlex="98%">
             <mat-label>Description</mat-label>
-            <textarea matInput formControlName="transferDescription" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+            <textarea matInput formControlName="transferDescription" cdkTextareaAutosize
+              cdkAutosizeMinRows="2"></textarea>
             <mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
               Transfer Description is <strong>required</strong>
             </mat-error>
@@ -132,8 +133,8 @@
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
       <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-      <button mat-raised-button color="primary" [disabled]="!makeAccountTransferForm.valid" *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'"
+      <button mat-raised-button color="primary" [disabled]="!makeAccountTransferForm.valid"
-        (click)="submit()">Submit</button>
+        *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'" (click)="submit()">Submit</button>
     </mat-card-actions>
 
   </mat-card>

src/app/account-transfers/make-account-transfers/make-account-transfers.component.ts

@@ -89,6 +89,7 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
    * Creates and sets the create standing instructions form.
    */
   ngOnInit() {
+    this.maxDate = this.settingsService.businessDate;
     this.createMakeAccountTransferForm();
   }
 
@@ -102,7 +103,7 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
       'toAccountType': ['', Validators.required],
       'toAccountId': ['', Validators.required],
       'transferAmount': [this.accountTransferTemplateData.transferAmount, Validators.required],
-      'transferDate': ['', Validators.required],
+      'transferDate': [this.settingsService.businessDate, Validators.required],
       'transferDescription': ['', Validators.required],
     });
   }
@@ -186,7 +187,7 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
       fromOfficeId: this.accountTransferTemplateData.fromClient.officeId
     };
     this.accountTransfersService.createAccountTransfer(makeAccountTransferData).subscribe(() => {
-      this.router.navigate(['../../general'], { relativeTo: this.route });
+      this.router.navigate(['../../transactions'], { relativeTo: this.route });
     });
   }
 

src/app/account-transfers/view-account-transfer/view-account-transfer.component.html

@@ -12,7 +12,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Transaction Amount:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.transferAmount }}</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.currency.displaySymbol }} {{ viewAccountTransferData.transferAmount | number }} ({{ viewAccountTransferData.currency.code }})</span>
         </div>
 
         <div fxFlexFill>
@@ -45,7 +45,7 @@
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Account #:</span>
+          <span fxFlex="40%">Account No:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.fromAccount.accountNo }}</span>
         </div>
 
@@ -60,7 +60,9 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Client:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.toClient.displayName }}</span>
+          <span fxFlex="60%"><a [href]="transferToClient(viewAccountTransferData.toClient)">
+            {{ viewAccountTransferData.toClient.displayName }}</a>
+          </span>
         </div>
 
         <div fxFlexFill>
@@ -69,14 +71,19 @@
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Account #:</span>
+          <span fxFlex="40%">Account No:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.toAccount.accountNo }}</span>
+          <span fxFlex="60%"><a [href]="transferToAccount(viewAccountTransferData.toClient, viewAccountTransferData.toAccount)">
+            {{ viewAccountTransferData.toAccount.accountNo }}</a>
+          </span>
         </div>
 
       </div>
 
     </mat-card-content>
 
+    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button type="button" color="primary" mat-raised-button (click)="goBack()">Back</button>
+    </mat-card-actions>
   </mat-card>
 
 </div>

src/app/account-transfers/view-account-transfer/view-account-transfer.component.ts

@@ -1,5 +1,6 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
@@ -13,11 +14,25 @@ export class ViewAccountTransferComponent {
   /**
    * Retrieves the view account transfer data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
+   * @param {Location} location Location.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+    private location: Location) {
     this.route.data.subscribe((data: { viewAccountTransferData: any }) => {
       this.viewAccountTransferData = data.viewAccountTransferData;
     });
   }
 
+  transferToClient(toClient: any): string {
+    return `/#/clients/${toClient.id}`;
+  }
+
+  transferToAccount(toClient: any, toAccount: any): string {
+    return `/#/clients/${toClient.id}/savings-accounts/${toAccount.id}`;
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+
 }

src/app/accounting/accounting.module.ts

@@ -36,6 +36,7 @@ import { ProvisioningEntriesComponent } from './provisioning-entries/provisionin
 import { CreateProvisioningEntryComponent } from './provisioning-entries/create-provisioning-entry/create-provisioning-entry.component';
 import { ViewProvisioningEntryComponent } from './provisioning-entries/view-provisioning-entry/view-provisioning-entry.component';
 import { ViewProvisioningJournalEntriesComponent } from './provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component';
+import { PipesModule } from 'app/pipes/pipes.module';
 
 /**
  * Accounting Module
@@ -46,7 +47,8 @@ import { ViewProvisioningJournalEntriesComponent } from './provisioning-entries/
   imports: [
     SharedModule,
     DirectivesModule,
-    AccountingRoutingModule
+    AccountingRoutingModule,
+    PipesModule
   ],
   declarations: [
     AccountingComponent,

src/app/accounting/search-journal-entry/search-journal-entry.component.html

@@ -90,7 +90,7 @@
 
     <ng-container matColumnDef="transactionDate">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.transactionDate }} </td>
+      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.transactionDate | dateFormat }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountType">
@@ -105,7 +105,7 @@
 
     <ng-container matColumnDef="submittedOnDate">
       <th mat-header-cell *matHeaderCellDef> Submitted on date </th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.submittedOnDate }} </td>
+      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.submittedOnDate | datetimeFormat }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountCode">
@@ -120,12 +120,12 @@
 
     <ng-container matColumnDef="debit">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit </th>
-      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'DEBIT'"> {{ (journalEntry.currency.displaySymbol || journalEntry.currency.code) + ' ' + journalEntry.amount }} </span></td>
+      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'DEBIT'"> {{ (journalEntry.currency.displaySymbol || journalEntry.currency.code) + ' ' + journalEntry.amount | number }} </span></td>
     </ng-container>
 
     <ng-container matColumnDef="credit">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit </th>
-      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'CREDIT'"> {{ (journalEntry.currency.displaySymbol || journalEntry.currency.code) + ' ' + journalEntry.amount }} </span></td>
+      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'CREDIT'"> {{ (journalEntry.currency.displaySymbol || journalEntry.currency.code) + ' ' + journalEntry.amount | number }} </span></td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -133,6 +133,6 @@
 
   </table>
 
-  <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="25" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
 </div>

src/app/accounting/view-journal-entry/view-journal-entry.component.html

@@ -21,7 +21,7 @@
 
     <tr>
       <th>Transaction Date</th>
-      <td>{{ data.journalEntry.transactionDate }}</td>
+      <td>{{ data.journalEntry.transactionDate | dateFormat }}</td>
     </tr>
 
     <tr>
@@ -45,10 +45,15 @@
         <span *ngIf="data.journalEntry.entryType.value === 'DEBIT'">Debit</span>
       </th>
       <td>
-        {{ (data.journalEntry.currency.displaySymbol || data.journalEntry.currency.code) + ' ' + data.journalEntry.amount }}
+        {{ data.journalEntry.currency.displaySymbol }} {{ data.journalEntry.amount | number }}
       </td>
     </tr>
 
+    <tr>
+      <th>Currency</th>
+      <td>({{ data.journalEntry.currency.code }}) {{ data.journalEntry.currency.name }}</td>
+    </tr>
+
     <tr *ngIf="data.journalEntry.referenceNumber">
       <th>Reference Number</th>
       <td>{{ data.journalEntry.referenceNumber }}</td>
@@ -100,7 +105,7 @@
 
     <tr>
       <th>Submitted on</th>
-      <td>{{ data.journalEntry.submittedOnDate }}</td>
+      <td>{{ data.journalEntry.submittedOnDate | datetimeFormat }}</td>
     </tr>
 
   </table>

src/app/accounting/view-transaction/view-transaction.component.html

@@ -1,8 +1,7 @@
 <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20" *ngIf="dataSource?.data[0].manualEntry">
   <button mat-raised-button color="primary" (click)="revertTransaction()" *mifosxHasPermission="'REVERSE_JOURNALENTRY'" [disabled]="dataSource?.data[0].reversed">
     <span *ngIf="!dataSource.data[0].reversed">
-      <fa-icon icon="undo"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="undo" class="m-r-10"></fa-icon>Revert Transaction
-      Revert Transaction
     </span>
     <span *ngIf="dataSource.data[0].reversed">Transaction Reverted</span>
   </button>
@@ -29,7 +28,7 @@
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
-            {{ dataSource.data[0].transactionDate }}
+            {{ dataSource.data[0].transactionDate | dateFormat }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
@@ -45,7 +44,7 @@
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
-            {{ dataSource.data[0].submittedOnDate }}
+            {{ dataSource.data[0].submittedOnDate | datetimeFormat }}
           </div>
 
         </div>
@@ -61,33 +60,33 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry ID </th>
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Entry ID </th>
       <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountType">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Type </th>
       <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountType.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Code </th>
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Account Code </th>
       <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountCode }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Name </th>
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Account Name </th>
       <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="debit">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Debit </th>
-      <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) + ' ' + transaction.amount }} </span></td>
+      <td mat-cell class="r-amount" *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) + ' ' + transaction.amount }} </span></td>
     </ng-container>
 
     <ng-container matColumnDef="credit">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Credit </th>
-      <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) + ' ' + transaction.amount }} </span></td>
+      <td mat-cell class="r-amount" *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) + ' ' + transaction.amount }} </span></td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -97,4 +96,7 @@
 
   <mat-paginator [pageSizeOptions]="[5, 10]" showFirstLastButtons></mat-paginator>
 
+  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button type="button" color="primary" mat-raised-button (click)="goBack()">Back</button>
+  </div>
 </div>

src/app/accounting/view-transaction/view-transaction.component.scss

@@ -8,6 +8,10 @@
   }
 }
 
+.container {
+  max-width: 75rem;
+}
+
 table {
   width: 100%;
 

src/app/accounting/view-transaction/view-transaction.component.ts

@@ -12,6 +12,7 @@ import { AccountingService } from '../accounting.service';
 /** Custom Components */
 import { RevertTransactionComponent } from '../revert-transaction/revert-transaction.component';
 import { ViewJournalEntryComponent } from '../view-journal-entry/view-journal-entry.component';
+import { Location } from '@angular/common';
 
 /**
  * View transaction component.
@@ -48,7 +49,8 @@ export class ViewTransactionComponent implements OnInit {
   constructor(private accountingService: AccountingService,
               private route: ActivatedRoute,
               private router: Router,
-              public dialog: MatDialog) {  }
+              public dialog: MatDialog,
+              private location: Location) {  }
 
   /**
    * Retrieves the transaction data from `resolve` and sets the transaction table.
@@ -108,4 +110,8 @@ export class ViewTransactionComponent implements OnInit {
     });
   }
 
+  goBack(): void {
+    this.location.back();
+  }
+
 }

src/app/clients/clients-view/charges/view-charge/view-charge.component.html

@@ -16,8 +16,8 @@
 <div class="container">
 
   <mat-card>
-    
+
-    <mat-card-title> <i class="fa fa-stop" [ngClass]="(!(chargeData.isWaived || chargeData.isPaid))|statusLookup"></i> 
+    <mat-card-title> <i class="fa fa-stop" [ngClass]="(!(chargeData.isWaived || chargeData.isPaid))|statusLookup"></i>
       {{ chargeData.name }}
     </mat-card-title>
 
@@ -87,12 +87,12 @@
           <th mat-header-cell *matHeaderCellDef> ID </th>
           <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.id}} </td>
         </ng-container>
-    
+
         <ng-container matColumnDef="officeName">
           <th mat-header-cell *matHeaderCellDef> Office Name </th>
           <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.officeName }} </td>
         </ng-container>
-    
+
         <ng-container matColumnDef="type">
           <th mat-header-cell *matHeaderCellDef> Type </th>
           <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.type.value}} </td>
@@ -101,21 +101,21 @@
           <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
           <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.date  | dateFormat}} </td>
         </ng-container>
-    
+
         <ng-container matColumnDef="amount">
           <th mat-header-cell *matHeaderCellDef> Amount </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.amount}} </td>
+          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.amount | number }} </td>
         </ng-container>
-    
+
         <ng-container matColumnDef="actions">
           <th mat-header-cell *matHeaderCellDef> Actions </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> 
+          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}">
             <button mat-raised-button color="primary" (click)="undoTransaction(element.id)" class="delBtn">
               <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
-            </button> 
+            </button>
           </td>
         </ng-container>
-        
+
         <tr mat-header-row *matHeaderRowDef="viewChargeTableColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: viewChargeTableColumns;"></tr>
       </table>
@@ -129,4 +129,4 @@
 
   </mat-card>
 
-</div>
+</div>

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

@@ -2,7 +2,7 @@
 
   <div class="back-button">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../../../general']">
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;Back</button>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>Back</button>
   </div>
 
   <iframe [src]="pentahoUrl" frameborder="0" width=100% height="600px;"></iframe>

src/app/pipes/status-lookup.pipe.ts

@@ -10,6 +10,7 @@ export class StatusLookupPipe implements PipeTransform {
       'true': 'status-active',
       'false': 'status-deleted',
       'Active': 'status-active',
+      'Block': 'status-block',
       'charges.StatusType.active.true': 'status-active',
       'loanStatusType.submitted.and.pending.approval': 'status-pending',
       'loanStatusType.approved': 'status-approved',

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

@@ -4,7 +4,6 @@
 
     <h2 mat-title *ngIf="transactionType.holdamount">Hold Amount</h2>
     <h2 mat-title *ngIf="transactionType.blockaccount">Block Savings Account</h2>
-    <h2 mat-title *ngIf="transactionType.unblockaccount">Unblock Savings Account</h2>
 
     <form [formGroup]="manageSavingsAccountForm" (ngSubmit)="submit()">
 

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

@@ -27,10 +27,10 @@ export class ManageSavingsAccountComponent implements OnInit {
 
   transactionType: {
     holdamount: boolean,
-    blockaccount: boolean,
+    blockaccount: boolean
-    unblockaccount: boolean
   } = {
-    holdamount: false, blockaccount: false, unblockaccount: false };
+      holdamount: false, blockaccount: false
+    };
 
   /**
    * @param {FormBuilder} formBuilder Form Builder
@@ -41,12 +41,12 @@ export class ManageSavingsAccountComponent implements OnInit {
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private formBuilder: FormBuilder,
-              private savingsService: SavingsService,
+    private savingsService: SavingsService,
-              private dateUtils: Dates,
+    private dateUtils: Dates,
-              private route: ActivatedRoute,
+    private route: ActivatedRoute,
-              private router: Router,
+    private router: Router,
-              private systemService: SystemService,
+    private systemService: SystemService,
-              private settingsService: SettingsService) {
+    private settingsService: SettingsService) {
     this.transactionCommand = this.route.snapshot.params['name'].toLowerCase().replaceAll(' ', '');
     this.transactionType[this.transactionCommand] = true;
     this.savingAccountId = this.route.parent.snapshot.params['savingAccountId'];
@@ -83,15 +83,15 @@ export class ManageSavingsAccountComponent implements OnInit {
   }
 
   /**
-   * Creates the post interest savings account form.
+   * Creates the manage savings account form.
    */
   createManageSavingsAccountForm() {
     if (this.transactionType.holdamount) {
-    this.manageSavingsAccountForm = this.formBuilder.group({
+      this.manageSavingsAccountForm = this.formBuilder.group({
-      'reasonForBlock': ['', Validators.required],
+        'reasonForBlock': ['', Validators.required],
-      'transactionDate': ['', Validators.required],
+        'transactionDate': ['', Validators.required],
-      'transactionAmount': [0.0, Validators.required]
+        'transactionAmount': [0.0, Validators.required]
-    });
+      });
     } else {
       this.manageSavingsAccountForm = this.formBuilder.group({
         'reasonForBlock': ['', Validators.required]
@@ -101,7 +101,7 @@ export class ManageSavingsAccountComponent implements OnInit {
 
   submit() {
     let command = '';
-    let payload = { };
+    let payload = {};
 
     if (this.transactionType.holdamount) {
       const manageSavingsAccountFormData = this.manageSavingsAccountForm.value;
@@ -119,7 +119,6 @@ export class ManageSavingsAccountComponent implements OnInit {
       command = 'holdAmount';
 
       this.savingsService.executeSavingsAccountTransactionsCommand(this.savingAccountId, command, payload).subscribe((response: any) => {
-        console.log(response);
         this.router.navigate(['../../transactions'], { relativeTo: this.route });
       });
     } else {
@@ -131,7 +130,6 @@ export class ManageSavingsAccountComponent implements OnInit {
       }
 
       this.savingsService.executeSavingsAccountCommand(this.savingAccountId, command, payload).subscribe((response: any) => {
-        console.log(response);
         this.router.navigate(['../../transactions'], { relativeTo: this.route });
       });
     }

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

@@ -10,4 +10,4 @@
 <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']"></mifosx-manage-savings-account>
+<mifosx-manage-savings-account *ngIf="actions['Hold Amount'] || actions['Block Account']"></mifosx-manage-savings-account>

src/app/savings/savings-account-view/savings-account-view.component.html

@@ -15,7 +15,9 @@
         <mat-card-title fxLayout="row" fxLayout.lt-md="column">
           <h3 fxFlex="95%">
             <i class="fa fa-stop" [ngClass]="savingsAccountData.status.code | statusLookup"
-              [matTooltip]="savingsAccountData.status.value"></i>
+              [matTooltip]="savingsAccountData.status.value" *ngIf="!savingsAccountData.subStatus.block"></i>
+            <i class="fa fa-stop" [ngClass]="savingsAccountData.subStatus.value | statusLookup"
+              [matTooltip]="savingsAccountData.subStatus.value" *ngIf="savingsAccountData.subStatus.block"></i>
             Savings Product : {{savingsAccountData.savingsProductName}}<span class="m-l-10">({{savingsAccountData.accountNo}})</span>
           </h3>
           <div fxFlex="5%">
@@ -53,7 +55,7 @@
           </button>
         </ng-container>
 
-        <ng-container *ngIf="buttonConfig.options">
+        <ng-container *ngIf="buttonConfig.options && !savingsAccountData.subStatus.block">
           <button mat-menu-item [matMenuTriggerFor]="More">More</button>
           <mat-menu #More="matMenu">
             <span *ngFor="let option of buttonConfig.options">

src/app/savings/savings-account-view/savings-account-view.component.ts

@@ -12,6 +12,7 @@ import { ToggleWithholdTaxDialogComponent } from './custom-dialogs/toggle-withho
 /** Custom Buttons Configuration */
 import { SavingsButtonsConfiguration } from './savings-buttons.config';
 import { SavingsService } from '../savings.service';
+import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
 
 /**
  * Savings Account View Component
@@ -64,7 +65,8 @@ export class SavingsAccountViewComponent implements OnInit {
    */
   setConditionalButtons() {
     const status = this.savingsAccountData.status.value;
-    this.buttonConfig = new SavingsButtonsConfiguration(status);
+    const subStatus = this.savingsAccountData.subStatus;
+    this.buttonConfig = new SavingsButtonsConfiguration(status, subStatus);
     if (this.savingsAccountData.clientId) {
       this.buttonConfig.addOption({
         name: 'Transfer Funds',
@@ -108,7 +110,6 @@ export class SavingsAccountViewComponent implements OnInit {
     }
   }
 
-
   /**
    * Refetches data foe the component
    * TODO: Replace by a custom reload component instead of hard-coded back-routing.
@@ -137,7 +138,6 @@ export class SavingsAccountViewComponent implements OnInit {
       case 'Add Charge':
       case 'Hold Amount':
       case 'Block Account':
-      case 'Unblock Account':
       case 'Unassign Staff':
       case 'Withdraw By Client':
       case 'Apply Annual Fees':
@@ -168,6 +168,9 @@ export class SavingsAccountViewComponent implements OnInit {
         const queryParams: any = { savingsId: this.savingsAccountData.id, accountType: 'fromsavings' };
         this.router.navigate(['transfer-funds/make-account-transfer'], { relativeTo: this.route, queryParams: queryParams });
         break;
+      case 'Unblock Account':
+        this.unblockSavingsAccount();
+        break;
     }
   }
 
@@ -249,4 +252,20 @@ export class SavingsAccountViewComponent implements OnInit {
     });
   }
 
+  /**
+   * Unblock Savings Account.
+   */
+  private unblockSavingsAccount() {
+    const unblockSavingsAccountDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: { heading: 'Unblock Savings Account', dialogContext: 'Are you sure you want Unblock this Savings Account' }
+    });
+    unblockSavingsAccountDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        this.savingsService.executeSavingsAccountCommand(this.savingsAccountData.id, 'unblock', { })
+          .subscribe(() => {
+            this.reload();
+          });
+      }
+    });
+  }
 }

src/app/savings/savings-account-view/savings-buttons.config.ts

@@ -12,9 +12,9 @@ export class SavingsButtonsConfiguration {
     taskPermissionName: string,
   }[];
 
-  constructor(status: string) {
+  constructor(status: string, substatus: any) {
     this.setOptions(status);
-    this.setButtons(status);
+    this.setButtons(status, substatus);
   }
 
   get singleButtons() {
@@ -25,36 +25,60 @@ export class SavingsButtonsConfiguration {
     return this.optionArray;
   }
 
-  setButtons(status: string) {
+  setButtons(status: string, substatus: any) {
     switch (status) {
       case 'Active':
-        this.buttonsArray = [
+        this.buttonsArray = [];
+        if (!substatus.block) {
+          if (!substatus.blockCredit) {
+            this.buttonsArray.push(
+              {
+                name: 'Deposit',
+                icon: 'arrow-up',
+                taskPermissionName: 'DEPOSIT_SAVINGSACCOUNT'
+              }
+            );
+          }
+          if (!substatus.blockDebit) {
+            this.buttonsArray.push(
+              {
+                name: 'Withdrawal',
+                icon: 'arrow-down',
+                taskPermissionName: 'WITHDRAWAL_SAVINGSACCOUNT'
+              }
+            );
+          }
+          this.buttonsArray = this.buttonsArray.concat([
+            {
+              name: 'Block Account',
+              icon: 'lock',
+              taskPermissionName: 'BLOCK_SAVINGSACCOUNT'
+            },
+            {
+              name: 'Hold Amount',
+              icon: 'lock',
+              taskPermissionName: 'HOLDAMOUNT_SAVINGSACCOUNT'
+            },
+            {
+              name: 'Calculate Interest',
+              icon: 'table',
+              taskPermissionName: 'CALCULATEINTEREST_SAVINGSACCOUNT'
+            },
+            {
+              name: 'Post Interest As On',
+              icon: 'arrow-right',
+              taskPermissionName: 'POSTINTEREST_SAVINGSACCOUNT',
+            },
+          ]);
+        } else {
+          this.buttonsArray = [
           {
-            name: 'Deposit',
+            name: 'Unblock Account',
-            icon: 'arrow-up',
+            icon: 'lock-open',
-            taskPermissionName: 'DEPOSIT_SAVINGSACCOUNT'
+            taskPermissionName: 'UNBLOCK_SAVINGSACCOUNT'
-          },
+          }
-          {
+          ];
-            name: 'Withdraw',
+        }
-            icon: 'arrow-down',
-            taskPermissionName: 'WITHDRAW_SAVINGSACCOUNT'
-          },
-          {
-            name: 'Hold Amount',
-            icon: 'lock',
-            taskPermissionName: 'HOLDAMOUNT_SAVINGSACCOUNT'
-          },
-          {
-            name: 'Calculate Interest',
-            icon: 'table',
-            taskPermissionName: 'CALCULATEINTEREST_SAVINGSACCOUNT'
-          },
-          {
-            name: 'Post Interest As On',
-            icon: 'arrow-right',
-            taskPermissionName: 'POSTINTEREST_SAVINGSACCOUNT',
-          },
-        ];
         break;
       case 'Submitted and pending approval':
         this.buttonsArray = [

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

@@ -50,20 +50,20 @@
           {{ transactionData.date | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          Currency
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.currency.displayLabel }}
-        </div>
-
         <div fxFlex="50%" class="mat-body-strong">
           Amount
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount }}
+          {{ transactionData.currency.displaySymbol }} {{ transactionData.amount | number }} ({{ transactionData.currency.code }})
+        </div>
+
+        <div fxFlex="50%" class="mat-body-strong">
+          Currency
+        </div>
+
+        <div fxFlex="50%">
+          {{ transactionData.currency.name }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">

src/app/savings/savings-routing.module.ts

@@ -178,7 +178,7 @@ const routes: Routes = [
           },
           {
             path: 'actions/:name',
-            data: { title: extract('Savings Account Actions'), routeParamBreadcrumb: 'name' },
+            data: { title: extract('Savings Account Actions'), breadcrumb: 'name', routeParamBreadcrumb: false },
             component: SavingAccountActionsComponent,
             resolve: {
               savingsAccountActionData: SavingsAccountActionsResolver

src/assets/styles/_status.scss

@@ -26,6 +26,10 @@
   color: $status-active-overdue;
 }
 
+.status-block {
+  color: $status-active-overdue;
+}
+
 .status-matured {
   color: $status-matured;
 }