refactor: savings module (#1226)

See: #1196

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

@@ -108,7 +108,7 @@ const routes: Routes = [
               }
             },
             {
-              path: 'savingsaccounts',
+              path: 'savings-accounts',
               loadChildren: () => import('../savings/savings.module').then(m => m.SavingsModule)
             }
           ]

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

@@ -65,7 +65,9 @@
       <button mat-raised-button *mifosxHasPermission="'CREATE_GROUP'"><i class="fa fa-plus"></i> Add Group </button>
       <button mat-raised-button *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')"> <i class="fa fa-edit"></i> Manage Groups </button>
       <span  *ngIf="centerViewData.active">
-      <button mat-raised-button *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"> <i class="fa fa-file"></i> Centers Saving Application</button>
+      <button mat-raised-button *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'" [routerLink]="['savings-accounts', 'create']">
+        <i class="fa fa-file"></i> Centers Saving Application
+      </button>
       </span>
       <button mat-raised-button [matMenuTriggerFor]="More"> More </button>
       <mat-menu #More="matMenu">

src/app/centers/centers-view/general-tab/general-tab.component.html

@@ -19,6 +19,7 @@
 
   <!-- Groups -->
   <ng-container *ngIf="groupResourceData.length > 0">
+
     <h3>Groups</h3>
 
     <table mat-table [dataSource]="groupResourceData" matSort>
@@ -49,6 +50,7 @@
       <tr mat-row *matRowDef="let row; columns: groupsColumns;" [routerLink]="['/groups', row.id, 'general']"></tr>
   
     </table>
+
   </ng-container>
   
   <!-- savings overview table -->
@@ -78,63 +80,51 @@
         </ng-container>
     
         <ng-container matColumnDef="Actions">
-  
           <th mat-header-cell *matHeaderCellDef> Actions </th>
-  
           <td mat-cell *matCellDef="let element">
-  
             <ng-container *ngIf="element.status.active">
-  
-              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id == '100'">
+              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id == '100'"
+                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
                 <i class="fa fa-arrow-right" matTooltip="Deposit"></i>
               </button>
-  
-              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id == '300'">
-                <i class="fa fa-arrow-right" matTooltip[="Deposit"]></i>
+              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id == '300'"
+                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
+                <i class="fa fa-arrow-right" matTooltip="Deposit"></i>
               </button>
-  
-              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id == '100'">
+              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id == '100'"
+                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
                 <i class="fa fa-arrow-left" matTooltip="Withdraw"></i>
               </button>
-  
-              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id == '300'">
+              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id == '300'"
+                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
                 <i class="fa fa-arrow-left" matTooltip="Withdraw"></i>
               </button>
-  
             </ng-container>
-  
             <ng-container *ngIf="element.status.submittedAndPendingApproval">
-  
-              <button class="account-action-button" mat-raised-button color="primary">
+              <button class="account-action-button" mat-raised-button color="primary"
+                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Approve']">
                 <i class="fa fa-check" matTooltip="Approve"></i>
               </button>
-  
             </ng-container>
-  
             <ng-container *ngIf="!element.status.submittedAndPendingApproval && !element.status.active">
-              
-              <button class="account-action-button" mat-raised-button color="primary">
+              <button class="account-action-button" mat-raised-button color="primary"
+                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Undo Approval']">
                 <i class="fa fa-undo" matTooltip="Undo Approve"></i>
               </button>
-              
-              <button class="account-action-button" mat-raised-button color="primary">
+              <button class="account-action-button" mat-raised-button color="primary"
+                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Activate']">
                 <i class="fa fa-power-off" matTooltip="Activate"></i>
-  
               </button>
-  
             </ng-container>
-  
           </td>
-  
         </ng-container>
     
         <tr mat-header-row *matHeaderRowDef="savingsAccountColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: savingsAccountColumns;" [routerLink]="['../', 'savingsaccounts', row.id, 'transactions']"></tr>
+        <tr mat-row *matRowDef="let row; columns: savingsAccountColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
       </table>
   
     </ng-container>
 
-  </ng-container>
-  
+  </ng-container> 
 
 </div>

src/app/centers/centers-view/general-tab/general-tab.component.ts

@@ -45,4 +45,13 @@ export class GeneralTabComponent implements OnInit {
   ngOnInit() {
   }
 
+
+  /**
+   * Stops the propagation to view pages.
+   * @param $event Mouse Event
+   */
+  routeEdit($event: MouseEvent) {
+    $event.stopPropagation();
+  }
+
 }

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

