feat: add edit share account page (#881)

Fixes: #880

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

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, OnChanges, Input } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { FormControl } from '@angular/forms';
 
@@ -19,7 +19,7 @@ import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
   templateUrl: './shares-account-charges-step.component.html',
   styleUrls: ['./shares-account-charges-step.component.scss']
 })
-export class SharesAccountChargesStepComponent implements OnInit, OnChanges {
+export class SharesAccountChargesStepComponent implements OnInit {
 
   /** Shares Account Product Template */
   @Input() sharesAccountProductTemplate: any;
@@ -32,6 +32,10 @@ export class SharesAccountChargesStepComponent implements OnInit, OnChanges {
   chargeData: any;
   /** Charges Data Source */
   chargesDataSource: {}[];
+  /** Component is pristine if there has been no changes by user interaction */
+  pristine = true;
+  /** For Edit Shares Account Form */
+  isChargesPatched = false;
   /** Display columns for charges table */
   displayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'action'];
 
@@ -41,16 +45,20 @@ export class SharesAccountChargesStepComponent implements OnInit, OnChanges {
   constructor(public dialog: MatDialog) {}
 
   ngOnInit() {
+    this.chargesDataSource = [];
     this.chargeData = this.sharesAccountTemplate.chargeOptions.map((charge: any) => {
       charge.chargeId = charge.id;
       delete charge.id;
       return charge;
     });
-    this.currencyCode.valueChanges.subscribe(() => this.chargesDataSource = []);
-  }
-
-  ngOnChanges() {
-    this.chargesDataSource = this.sharesAccountProductTemplate ? (this.sharesAccountProductTemplate.charges || []) : [];
+    this.currencyCode.valueChanges.subscribe(() => {
+      if (!this.isChargesPatched && this.sharesAccountTemplate.charges) {
+        this.chargesDataSource = this.sharesAccountTemplate.charges;
+        this.isChargesPatched = true;
+      } else {
+        this.chargesDataSource = [];
+      }
+    });
   }
 
   /**
@@ -60,6 +68,7 @@ export class SharesAccountChargesStepComponent implements OnInit, OnChanges {
   addCharge(charge: any) {
     this.chargesDataSource = this.chargesDataSource.concat([charge.value]);
     charge.value = '';
+    this.pristine = false;
   }
 
   /**
@@ -89,6 +98,7 @@ export class SharesAccountChargesStepComponent implements OnInit, OnChanges {
         this.chargesDataSource = this.chargesDataSource.concat([]);
       }
     });
+    this.pristine = false;
   }
 
   /**
@@ -105,6 +115,7 @@ export class SharesAccountChargesStepComponent implements OnInit, OnChanges {
         this.chargesDataSource = this.chargesDataSource.concat([]);
       }
     });
+    this.pristine = false;
   }
 
   /**

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

@@ -41,8 +41,17 @@ export class SharesAccountDetailsStepComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.productData = this.sharesAccountTemplate.productOptions;
     this.buildDependencies();
+    if (this.sharesAccountTemplate) {
+      this.productData = this.sharesAccountTemplate.productOptions;
+      if (this.sharesAccountTemplate.productId) {
+        this.sharesAccountDetailsForm.patchValue({
+          'productId': this.sharesAccountTemplate.productId,
+          'submittedDate': this.sharesAccountTemplate.timeline.submittedOnDate && new Date(this.sharesAccountTemplate.timeline.submittedOnDate),
+          'externalId': this.sharesAccountTemplate.externalId
+        });
+      }
+    }
   }
 
   /**

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

@@ -123,7 +123,7 @@
     <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
     Previous
   </button>
-  <button mat-raised-button [routerLink]="['../../']">
+  <button mat-raised-button [routerLink]="['../']">
     Cancel
   </button>
   <button mat-raised-button color="primary" (click)="submit.emit()">

src/app/shares/shares-account-stepper/shares-account-terms-step/shares-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 } from '@angular/forms';
 
 /**
@@ -10,10 +10,12 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
   templateUrl: './shares-account-terms-step.component.html',
   styleUrls: ['./shares-account-terms-step.component.scss']
 })
-export class SharesAccountTermsStepComponent implements OnChanges {
+export class SharesAccountTermsStepComponent implements OnChanges, OnInit {
 
   /** Shares Account and Product Template */
   @Input() sharesAccountProductTemplate: any;
+  /** [Optional] Shares Account Template */
+  @Input() sharesAccountTemplate: any;
 
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
@@ -27,6 +29,8 @@ export class SharesAccountTermsStepComponent implements OnChanges {
   lockinPeriodFrequencyTypeData: any;
   /** Savings Accounts Data */
   savingsAccountsData: any;
+  /** For Edit Shares Account Form */
+  isSavingsPatched = false;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder
@@ -41,11 +45,30 @@ export class SharesAccountTermsStepComponent implements OnChanges {
         'currencyCode': this.sharesAccountProductTemplate.currency.code,
         'decimal': this.sharesAccountProductTemplate.currency.decimalPlaces,
         'currencyMultiple': this.sharesAccountProductTemplate.currency.inMultiplesOf,
-        'unitPrice': this.sharesAccountProductTemplate.currentMarketPrice
+        'unitPrice': this.sharesAccountProductTemplate.currentMarketPrice,
+        'savingsAccountId': ''
+      });
+      this.setOptions();
+      if (this.sharesAccountTemplate) {
+        if (!this.isSavingsPatched && this.sharesAccountTemplate.savingsAccountId) {
+          this.sharesAccountTermsForm.get('savingsAccountId').patchValue(this.sharesAccountTemplate.savingsAccountId);
+          this.isSavingsPatched = true;
+        }
+      }
+    }
+  }
+
+  ngOnInit() {
+    if (this.sharesAccountTemplate) {
+      this.sharesAccountTermsForm.patchValue({
+        'requestedShares': this.sharesAccountTemplate.summary.totalPendingForApprovalShares,
+        'minimumActivePeriod': this.sharesAccountTemplate.minimumActivePeriod,
+        'minimumActivePeriodFrequencyType': this.sharesAccountTemplate.minimumActivePeriodTypeEnum.id,
+        'lockinPeriodFrequency': this.sharesAccountTemplate.lockinPeriod,
+        'lockinPeriodFrequencyType': this.sharesAccountTemplate.lockPeriodTypeEnum.id,
+        'applicationDate': this.sharesAccountTemplate.purchasedShares[0].purchasedDate && new Date(this.sharesAccountTemplate.purchasedShares[0].purchasedDate),
+        'allowDividendCalculationForInactiveClients': this.sharesAccountTemplate.allowDividendCalculationForInactiveClients
       });
-      this.minimumActivePeriodFrequencyTypeData = this.sharesAccountProductTemplate.minimumActivePeriodFrequencyTypeOptions;
-      this.lockinPeriodFrequencyTypeData = this.sharesAccountProductTemplate.lockinPeriodFrequencyTypeOptions;
-      this.savingsAccountsData = this.sharesAccountProductTemplate.clientSavingsAccounts;
     }
   }
 
@@ -65,10 +88,19 @@ export class SharesAccountTermsStepComponent implements OnChanges {
       'lockinPeriodFrequency': [''],
       'lockinPeriodFrequencyType': [''],
       'applicationDate': ['', Validators.required],
-      'allowDividendCalculationForInactiveClients': [false],
+      'allowDividendCalculationForInactiveClients': [false]
     });
   }
 
+  /**
+   * Sets all select dropdown options.
+   */
+  setOptions() {
+    this.minimumActivePeriodFrequencyTypeData = this.sharesAccountProductTemplate.minimumActivePeriodFrequencyTypeOptions;
+    this.lockinPeriodFrequencyTypeData = this.sharesAccountProductTemplate.lockinPeriodFrequencyTypeOptions;
+    this.savingsAccountsData = this.sharesAccountProductTemplate.clientSavingsAccounts;
+  }
+
   /**
    * Returns shares account terms form value.
    */