feat: add edit savings account page (#884)

Fixes: #222

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

@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { SavingsService } from '../savings.service';
+
+/**
+ * Savings Account data and template resolver.
+ */
+@Injectable()
+export class SavingsAccountAndTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {SavingsService} SavingsService Savings service.
+   */
+  constructor(private savingsService: SavingsService) { }
+
+  /**
+   * Returns the Savings Account data and template.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const savingAccountId = route.paramMap.get('savingAccountId');
+    return this.savingsService.getSavingsAccountAndTemplate(savingAccountId, true);
+  }
+
+}

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

@@ -0,0 +1,78 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
+
+    <ng-template matStepperIcon="number">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="edit">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="done">
+      <fa-icon icon="check" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="error">
+      <fa-icon icon="exclamation-triangle" size="lg"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="preview">
+      <fa-icon icon="eye" size="sm"></fa-icon>
+    </ng-template>
+
+    <mat-step [stepControl]="savingsAccountDetailsForm">
+
+      <ng-template matStepLabel>DETAILS</ng-template>
+
+      <mifosx-savings-account-details-step
+        [savingsAccountTemplate]="savingsAccountAndTemplate" 
+        (savingsAccountProductTemplate)="setTemplate($event)"
+      >
+      </mifosx-savings-account-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="savingsAccountTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-savings-account-terms-step 
+        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+        [savingsAccountTemplate]="savingsAccountAndTemplate"
+      ></mifosx-savings-account-terms-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-savings-account-charges-step
+        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+        [savingsAccountTemplate]="savingsAccountAndTemplate"
+        [currencyCode]="savingsAccountTermsForm.get('currencyCode')"
+      >
+      </mifosx-savings-account-charges-step>
+
+    </mat-step>
+
+    <mat-step *ngIf="savingsAccountFormValidAndNotPristine" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-savings-account-preview-step
+        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+        [savingsAccountTemplate]="savingsAccountAndTemplate"
+        [savingsAccountTermsForm]="savingsAccountTermsForm"
+        [savingsAccount]="savingsAccount"
+        (submit)="submit()"
+      >
+      </mifosx-savings-account-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>

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

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

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

@@ -0,0 +1,129 @@
+/** Angular Imports */
+import { Component, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Components */
+import { SavingsAccountDetailsStepComponent } from '../savings-account-stepper/savings-account-details-step/savings-account-details-step.component';
+import { SavingsAccountTermsStepComponent } from '../savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component';
+import { SavingsAccountChargesStepComponent } from '../savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component';
+
+/** Custom Services */
+import { SavingsService } from '../savings.service';
+
+/**
+ * Edit Savings Account Component
+ */
+@Component({
+  selector: 'mifosx-edit-savings-account',
+  templateUrl: './edit-savings-account.component.html',
+  styleUrls: ['./edit-savings-account.component.scss']
+})
+export class EditSavingsAccountComponent {
+
+  /** Savings Account Template */
+  savingsAccountAndTemplate: any;
+  /** Savings Account Product Template */
+  savingsAccountProductTemplate: any;
+
+  /** Savings Account Details Step */
+  @ViewChild(SavingsAccountDetailsStepComponent) savingsAccountDetailsStep: SavingsAccountDetailsStepComponent;
+  /** Savings Account Terms Step */
+  @ViewChild(SavingsAccountTermsStepComponent) savingsAccountTermsStep: SavingsAccountTermsStepComponent;
+  /** Savings Account Charges Step */
+  @ViewChild(SavingsAccountChargesStepComponent) savingsAccountChargesStep: SavingsAccountChargesStepComponent;
+
+  /**
+   * Fetches savings account template from `resolve`
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   * @param {DatePipe} datePipe Date Pipe
+   * @param {SavingsService} savingsService Savings Service
+   */
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private savingsService: SavingsService
+              ) {
+    this.route.data.subscribe((data: { savingsAccountAndTemplate: any }) => {
+      this.savingsAccountAndTemplate = data.savingsAccountAndTemplate;
+    });
+  }
+
+  /**
+   * Sets savings account product template.
+   * @param {any} $event API response
+   */
+  setTemplate($event: any) {
+    this.savingsAccountProductTemplate = $event;
+  }
+
+  /**
+   * Retrieves savings account details form.
+   */
+  get savingsAccountDetailsForm() {
+    return this.savingsAccountDetailsStep.savingsAccountDetailsForm;
+  }
+
+  /**
+   * Retrieves savings account terms form.
+   */
+  get savingsAccountTermsForm() {
+    return this.savingsAccountTermsStep.savingsAccountTermsForm;
+  }
+
+  /**
+   * Checks validity and pristinity of overall savings account form .
+   */
+  get savingsAccountFormValidAndNotPristine() {
+    return (
+      this.savingsAccountDetailsForm.valid &&
+      this.savingsAccountTermsForm.valid &&
+      (
+        !this.savingsAccountDetailsForm.pristine ||
+        !this.savingsAccountTermsForm.pristine ||
+        !this.savingsAccountChargesStep.pristine
+      )
+    );
+  }
+
+  /**
+   * Retrieves savings account object.
+   */
+  get savingsAccount() {
+    return {
+      ...this.savingsAccountDetailsStep.savingsAccountDetails,
+      ...this.savingsAccountTermsStep.savingsAccountTerms,
+      ...this.savingsAccountChargesStep.savingsAccountCharges
+    };
+  }
+
+  /**
+   * Creates a new share account.
+   */
+  submit() {
+    // TODO: Update once language and date settings are setup
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    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,
+        dueDate: this.datePipe.transform(charge.dueDate, dateFormat),
+        feeOnMonthDay: this.datePipe.transform(charge.feeOnMonthDay, dateFormat),
+        feeInterval: charge.feeInterval
+      })),
+      submittedOnDate: this.datePipe.transform(this.savingsAccount.submittedOnDate, dateFormat),
+      dateFormat,
+      monthDayFormat,
+      locale
+    };
+    this.savingsService.updateSavingsAccount(this.savingsAccountAndTemplate.id, savingsAccount).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}

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

