feat: add edit fixed deposits product (#1178)

Fixes: #466
Refer: #187

src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.html

@@ -0,0 +1,112 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #fixedDepositProductStepper>
+
+    <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]="fixedDepositProductDetailsForm">
+
+      <ng-template matStepLabel>DETAILS</ng-template>
+
+      <mifosx-fixed-deposit-product-details-step
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
+      </mifosx-fixed-deposit-product-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="fixedDepositProductCurrencyForm">
+
+      <ng-template matStepLabel>CURRENCY</ng-template>
+
+      <mifosx-fixed-deposit-product-currency-step
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
+      </mifosx-fixed-deposit-product-currency-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="fixedDepositProductTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-fixed-deposit-product-terms-step
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
+      </mifosx-fixed-deposit-product-terms-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="fixedDepositProductSettingsForm">
+
+      <ng-template matStepLabel>SETTINGS</ng-template>
+
+      <mifosx-fixed-deposit-product-settings-step
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
+      </mifosx-fixed-deposit-product-settings-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="fixedDepositProductInterestRateChartForm">
+
+      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+
+      <mifosx-fixed-deposit-product-interest-rate-chart-step
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
+      </mifosx-fixed-deposit-product-interest-rate-chart-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-fixed-deposit-product-charges-step
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
+        [currencyCode]="fixedDepositProductCurrencyForm.get('currencyCode')">
+      </mifosx-fixed-deposit-product-charges-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="fixedDepositProductAccountingForm">
+
+      <ng-template matStepLabel>ACCOUNTING</ng-template>
+
+      <mifosx-fixed-deposit-product-accounting-step
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate" [accountingRuleData]="accountingRuleData"
+        [fixedDepositProductFormValid]="fixedDepositProductFormValidAndNotPrinstine">
+      </mifosx-fixed-deposit-product-accounting-step>
+
+    </mat-step>
+
+    <mat-step state="preview" *ngIf="fixedDepositProductFormValidAndNotPrinstine" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-fixed-deposit-product-preview-step
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
+        [chartSlabsDisplayedColumns]="fixedDepositProductInterestRateChartStep.chartSlabsDisplayedColumns"
+        [accountingRuleData]="accountingRuleData" [fixedDepositProduct]="fixedDepositProduct"
+        (submit)="submit()">
+      </mifosx-fixed-deposit-product-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>

src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.spec.ts

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

src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.ts

