feat: add edit savings account page (#884)

Fixes: #222

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.
    */