@@ -53,10 +53,10 @@
       <th mat-header-cell *matHeaderCellDef> Date </th>
       <td mat-cell *matCellDef="let charge">
         <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-          {{charge.dueDate || 'Unassigned'}}
+          {{(charge.dueDate | date) || 'Unassigned'}}
         </span>
         <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-          {{charge.feeOnMonthDay || 'Unassigned'}}
+          {{(charge.feeOnMonthDay | date) || 'Unassigned'}}
         </span>
         <span 
           *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'

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

@@ -50,7 +50,7 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
    ngOnInit() {
     this.currencyCode.valueChanges.subscribe(() => {
       if (!this.isChargesPatched && this.savingsAccountTemplate.charges) {
-        this.chargesDataSource = this.savingsAccountTemplate.charges || [];
+        this.chargesDataSource = this.savingsAccountTemplate.charges.map((charge: any) => ({...charge, id: charge.chargeId})) || [];
         this.isChargesPatched = true;
       } else {
         this.chargesDataSource = [];
@@ -84,7 +84,7 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
         controlName: 'amount',
         label: 'Amount',
         value: charge.amount,
-        type: 'text',
+        type: 'number',
         required: false
       }),
     ];

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

@@ -26,6 +26,8 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
   productData: any;
   /** Field Officer Data */
   fieldOfficerData: any;
+  /** For edit savings form */
+  isFieldOfficerPatched = false;
   /** Savings Account Details Form */
   savingsAccountDetailsForm: FormGroup;
 
@@ -46,6 +48,13 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
     this.buildDependencies();
     if (this.savingsAccountTemplate) {
       this.productData = this.savingsAccountTemplate.productOptions;
+      if (this.savingsAccountTemplate.savingsProductId) {
+        this.savingsAccountDetailsForm.patchValue({
+          'productId': this.savingsAccountTemplate.savingsProductId,
+          'submittedOnDate': this.savingsAccountTemplate.timeline.submittedOnDate && new Date(this.savingsAccountTemplate.timeline.submittedOnDate),
+          'externalId': this.savingsAccountTemplate.externalId
+        });
+      }
     }
   }
 
@@ -69,8 +78,13 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
     this.savingsAccountDetailsForm.get('productId').valueChanges.subscribe((productId: string) => {
       this.savingsService.getSavingsAccountTemplate(clientId, productId).subscribe((response: any) => {
         this.savingsAccountProductTemplate.emit(response);
-        this.savingsAccountDetailsForm.get('fieldOfficerId').patchValue('');
         this.fieldOfficerData = response.fieldOfficerOptions;
+        if (!this.isFieldOfficerPatched && this.savingsAccountTemplate.fieldOfficerId) {
+          this.savingsAccountDetailsForm.get('fieldOfficerId').patchValue(this.savingsAccountTemplate.fieldOfficerId);
+          this.isFieldOfficerPatched = true;
+        } else {
+          this.savingsAccountDetailsForm.get('fieldOfficerId').patchValue('');
+        }
       });
     });
   }

