Clients search enhancement (#1605)

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

angular.json

@@ -11,6 +11,9 @@
       "schematics": {
         "@schematics/angular:component": {
           "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
         }
       },
       "architect": {
@@ -72,28 +75,35 @@
           "configurations": {
             "production": {
               "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                 }
               ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "serviceWorker": false,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
                   "with": "src/environments/environment.prod.ts"
                 }
-              ]
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -101,10 +111,14 @@
             "browserTarget": "mifosx-web-app:build"
           },
           "configurations": {
+            "development": {
+              "browserTarget": "mifosx-web-app:build:development"
+            },
             "production": {
               "browserTarget": "mifosx-web-app:build:production"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",

src/app/clients/clients.component.html

@@ -1,41 +1,47 @@
 <mat-card class="container">
   <div fxLayout="row" fxLayoutAlign="start center">
-    <div class="search-box">
+    <div class="search-box m-r-30">
-      <mat-form-field>
+      <mat-form-field class="search-box">
-        <input matInput placeholder="Search by client name" (keyup)="applyFilter($event.target.value)">
+        <input matInput placeholder="Search by client name, external Id, mobile" class="search-box" (keydown.enter)="search($event.target.value)">
       </mat-form-field>
-      <mat-checkbox #showClosedAccounts labelPosition="after">Show Closed Accounts
+    </div>
+    <div class="filter-box" *ngIf="existsClientsToFilter">
+      <mat-form-field class="filter-box m-r-30">
+        <input matInput placeholder="Filter by client name or external Id" class="filter-box" (keyup)="applyFilter($event.target.value)">
+      </mat-form-field>
+      <mat-checkbox #showClosedAccounts labelPosition="after" class="m-r-10">Show Closed Accounts
       </mat-checkbox>
     </div>
     <div class="action-button" fxLayoutGap="25px">
       <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Clients']" *mifosxHasPermission="'CREATE_CLIENT'">
-        <fa-icon icon="download"></fa-icon>&nbsp;&nbsp;Import Client
+        <fa-icon icon="download" class="m-r-10"></fa-icon>Import Client
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CLIENT'">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Create Client
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>Create Client
       </button>
     </div>
   </div>
-  <div>
+
+  <div *ngIf="existsClientsToFilter">
     <table mat-table [dataSource]="dataSource" matSort>
 
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header="displayName"> Name </th>
-        <td mat-cell *matCellDef="let row"> {{row.displayName}} </td>
+        <td mat-cell *matCellDef="let row"> {{row.entityName}} </td>
       </ng-container>
 
       <!-- Account no Column -->
-      <ng-container matColumnDef="clientno">
+      <ng-container matColumnDef="clientNo">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="accountNo"> Account # </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="accountNo"> Account No. </th>
-        <td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
+        <td mat-cell *matCellDef="let row"> {{row.entityAccountNo}} </td>
       </ng-container>
 
       <!-- External ID Column -->
-      <ng-container matColumnDef="externalid">
+      <ng-container matColumnDef="externalId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="externalId"> ExternalID </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="externalId"> External Id </th>
         <td mat-cell *matCellDef="let row">
-          <mifosx-external-identifier externalId="{{row.externalId}}"></mifosx-external-identifier>
+          <mifosx-external-identifier externalId="{{row.entityExternalId}}"></mifosx-external-identifier>
         </td>
       </ng-container>
 
@@ -43,43 +49,40 @@
       <ng-container matColumnDef="status">
         <th mat-header-cell *matHeaderCellDef> Status </th>
         <td mat-cell *matCellDef="let row">
-          <div [ngClass]="row.status.code | statusLookup">
+          <div [ngClass]="row.entityStatus.code | statusLookup">
             <fa-icon icon="stop"></fa-icon>
+            <span class="m-l-10 status">
+              {{ row.entityStatus.value | translate }}
+            </span>
           </div>
         </td>
       </ng-container>
 
-      <!-- Mobile Number Column-->
-      <ng-container matColumnDef="mobileNo">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Mobile Number </th>
-        <td mat-cell *matCellDef="let client"> {{ client.mobileNo }} </td>
-      </ng-container>
-
-      <!--Gender column-->
-      <ng-container matColumnDef="gender">
-        <th mat-header-cell *matHeaderCellDef> Gender </th>
-        <td mat-cell *matCellDef="let client"> {{ client.gender.name }} </td>
-      </ng-container>
-
       <!-- Color Column -->
       <ng-container matColumnDef="office">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="officeName"> OfficeName </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="officeName"> Office Name </th>
-        <td mat-cell *matCellDef="let row"> {{row.officeName}} </td>
+        <td mat-cell *matCellDef="let row"> {{row.parentName}} </td>
       </ng-container>
 
       <!-- ID Column -->
       <ng-container matColumnDef="staff">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="staffName"> StaffName </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="staffName"> Staff Name </th>
         <td mat-cell *matCellDef="let row"> {{row.staffName}} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id,'general']" class="select-row">
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.entityId,'general']" class="select-row">
       </tr>
     </table>
 
-    <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="100" [pageSizeOptions]="[10, 25, 50, 100]"
+    <mat-paginator [pageSize]="50" [pageSizeOptions]="[10, 25, 50, 100]"
       showFirstLastButtons></mat-paginator>
   </div>
 
+  <div class="alert" *ngIf="notExistsClientsToFilter">
+    <div class="message">
+      <i class="fa fa-exclamation-circle alert-check"></i>
+      No client was found
+    </div>
+  </div>
 </mat-card>

src/app/clients/clients.component.scss

@@ -6,6 +6,12 @@
     min-width: 30px;
     margin: 4px;
   }
