feat: edit fixed deposits account (#1011)

Fixes: #1010

src/app/deposits/fixed-deposits/common-resolvers/fixed-deposit-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 { FixedDepositsService } from '../fixed-deposits.service';
+
+/**
+ * Fixed Deposits Account Template resolver.
+ */
+@Injectable()
+export class FixedDepositsAccountAndTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {FixedDepositsService} fixedDepositsService Fixed Deposits service.
+   */
+  constructor(private fixedDepositsService: FixedDepositsService) { }
+
+  /**
+   * Returns the Fixed Deposits Account Template.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const fixedDepositAccountId = route.paramMap.get('fixedDepositAccountId');
+    return this.fixedDepositsService.getFixedDepositsAccountAndTemplate(fixedDepositAccountId);
+  }
+
+}

src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html

@@ -1,6 +1,7 @@
 <div class="container">
 
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #fixedDepositAccountStepper>
+    
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -71,7 +72,7 @@
 
       <mifosx-fixed-deposit-account-interest-rate-chart-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
-        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate">>
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate">
       </mifosx-fixed-deposit-account-interest-rate-chart-step>
 
     </mat-step>

src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.ts

@@ -127,7 +127,7 @@ export class CreateFixedDepositAccountComponent {
       charges: this.fixedDepositAccount.charges.map((charge: any) => ({
         chargeId: charge.id,
         amount: charge.amount,
-        dueDate: charge.dueDate,
+        dueDate: charge.dueDate && this.datePipe.transform(charge.dueDate, dateFormat),
         feeOnMonthDay: charge.feeOnMonthDay && this.datePipe.transform([2000].concat(charge.feeOnMonthDay), monthDayFormat),
         feeInterval: charge.feeInterval
       })),

src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.html

@@ -0,0 +1,107 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #fixedDepositAccountStepper>
+
+    <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]="fixedDepositAccountDetailsForm">
+
+      <ng-template matStepLabel>DETAILS</ng-template>
+
+      <mifosx-fixed-deposit-account-details-step
+        [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
+        (fixedDepositsAccountProductTemplate)="setTemplate($event)">
+      </mifosx-fixed-deposit-account-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="fixedDepositAccountDetailsForm.get('productId')">
+
+      <ng-template matStepLabel>CURRENCY</ng-template>
+
+      <mifosx-fixed-deposit-account-currency-step
+        [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate">
+      </mifosx-fixed-deposit-account-currency-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="fixedDepositAccountTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-fixed-deposit-account-terms-step
+        [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate">
+      </mifosx-fixed-deposit-account-terms-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="fixedDepositAccountSettingsForm">
+
+      <ng-template matStepLabel>SETTINGS</ng-template>
+
+      <mifosx-fixed-deposit-account-settings-step
+        [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate">
+      </mifosx-fixed-deposit-account-settings-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+
+      <mifosx-fixed-deposit-account-interest-rate-chart-step
+        [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate">
+      </mifosx-fixed-deposit-account-interest-rate-chart-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-fixed-deposit-account-charges-step
+        [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
+        [fixedDepositAccountFormValid]="fixedDepositAccountFormValidAndNotPristine"
+        [currencyCode]="fixedDepositAccountCurrencyForm.get('currencyCode')">
+      </mifosx-fixed-deposit-account-charges-step>
+
+    </mat-step>
+
+    <mat-step state="preview" *ngIf="fixedDepositAccountFormValidAndNotPristine" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-fixed-deposit-account-preview-step
+        [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
+        [fixedDepositAccountData]="fixedDepositAccount" (submit)="submit()">
+      </mifosx-fixed-deposit-account-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>

src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.spec.ts

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

src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.ts

@@ -0,0 +1,151 @@
+/** Angular Imports */
+import { Component, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { FixedDepositsService } from '../fixed-deposits.service';
+
+/** Custom Components */
+import { FixedDepositAccountDetailsStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component';
+import { FixedDepositAccountCurrencyStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component';
+import { FixedDepositAccountTermsStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component';
+import { FixedDepositAccountSettingsStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component';
+import { FixedDepositAccountChargesStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component';
+
+/**
+ * Edit Fixed Deposit Account Component
+ */
+@Component({
+  selector: 'mifosx-edit-fixed-deposit-account',
+  templateUrl: './edit-fixed-deposit-account.component.html',
+  styleUrls: ['./edit-fixed-deposit-account.component.scss']
+})
+export class EditFixedDepositAccountComponent {
+
+  /** Fixed Deposits Account Details Step */
+  @ViewChild(FixedDepositAccountDetailsStepComponent) fixedDepositsAccountDetailsStep: FixedDepositAccountDetailsStepComponent;
+  /** Fixed Deposits Account Currency Step */
+  @ViewChild(FixedDepositAccountCurrencyStepComponent) fixedDepositAccountCurrencyStep: FixedDepositAccountCurrencyStepComponent;
+  /** Fixed Deposits Account Terms Step */
+  @ViewChild(FixedDepositAccountTermsStepComponent) fixedDepositAccountTermsStep: FixedDepositAccountTermsStepComponent;
+  /** Fixed Deposits Account Settings Step */
+  @ViewChild(FixedDepositAccountSettingsStepComponent) fixedDepositAccountSettingsStep: FixedDepositAccountSettingsStepComponent;
+  /** Fixed Deposits Account Charges Step */
+  @ViewChild(FixedDepositAccountChargesStepComponent) fixedDepositAccountChargesStep: FixedDepositAccountChargesStepComponent;
+
+  /** Fixed Deposits Account Template */
+  fixedDepositsAccountAndTemplate: any;
+  /** Fixed Deposit Account Product Template */
+  fixedDepositsAccountProductTemplate: any;
+
+  /**
+   * Fetches FD account template from `resolve`
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   * @param {DatePipe} datePipe Date Pipe
+   * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service
+   */
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private fixedDepositsService: FixedDepositsService) {
+    this.route.data.subscribe((data: { fixedDepositsAccountAndTemplate: any }) => {
+      this.fixedDepositsAccountAndTemplate = data.fixedDepositsAccountAndTemplate;
+    });
+  }
+
+  /**
+   * Sets fixed deposits account product template.
+   * @param {any} $event API response
+   */
+  setTemplate($event: any) {
+    this.fixedDepositsAccountProductTemplate = $event;
+  }
+
+  /**
+   * Retrieves Fixed Deposit Account Details Form Data
+   */
+  get fixedDepositAccountDetailsForm() {
+    return this.fixedDepositsAccountDetailsStep.fixedDepositAccountDetailsForm;
+  }
+
+  /**
+   * Retrieves Fixed Deposit Account Currency Form Data
+   */
+  get fixedDepositAccountCurrencyForm() {
+    return this.fixedDepositAccountCurrencyStep.fixedDepositAccountCurrencyForm;
+  }
+
+  /**
+   * Retrieves Fixed Deposit Account Terms Form Data
+   */
+  get fixedDepositAccountTermsForm() {
+    return this.fixedDepositAccountTermsStep.fixedDepositAccountTermsForm;
+  }
+
+  /**
+   * Retrieves Fixed Deposit Account Settings Form Data
+   */
+  get fixedDepositAccountSettingsForm() {
+    return this.fixedDepositAccountSettingsStep.fixedDepositAccountSettingsForm;
+  }
+
+  /**
+   * Checks if stepper is valid and not pristine.
+   */
+  get fixedDepositAccountFormValidAndNotPristine() {
+    return (
+      this.fixedDepositAccountDetailsForm.valid &&
+      this.fixedDepositAccountTermsForm.valid &&
+      this.fixedDepositAccountSettingsForm.valid &&
+      (
+        !this.fixedDepositAccountDetailsForm.pristine ||
+        !this.fixedDepositAccountTermsForm.pristine ||
+        !this.fixedDepositAccountSettingsForm.pristine ||
+        !this.fixedDepositAccountChargesStep.pristine
+      )
+    );
+  }
+
+  /**
+   * Creates the fixed deposit account object.
+   */
+  get fixedDepositAccount() {
+    return {
+      ...this.fixedDepositsAccountDetailsStep.fixedDepositAccountDetails,
+      ...this.fixedDepositAccountTermsStep.fixedDepositAccountTerms,
+      ...this.fixedDepositAccountSettingsStep.fixedDepositAccountSettings,
+      ...this.fixedDepositAccountChargesStep.fixedDepositAccountCharges,
+    };
+  }
+
+  /**
+   * Submits the fixed deposit form and creates a new fixed deposit account
+   */
+  submit() {
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const monthDayFormat = 'dd MMMM';
+    const fixedDepositAccount = {
+      ...this.fixedDepositAccount,
+      clientId: this.fixedDepositsAccountAndTemplate.clientId,
+      charges: this.fixedDepositAccount.charges.map((charge: any) => ({
+        chargeId: charge.id,
+        amount: charge.amount,
+        dueDate: charge.dueDate && this.datePipe.transform(charge.dueDate, dateFormat),
+        feeOnMonthDay: charge.feeOnMonthDay && this.datePipe.transform([2000].concat(charge.feeOnMonthDay), monthDayFormat),
+        feeInterval: charge.feeInterval
+      })),
+      submittedOnDate: this.datePipe.transform(this.fixedDepositAccount.submittedOnDate, dateFormat),
+      charts: [{chartSlabs: this.fixedDepositsAccountProductTemplate.accountChart.chartSlabs}],
+      dateFormat,
+      monthDayFormat,
+      locale
+    };
+    this.fixedDepositsService.updateFixedDepositAccount(this.fixedDepositsAccountAndTemplate.id, fixedDepositAccount).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.html

@@ -54,7 +54,7 @@
       <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 | date) || 'Unassigned'}}
+          {{(charge.dueDate | date) || 'Unassigned*'}}
         </span>
         <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
           {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | date: 'dd MMMM') : 'Unassigned'}}

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material';
 
@@ -20,7 +20,7 @@ import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
   templateUrl: './fixed-deposit-account-charges-step.component.html',
   styleUrls: ['./fixed-deposit-account-charges-step.component.scss']
 })
-export class FixedDepositAccountChargesStepComponent implements OnInit {
+export class FixedDepositAccountChargesStepComponent implements OnInit, OnChanges {
 
   /** Fixed deposits account template */
   @Input() fixedDepositsAccountTemplate: any;
@@ -34,9 +34,11 @@ export class FixedDepositAccountChargesStepComponent implements OnInit {
   /** Charges Data */
   chargeData: any;
   /** Charges Data Source */
-  chargesDataSource: {}[];
+  chargesDataSource: {}[] = [];
   /** Charges table columns */
   displayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date', 'repaymentsEvery', 'action'];
+  /** For Edit Fixed Deposits Account Form */
+  isChargesPatched = false;
   /** Component is pristine if there has been no changes by user interaction */
   pristine = true;
 
@@ -48,17 +50,29 @@ export class FixedDepositAccountChargesStepComponent implements OnInit {
               private datePipe: DatePipe) { }
 
   ngOnInit() {
-    this.chargeData = this.fixedDepositsAccountTemplate.chargeOptions;
+    this.currencyCode.valueChanges.subscribe(() => {
-    this.chargesDataSource = [];
+      if (!this.isChargesPatched && this.fixedDepositsAccountTemplate.charges) {
-    this.currencyCode.valueChanges.subscribe(() => this.chargesDataSource = []);
+        this.chargesDataSource = this.fixedDepositsAccountTemplate.charges.map((charge: any) => ({...charge, id: charge.chargeId})) || [];
+        this.isChargesPatched = true;
+      } else {
+        this.chargesDataSource = [];
+      }
+    });
   }
 
+  ngOnChanges() {
+    if (this.fixedDepositsAccountProductTemplate) {
+      this.chargeData = this.fixedDepositsAccountProductTemplate.chargeOptions;
+    }
+   }
+
   /**
    * Add a charge
    */
   addCharge(charge: any) {
     this.chargesDataSource = this.chargesDataSource.concat([charge.value]);
     charge.value = '';
+    this.pristine = false;
   }
 
   /**
@@ -169,6 +183,7 @@ export class FixedDepositAccountChargesStepComponent implements OnInit {
   deleteCharge(charge: any) {
     this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1);
     this.chargesDataSource = this.chargesDataSource.concat([]);
+    this.pristine = false;
   }
 
   /**

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.ts

@@ -26,6 +26,8 @@ export class FixedDepositAccountDetailsStepComponent implements OnInit {
   productData: any;
   /** Field Officer Data */
   fieldOfficerData: any;
+  /** For edit savings form */
+  isFieldOfficerPatched = false;
   /** Fixed Deposits Account Details Form */
   fixedDepositAccountDetailsForm: FormGroup;
 
@@ -46,6 +48,12 @@ export class FixedDepositAccountDetailsStepComponent implements OnInit {
     this.buildDependencies();
     if (this.fixedDepositsAccountTemplate) {
       this.productData = this.fixedDepositsAccountTemplate.productOptions;
+      if (this.fixedDepositsAccountTemplate.depositProductId) {
+        this.fixedDepositAccountDetailsForm.patchValue({
+          'productId': this.fixedDepositsAccountTemplate.depositProductId,
+          'submittedOnDate': this.fixedDepositsAccountTemplate.timeline.submittedOnDate && new Date(this.fixedDepositsAccountTemplate.timeline.submittedOnDate)
+        });
+      }
     }
   }
 
@@ -69,7 +77,12 @@ export class FixedDepositAccountDetailsStepComponent implements OnInit {
       this.fixedDepositsService.getFixedDepositsAccountTemplate(clientId, productId).subscribe((response: any) => {
         this.fixedDepositsAccountProductTemplate.emit(response);
         this.fieldOfficerData = response.fieldOfficerOptions;
-        this.fixedDepositAccountDetailsForm.get('fieldOfficerId').patchValue('');
+        if (!this.isFieldOfficerPatched && this.fixedDepositsAccountTemplate.fieldOfficerId) {
+          this.fixedDepositAccountDetailsForm.get('fieldOfficerId').patchValue(this.fixedDepositsAccountTemplate.fieldOfficerId);
+          this.isFieldOfficerPatched = true;
+        } else {
+          this.fixedDepositAccountDetailsForm.get('fieldOfficerId').patchValue('');
+        }
       });
     });
   }

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html

@@ -19,20 +19,10 @@
     <span fxFlex="60%">{{ (fixedDepositAccountData.fieldOfficerId | find:fixedDepositsAccountProductTemplate.fieldOfficerOptions:'id':'displayName') || 'Unassigned' }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+  <h3 class="mat-h3" fxFlexFill>Currency</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">Fixed Deposit Amount:</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.depositAmount }}</span>
-  </div>
-
-  <div fxFlexFill>
-    <span fxFlex="40%">Deposit Period:</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.depositPeriod + ' ' + (fixedDepositAccountData.depositPeriodFrequencyId | find:fixedDepositsAccountProductTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
-  </div>
-
   <div fxFlexFill>
     <span fxFlex="40%">Currency</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.currency.code }}</span>
@@ -48,6 +38,20 @@
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
   </div>
 
+  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Fixed Deposit Amount:</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.depositAmount }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Deposit Period:</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.depositPeriod + ' ' + (fixedDepositAccountData.depositPeriodFrequencyId | find:fixedDepositsAccountProductTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
+  </div>
+
   <div fxFlexFill>
     <span fxFlex="40%">Interest Compounding Period:</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.interestCompoundingPeriodType | find:fixedDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html

@@ -124,7 +124,7 @@
         Is Withhold Tax Applicable?
       </mat-checkbox>
   
-      <mat-form-field fxFlex="48%" *ngIf="fixedDepositAccountSettingsForm.value.withHoldTax" class="p-b-25">
+      <mat-form-field fxFlex="48%" *ngIf="fixedDepositAccountSettingsForm.controls.taxGroupId" class="p-b-25">
         <mat-label>Tax Group</mat-label>
         <input matInput formControlName="taxGroupId">
       </mat-form-field>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.ts

@@ -63,6 +63,7 @@ export class FixedDepositAccountSettingsStepComponent implements OnInit, OnChang
             this.fixedDepositAccountSettingsForm.removeControl('taxGroupId');
           }
         });