@@ -238,7 +238,7 @@ const routes: Routes = [
             loadChildren: () => import('../deposits/fixed-deposits/fixed-deposits.module').then(m => m.FixedDepositsModule)
           },
           {
-            path: 'savingsaccounts',
+            path: 'savings-accounts',
             loadChildren: () => import('../savings/savings.module').then(m => m.SavingsModule)
           },
           {

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

@@ -63,7 +63,7 @@
         <i class="fa fa-file"></i>Applications</button>
       <mat-menu #Applications="matMenu">
         <button mat-menu-item [routerLink]="['loans', 'create-loans-account']">New Loan Account</button>
-        <button mat-menu-item [routerLink]="['savingsaccounts', 'create-savings-account']">New Savings Account</button>
+        <button mat-menu-item [routerLink]="['savings-accounts', 'create']">New Savings Account</button>
         <button mat-menu-item *mifosxHasPermission="'CREATE_SHAREACCOUNT'" [routerLink]="['shares-accounts', 'create']">New Share Account</button>
         <button mat-menu-item *mifosxHasPermission="'CREATE_RECURRINGDEPOSITACCOUNT'" [routerLink]="['recurringdeposits', 'create-recurring-deposits-account']">New Recurring Deposit Account</button>
         <button mat-menu-item *mifosxHasPermission="'CREATE_FIXEDDEPOSITACCOUNT'" [routerLink]="['fixed-deposits-accounts', 'create']">New Fixed Deposits Account</button>

src/app/clients/clients-view/general-tab/general-tab.component.html

@@ -262,25 +262,25 @@
       <th mat-header-cell *matHeaderCellDef> Actions </th>
       <td mat-cell *matCellDef="let element">
         <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
-          (click)="routeEdit($event)" [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Deposit']">
+          (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
           <i class="fa fa-arrow-up"></i>
         </button>
         <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
-          (click)="routeEdit($event)" [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Withdrawal']">
+          (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
           <i class="fa fa-arrow-down"></i>
         </button>
         <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
-          color="primary" (click)="routeEdit($event)" [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Approve']">
+          color="primary" (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Approve']">
           <i class="fa fa-check"></i>
         </button>
         <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
           class="account-action-button" mat-raised-button color="primary"
-          [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Undo Approval']">
+          [routerLink]="['../','savings-accounts', element.id, 'actions', 'Undo Approval']">
           <i class="fa fa-undo"></i>
         </button>
         <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
           class="account-action-button" mat-raised-button color="primary"
-          [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Activate']">
+          [routerLink]="['../','savings-accounts', element.id, 'actions', 'Activate']">
           <i class="fa fa-check-circle"></i>
         </button>
       </td>
@@ -288,12 +288,11 @@
 
     <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: openSavingsColumns;"
-      [routerLink]="['../', 'savingsaccounts', row.id, 'transactions']"></tr>
+      [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
 
   </table>
 
   <!-- Closed Saving Accounts -->
-
   <table *ngIf="showClosedSavingAccounts" mat-table
     [dataSource]="savingAccounts|accountsFilter:'saving':'closed':'isSavings'">
 
@@ -314,7 +313,7 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;" [routerLink]="['../', 'savingsaccounts', row.id, 'transactions']"></tr>
+    <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
 
   </table>
 

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

@@ -139,7 +139,7 @@ const routes: Routes = [
               loadChildren: () => import('../loans/loans.module').then(m => m.LoansModule)
             },
             {
-              path: 'savingsaccounts',
+              path: 'savings-accounts',
               loadChildren: () => import('../savings/savings.module').then(m => m.SavingsModule)
             }
           ]

src/app/groups/groups-view/general-tab/general-tab.component.html

@@ -233,29 +233,33 @@
       <ng-container matColumnDef="Actions">
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let element">
-          <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+          <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
+            (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
             <i class="fa fa-arrow-up" matTooltip="Deposit"></i>
           </button>
-          <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+          <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
+            (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
             <i class="fa fa-arrow-down" matTooltip="Withdraw"></i>
           </button>
-          <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
-            color="primary">
+          <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button color="primary"
+            (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Approve']">
             <i class="fa fa-check" matTooltip="Approve"></i>
           </button>
           <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-            class="account-action-button" mat-raised-button color="primary">
+            class="account-action-button" mat-raised-button color="primary"
+            (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Undo Approval']">
             <i class="fa fa-undo" matTooltip="Undo Approval"></i>
           </button>
           <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-            class="account-action-button" mat-raised-button color="primary">
+            class="account-action-button" mat-raised-button color="primary"
+            (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Activate']">
             <i class="fa fa-check-circle" matTooltip="Activate"></i>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: openSavingsColumns;" [routerLink]="['../', 'savingsaccounts', row.id, 'transactions']"></tr>
+      <tr mat-row *matRowDef="let row; columns: openSavingsColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
 
     </table>
 
@@ -280,7 +284,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;" [routerLink]="['../', 'savingsaccounts', row.id, 'transactions']"></tr>
+      <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
 
     </table>
 

src/app/groups/groups-view/general-tab/general-tab.component.ts

@@ -67,4 +67,12 @@ export class GeneralTabComponent {
     this.showClosedSavingAccounts = !this.showClosedSavingAccounts;
   }
 
+  /**
+   * Stops the propagation to view pages.
+   * @param $event Mouse Event
+   */
+  routeEdit($event: MouseEvent) {
+    $event.stopPropagation();
+  }
+
 }

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

@@ -66,12 +66,12 @@
         <button mat-raised-button *mifosxHasPermission="'TRANSFERCLIENTS_GROUP'" (click)="doAction('Manage Members')">
           <i class="fa fa-user"></i>Manage Members</button>
 
-        <button mat-raised-button *ngIf="groupViewData.active" [matMenuTriggerFor]="LoanApplications">
-          <i class="fa fa-file"></i>Loan Applications</button>
-        <mat-menu #LoanApplications="matMenu">
+        <button mat-raised-button *ngIf="groupViewData.active" [matMenuTriggerFor]="AccountApplications">
+          <i class="fa fa-file"></i>Applications</button>
+        <mat-menu #AccountApplications="matMenu">
           <span *ngIf="groupViewData.clientMembers">
             <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'">Bulk JLG Loan Application</button></span>
-          <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'">Group Saving Application</button>
+          <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'" [routerLink]="['savings-accounts', 'create']">Group Saving Application</button>
           <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'">Group Loan Application</button>
         </mat-menu>
 

src/app/notifications/notifications-page/notifications-page.component.ts

@@ -34,7 +34,7 @@ export class NotificationsPageComponent implements OnInit {
     'shareAccount' : '/shares-accounts/',
     'fixedDeposit' : '/fixed-deposits-accounts/',
     'recurringDepositAccount': '/recurringdeposits/',
-    'savingsAccount' : '/savingsaccounts/',
+    'savingsAccount' : '/savings-accounts/',
     'shareProduct': '/products/share-products/',
     'loanProduct' : '/products/loan-products/'
   };

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

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
-import { Observable } from 'rxjs';
+import { Observable, forkJoin } from 'rxjs';
 
 /** Custom Services */
 import { SavingsService } from '../savings.service';
@@ -34,8 +34,14 @@ export class SavingsAccountActionsResolver implements Resolve<Object> {
         return this.savingsService.getSavingsChargeTemplateResource(savingAccountId);
       case 'Withdrawal':
       case 'Deposit':
-      case 'Close':
         return this.savingsService.getSavingsTransactionTemplateResource(savingAccountId);
+      case 'Close':
+        return forkJoin([
+          this.savingsService.getSavingsTransactionTemplateResource(savingAccountId),
+          this.savingsService.getSavingsAccountData(savingAccountId)
+        ]);
+      case 'Apply Annual Fees':
+        return this.savingsService.getSavingsAccountData(savingAccountId);
       default:
         return undefined;
     }

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

@@ -25,8 +25,9 @@ export class SavingsAccountTemplateResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const clientId = route.parent.parent.paramMap.get('clientId');
-    return this.savingsService.getSavingsAccountTemplate(clientId);
+    const entityId = route.paramMap.get('clientId') || route.paramMap.get('groupId') || route.paramMap.get('centerId');
+    const isGroup = (route.paramMap.get('groupId') || route.paramMap.get('centerId')) ? true : false;
+    return this.savingsService.getSavingsAccountTemplate(entityId, undefined, isGroup);
   }
 
 }

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

@@ -103,7 +103,6 @@ export class CreateSavingsAccountComponent {
     const monthDayFormat = 'dd MMMM';
     const savingsAccount = {
       ...this.savingsAccount,
-      clientId: this.savingsAccountTemplate.clientId,
       charges: this.savingsAccount.charges.map((charge: any) => ({
         chargeId: charge.id,
         amount: charge.amount,
@@ -116,6 +115,11 @@ export class CreateSavingsAccountComponent {
       monthDayFormat,
       locale
     };
+    if (this.savingsAccountTemplate.clientId) {
+      savingsAccount.clientId = this.savingsAccountTemplate.clientId;
+    } else {
+      savingsAccount.groupId = this.savingsAccountTemplate.groupId;
+    }
     this.savingsService.createSavingsAccount(savingsAccount).subscribe((response: any) => {
       this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
     });

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

@@ -108,7 +108,6 @@ export class EditSavingsAccountComponent {
     const monthDayFormat = 'dd MMMM';
     const savingsAccount = {
       ...this.savingsAccount,
-      clientId: this.savingsAccountAndTemplate.clientId,
       charges: this.savingsAccount.charges.map((charge: any) => ({
         chargeId: charge.id,
         amount: charge.amount,
@@ -121,6 +120,11 @@ export class EditSavingsAccountComponent {
       monthDayFormat,
       locale
     };
+    if (this.savingsAccountAndTemplate.clientId) {
+      savingsAccount.clientId = this.savingsAccountAndTemplate.clientId;
+    } else {
+      savingsAccount.groupId = this.savingsAccountAndTemplate.groupId;
+    }
     this.savingsService.updateSavingsAccount(this.savingsAccountAndTemplate.id, savingsAccount).subscribe((response: any) => {
       this.router.navigate(['../'], { relativeTo: this.route });
     });

src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component.ts

@@ -43,8 +43,8 @@ export class ApplyAnnualFeesSavingsAccountComponent implements OnInit {
               private route: ActivatedRoute,
               private router: Router) {
     this.accountId = this.route.parent.snapshot.params['savingAccountId'];
-    this.route.parent.data.subscribe((data: { savingsAccountData: any }) => {
-      this.savingsAccountData = data.savingsAccountData;
+    this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
+      this.savingsAccountData = data.savingsAccountActionData;
     });
   }
 

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

@@ -45,10 +45,8 @@ export class CloseSavingsAccountComponent implements OnInit {
               private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
-      this.paymentTypeOptions = data.savingsAccountActionData.paymentTypeOptions;
-    });
-    this.route.parent.data.subscribe((data: { savingsAccountData: any }) => {
-      this.transactionAmount = data.savingsAccountData.summary.accountBalance;
+      this.paymentTypeOptions = data.savingsAccountActionData[0].paymentTypeOptions;
+      this.transactionAmount = data.savingsAccountActionData[1].summary.accountBalance;
     });
     this.accountId = this.route.parent.snapshot.params['savingAccountId'];
   }

src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.ts

@@ -5,7 +5,6 @@ import { FormControl } from '@angular/forms';
 import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 
 /** Custom Models */
@@ -180,15 +179,8 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
    * @param {any} charge Charge
    */
   deleteCharge(charge: any) {
-    const deleteChargeDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `charge ${charge.name}` }
-    });
-    deleteChargeDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1);
-        this.chargesDataSource = this.chargesDataSource.concat([]);
-      }
-    });
+    this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1);
+    this.chargesDataSource = this.chargesDataSource.concat([]);
     this.pristine = false;
   }
 

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

@@ -74,9 +74,10 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
    * Fetches savings account product template on productId value changes
    */
   buildDependencies() {
-    const clientId = this.savingsAccountTemplate.clientId;
+    const entityId = this.savingsAccountTemplate.clientId || this.savingsAccountTemplate.groupId;
     this.savingsAccountDetailsForm.get('productId').valueChanges.subscribe((productId: string) => {
-      this.savingsService.getSavingsAccountTemplate(clientId, productId).subscribe((response: any) => {
+      this.savingsService.getSavingsAccountTemplate(entityId, productId, this.savingsAccountTemplate.groupId ? true : false)
+      .subscribe((response: any) => {
         this.savingsAccountProductTemplate.emit(response);
         this.fieldOfficerData = response.fieldOfficerOptions;
         if (!this.isFieldOfficerPatched && this.savingsAccountTemplate.fieldOfficerId) {

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

@@ -248,9 +248,9 @@ export class ChargesTabComponent implements OnInit {
    * TODO: Replace by a custom reload component instead of hard-coded back-routing.
    */
   private reload() {
-    const clientId = this.savingsAccountData.clientId;
     const url: string = this.router.url;
-    this.router.navigateByUrl(`/clients/${clientId}/savingsaccounts`, {skipLocationChange: true})
+    const refreshUrl: string = this.router.url.slice(0, this.router.url.indexOf('savings-accounts') + 'savings-accounts'.length);
+    this.router.navigateByUrl(refreshUrl, {skipLocationChange: true})
       .then(() => this.router.navigate([url]));
   }
 

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

@@ -21,7 +21,7 @@
         </mat-card-title>
         <mat-card-subtitle>
           <p>
-            Account #: {{savingsAccountData.accountNo}} | Client Name: {{savingsAccountData.clientName}}<br/>
+            Account #: {{savingsAccountData.accountNo}} | {{entityType}} Name: {{savingsAccountData.clientName || savingsAccountData.groupName}}<br/>
             <span *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
               Current Balance: {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.accountBalance}}<br/>
               Available Balance: {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.availableBalance}}<br/>

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

@@ -29,6 +29,8 @@ export class SavingsAccountViewComponent implements OnInit {
   savingsDatatables: any;
   /** Button Configurations */
   buttonConfig: SavingsButtonsConfiguration;
+  /** Entity Type */
+  entityType: string;
 
   /**
    * Fetches savings account data from `resolve`
@@ -44,6 +46,13 @@ export class SavingsAccountViewComponent implements OnInit {
       this.savingsAccountData = data.savingsAccountData;
       this.savingsDatatables = data.savingsDatatables;
     });
+    if (this.router.url.includes('clients')) {
+      this.entityType = 'Client';
+    } else if (this.router.url.includes('groups')) {
+      this.entityType = 'Group';
+    } else if (this.router.url.includes('centers')) {
+      this.entityType = 'Center';
+    }
   }
 
   ngOnInit() {
@@ -101,13 +110,13 @@ export class SavingsAccountViewComponent implements OnInit {
 
 
   /**
-   * Refetches data fot the component
+   * Refetches data foe the component
    * TODO: Replace by a custom reload component instead of hard-coded back-routing.
    */
-  reload() {
-    const clientId = this.savingsAccountData.clientId;
+  private reload() {
     const url: string = this.router.url;
-    this.router.navigateByUrl(`/clients/${clientId}/savingsaccounts`, {skipLocationChange: true})
+    const refreshUrl: string = this.router.url.slice(0, this.router.url.indexOf('savings-accounts') + 'savings-accounts'.length);
+    this.router.navigateByUrl(refreshUrl, {skipLocationChange: true})
       .then(() => this.router.navigate([url]));
   }
 
@@ -135,7 +144,7 @@ export class SavingsAccountViewComponent implements OnInit {
         this.router.navigate([`actions/Withdrawal`], { relativeTo: this.route });
         break;
       case 'Modify Application':
-        this.router.navigate(['edit-savings-account'], { relativeTo: this.route });
+        this.router.navigate(['edit'], { relativeTo: this.route });
         break;
       case 'Delete':
         this.deleteSavingsAccount();

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

@@ -5,7 +5,7 @@
       <h3>All Transactions</h3>
     </div>
     <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
-      <button mat-raised-button color="primary">View Journal Entries</button>
+      <button mat-raised-button color="primary" [routerLink]="['/accounting', 'journal-entries']">View Journal Entries</button>
       <button mat-raised-button color="primary" [routerLink]="['export']">Export</button>
     </div>
   </div>

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

@@ -29,7 +29,7 @@ export class TransactionsTabComponent implements OnInit {
   constructor(private route: ActivatedRoute,
               private router: Router) {
     this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
-      this.transactionsData = data.savingsAccountData.transactions.filter((transaction: any) => !transaction.reversed);
+      this.transactionsData = data.savingsAccountData.transactions?.filter((transaction: any) => !transaction.reversed);
       this.status = data.savingsAccountData.status.value;
     });
   }

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

@@ -49,7 +49,7 @@ export class ViewChargeComponent {
     this.route.data.subscribe((data: { savingsAccountCharge: any }) => {
       this.chargeData = data.savingsAccountCharge;
     });
-    this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
+    this.route.data.subscribe((data: { savingsAccountData: any }) => {
       this.savingsAccountData = data.savingsAccountData;
     });
   }
@@ -194,9 +194,9 @@ export class ViewChargeComponent {
    * TODO: Replace by a custom reload component instead of hard-coded back-routing.
    */
   private reload() {
-    const clientId = this.savingsAccountData.clientId;
     const url: string = this.router.url.replace(`/${this.chargeData.id}`, '');
-    this.router.navigateByUrl(`/clients/${clientId}/savingsaccounts`, {skipLocationChange: true})
+    const refreshUrl: string = this.router.url.slice(0, this.router.url.indexOf('savings-accounts') + 'savings-accounts'.length);
+    this.router.navigateByUrl(refreshUrl, {skipLocationChange: true})
       .then(() => this.router.navigate([url]));
   }
 

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

@@ -32,14 +32,14 @@ import { SavingsAccountActionsResolver } from './common-resolvers/savings-accoun
 import { SavingsTransactionRecieptResolver } from './common-resolvers/savings-transaction-reciept.resolver';
 import { SavingsAccountTransactionTemplateResolver } from './common-resolvers/savings-account-transaction-template.resolver';
 
-
+/** Savings Routes */
 const routes: Routes = [
   {
     path: '',
     data: { title: extract('All Savings'), breadcrumb: 'Savings', routeParamBreadcrumb: false },
     children: [
       {
-        path: 'create-savings-account',
+        path: 'create',
         data: { title: extract('Create Savings Account'), breadcrumb: 'Create Savings Account' },
         component: CreateSavingsAccountComponent,
         resolve: {
@@ -49,14 +49,12 @@ const routes: Routes = [
       {
         path: ':savingAccountId',
         data: { title: extract('Saving Account View'), routeParamBreadcrumb: 'savingAccountId' },
-        resolve: {
-          savingsAccountData: SavingsAccountViewResolver
-        },
         children: [
           {
             path: '',
             component: SavingsAccountViewComponent,
             resolve: {
+              savingsAccountData: SavingsAccountViewResolver,
               savingsDatatables: SavingsDatatablesResolver
             },
             children: [
@@ -101,7 +99,7 @@ const routes: Routes = [
             ]
           },
           {
-            path: 'edit-savings-account',
+            path: 'edit',
             data: { title: extract('Edit Savings Account'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
             component: EditSavingsAccountComponent,
             resolve: {
@@ -164,6 +162,7 @@ const routes: Routes = [
                 data: { routeParamBreadcrumb: 'id' },
                 component: ViewChargeComponent,
                 resolve: {
+                  savingsAccountData: SavingsAccountViewResolver,
                   savingsAccountCharge: SavingsAccountChargeResolver
                 }
               }

src/app/savings/savings.service.ts

@@ -140,11 +140,11 @@ export class SavingsService {
   }
 
   /**
-   * @param clientId Client Id assosciated with savings account.
+   * @param entityId Entity Id assosciated with savings account.
    * @returns {Observable<any>} Savings account template.
    */
-  getSavingsAccountTemplate(clientId: string, productId?: string): Observable<any> {
-    let httpParams = new HttpParams().set('clientId', clientId);
+  getSavingsAccountTemplate(entityId: string, productId?: string, isGroup?: boolean): Observable<any> {
+    let httpParams = new HttpParams().set( isGroup ? 'groupId' : 'clientId', entityId);
     httpParams = productId ? httpParams.set('productId', productId) : httpParams;
     return this.http.get('/savingsaccounts/template', { params: httpParams });
   }

src/app/search/search-page/search-page.component.ts

@@ -51,7 +51,7 @@ export class SearchPageComponent {
         this.router.navigate(['clients', entity.parentId, 'shares-accounts', entity.entityId]);
         break;
       case 'SAVING':
-        this.router.navigate(['clients', entity.parentId, 'savingsaccounts', entity.entityId]);
+        this.router.navigate(['clients', entity.parentId, 'savings-accounts', entity.entityId]);
         break;
       case 'LOAN':
         this.router.navigate(['clients', entity.parentId, 'loans', entity.entityId]);

src/app/shared/notifications-tray/notifications-tray.component.ts

@@ -39,7 +39,7 @@ export class NotificationsTrayComponent implements OnInit, OnDestroy {
     'shareAccount' : '/shares-accounts/',
     'fixedDeposit' : '/fixed-deposits-accounts/',
     'recurringDepositAccount': '/recurringdeposits/',
-    'savingsAccount' : '/savingsaccounts/',
+    'savingsAccount' : '/savings-accounts/',
     'shareProduct': '/products/share-products/',
     'loanProduct' : '/products/loan-products/'
   };