src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html

@@ -38,6 +38,11 @@
     <span fxFlex="60%">{{ savingsAccountTermsForm.get('decimal').value }}</span>
   </div>
 
+  <div fxFlexFill>
+    <span fxFlex="40%">Currency in multiples of</span>
+    <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyMultiple').value }}</span>
+  </div>
+
   <div fxFlexFill>
     <span fxFlex="40%">Nominal Annual Interest Rate:</span>
     <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRate }}</span>
@@ -48,11 +53,6 @@
     <span fxFlex="60%">{{ savingsAccount.interestCompoundingPeriodType | find:savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">Currency in multiples of</span>
-    <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyMultiple').value }}</span>
-  </div>
-
   <div fxFlexFill>
     <span fxFlex="40%">Interest Posting Period:</span>
     <span fxFlex="60%">{{ savingsAccount.interestPostingPeriodType | find:savingsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
@@ -146,10 +146,10 @@
         <th mat-header-cell *matHeaderCellDef> Date </th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-            {{charge.dueDate || 'Unassigned'}}
+            {{(charge.dueDate | date) || 'Unassigned'}}
           </span>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-            {{charge.feeOnMonthDay || 'Unassigned'}}
+            {{(charge.feeOnMonthDay | date) || 'Unassigned'}}
           </span>
           <span 
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'

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

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnChanges, Input } from '@angular/core';
+import { Component, OnChanges, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 
 /**
@@ -10,10 +10,12 @@ import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'
   templateUrl: './savings-account-terms-step.component.html',
   styleUrls: ['./savings-account-terms-step.component.scss']
 })
-export class SavingsAccountTermsStepComponent implements OnChanges {
+export class SavingsAccountTermsStepComponent implements OnChanges, OnInit {
 
   /** Savings Account and Product Template */
   @Input() savingsAccountProductTemplate: any;
+  /** Savings Account Template */
+  @Input() savingsAccountTemplate: any;
 
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
@@ -52,6 +54,25 @@ export class SavingsAccountTermsStepComponent implements OnChanges {
     }
   }
 
+  ngOnInit() {
+    if (this.savingsAccountTemplate) {
+      this.savingsAccountTermsForm.patchValue({
+        'nominalAnnualInterestRate': this.savingsAccountTemplate.nominalAnnualInterestRate,
+        'interestCompoundingPeriodType': this.savingsAccountTemplate.interestCompoundingPeriodType.id,
+        'interestPostingPeriodType': this.savingsAccountTemplate.interestPostingPeriodType.id,
+        'interestCalculationType': this.savingsAccountTemplate.interestCalculationType.id,
+        'interestCalculationDaysInYearType': this.savingsAccountTemplate.interestCalculationDaysInYearType.id,
+        'minRequiredOpeningBalance': this.savingsAccountTemplate.minRequiredOpeningBalance,
+        'withdrawalFeeForTransfers': this.savingsAccountTemplate.withdrawalFeeForTransfers,
+        'lockinPeriodFrequency': this.savingsAccountTemplate.lockinPeriodFrequency,
+        'lockinPeriodFrequencyType': this.savingsAccountTemplate.lockinPeriodFrequencyType && this.savingsAccountTemplate.lockinPeriodFrequencyType.id,
+        'allowOverdraft': this.savingsAccountTemplate.allowOverdraft,
+        'enforceMinRequiredBalance': this.savingsAccountTemplate.enforceMinRequiredBalance,
+        'minRequiredBalance': this.savingsAccountTemplate.minRequiredBalance,
+      });
+    }
+  }
+
   /**
    * Creates savings account terms form.
    */

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

@@ -35,7 +35,7 @@
     <mat-card-actions class="account-actions">
 
       <ng-container *ngFor="let button of buttonConfig.singleButtons">
-        <button mat-raised-button *mifosxHasPermission="button.taskPermissionName">
+        <button mat-raised-button *mifosxHasPermission="button.taskPermissionName" (click)="doAction(button.name)">
           <i class="{{button.icon}}"></i> {{button.name}}</button>
       </ng-container>
   

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

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Buttons Configuration */
 import { SavingsButtonsConfiguration } from './savings-buttons.config';
@@ -26,7 +26,8 @@ export class SavingsAccountViewComponent implements OnInit {
    * Fetches savings account data from `resolve`
    * @param {ActivatedRoute} route Activated Route
    */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private router: Router) {
     this.route.data.subscribe((data: { savingsAccountData: any, savingsDatatables: any }) => {
       this.savingsAccountData = data.savingsAccountData;
       this.savingsDatatables = data.savingsDatatables;
@@ -65,7 +66,7 @@ export class SavingsAccountViewComponent implements OnInit {
       charges.forEach((charge: any) => {
         if (charge.name === 'Annual fee - INR') {
           this.buttonConfig.addOption({
-            name: 'Apply Anuual Fees',
+            name: 'Apply Annual Fees',
             taskPermissionName: 'APPLYANNUALFEE_SAVINGSACCOUNT'
           });
         }
@@ -86,4 +87,12 @@ export class SavingsAccountViewComponent implements OnInit {
     }
   }
 
+  doAction(name: string) {
+    switch (name) {
+      case 'Modify Application':
+      this.router.navigate(['edit-savings-account'], { relativeTo: this.route });
+      break;
+    }
+  }
+
 }

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

@@ -4,14 +4,12 @@ export class SavingsButtonsConfiguration {
   optionArray: {
     name: string,
     taskPermissionName: string,
-    action?: Function
   }[];
 
   buttonsArray: {
     name: string,
     icon: string,
     taskPermissionName: string,
-    action?: Function
   }[];
 
   constructor(status: string) {

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

@@ -14,6 +14,7 @@ import { ChargesTabComponent } from './savings-account-view/charges-tab/charges-
 import { StandingInstructionsTabComponent } from './savings-account-view/standing-instructions-tab/standing-instructions-tab.component';
 import { DatatableTabsComponent } from './savings-account-view/datatable-tabs/datatable-tabs.component';
 import { CreateSavingsAccountComponent } from './create-savings-account/create-savings-account.component';
+import { EditSavingsAccountComponent } from './edit-savings-account/edit-savings-account.component';
 
 /** Custom Resolvers */
 import { SavingAccountTransactionTemplateResolver } from './common-resolvers/saving-transaction-template.resolver';
@@ -22,6 +23,7 @@ import { SavingsAccountViewResolver } from './common-resolvers/savings-account-v
 import { SavingsDatatableResolver } from './common-resolvers/savings-datatable.resolver';
 import { SavingsDatatablesResolver } from './common-resolvers/savings-datatables.resolver';
 import { SavingsAccountTemplateResolver } from './common-resolvers/savings-account-template.resolver';
+import { SavingsAccountAndTemplateResolver } from './common-resolvers/savings-account-and-template.resolver';
 
 const routes: Routes = [
   {
@@ -39,40 +41,53 @@ const routes: Routes = [
       {
         path: ':savingAccountId',
         data: { title: extract('Saving Account View'), routeParamBreadcrumb: 'savingAccountId' },
-        component: SavingsAccountViewComponent,
-        resolve: {
-          savingsAccountData: SavingsAccountViewResolver,
-          savingsDatatables: SavingsDatatablesResolver
-        },
         children: [
           {
-            path: 'transactions',
-            component: TransactionsTabComponent,
-            data: { title: extract('Savings Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'charges',
-            component: ChargesTabComponent,
-            data: { title: extract('Savings Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'standing-instructions',
-            component: StandingInstructionsTabComponent,
-            data: { title: extract('Savings Account SIH'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'datatables',
+            path: '',
+            component: SavingsAccountViewComponent,
+            resolve: {
+              savingsAccountData: SavingsAccountViewResolver,
+              savingsDatatables: SavingsDatatablesResolver
+            },
             children: [
               {
-                path: ':datatableName',
-                component: DatatableTabsComponent,
-                data: { title: extract('View Data Table'), routeParamBreadcrumb: 'datatableName' },
-                resolve: {
-                  savingsDatatable: SavingsDatatableResolver
-                }
+                path: 'transactions',
+                component: TransactionsTabComponent,
+                data: { title: extract('Savings Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'charges',
+                component: ChargesTabComponent,
+                data: { title: extract('Savings Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'standing-instructions',
+                component: StandingInstructionsTabComponent,
+                data: { title: extract('Savings Account SIH'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'datatables',
+                children: [
+                  {
+                    path: ':datatableName',
+                    component: DatatableTabsComponent,
+                    data: { title: extract('View Data Table'), routeParamBreadcrumb: 'datatableName' },
+                    resolve: {
+                      savingsDatatable: SavingsDatatableResolver
+                    }
+                  }
+                ]
               }
             ]
           },
+          {
+            path: 'edit-savings-account',
+            data: { title: extract('Edit Savings Account'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+            component: EditSavingsAccountComponent,
+            resolve: {
+              savingsAccountAndTemplate: SavingsAccountAndTemplateResolver
+            }
+          },
           {
             path: 'add-savings-charge',
             component: AddSavingsChargeComponent,
@@ -103,6 +118,7 @@ const routes: Routes = [
               SavingsAccountViewResolver,
               SavingsDatatablesResolver,
               SavingsDatatableResolver,
-              SavingsAccountTemplateResolver]
+              SavingsAccountTemplateResolver,
+              SavingsAccountAndTemplateResolver]
 })
 export class SavingsRoutingModule {}

src/app/savings/savings.module.ts

@@ -24,6 +24,7 @@ import { SavingsAccountDetailsStepComponent } from './savings-account-stepper/sa
 import { SavingsAccountChargesStepComponent } from './savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component';
 import { SavingsAccountTermsStepComponent } from './savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component';
 import { SavingsAccountPreviewStepComponent } from './savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component';
+import { EditSavingsAccountComponent } from './edit-savings-account/edit-savings-account.component';
 
 /**
  * Savings Module
@@ -52,7 +53,8 @@ import { SavingsAccountPreviewStepComponent } from './savings-account-stepper/sa
     SavingsAccountDetailsStepComponent,
     SavingsAccountChargesStepComponent,
     SavingsAccountTermsStepComponent,
-    SavingsAccountPreviewStepComponent
+    SavingsAccountPreviewStepComponent,
+    EditSavingsAccountComponent
   ],
   providers: [DatePipe]
 })

src/app/savings/savings.service.ts

@@ -63,7 +63,18 @@ export class SavingsService {
    * @returns {Observable<any>} Savings data.
    */
   getSavingsAccountData(accountId: string): Observable<any> {
-    const httpParams = new HttpParams().set('associations', 'all');
+    const httpParams = new HttpParams().set('associations', 'all' );
+    return this.http.get(`/savingsaccounts/${accountId}`, { params: httpParams });
+  }
+
+  /**
+   * @param accountId Savings Account Id of account to get data for.
+   * @returns {Observable<any>} Savings account and template.
+   */
+  getSavingsAccountAndTemplate(accountId: string, template: boolean): Observable<any> {
+    const httpParams = new HttpParams()
+      .set('template', template.toString())
+      .set('associations', 'charges' );
     return this.http.get(`/savingsaccounts/${accountId}`, { params: httpParams });
   }
 
@@ -156,4 +167,12 @@ export class SavingsService {
     return this.http.post('/savingsaccounts', savingsAccount);
   }
 
+  /**
+   * @param {any} savingsAccount Savings Account
+   * @returns {Observable<any>}
+   */
+  updateSavingsAccount(accountId: string, savingsAccount: any): Observable<any> {
+    return this.http.put(`/savingsaccounts/${accountId}`, savingsAccount);
+  }
+
 }

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

@@ -81,8 +81,8 @@ export class SharesAccountChargesStepComponent implements OnInit, OnChanges {
         controlName: 'amount',
         label: 'Amount',
         value: charge.amount || charge.amountOrPercentage,
-        type: 'text',
-        required: true,
+        type: 'number',
+        required: false,
       }),
     ];
     const data = {

src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.ts

@@ -63,9 +63,9 @@ export class SharesAccountTermsStepComponent implements OnChanges, OnInit {
       this.sharesAccountTermsForm.patchValue({
         'requestedShares': this.sharesAccountTemplate.summary.totalPendingForApprovalShares,
         'minimumActivePeriod': this.sharesAccountTemplate.minimumActivePeriod,
-        'minimumActivePeriodFrequencyType': this.sharesAccountTemplate.minimumActivePeriodTypeEnum.id,
+        'minimumActivePeriodFrequencyType': this.sharesAccountTemplate.minimumActivePeriod && this.sharesAccountTemplate.minimumActivePeriodTypeEnum.id,
         'lockinPeriodFrequency': this.sharesAccountTemplate.lockinPeriod,
-        'lockinPeriodFrequencyType': this.sharesAccountTemplate.lockPeriodTypeEnum.id,
+        'lockinPeriodFrequencyType': this.sharesAccountTemplate.lockinPeriod && this.sharesAccountTemplate.lockPeriodTypeEnum.id,
         'applicationDate': this.sharesAccountTemplate.purchasedShares[0].purchasedDate && new Date(this.sharesAccountTemplate.purchasedShares[0].purchasedDate),
         'allowDividendCalculationForInactiveClients': this.sharesAccountTemplate.allowDividendCalculationForInactiveClients
       });