+        this.fixedDepositAccountSettingsForm.get('withHoldTax').patchValue(this.fixedDepositsAccountTemplate.withHoldTax);
       } else {
         this.fixedDepositAccountSettingsForm.removeControl('withHoldTax');
       }
@@ -70,7 +71,15 @@ export class FixedDepositAccountSettingsStepComponent implements OnInit, OnChang
     }
   }
 
-  ngOnInit() { }
+  ngOnInit() {
+    if (this.fixedDepositsAccountTemplate) {
+      this.fixedDepositAccountSettingsForm.patchValue({
+        'lockinPeriodFrequency': this.fixedDepositsAccountTemplate.lockinPeriodFrequency,
+        'lockinPeriodFrequencyType': this.fixedDepositsAccountTemplate.lockinPeriodFrequencyType && this.fixedDepositsAccountTemplate.lockinPeriodFrequencyType.id,
+        'transferInterestToSavings': this.fixedDepositsAccountTemplate.transferInterestToSavings
+      });
+    }
+  }
 
   /**
    * Creates fixed deposits account terms form.
@@ -99,6 +108,7 @@ export class FixedDepositAccountSettingsStepComponent implements OnInit, OnChang
     this.fixedDepositAccountSettingsForm.get('transferInterestToSavings').valueChanges.subscribe((value: boolean) => {
       if (value) {
         this.fixedDepositAccountSettingsForm.addControl('linkAccountId', new FormControl('', Validators.required));
+        this.fixedDepositAccountSettingsForm.get('linkAccountId').patchValue(this.fixedDepositsAccountTemplate.linkedAccount && this.fixedDepositsAccountTemplate.linkedAccount.id);
       } else {
         this.fixedDepositAccountSettingsForm.removeControl('linkAccountId');
       }

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.ts

@@ -47,7 +47,19 @@ export class FixedDepositAccountTermsStepComponent implements OnInit, OnChanges
     }
   }
 
-  ngOnInit() { }
+  ngOnInit() {
+    if (this.fixedDepositsAccountTemplate) {
+      this.fixedDepositAccountTermsForm.patchValue({
+        'interestCompoundingPeriodType': this.fixedDepositsAccountTemplate.interestCompoundingPeriodType.id,
+        'interestPostingPeriodType': this.fixedDepositsAccountTemplate.interestPostingPeriodType.id,
+        'interestCalculationType': this.fixedDepositsAccountTemplate.interestCalculationType.id,
+        'interestCalculationDaysInYearType': this.fixedDepositsAccountTemplate.interestCalculationDaysInYearType.id,
+        'depositAmount': this.fixedDepositsAccountTemplate.depositAmount,
+        'depositPeriod': this.fixedDepositsAccountTemplate.depositPeriod,
+        'depositPeriodFrequencyId': this.fixedDepositsAccountTemplate.depositPeriodFrequency.id,
+      });
+    }
+  }
 
   /**
    * Creates fixed deposits account terms form.

src/app/deposits/fixed-deposits/fixed-deposit-account-view/charges-tab/charges-tab.component.html

@@ -35,8 +35,8 @@
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
-        <th mat-header-cell *matHeaderCellDef> Repeats On (M/d) </th>
+        <th mat-header-cell *matHeaderCellDef> Repeats On </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.feeOnMonthDay ? charge.feeOnMonthDay.join('/') : '' }} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | date: 'dd MMMM') : 'Unassigned'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.ts

@@ -36,6 +36,10 @@ export class FixedDepositAccountViewComponent implements OnInit {
   /**
    * Fetches fixed deposits account data from `resolve`
    * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service
+   * @param {SavingsService} savingsService Savings Service
+   * @param {MatDialog} dialog Mat Dialog
    */
   constructor(private route: ActivatedRoute,
               private router: Router,
@@ -99,7 +103,7 @@ export class FixedDepositAccountViewComponent implements OnInit {
         this.router.navigate([`actions/${name}`], { relativeTo: this.route });
         break;
       case 'Modify Application':
-        this.router.navigate(['edit-savings-account'], { relativeTo: this.route });
+        this.router.navigate(['edit-fixed-deposit-account'], { relativeTo: this.route });
         break;
       case 'Delete':
         this.deleteFixedDepositsAccount();

src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts

@@ -15,6 +15,7 @@ import { DatatableTabsComponent } from './fixed-deposit-account-view/datatable-t
 import { FixedDepositsAccountActionsComponent } from './fixed-deposits-account-actions/fixed-deposits-account-actions.component';
 import { ViewTransactionComponent } from './fixed-deposit-account-view/view-transaction/view-transaction.component';
 import { CreateFixedDepositAccountComponent } from './create-fixed-deposit-account/create-fixed-deposit-account.component';
+import { EditFixedDepositAccountComponent } from './edit-fixed-deposit-account/edit-fixed-deposit-account.component';
 
 /** Custom Resolvers */
 import { FixedDepositsAccountViewResolver } from './common-resolvers/fixed-deposit-account-view.resolver';
@@ -23,6 +24,7 @@ import { SavingsDatatablesResolver } from 'app/savings/common-resolvers/savings-
 import { FixedDepositsAccountTransactionResolver } from './common-resolvers/fixed-deposit-account-transaction.resolver';
 import { FixedDepositsAccountActionsResolver } from './common-resolvers/fixed-deposit-account-actions.resolver';
 import { FixedDepositsAccountTemplateResolver } from './common-resolvers/fixed-deposit-account-template.resolver';
+import { FixedDepositsAccountAndTemplateResolver } from './common-resolvers/fixed-deposit-account-and-template.resolver';
 
 const routes: Routes = [
   {
@@ -84,6 +86,14 @@ const routes: Routes = [
               }
             ]
           },
+          {
+            path: 'edit-fixed-deposit-account',
+            data: { title: extract('Edit Fixed Deposit Account'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+            component: EditFixedDepositAccountComponent,
+            resolve: {
+              fixedDepositsAccountAndTemplate: FixedDepositsAccountAndTemplateResolver
+            }
+          },
           {
             path: 'transactions',
             data: { title: extract('Fixed Deposits Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
@@ -130,7 +140,8 @@ const routes: Routes = [
     SavingsDatatablesResolver,
     FixedDepositsAccountTransactionResolver,
     FixedDepositsAccountActionsResolver,
-    FixedDepositsAccountTemplateResolver
+    FixedDepositsAccountTemplateResolver,
+    FixedDepositsAccountAndTemplateResolver
   ]
 })
 export class FixedDepositsRoutingModule { }

src/app/deposits/fixed-deposits/fixed-deposits.module.ts

@@ -40,6 +40,7 @@ import { FixedDepositAccountSettingsStepComponent } from './fixed-deposit-accoun
 import { FixedDepositAccountInterestRateChartStepComponent } from './fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component';
 import { FixedDepositAccountPreviewStepComponent } from './fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component';
 import { FixedDepositAccountCurrencyStepComponent } from './fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component';
+import { EditFixedDepositAccountComponent } from './edit-fixed-deposit-account/edit-fixed-deposit-account.component';
 
 @NgModule({
   declarations: [
@@ -73,7 +74,8 @@ import { FixedDepositAccountCurrencyStepComponent } from './fixed-deposit-accoun
     FixedDepositAccountSettingsStepComponent,
     FixedDepositAccountInterestRateChartStepComponent,
     FixedDepositAccountPreviewStepComponent,
-    FixedDepositAccountCurrencyStepComponent
+    FixedDepositAccountCurrencyStepComponent,
+    EditFixedDepositAccountComponent
   ],
   imports: [
     SharedModule,

src/app/deposits/fixed-deposits/fixed-deposits.service.ts

@@ -83,6 +83,13 @@ export class FixedDepositsService {
     return this.http.get('/fixeddepositaccounts/template', { params: httpParams });
   }
 
+
+  getFixedDepositsAccountAndTemplate(accountId: any) {
+    const httpParams = new HttpParams().set('associations', 'charges,+linkedAccount')
+      .set('template', 'true');
+    return this.http.get(`/fixeddepositaccounts/${accountId}`, { params: httpParams });
+  }
+
   /**
    * @param fixedDepositAccount Fixed Deposit Account
    * @returns {Observable<any>}
@@ -91,6 +98,15 @@ export class FixedDepositsService {
     return this.http.post(`/fixeddepositaccounts`, fixedDepositAccount);
   }
 
+  /**
+   * @param {any} accountId Account Id
+   * @param {any} fixedDepositAccount Fixed Deposit Account
+   * @returns {Observable<any>}
+   */
+  updateFixedDepositAccount(accountId: any, fixedDepositAccount: any): Observable<any> {
+    return this.http.put(`/fixeddepositaccounts/${accountId}`, fixedDepositAccount);
+  }
+
   /**
    * @param clientId Client Id
    * @param clientName Client Name