@@ -0,0 +1,115 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { FixedDepositProductDetailsStepComponent } from '../fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component';
+import { FixedDepositProductCurrencyStepComponent } from '../fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component';
+import { FixedDepositProductTermsStepComponent } from '../fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component';
+import { FixedDepositProductSettingsStepComponent } from '../fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component';
+import { FixedDepositProductInterestRateChartStepComponent } from '../fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component';
+import { FixedDepositProductChargesStepComponent } from '../fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component';
+import { FixedDepositProductAccountingStepComponent } from '../fixed-deposit-product-stepper/fixed-deposit-product-accounting-step/fixed-deposit-product-accounting-step.component';
+
+import { ProductsService } from 'app/products/products.service';
+
+@Component({
+  selector: 'mifosx-edit-fixed-deposit-product',
+  templateUrl: './edit-fixed-deposit-product.component.html',
+  styleUrls: ['./edit-fixed-deposit-product.component.scss']
+})
+export class EditFixedDepositProductComponent implements OnInit {
+
+  @ViewChild(FixedDepositProductDetailsStepComponent) fixedDepositProductDetailsStep: FixedDepositProductDetailsStepComponent;
+  @ViewChild(FixedDepositProductCurrencyStepComponent) fixedDepositProductCurrencyStep: FixedDepositProductCurrencyStepComponent;
+  @ViewChild(FixedDepositProductTermsStepComponent) fixedDepositProductTermsStep: FixedDepositProductTermsStepComponent;
+  @ViewChild(FixedDepositProductSettingsStepComponent) fixedDepositProductSettingsStep: FixedDepositProductSettingsStepComponent;
+  @ViewChild(FixedDepositProductInterestRateChartStepComponent) fixedDepositProductInterestRateChartStep: FixedDepositProductInterestRateChartStepComponent;
+  @ViewChild(FixedDepositProductChargesStepComponent) fixedDepositProductChargesStep: FixedDepositProductChargesStepComponent;
+  @ViewChild(FixedDepositProductAccountingStepComponent) fixedDepositProductAccountingStep: FixedDepositProductAccountingStepComponent;
+
+  fixedDepositProductsTemplate: any;
+  accountingRuleData = ['None', 'Cash'];
+
+  constructor(private route: ActivatedRoute,
+    private productsService: ProductsService,
+    private router: Router) {
+    this.route.data.subscribe((data: { fixedDepositProductAndTemplate: any }) => {
+      this.fixedDepositProductsTemplate = data.fixedDepositProductAndTemplate;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  get fixedDepositProductDetailsForm() {
+    return this.fixedDepositProductDetailsStep.fixedDepositProductDetailsForm;
+  }
+
+  get fixedDepositProductCurrencyForm() {
+    return this.fixedDepositProductCurrencyStep.fixedDepositProductCurrencyForm;
+  }
+
+  get fixedDepositProductTermsForm() {
+    return this.fixedDepositProductTermsStep.fixedDepositProductTermsForm;
+  }
+
+  get fixedDepositProductSettingsForm() {
+    return this.fixedDepositProductSettingsStep.fixedDepositProductSettingsForm;
+  }
+
+  get fixedDepositProductInterestRateChartForm() {
+    return this.fixedDepositProductInterestRateChartStep.fixedDepositProductInterestRateChartForm;
+  }
+
+  get fixedDepositProductAccountingForm() {
+    return this.fixedDepositProductAccountingStep.fixedDepositProductAccountingForm;
+  }
+
+  get fixedDepositProductFormValidAndNotPrinstine() {
+    return (
+      this.fixedDepositProductDetailsForm.valid &&
+      this.fixedDepositProductCurrencyForm.valid &&
+      this.fixedDepositProductTermsForm.valid &&
+      this.fixedDepositProductSettingsForm.valid &&
+      this.fixedDepositProductInterestRateChartForm.valid &&
+      this.fixedDepositProductAccountingForm.valid &&
+      (
+        this.fixedDepositProductDetailsForm.pristine ||
+        this.fixedDepositProductCurrencyForm.pristine ||
+        this.fixedDepositProductTermsForm.pristine ||
+        this.fixedDepositProductSettingsForm.pristine ||
+        this.fixedDepositProductInterestRateChartForm.pristine ||
+        this.fixedDepositProductAccountingForm.pristine
+      )
+    );
+  }
+
+  get fixedDepositProduct() {
+    return {
+      ...this.fixedDepositProductDetailsStep.fixedDepositProductDetails,
+      ...this.fixedDepositProductCurrencyStep.fixedDepositProductCurrency,
+      ...this.fixedDepositProductTermsStep.fixedDepositProductTerms,
+      ...this.fixedDepositProductSettingsStep.fixedDepositProductSettings,
+      ...this.fixedDepositProductInterestRateChartStep.fixedDepositProductInterestRateChart,
+      ...this.fixedDepositProductChargesStep.fixedDepositProductCharges,
+      ...this.fixedDepositProductAccountingStep.fixedDepositProductAccounting
+    };
+  }
+
+  submit() {
+    // TODO: Update once language and date settings are setup
+    const fixedDepositProduct = {
+      ...this.fixedDepositProduct,
+      charges: this.fixedDepositProduct.charges.map((charge: any) => ({ id: charge.id })),
+      locale: 'en' // locale required for depositAmount
+    };
+    if (!fixedDepositProduct.description) {
+      fixedDepositProduct.description = '';
+    }
+    delete fixedDepositProduct.advancedAccountingRules;
+    this.productsService.updateFixedDepositProduct(this.fixedDepositProductsTemplate.id, fixedDepositProduct)
+      .subscribe((response: any) => {
+        this.router.navigate(['../'], { relativeTo: this.route });
+      });
+  }
+
+}

src/app/products/fixed-deposit-products/edit-fixed-deposit-product/fixed-deposit-product-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 { ProductsService } from '../../products.service';
+
+/**
+ * Fixed Deposits Account Template resolver.
+ */
+@Injectable()
+export class FixedDepositProductAndTemplateResolver implements Resolve<Object> {
+
+    /**
+     * @param {ProductsService} productsService Products service.
+     */
+    constructor(private productsService: ProductsService) { }
+
+    /**
+     * Returns the Fixed Deposits Product and Template.
+     * @param {ActivatedRouteSnapshot} route Route Snapshot
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const fixedDepositProductId = route.paramMap.get('id');
+        return this.productsService.getFixedDepositProductAndTemplate(fixedDepositProductId);
+    }
+
+}

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-accounting-step/fixed-deposit-product-accounting-step.component.ts

@@ -46,6 +46,60 @@ export class FixedDepositProductAccountingStepComponent implements OnInit {
     this.incomeAccountData = this.fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions || [];
     this.expenseAccountData = this.fixedDepositProductsTemplate.accountingMappingOptions.expenseAccountOptions || [];
     this.liabilityAccountData = this.fixedDepositProductsTemplate.accountingMappingOptions.liabilityAccountOptions || [];
+    if (!(this.fixedDepositProductsTemplate === undefined) && this.fixedDepositProductsTemplate.id) {
+      this.assignAccountingStepData();
+    }
+  }
+
+  assignAccountingStepData() {
+    if (this.fixedDepositProductsTemplate.accountingRule.id === 2) {
+      this.fixedDepositProductAccountingForm.patchValue({
+        'accountingRule': this.fixedDepositProductsTemplate.accountingRule.id
+      });
+      this.fixedDepositProductAccountingForm.patchValue({
+        'savingsReferenceAccountId': this.fixedDepositProductsTemplate.accountingMappings.savingsReferenceAccount.id,
+        'savingsControlAccountId': this.fixedDepositProductsTemplate.accountingMappings.savingsControlAccount.id,
+        'transfersInSuspenseAccountId': this.fixedDepositProductsTemplate.accountingMappings.transfersInSuspenseAccount.id,
+        'incomeFromFeeAccountId': this.fixedDepositProductsTemplate.accountingMappings.incomeFromFeeAccount.id,
+        'incomeFromPenaltyAccountId': this.fixedDepositProductsTemplate.accountingMappings.incomeFromPenaltyAccount.id,
+        'interestOnSavingsAccountId': this.fixedDepositProductsTemplate.accountingMappings.interestOnSavingsAccount.id
+      });
+      if (this.fixedDepositProductsTemplate.paymentChannelToFundSourceMappings || this.fixedDepositProductsTemplate.feeToIncomeAccountMappings || this.fixedDepositProductsTemplate.penaltyToIncomeAccountMappings) {
+        this.fixedDepositProductAccountingForm.patchValue({
+          'advancedAccountingRules': true
+        });
+      }
+      if (this.fixedDepositProductsTemplate.paymentChannelToFundSourceMappings) {
+        this.fixedDepositProductsTemplate.paymentChannelToFundSourceMappings.forEach((paymentChannelToFundSourceMapping: any) => {
+          const paymentChannelToFundSourceMappingData = this.formBuilder.group({
+            paymentTypeId: [paymentChannelToFundSourceMapping.paymentType.id, Validators.required],
+            fundSourceAccountId: [paymentChannelToFundSourceMapping.fundSourceAccount.id, Validators.required]
+          });
+          const formArray = this.fixedDepositProductAccountingForm.controls['paymentChannelToFundSourceMappings'] as FormArray;
+          formArray.push(paymentChannelToFundSourceMappingData);
+        });
+      }
+      if (this.fixedDepositProductsTemplate.feeToIncomeAccountMappings) {
+        this.fixedDepositProductsTemplate.feeToIncomeAccountMappings.forEach((feeToIncomeAccountMapping: any) => {
+          const feeToIncomeAccountMappingData = this.formBuilder.group({
+            chargeId: [feeToIncomeAccountMapping.charge.id, Validators.required],
+            incomeAccountId: [feeToIncomeAccountMapping.incomeAccount.id, Validators.required]
+          });
+          const formArray = this.fixedDepositProductAccountingForm.controls['feeToIncomeAccountMappings'] as FormArray;
+          formArray.push(feeToIncomeAccountMappingData);
+        });
+      }
+      if (this.fixedDepositProductsTemplate.penaltyToIncomeAccountMappings) {
+        this.fixedDepositProductsTemplate.penaltyToIncomeAccountMappings.forEach((penaltyToIncomeAccountMapping: any) => {
+          const penaltyToIncomeAccountMappingData = this.formBuilder.group({
+            chargeId: [penaltyToIncomeAccountMapping.charge.id, Validators.required],
+            incomeAccountId: [penaltyToIncomeAccountMapping.incomeAccount.id, Validators.required]
+          });
+          const formArray = this.fixedDepositProductAccountingForm.controls['penaltyToIncomeAccountMappings'] as FormArray;
+          formArray.push(penaltyToIncomeAccountMappingData);
+        });
+      }
+    }
   }
 
   createfixedDepositProductAccountingForm() {

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component.ts

@@ -24,9 +24,11 @@ export class FixedDepositProductChargesStepComponent implements OnInit {
 
   ngOnInit() {
     this.chargeData = this.fixedDepositProductsTemplate.chargeOptions;
-
-    this.chargesDataSource = [];
-
+    if (!(this.fixedDepositProductsTemplate === undefined) && this.fixedDepositProductsTemplate.id) {
+      this.chargesDataSource = this.fixedDepositProductsTemplate.charges;
+    } else {
+      this.chargesDataSource = [];
+    }
     this.currencyCode.valueChanges.subscribe(() => this.chargesDataSource = []);
   }
 

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component.ts

@@ -21,10 +21,18 @@ export class FixedDepositProductCurrencyStepComponent implements OnInit {
   ngOnInit() {
     this.currencyData = this.fixedDepositProductsTemplate.currencyOptions;
 
-    this.fixedDepositProductCurrencyForm.patchValue({
-      'currencyCode': this.currencyData[0].code,
-      'digitsAfterDecimal': 2
-    });
+    if (!(this.fixedDepositProductsTemplate === undefined) && this.fixedDepositProductsTemplate.id) {
+      this.fixedDepositProductCurrencyForm.patchValue({
+        'currencyCode': this.fixedDepositProductsTemplate.currency.code,
+        'digitsAfterDecimal': this.fixedDepositProductsTemplate.currency.decimalPlaces,
+        'inMultiplesOf': this.fixedDepositProductsTemplate.currency.inMultiplesOf
+      });
+    } else {
+      this.fixedDepositProductCurrencyForm.patchValue({
+        'currencyCode': this.currencyData[0].code,
+        'digitsAfterDecimal': 2
+      });
+    }
   }
 
   createFixedDepositProductCurrencyForm() {

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component.html

@@ -5,7 +5,7 @@
     <mat-form-field fxFlex="48%">
       <mat-label>Product Name</mat-label>
       <input matInput formControlName="name" required>
-      <mat-error>
+      <mat-error *ngIf="fixedDepositProductDetailsForm.controls.name.hasError('required')">
         Product Name is <strong>required</strong>
       </mat-error>
     </mat-form-field>
@@ -13,7 +13,7 @@
     <mat-form-field fxFlex="48%">
       <mat-label>Short Name</mat-label>
       <input matInput formControlName="shortName" maxlength="4" required>
-      <mat-error>
+      <mat-error *ngIf="fixedDepositProductDetailsForm.controls.shortName.hasError('required')">
         Short Name is <strong>required</strong>
       </mat-error>
     </mat-form-field>
@@ -21,6 +21,9 @@
     <mat-form-field fxFlex="98%">
       <mat-label>Description</mat-label>
       <textarea matInput formControlName="description"></textarea>
+      <mat-error *ngIf="fixedDepositProductDetailsForm.controls.description.hasError('required')">
+        Description is <strong>required</strong>
+      </mat-error>
     </mat-form-field>
 
   </div>

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 @Component({
@@ -8,6 +8,8 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 })
 export class FixedDepositProductDetailsStepComponent implements OnInit {
 
+  @Input() fixedDepositProductsTemplate: any;
+
   fixedDepositProductDetailsForm: FormGroup;
 
   constructor(private formBuilder: FormBuilder) {
@@ -15,13 +17,20 @@ export class FixedDepositProductDetailsStepComponent implements OnInit {
   }
 
   ngOnInit() {
+    if (!(this.fixedDepositProductsTemplate === undefined) && this.fixedDepositProductsTemplate.id) {
+      this.fixedDepositProductDetailsForm.patchValue({
+        'name': this.fixedDepositProductsTemplate.name,
+        'shortName': this.fixedDepositProductsTemplate.shortName,
+        'description': this.fixedDepositProductsTemplate.description,
+      });
+    }
   }
 
   createFixedDepositProductDetailsForm() {
     this.fixedDepositProductDetailsForm = this.formBuilder.group({
       'name': ['', Validators.required],
       'shortName': ['', Validators.required],
-      'description': ['']
+      'description': ['', Validators.required]
     });
   }
 

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.ts

@@ -47,6 +47,8 @@ export class FixedDepositProductInterestRateChartStepComponent implements OnInit
   maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + 10));
 
   expandChartSlabIndex: number[] = [];
+  chartDetailData: any = [];
+  chartsDetail: any[] = [];
 
   constructor(private formBuilder: FormBuilder,
               public dialog: MatDialog,
@@ -63,6 +65,130 @@ export class FixedDepositProductInterestRateChartStepComponent implements OnInit
     this.clientTypeData = this.fixedDepositProductsTemplate.chartTemplate.clientTypeOptions;
     this.clientClassificationData = this.fixedDepositProductsTemplate.chartTemplate.clientClassificationOptions;
     this.incentiveTypeData = this.fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions;
+
+    if (!(this.fixedDepositProductsTemplate === undefined) && this.fixedDepositProductsTemplate.id) {
+      this.assignFormData();
+    }
+  }
+
+  assignFormData() {
+    this.addChart();
+    const isChartArray = Array.isArray(this.fixedDepositProductsTemplate.activeChart);
+    if (!isChartArray) {
+      this.chartDetailData.push(this.fixedDepositProductsTemplate.activeChart);
+    } else {
+      this.chartDetailData = this.fixedDepositProductsTemplate.activeChart;
+    }
+
+    // Build the array of Objects from the retrived value
+    this.getChartsDetailsData();
+
+    // Iterates for every chart in charts
+    this.charts.controls.forEach((chartDetailControl: FormGroup, i: number) => {
+
+      // Iterate for every chartSlab in chart
+      this.chartsDetail[i].chartSlabs.forEach((chartSlabDetail: any, j: number) => {
+
+        const chartSlabInfo = this.formBuilder.group({
+          amountRangeFrom: [chartSlabDetail.amountRangeFrom],
+          amountRangeTo: [chartSlabDetail.amountRangeTo],
+          annualInterestRate: [chartSlabDetail.annualInterestRate, Validators.required],
+          description: [chartSlabDetail.description, Validators.required],
+          fromPeriod: [chartSlabDetail.fromPeriod, Validators.required],
+          toPeriod: [chartSlabDetail.toPeriod],
+          periodType: [chartSlabDetail.periodType, Validators.required],
+          incentives: this.formBuilder.array([])
+        });
+        const formArray = chartDetailControl.controls['chartSlabs'] as FormArray;
+        formArray.push(chartSlabInfo);
+
+        // Iterate for every slab in chartSlab
+        const chartIncentiveControl = chartDetailControl.controls['chartSlabs']['controls'][j];
+
+        // Iterate to input all the incentive for particular chart slab
+        this.chartsDetail[i].chartSlabs[j].incentives.forEach((chartIncentiveDetail: any) => {
+          const incentiveInfo = this.formBuilder.group({
+            amount: [chartIncentiveDetail.amount, Validators.required],
+            attributeName: [chartIncentiveDetail.attributeName, Validators.required],
+            attribureValue: [chartIncentiveDetail.attribureValue, Validators.required],
+            conditionType: [chartIncentiveDetail.conditionType, Validators.required],
+            entityType: [chartIncentiveDetail.entityType, Validators.required],
+            incentiveType: [chartIncentiveDetail.incentiveType, Validators.required]
+          });
+          const newFormArray = chartIncentiveControl['controls']['incentives'] as FormArray;
+          newFormArray.push(incentiveInfo);
+        });
+
+      });
+
+    });
+  }
+
+  getChartsDetailsData() {
+    this.chartDetailData.forEach((chartData: any) => {
+      const chart = {
+        endDate: chartData.endDate ? new Date(chartData.endDate) : '',
+        fromDate: chartData.fromDate ? new Date(chartData.fromDate) : '',
+        isPrimaryGroupingByAmount: chartData.isPrimaryGroupingByAmount,
+        name: chartData.name,
+        chartSlabs: this.getChartSlabsData(chartData)
+      };
+      this.chartsDetail.push(chart);
+    });
+    this.fixedDepositProductInterestRateChartForm.patchValue({
+      'charts': this.chartsDetail
+    });
+  }
+
+  getChartSlabsData(chartData: any) {
+    const chartSlabs: any[] = [];
+    let chartSlabData: any[] = [];
+    const isChartSlabArray = Array.isArray(chartData.chartSlabs);
+    if (!isChartSlabArray) {
+      chartSlabData.push(chartData.chartSlabs);
+    } else {
+      chartSlabData = chartData.chartSlabs;
+    }
+
+    chartSlabData.forEach((eachChartSlabData: any) => {
+      const chartSlab = {
+        periodType: eachChartSlabData.periodType.id,
+        amountRangeFrom: eachChartSlabData.amountRangeFrom,
+        amountRangeTo: eachChartSlabData.amountRangeTo,
+        annualInterestRate: eachChartSlabData.annualInterestRate,
+        description: eachChartSlabData.description ? eachChartSlabData.description : '',
+        fromPeriod: eachChartSlabData.fromPeriod,
+        toPeriod: eachChartSlabData.toPeriod,
+        incentives: this.getIncentivesData(chartSlabData)
+      };
+      chartSlabs.push(chartSlab);
+    });
+    return chartSlabs;
+  }
+
+  getIncentivesData(chartSlabData: any) {
+    const incentives: any[] = [];
+    let incentiveDatas: any[] = [];
+    if (chartSlabData.incentives) {
+      const isChartIncentiveArray = Array.isArray(chartSlabData.incentives);
+      if (!isChartIncentiveArray) {
+        incentiveDatas.push(chartSlabData.incentives);
+      } else {
+        incentiveDatas = chartSlabData.incentives;
+      }
+      incentiveDatas.forEach((incentiveData: any) => {
+        const incentive = {
+          amount: incentiveData.amount,
+          attributeName: incentiveData.attributeName,
+          attributeValue: incentiveData.attributeValue,
+          conditionType: incentiveData.conditionType,
+          entityType: incentiveData.entityType,
+          incentiveType: incentiveData.incentiveType,
+        };
+        incentives.push(incentive);
+      });
+    }
+    return incentives;
   }
 
   createFixedDepositProductInterestRateChartForm() {

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.ts

@@ -27,6 +27,26 @@ export class FixedDepositProductSettingsStepComponent implements OnInit {
     this.periodFrequencyTypeData = this.fixedDepositProductsTemplate.periodFrequencyTypeOptions.slice(0, -1);
     this.preClosurePenalInterestOnTypeData = this.fixedDepositProductsTemplate.preClosurePenalInterestOnTypeOptions;
     this.taxGroupData = this.fixedDepositProductsTemplate.taxGroupOptions;
+
+    if (!(this.fixedDepositProductsTemplate === undefined) && this.fixedDepositProductsTemplate.id) {
+      this.fixedDepositProductSettingsForm.patchValue({
+        'isMandatoryDeposit': this.fixedDepositProductsTemplate.isMandatoryDeposit,
+        'adjustAdvanceTowardsFuturePayments': this.fixedDepositProductsTemplate.adjustAdvanceTowardsFuturePayments,
+        'allowWithdrawal': this.fixedDepositProductsTemplate.allowWithdrawal,
+        'lockinPeriodFrequency': this.fixedDepositProductsTemplate.lockinPeriodFrequency,
+        'lockinPeriodFrequencyType': this.fixedDepositProductsTemplate.lockinPeriodFrequencyType ? this.fixedDepositProductsTemplate.lockinPeriodFrequencyType.id : '',
+        'minDepositTerm': this.fixedDepositProductsTemplate.minDepositTerm,
+        'minDepositTermTypeId': this.fixedDepositProductsTemplate.minDepositTermType ? this.fixedDepositProductsTemplate.minDepositTermType.id : '',
+        'inMultiplesOfDepositTerm': this.fixedDepositProductsTemplate.inMultiplesOfDepositTerm,
+        'inMultiplesOfDepositTermTypeId': this.fixedDepositProductsTemplate.inMultiplesOfDepositTermType ? this.fixedDepositProductsTemplate.inMultiplesOfDepositTerm.id : '',
+        'maxDepositTerm': this.fixedDepositProductsTemplate.maxDepositTerm,
+        'maxDepositTermTypeId': this.fixedDepositProductsTemplate.maxDepositTermType ? this.fixedDepositProductsTemplate.minDepositTermType.id : '',
+        'preClosurePenalApplicable': this.fixedDepositProductsTemplate.preClosurePenalApplicable,
+        'preClosurePenalInterest': this.fixedDepositProductsTemplate.preClosurePenalInterest,
+        'preClosurePenalInterestOnTypeId': this.fixedDepositProductsTemplate.preClosurePenalInterestOnType ? this.fixedDepositProductsTemplate.preClosurePenalInterestOnType.id : '',
+        'withHoldTax': this.fixedDepositProductsTemplate.withHoldTax
+      });
+    }
   }
 
   createFixedDepositProductSettingsForm() {

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.ts

@@ -27,6 +27,14 @@ export class FixedDepositProductTermsStepComponent implements OnInit {
     this.interestCalculationTypeData = this.fixedDepositProductsTemplate.interestCalculationTypeOptions;
     this.interestCalculationDaysInYearTypeData = this.fixedDepositProductsTemplate.interestCalculationDaysInYearTypeOptions;
 
+    if (!(this.fixedDepositProductsTemplate === undefined) && this.fixedDepositProductsTemplate.id) {
+      this.fixedDepositProductTermsForm.patchValue({
+        'minDepositAmount': this.fixedDepositProductsTemplate.minDepositAmount,
+        'depositAmount': this.fixedDepositProductsTemplate.depositAmount,
+        'maxDepositAmount': this.fixedDepositProductsTemplate.maxDepositAmount,
+      });
+    }
+
     this.fixedDepositProductTermsForm.patchValue({
       'interestCompoundingPeriodType': this.fixedDepositProductsTemplate.interestCompoundingPeriodType.id,
       'interestPostingPeriodType': this.fixedDepositProductsTemplate.interestPostingPeriodType.id,

src/app/products/fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component.html

@@ -1,5 +1,5 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary">
+  <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
     Edit
   </button>
@@ -89,16 +89,19 @@
             {{ fixedDepositProductData.lockinPeriodFrequency }} {{ fixedDepositProductData.lockinPeriodFrequencyType.value }}</span>
         </div>
 
-        <!-- <div fxFlexFill *ngIf="fixedDepositProductData.minDepositTerm">
+        <div fxFlexFill *ngIf="fixedDepositProductData.minDepositTerm">
           <span fxFlex="40%">Minimum Deposit Term:</span>
-          <span fxFlex="60%">{{ fixedDepositProductData.minDepositTerm }}
+          <span fxFlex="60%"
+            *ngIf="fixedDepositProductData.minDepositTerm !== undefined">{{ fixedDepositProductData.minDepositTerm }}
             &nbsp;
             {{ fixedDepositProductData.minDepositTermType.value }}</span>
-        </div> -->
+        </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.maxDepositTerm">
           <span fxFlex="40%">Maximum Deposit Term:</span>
-          <span fxFlex="60%">{{ fixedDepositProductData.maxDepositTerm }}
+          <span fxFlex="60%"
+            *ngIf="fixedDepositProductData.maxDepositTerm !== undefined">{{ fixedDepositProductData.maxDepositTerm }}
+            &nbsp;
             {{ fixedDepositProductData.maxDepositTermType.value }}</span>
         </div>
 
@@ -107,7 +110,7 @@
           <span fxFlex="60%">{{ fixedDepositProductData.inMultiplesOfDepositTerm }}
             -
             {{ fixedDepositProductData.inMultiplesOfDepositTermType.value }}</span>
-        </div> 
+        </div>
 
         <div fxFlexFill>
 		  <span fxFlex="40%">Apply Penal Interest (less):</span>
@@ -136,7 +139,7 @@
           <span fxFlex="60%">{{ fixedDepositProductData.taxGroup.name }}</span>
         </div>
 
-        <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" >
+        <div *ngIf="fixedDepositProductData.activeChart" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" >
 
           <h3 class="mat-h3" fxFlexFill>Interest Rate Chart</h3>
 
@@ -298,8 +301,6 @@
 
             </table>
 
-            <mat-divider [inset]="true"></mat-divider>
-
           </div>
 
         </div>

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

@@ -92,6 +92,8 @@ import { EditTaxGroupResolver } from './manage-tax-groups/edit-tax-group/edit-ta
 import { ProductsMixTemplateResolver } from './products-mix/products-mix-template.resolver';
 import { EditProductMixComponent } from './products-mix/edit-product-mix/edit-product-mix.component';
 import { ChargesTemplateAndResolver } from './charges/charges-template-and-resolver';
+import { EditFixedDepositProductComponent } from './fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component';
+import { FixedDepositProductAndTemplateResolver } from './fixed-deposit-products/edit-fixed-deposit-product/fixed-deposit-product-and-template.resolver';
 
 /** Products Routes */
 const routes: Routes = [
@@ -400,13 +402,6 @@ const routes: Routes = [
           path: 'fixed-deposit-products',
           data: { title:  extract('Fixed Deposit Products'), breadcrumb: 'Fixed Deposit Products' },
           children: [
-            {
-              path: '',
-              component: FixedDepositProductsComponent,
-              resolve: {
-                    fixedDepositProducts: FixedDepositProductsResolver
-              },
-            },
             {
               path: 'create',
               component: CreateFixedDepositProductComponent,
@@ -415,6 +410,13 @@ const routes: Routes = [
                 fixedDepositProductsTemplate: FixedDepositProductsTemplateResolver
               }
             },
+            {
+              path: '',
+              component: FixedDepositProductsComponent,
+              resolve: {
+                fixedDepositProducts: FixedDepositProductsResolver
+              },
+            },
             {
               path: ':id',
               data: { title: extract('View Fixed Deposit Product'), routeParamBreadcrumb: 'id' },
@@ -426,6 +428,14 @@ const routes: Routes = [
                     fixedDepositProduct: FixedDepositProductResolver,
                     fixedDepositProductsTemplate: FixedDepositProductsTemplateResolver
                   }
+                },
+                {
+                  path: 'edit',
+                  data: { title: extract('Edit Fixed Deposit Product'), breadcrumb: 'edit', routeParamBreadcrumb: false },
+                  component: EditFixedDepositProductComponent,
+                  resolve: {
+                    fixedDepositProductAndTemplate: FixedDepositProductAndTemplateResolver
+                  }
                 }
               ]
             }
@@ -605,7 +615,8 @@ const routes: Routes = [
     FixedDepositProductResolver,
     ManageTaxGroupTemplateResolver,
     EditTaxGroupResolver,
-    ProductsMixTemplateResolver
+    ProductsMixTemplateResolver,
+    FixedDepositProductAndTemplateResolver
   ]
 })
 export class ProductsRoutingModule { }

src/app/products/products.module.ts

@@ -95,6 +95,7 @@ import { EditTaxGroupComponent } from './manage-tax-groups/edit-tax-group/edit-t
 import { CreateProductMixComponent } from './products-mix/create-product-mix/create-product-mix.component';
 import { EditProductMixComponent } from './products-mix/edit-product-mix/edit-product-mix.component';
 import { CreateChargeComponent } from './charges/create-charge/create-charge.component';
+import { EditFixedDepositProductComponent } from './fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component';
 
 /**
  * Products Module
@@ -194,7 +195,8 @@ import { CreateChargeComponent } from './charges/create-charge/create-charge.com
     CreateProductMixComponent,
     EditProductMixComponent,
     ManageTaxGroupsComponent,
-    CreateChargeComponent
+    CreateChargeComponent,
+    EditFixedDepositProductComponent
   ],
   entryComponents: [
     DepositProductIncentiveFormDialogComponent,

src/app/products/products.service.ts

@@ -206,6 +206,15 @@ export class ProductsService {
     return this.http.get(`/fixeddepositproducts/${fixedDepositProductId}`);
   }
 
+  getFixedDepositProductAndTemplate(fixedDepositProductId: any) {
+    const httpParams = new HttpParams().set('template', 'true');
+    return this.http.get(`/fixeddepositproducts/${fixedDepositProductId}`, { params: httpParams });
+  }
+
+  updateFixedDepositProduct(fixedDepositProductId: any, fixedDepositProduct: any): Observable<any> {
+    return this.http.put(`/fixeddepositproducts/${fixedDepositProductId}`, fixedDepositProduct);
+  }
+
   /**
    * @returns {Observable<any>} Tax Components data
    */