+  .search-box {
+    min-width: 320px;
+  }
+  .filter-box {
+    min-width: 280px;
+  }
 }
 
 table {
@@ -16,3 +22,7 @@ table {
     color : black;
   }
 }
+
+.status {
+  color: black;
+}

src/app/clients/clients.component.ts

@@ -1,72 +1,34 @@
 /** Angular Imports. */
-import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { ClientsDataSource } from './clients.datasource';
+import { MatTableDataSource } from '@angular/material/table';
-
-/** rxjs Imports */
-import { merge } from 'rxjs';
-import { tap } from 'rxjs/operators';
 
 /** Custom Services */
-import { ClientsService } from './clients.service';
+import { SearchService } from 'app/search/search.service';
 
 @Component({
   selector: 'mifosx-clients',
   templateUrl: './clients.component.html',
   styleUrls: ['./clients.component.scss'],
 })
-export class ClientsComponent implements OnInit, AfterViewInit {
+export class ClientsComponent implements OnInit {
   @ViewChild('showClosedAccounts', { static: true }) showClosedAccounts: MatCheckbox;
 
+  displayedColumns = ['name', 'clientNo', 'externalId', 'status', 'office', 'staff'];
+  dataSource: MatTableDataSource<any>;
 
-  displayedColumns = ['name', 'clientno', 'externalid', 'status', 'mobileNo', 'gender', 'office', 'staff'];
+  existsClientsToFilter = false;
-  dataSource: ClientsDataSource;
+  notExistsClientsToFilter = false;
-  /** Get the required filter value. */
+  moreClientsToFilter = false;
-  searchValue = '';
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
-  constructor(private clientsService: ClientsService) {
+  constructor(private searchService: SearchService) { }
-
-  }
 
   ngOnInit() {
-    this.getClients();
-  }
-
-  ngAfterViewInit() {
-    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
-    merge(this.sort.sortChange, this.paginator.page, this.showClosedAccounts.change)
-      .pipe(
-        tap(() => this.loadClientsPage())
-      )
-      .subscribe();
-  }
-
-  /**
-   * Loads a page of journal entries.
-   */
-  loadClientsPage() {
-    if (!this.sort.direction) {
-      delete this.sort.active;
-    }
-
-    if (this.searchValue !== '') {
-      this.applyFilter(this.searchValue);
-    } else {
-      this.dataSource.getClients(this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize, this.showClosedAccounts.checked);
-    }
-  }
-
-  /**
-   * Initializes the data source for clients table and loads the first page.
-   */
-  getClients() {
-    this.dataSource = new ClientsDataSource(this.clientsService);
-    this.dataSource.getClients(this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize, this.showClosedAccounts.checked);
   }
 
   /**
@@ -74,8 +36,18 @@ export class ClientsComponent implements OnInit, AfterViewInit {
    * @param {string} filterValue Value to filter data.
    */
   applyFilter(filterValue: string = '') {
-    this.searchValue = filterValue;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
-    this.dataSource.filterClients(filterValue.trim().toLowerCase(), this.sort.active, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize, this.showClosedAccounts.checked);
   }
 
+  /**
+   * Searches server for query and resource.
+   */
+  search(value: string) {
+    this.searchService.getSearchResults(value, 'clients').subscribe((data: any) => {
+      this.dataSource = new MatTableDataSource(data);
+      this.existsClientsToFilter = (data.length > 0);
+      this.notExistsClientsToFilter = !this.existsClientsToFilter;
+      this.moreClientsToFilter = (data.length > 50);
+    });
+  }
 }

src/app/clients/clients.datasource.ts

@@ -1,85 +0,0 @@
-/** Angular Imports */
-import { CollectionViewer, DataSource } from '@angular/cdk/collections';
-
-/** rxjs Imports */
-import { Observable, BehaviorSubject } from 'rxjs';
-
-/** Custom Services */
-import { ClientsService } from './clients.service';
-
-/**
- * Clients custom data source to implement server side filtering, pagination and sorting.
- */
-export class ClientsDataSource implements DataSource<any> {
-
-  /** clients behavior subject to represent loaded journal clients page. */
-  private clientsSubject = new BehaviorSubject<any[]>([]);
-  /** Records subject to represent total number of filtered clients records. */
-  private recordsSubject = new BehaviorSubject<number>(0);
-  /** Records observable which can be subscribed to get the value of total number of filtered clients records. */
-  public records$ = this.recordsSubject.asObservable();
-
-  /**
-   * @param {ClientsService} clientsService Clients Service
-   */
-  constructor(private clientsService: ClientsService) { }
-
-  /**
-   * Gets clients on the basis of provided parameters and emits the value.
-   * @param {any} filterBy Properties by which clients should be filtered.
-   * @param {string} orderBy Property by which clients should be sorted.
-   * @param {string} sortOrder Sort order: ascending or descending.
-   * @param {number} pageIndex Page number.
-   * @param {number} limit Number of clients within the page.
-   */
-  getClients(orderBy: string = '', sortOrder: string = '', pageIndex: number = 0, limit: number = 10, showClosedAccounts: boolean = true) {
-    this.clientsSubject.next([]);
-    this.clientsService.getClients(orderBy, sortOrder, pageIndex * limit, limit)
-      .subscribe((clients: any) => {
-        if (showClosedAccounts) {
-          clients.pageItems = clients.pageItems;
-        } else {
-          clients.pageItems = clients.pageItems.filter((client: any) => client.status.value !== 'Closed');
-        }
-        this.recordsSubject.next(clients.totalFilteredRecords);
-        this.clientsSubject.next(clients.pageItems);
-      });
-  }
-
-  /**
-   * @param {CollectionViewer} collectionViewer
-   */
-  connect(collectionViewer: CollectionViewer): Observable<any[]> {
-    return this.clientsSubject.asObservable();
-  }
-
-  /**
-   * @param {CollectionViewer} collectionViewer
-   */
-  disconnect(collectionViewer: CollectionViewer): void {
-    this.clientsSubject.complete();
-    this.recordsSubject.complete();
-  }
-
-  /** Filter Active Client Data.
-   * @param {string} filterValue Filter Value which clients should be filtered.
-   * @param {string} orderBy Property by which clients should be sorted.
-   * @param {string} sortOrder Sort order: ascending or descending.
-   * @param {number} pageIndex Page number.
-   * @param {number} limit Number of clients within the page.
-   */
-  filterClients(filter: string, orderBy: string = '', sortOrder: string = '', pageIndex: number = 0, limit: number = 10, showClosedAccounts: boolean = true) {
-    this.clientsSubject.next([]);
-    this.clientsService.getClients(orderBy, sortOrder, pageIndex * limit, limit)
-      .subscribe((clients: any) => {
-        if (showClosedAccounts) {
-          clients.pageItems = clients.pageItems.filter((client: any) => client.displayName.toLowerCase().includes(filter));
-        } else {
-          clients.pageItems = clients.pageItems.filter((client: any) => client.status.value !== 'Closed' && client.displayName.toLowerCase().includes(filter));
-        }
-        this.recordsSubject.next(clients.totalFilteredRecords);
-        this.clientsSubject.next(clients.pageItems);
-      });
-  }
-
-}

src/app/loans/create-loans-account/create-loans-account.component.html

@@ -26,7 +26,7 @@
       <ng-template matStepLabel>DETAILS</ng-template>
 
       <mifosx-loans-account-details-step [loansAccountTemplate]="loansAccountTemplate"
-        (loansAccountProductTemplate)="setTemplate($event)">
+        (loansAccountProductTemplate)="setTemplate($event)" #loansAccountDetailsForm>
       </mifosx-loans-account-details-step>
 
     </mat-step>
@@ -35,7 +35,7 @@
 
       <ng-template matStepLabel>TERMS</ng-template>
 
-      <mifosx-loans-account-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
+      <mifosx-loans-account-terms-step #loanAccountTerms [loansAccountProductTemplate]="loansAccountProductTemplate"
       [loansAccountTemplate] = "loansAccountTemplate" [collateralOptions]="collateralOptions"
       [loansAccountFormValid]="loansAccountFormValid" [loanPrincipal]="loanPrincipal">
       </mifosx-loans-account-terms-step>
@@ -46,7 +46,7 @@
 
       <ng-template matStepLabel>CHARGES</ng-template>
 
-      <mifosx-loans-account-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
+      <mifosx-loans-account-charges-step #loanAccountCharges [loansAccountProductTemplate]="loansAccountProductTemplate"
         [loansAccountTemplate]="loansAccountTemplate"
         [loansAccountFormValid]="loansAccountFormValid">
       </mifosx-loans-account-charges-step>
@@ -57,7 +57,7 @@
 
       <ng-template matStepLabel>REPAYMENT SCHEDULE</ng-template>
 
-      <mifosx-loans-account-schedule-step [loansAccountTemplate]="loansAccountTemplate"
+      <mifosx-loans-account-schedule-step #loanAccountSchedule [loansAccountTemplate]="loansAccountTemplate"
         [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount">
       </mifosx-loans-account-schedule-step>
 

src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts

@@ -56,10 +56,10 @@ export class LoansAccountDetailsStepComponent implements OnInit {
     private route: ActivatedRoute,
     private settingsService: SettingsService) {
     this.loanId = this.route.snapshot.params['loanId'];
-    this.createLoansAccountDetailsForm();
   }
 
   ngOnInit() {
+    this.createLoansAccountDetailsForm();
     this.maxDate = this.settingsService.maxFutureDate;
     this.buildDependencies();
     if (this.loansAccountTemplate) {
@@ -87,7 +87,7 @@ export class LoansAccountDetailsStepComponent implements OnInit {
       'loanOfficerId': [''],
       'loanPurposeId': [''],
       'fundId': [''],
-      'submittedOnDate': [new Date(), Validators.required],
+      'submittedOnDate': [this.settingsService.businessDate, Validators.required],
       'expectedDisbursementDate': ['', Validators.required],
       'externalId': [''],
       'linkAccountId': [''],

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

@@ -19,6 +19,40 @@
             </mat-error>
           </mat-form-field>
 
+          <div fxLayout="row wrap" class="content">
+            <div fxFlex="50%" class="mat-body-strong">
+              {{ 'Principal' | translate }}
+            </div>
+
+            <div fxFlex="50%" class="r-amount">
+              {{ dataObject.principalPortion | number }}
+            </div>
+
+            <div fxFlex="50%" class="mat-body-strong">
+              {{ 'Interest' | translate }}
+            </div>
+
+            <div fxFlex="50%" class="r-amount">
+              {{ dataObject.interestPortion | number }}
+            </div>
+
+            <div fxFlex="50%" class="mat-body-strong">
+              {{ 'Fees' | translate }}
+            </div>
+
+            <div fxFlex="50%" class="r-amount">
+              {{ dataObject.feeChargesPortion | number }}
+            </div>
+
+            <div fxFlex="50%" class="mat-body-strong">
+              {{ 'Penalties' | translate }}
+            </div>
+
+            <div fxFlex="50%" class="r-amount">
+              {{ dataObject.penaltyChargesPortion | number }}
+            </div>
+          </div>
+
           <mat-form-field>
             <mat-label>Transaction Amount</mat-label>
             <input type="number" matInput required formControlName="transactionAmount">

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

@@ -19,6 +19,40 @@
             </mat-error>
           </mat-form-field>
 
+          <div fxLayout="row wrap" class="content">
+            <div fxFlex="50%" class="mat-body-strong">
+              {{ 'Principal' | translate }}
+            </div>
+
+            <div fxFlex="50%" class="r-amount">
+              {{ dataObject.principalPortion | number }}
+            </div>
+
+            <div fxFlex="50%" class="mat-body-strong">
+              {{ 'Interest' | translate }}
+            </div>
+
+            <div fxFlex="50%" class="r-amount">
+              {{ dataObject.interestPortion | number }}
+            </div>
+
+            <div fxFlex="50%" class="mat-body-strong">
+              {{ 'Fees' | translate }}
+            </div>
+
+            <div fxFlex="50%" class="r-amount">
+              {{ dataObject.feeChargesPortion | number }}
+            </div>
+
+            <div fxFlex="50%" class="mat-body-strong">
+              {{ 'Penalties' | translate }}
+            </div>
+
+            <div fxFlex="50%" class="r-amount">
+              {{ dataObject.penaltyChargesPortion | number }}
+            </div>
+          </div>
+
           <mat-form-field>
             <mat-label>Transaction Amount</mat-label>
             <input type="number" matInput required formControlName="transactionAmount">
@@ -27,19 +61,6 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
-            <mat-label>Principal</mat-label>
-            <input matInput formControlName="principal">
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>Interest Amount</mat-label>
-            <input matInput required formControlName="interestAmount">
-            <mat-error *ngIf="prepayLoanForm.controls.interestAmount.hasError('required')">
-              Interest Amount <strong>is required</strong>
-            </mat-error>
-          </mat-form-field>
-
           <mat-form-field>
             <mat-label>External Id</mat-label>
             <input matInput formControlName="externalId">

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

@@ -70,8 +70,6 @@ export class PrepayLoanComponent implements OnInit {
     this.prepayLoanForm = this.formBuilder.group({
       'transactionDate': [new Date(), Validators.required],
       'transactionAmount': ['', Validators.required],
-      'principal': [{value: '', disabled: true}],
-      'interestAmount': [{value: '', disabled: true}, Validators.required],
       'externalId': [''],
       'paymentTypeId': [''],
       'note': ['']
@@ -84,9 +82,7 @@ export class PrepayLoanComponent implements OnInit {
   setPrepayLoanDetails() {
     this.paymentTypes = this.dataObject.paymentTypeOptions;
     this.prepayLoanForm.patchValue({
-      transactionAmount: this.dataObject.amount,
+      transactionAmount: this.dataObject.amount
-      principal: this.dataObject.principalPortion,
-      interestAmount: this.dataObject.interestPortion,
     });
   }
 

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

@@ -50,6 +50,8 @@
               </span>
             </div>
 
+            <span fxFlex="auto"></span>
+
             <div fxFlex="4%">
               <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
                 yPosition="below">

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

@@ -23,7 +23,7 @@ export class RepaymentScheduleTabComponent implements OnInit {
    */
   constructor(private route: ActivatedRoute) {
     this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
-      this.loanDetailsDataRepaymentSchedule = data.loanDetailsData.repaymentSchedule;
+      this.loanDetailsDataRepaymentSchedule = data.loanDetailsData ? data.loanDetailsData.repaymentSchedule : [];
     });
   }
 

src/app/products/charges/create-charge/create-charge.component.ts

@@ -129,7 +129,8 @@ export class CreateChargeComponent implements OnInit {
         return false;
       }
       if (this.chargeForm.get('chargeAppliesTo').value === 2) {
-        if (!(this.chargeForm.get('chargeTimeType').value === 5 || this.chargeForm.get('chargeTimeType').value === 16) && chargeCalculationType.id === 2) {
+        if (!(this.chargeForm.get('chargeTimeType').value === 5 || this.chargeForm.get('chargeTimeType').value === 16
+          || this.chargeForm.get('chargeTimeType').value === 17) && chargeCalculationType.id === 2) {
           return false;
         }
       }

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

@@ -128,7 +128,7 @@ export class CloseSavingsAccountComponent implements OnInit {
       locale
     };
     this.savingsService.executeSavingsAccountCommand(this.accountId, 'close', data).subscribe(() => {
-      this.router.navigate(['../../'], { relativeTo: this.route });
+      this.router.navigate(['../../transactions'], { relativeTo: this.route });
     });
   }
 

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

@@ -0,0 +1,54 @@
+<div class="container mat-elevation-z8">
+
+  <mat-card>
+
+    <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()">
+
+      <mat-card-content fxLayout="column">
+
+        <mat-form-field>
+          <mat-label>Reason</mat-label>
+          <mat-select required formControlName="reasonForBlock">
+            <mat-option *ngFor="let codeValue of reasonOptions" [value]="codeValue.id">
+              {{ codeValue.name }}
+            </mat-option>
+          </mat-select>
+          <mat-error *ngIf="manageSavingsAccountForm.controls.reasonForBlock.hasError('required')">
+            Reason is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field fxFlex (click)="transactionDatePicker.open()" *ngIf="transactionType.holdamount">
+          <mat-label>Transaction Date</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+          <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #transactionDatePicker></mat-datepicker>
+          <mat-error *ngIf="manageSavingsAccountForm.controls.transactionDate.hasError('required')">
+            Transaction Date is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field *ngIf="transactionType.holdamount">
+          <mat-label>Transaction Amount</mat-label>
+          <input type="number" formControlName="transactionAmount" required matInput />
+          <mat-error *ngIf="manageSavingsAccountForm.controls.transactionAmount.hasError('required')">
+            Transaction Amount is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../transactions']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!manageSavingsAccountForm.valid">Confirm</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

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

@@ -0,0 +1,3 @@
+.container {
+  width: 37rem;
+}

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

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

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

@@ -0,0 +1,140 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, 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 { SystemService } from 'app/system/system.service';
+
+@Component({
+  selector: 'mifosx-manage-savings-account',
+  templateUrl: './manage-savings-account.component.html',
+  styleUrls: ['./manage-savings-account.component.scss']
+})
+export class ManageSavingsAccountComponent implements OnInit {
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Manage Savings Account form. */
+  manageSavingsAccountForm: FormGroup;
+  /** Savings Account Id */
+  savingAccountId: string;
+  transactionCommand: string;
+
+  reasonOptions: any = [];
+
+  transactionType: {
+    holdamount: boolean,
+    blockaccount: boolean,
+    unblockaccount: boolean
+  } = {
+    holdamount: false, blockaccount: false, unblockaccount: false };
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {SavingsService} savingsService Savings Service
+   * @param {Dates} dateUtils Date Utils
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   * @param {SettingsService} settingsService Setting service
+   */
+  constructor(private formBuilder: FormBuilder,
+              private savingsService: SavingsService,
+              private dateUtils: Dates,
+              private route: ActivatedRoute,
+              private router: Router,
+              private systemService: SystemService,
+              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'];
+  }
+
+  /**
+   * Creates the post interest savings form.
+   */
+  ngOnInit() {
+    this.maxDate = this.settingsService.businessDate;
+    this.createManageSavingsAccountForm();
+    if (this.transactionType.holdamount || this.transactionType.blockaccount) {
+      this.getCodeValues();
+    }
+  }
+
+  getCodeValues() {
+    let codeName = 'SavingsTransactionFreezeReasons'; // Default Hold Amount
+    if (this.transactionType.blockaccount) {
+      codeName = 'SavingsAccountBlockReasons';
+    }
+
+    this.systemService.getCodes().subscribe((codes: any) => {
+      codes.some((code: any) => {
+        if (code.name === codeName) {
+          this.systemService.getCodeValues(code.id).subscribe((codeValues: any) => {
+            this.reasonOptions = codeValues;
+            return true;
+          });
+        }
+        return false;
+      });
+    });
+  }
+
+  /**
+   * Creates the post interest savings account form.
+   */
+  createManageSavingsAccountForm() {
+    if (this.transactionType.holdamount) {
+    this.manageSavingsAccountForm = this.formBuilder.group({
+      'reasonForBlock': ['', Validators.required],
+      'transactionDate': ['', Validators.required],
+      'transactionAmount': [0.0, Validators.required]
+    });
+    } else {
+      this.manageSavingsAccountForm = this.formBuilder.group({
+        'reasonForBlock': ['', Validators.required]
+      });
+    }
+  }
+
+  submit() {
+    let command = '';
+    let payload = { };
+
+    if (this.transactionType.holdamount) {
+      const manageSavingsAccountFormData = this.manageSavingsAccountForm.value;
+      const locale = this.settingsService.language.code;
+      const dateFormat = this.settingsService.dateFormat;
+      const prevTransactionDate: Date = this.manageSavingsAccountForm.value.transactionDate;
+      if (manageSavingsAccountFormData.transactionDate instanceof Date) {
+        manageSavingsAccountFormData.transactionDate = this.dateUtils.formatDate(prevTransactionDate, dateFormat);
+      }
+      payload = {
+        ...manageSavingsAccountFormData,
+        dateFormat,
+        locale
+      };
+      command = 'holdAmount';
+
+      this.savingsService.executeSavingsAccountTransactionsCommand(this.savingAccountId, command, payload).subscribe((response: any) => {
+        console.log(response);
+        this.router.navigate(['../../transactions'], { relativeTo: this.route });
+      });
+    } else {
+      payload = {
+        ... this.manageSavingsAccountForm.value
+      }
+      if (this.transactionType.blockaccount) {
+        command = 'block';
+      }
+
+      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,3 +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>

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

@@ -27,6 +27,9 @@ export class SavingAccountActionsComponent {
     'Unassign Staff': boolean
     'Withdraw By Client': boolean
     'Apply Annual Fees': boolean
+    'Hold Amount': boolean
+    'Block Account': boolean
+    'Unblock Account': boolean
   } = {
     'Approve': false,
     'Reject': false,
@@ -40,7 +43,10 @@ export class SavingAccountActionsComponent {
     'Add Charge': false,
     'Unassign Staff': false,
     'Withdraw By Client': false,
-    'Apply Annual Fees': false
+    'Apply Annual Fees': false,
+    'Hold Amount': false,
+    'Block Account': false,
+    'Unblock Account': false
   };
 
   /**

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

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Release Amount</h1>
+<div mat-dialog-content>
+  <p>Are you sure you want to release this amount ?</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>
+</mat-dialog-actions>

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

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

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

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'mifosx-release-amount-dialog',
+  templateUrl: './release-amount-dialog.component.html',
+  styleUrls: ['./release-amount-dialog.component.scss']
+})
+export class ReleaseAmountDialogComponent {
+
+  /**
+   * @param {MatDialogRef} dialogRef Component reference to dialog.
+   */
+  constructor(public dialogRef: MatDialogRef<ReleaseAmountDialogComponent>) { }
+
+}

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

@@ -135,6 +135,9 @@ export class SavingsAccountViewComponent implements OnInit {
       case 'Post Interest As On':
       case 'Assign Staff':
       case 'Add Charge':
+      case 'Hold Amount':
+      case 'Block Account':
+      case 'Unblock Account':
       case 'Unassign Staff':
       case 'Withdraw By Client':
       case 'Apply Annual Fees':

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

@@ -39,6 +39,11 @@ export class SavingsButtonsConfiguration {
             icon: 'arrow-down',
             taskPermissionName: 'WITHDRAW_SAVINGSACCOUNT'
           },
+          {
+            name: 'Hold Amount',
+            icon: 'lock',
+            taskPermissionName: 'HOLDAMOUNT_SAVINGSACCOUNT'
+          },
           {
             name: 'Calculate Interest',
             icon: 'table',

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

@@ -1,17 +1,20 @@
 <div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%"
   *ngIf="!(transactionData.interestedPostedAsOn === false && (transactionData.transactionType.id === 17 || transactionData.transactionType.id === 3))">
   <span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
-    <button mat-raised-button color="primary" 
+    <button mat-raised-button color="primary" *ngIf="transactionData.transactionType.value == 'Transfer' || transactionData.reversed == 'true'
-      *ngIf="transactionData.transactionType.value == 'Transfer' || transactionData.reversed == 'true' 
+        || transactionData.transactionType.id==3 || transactionData.transactionType.id==17" [routerLink]="'edit'">
-        || transactionData.transactionType.id==3 || transactionData.transactionType.id==17"
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
-      [routerLink]="'edit'">
-      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
     </button>
   </span>
-  <button mat-raised-button color="warn"
+  <span *ngIf="!transactionData.reversed && transactionData.transactionType.amountHold">
-    *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+    <button mat-raised-button color="primary" *mifosxHasPermission="'RELEASEAMOUNT_SAVINGSACCOUNT'"
-    (click)="undoTransaction()">
+      (click)="releaseAmount()">
-    <fa-icon icon="undo"></fa-icon>&nbsp;&nbsp;Undo
+      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>Release Amount
+    </button>
+  </span>
+  <button mat-raised-button color="warn" *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+    (click)="undoTransaction()" [disabled]="transactionData.reversed">
+    <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
   </button>
 </div>
 
@@ -44,7 +47,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.date  | dateFormat }}
+          {{ transactionData.date | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -125,6 +128,9 @@
 
       </div>
 
+      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
+      </div>
     </mat-card-content>
 
   </mat-card>

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

@@ -10,6 +10,7 @@ import { SettingsService } from 'app/settings/settings.service';
 /** Custom Dialogs */
 import { UndoTransactionDialogComponent } from '../../custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component';
 import { Dates } from 'app/core/utils/dates';
+import { ReleaseAmountDialogComponent } from '../../custom-dialogs/release-amount-dialog/release-amount-dialog.component';
 
 /**
  * View Transaction Component.
@@ -25,6 +26,8 @@ export class ViewTransactionComponent {
   /** Transaction data. */
   transactionData: any;
 
+  accountId: string;
+
   /**
    * Retrieves the Transaction data from `resolve`.
    * @param {SavingsService} savingsService Savings Service
@@ -41,7 +44,9 @@ export class ViewTransactionComponent {
               public dialog: MatDialog,
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { savingsAccountTransaction: any }) => {
+      this.accountId = this.route.parent.snapshot.params['savingAccountId'];
       this.transactionData = data.savingsAccountTransaction;
+      console.log(this.transactionData);
     });
   }
 
@@ -49,7 +54,6 @@ export class ViewTransactionComponent {
    * Undo the savings transaction
    */
   undoTransaction() {
-    const accountId = this.route.parent.snapshot.params['savingAccountId'];
     const undoTransactionAccountDialogRef = this.dialog.open(UndoTransactionDialogComponent);
     undoTransactionAccountDialogRef.afterClosed().subscribe((response: any) => {
       if (response.confirm) {
@@ -61,7 +65,19 @@ export class ViewTransactionComponent {
           dateFormat,
           locale
         };
-        this.savingsService.executeSavingsAccountTransactionsCommand(accountId, 'undo', data, this.transactionData.id).subscribe(() => {
+        this.savingsService.executeSavingsAccountTransactionsCommand(this.accountId, 'undo', data, this.transactionData.id).subscribe(() => {
+          this.router.navigate(['../'], { relativeTo: this.route });
+        });
+      }
+    });
+  }
+
+  releaseAmount() {
+    const releaseAmountDialogRef = this.dialog.open(ReleaseAmountDialogComponent);
+    releaseAmountDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.confirm) {
+        const data = { };
+        this.savingsService.executeSavingsAccountTransactionsCommand(this.accountId, 'releaseAmount', data, this.transactionData.id).subscribe(() => {
           this.router.navigate(['../'], { relativeTo: this.route });
         });
       }

src/app/savings/savings.module.ts

@@ -47,6 +47,8 @@ import { EditTransactionComponent } from './savings-account-view/transactions/ed
 import { ApplyAnnualFeesSavingsAccountComponent } from './saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component';
 import { GsimAccountComponent } from './gsim-account/gsim-account.component';
 import { CreateGsimAccountComponent } from './gsim-account/create-gsim-account/create-gsim-account.component';
+import { ManageSavingsAccountComponent } from './saving-account-actions/manage-savings-account/manage-savings-account.component';
+import { ReleaseAmountDialogComponent } from './savings-account-view/custom-dialogs/release-amount-dialog/release-amount-dialog.component';
 
 
 /**
@@ -100,7 +102,9 @@ import { CreateGsimAccountComponent } from './gsim-account/create-gsim-account/c
     EditTransactionComponent,
     ApplyAnnualFeesSavingsAccountComponent,
     GsimAccountComponent,
-    CreateGsimAccountComponent
+    CreateGsimAccountComponent,
+    ManageSavingsAccountComponent,
+    ReleaseAmountDialogComponent
   ],
   providers: [ ]
 })