feat: add edit share account page (#881)

Fixes: #880

src/app/shares/common-resolvers/share-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 { SharesService } from '../shares.service';
+
+/**
+ * Shares Account data and template resolver.
+ */
+@Injectable()
+export class SharesAccountAndTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {SharesService} SharesService Shares service.
+   */
+  constructor(private sharesService: SharesService) { }
+
+  /**
+   * Returns the Shares Account data and template.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const shareAccountId = route.paramMap.get('shareAccountId');
+    return this.sharesService.getSharesAccountData(shareAccountId, true);
+  }
+
+}

src/app/shares/common-resolvers/share-account-view.resolver.ts

@@ -26,7 +26,7 @@ export class SharesAccountViewResolver implements Resolve<Object> {
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
     const shareAccountId = route.paramMap.get('shareAccountId');
-    return this.sharesService.getSharesAccountData(shareAccountId);
+    return this.sharesService.getSharesAccountData(shareAccountId, false);
   }
 
 }

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

@@ -0,0 +1,78 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #shareProductStepper>
+
+    <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]="sharesAccountDetailsForm">
+
+      <ng-template matStepLabel>DETAILS</ng-template>
+
+      <mifosx-shares-account-details-step
+        [sharesAccountTemplate]="sharesAccountAndTemplate" 
+        (sharesAccountProductTemplate)="setTemplate($event)"
+      >
+      </mifosx-shares-account-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="sharesAccountTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-shares-account-terms-step 
+        [sharesAccountProductTemplate]="sharesAccountProductTemplate"
+        [sharesAccountTemplate]="sharesAccountAndTemplate">
+      </mifosx-shares-account-terms-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-shares-account-charges-step
+        [sharesAccountProductTemplate]="sharesAccountProductTemplate"
+        [sharesAccountTemplate]="sharesAccountAndTemplate" 
+        [currencyCode]="sharesAccountTermsForm.get('currencyCode')"
+      >
+      </mifosx-shares-account-charges-step>
+
+    </mat-step>
+
+    <mat-step *ngIf="sharesAccountFormValidAndNotPristine" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-shares-account-preview-step
+        [sharesAccountProductTemplate]="sharesAccountProductTemplate"
+        [sharesAccountTemplate]="sharesAccountAndTemplate"
+        [sharesAccountTermsForm]="sharesAccountTermsForm"
+        [sharesAccount]="sharesAccount"
+        (submit)="submit()"
+      >
+      </mifosx-shares-account-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>

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

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

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

@@ -0,0 +1,122 @@
+/** Angular Imports */
+import { Component, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Components */
+import { SharesAccountDetailsStepComponent } from '../shares-account-stepper/shares-account-details-step/shares-account-details-step.component';
+import { SharesAccountTermsStepComponent } from '../shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component';
+import { SharesAccountChargesStepComponent } from '../shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component';
+
+/** Custom Services */
+import { SharesService } from '../shares.service';
+
+/**
+ * Edit Shares Account Component
+ */
+@Component({
+  selector: 'mifosx-edit-shares-account',
+  templateUrl: './edit-shares-account.component.html',
+  styleUrls: ['./edit-shares-account.component.scss']
+})
+export class EditSharesAccountComponent {
+
+  /** Shares Account and Template */
+  sharesAccountAndTemplate: any;
+  /** Shares Account Product Template */
+  sharesAccountProductTemplate: any;
+
+  /** Shares Account Details Step */
+  @ViewChild(SharesAccountDetailsStepComponent) sharesAccountDetailsStep: SharesAccountDetailsStepComponent;
+  /** Shares Account Terms Step */
+  @ViewChild(SharesAccountTermsStepComponent) sharesAccountTermsStep: SharesAccountTermsStepComponent;
+  /** Shares Account Charges Step */
+  @ViewChild(SharesAccountChargesStepComponent) sharesAccountChargesStep: SharesAccountChargesStepComponent;
+
+  /**
+   * Fetches shares account template from `resolve`
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   * @param {DatePipe} datePipe Date Pipe
+   * @param {SharesService} sharesService Shares Service
+   */
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private sharesService: SharesService) {
+    this.route.data.subscribe((data: { sharesAccountAndTemplate: any }) => {
+      this.sharesAccountAndTemplate = data.sharesAccountAndTemplate;
+    });
+  }
+
+  /**
+   * Sets shares account product template.
+   * @param {any} $event API response
+   */
+  setTemplate($event: any) {
+    this.sharesAccountProductTemplate = $event;
+  }
+
+  /**
+   * Retrieves shares account details form.
+   */
+  get sharesAccountDetailsForm() {
+    return this.sharesAccountDetailsStep.sharesAccountDetailsForm;
+  }
+
+  /**
+   * Retrieves shares account terms form.
+   */
+  get sharesAccountTermsForm() {
+    return this.sharesAccountTermsStep.sharesAccountTermsForm;
+  }
+
+  /**
+   * Checks validity and pristinity of overall shares account form .
+   */
+  get sharesAccountFormValidAndNotPristine() {
+    return (
+      this.sharesAccountDetailsForm.valid &&
+      this.sharesAccountTermsForm.valid &&
+      (
+        !this.sharesAccountDetailsForm.pristine ||
+        !this.sharesAccountTermsForm.pristine ||
+        !this.sharesAccountChargesStep.pristine
+      )
+    );
+  }
+
+  /**
+   * Retrieves shares account object.
+   */
+  get sharesAccount() {
+    return {
+      ...this.sharesAccountDetailsStep.sharesAccountDetails,
+      ...this.sharesAccountTermsStep.sharesAccountTerms,
+      ...this.sharesAccountChargesStep.sharesAccountCharges
+    };
+  }
+
+  /**
+   * Creates a new share account.
+   */
+  submit() {
+    // TODO: Update once language and date settings are setup
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const sharesAccount = {
+      ...this.sharesAccount,
+      clientId: this.sharesAccountAndTemplate.clientId,
+      charges: this.sharesAccount.charges.map((charge: any) => ({ chargeId: charge.chargeId, amount: charge.amount })),
+      applicationDate: this.datePipe.transform(this.sharesAccount.applicationDate, dateFormat),
+      submittedDate: this.datePipe.transform(this.sharesAccount.submittedDate, dateFormat),
+      unitPrice: this.sharesAccountTermsForm.get('unitPrice').value,
+      dateFormat,
+      locale
+    };
+    this.sharesService.updateSharesAccount(this.sharesAccountAndTemplate.id , sharesAccount).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}

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

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

@@ -34,7 +34,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/shares/shares-account-view/shares-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 { SharesButtonsConfiguration } from './shares-buttons.config';
@@ -24,7 +24,8 @@ export class SharesAccountViewComponent implements OnInit {
    * Fetches shares 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: { sharesAccountData: any }) => {
       this.sharesAccountData = data.sharesAccountData;
     });
@@ -66,4 +67,12 @@ export class SharesAccountViewComponent implements OnInit {
     }
   }
 
+  doAction(name: string) {
+    switch (name) {
+      case 'Modify Application':
+      this.router.navigate(['edit-shares-account'], { relativeTo: this.route });
+      break;
+    }
+  }
+
 }

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

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

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

@@ -11,10 +11,12 @@ import { TransactionsTabComponent } from './shares-account-view/transactions-tab
 import { ChargesTabComponent } from './shares-account-view/charges-tab/charges-tab.component';
 import { DividendsTabComponent } from './shares-account-view/dividends-tab/dividends-tab.component';
 import { CreateSharesAccountComponent } from './create-shares-account/create-shares-account.component';
+import { EditSharesAccountComponent } from './edit-shares-account/edit-shares-account.component';
 
 /** Custom Resolvers */
 import { SharesAccountViewResolver } from './common-resolvers/share-account-view.resolver';
 import { SharesAccountTemplateResolver } from './common-resolvers/shares-account-template.resolver';
+import { SharesAccountAndTemplateResolver } from './common-resolvers/share-account-and-template.resolver';
 
 const routes: Routes = [
   {
@@ -32,28 +34,41 @@ const routes: Routes = [
       {
         path: ':shareAccountId',
         data: { title: extract('Shares Account View'), routeParamBreadcrumb: 'shareAccountId' },
-        component: SharesAccountViewComponent,
-        resolve: {
-          sharesAccountData: SharesAccountViewResolver
-        },
         children: [
           {
-            path: 'transactions',
-            component: TransactionsTabComponent,
-            data: { title: extract('Shares Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false }
+            path: '',
+            component: SharesAccountViewComponent,
+            resolve: {
+              sharesAccountData: SharesAccountViewResolver
+            },
+            children: [
+              {
+                path: 'transactions',
+                component: TransactionsTabComponent,
+                data: { title: extract('Shares Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'charges',
+                component: ChargesTabComponent,
+                data: { title: extract('Shares Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'dividends',
+                component: DividendsTabComponent,
+                data: { title: extract('Shares Account Dividends'), breadcrumb: 'Dividends', routeParamBreadcrumb: false }
+              }
+            ]
           },
           {
-            path: 'charges',
-            component: ChargesTabComponent,
-            data: { title: extract('Shares Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'dividends',
-            component: DividendsTabComponent,
-            data: { title: extract('Shares Account Dividends'), breadcrumb: 'Dividends', routeParamBreadcrumb: false }
+            path: 'edit-shares-account',
+            data: { title: extract('Edit Shares Account'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+            component: EditSharesAccountComponent,
+            resolve: {
+              sharesAccountAndTemplate: SharesAccountAndTemplateResolver
+            }
           }
         ]
-      }
+      },
     ]
   }
 ];
@@ -63,7 +78,8 @@ const routes: Routes = [
   exports: [RouterModule],
   providers: [
     SharesAccountViewResolver,
-    SharesAccountTemplateResolver
+    SharesAccountTemplateResolver,
+    SharesAccountAndTemplateResolver
   ]
 })
 export class SharesRoutingModule { }

src/app/shares/shares.module.ts

@@ -16,6 +16,7 @@ import { SharesAccountDetailsStepComponent } from './shares-account-stepper/shar
 import { SharesAccountTermsStepComponent } from './shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component';
 import { SharesAccountChargesStepComponent } from './shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component';
 import { SharesAccountPreviewStepComponent } from './shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component';
+import { EditSharesAccountComponent } from './edit-shares-account/edit-shares-account.component';
 
 /**
  * Shares Module
@@ -38,7 +39,8 @@ import { SharesAccountPreviewStepComponent } from './shares-account-stepper/shar
     SharesAccountDetailsStepComponent,
     SharesAccountTermsStepComponent,
     SharesAccountChargesStepComponent,
-    SharesAccountPreviewStepComponent
+    SharesAccountPreviewStepComponent,
+    EditSharesAccountComponent
   ],
   providers: [DatePipe]
 })

src/app/shares/shares.service.ts

@@ -19,8 +19,9 @@ export class SharesService {
    * @param accountId Shares Account Id of account to get data for.
    * @returns {Observable<any>} Shares data.
    */
-  getSharesAccountData(accountId: string): Observable<any> {
-    return this.http.get(`/accounts/share/${accountId}`);
+  getSharesAccountData(accountId: string, template: boolean): Observable<any> {
+    const httpParams = new HttpParams().set('template', template.toString());
+    return this.http.get(`/accounts/share/${accountId}`, { params: httpParams });
   }
 
   /**
@@ -41,4 +42,12 @@ export class SharesService {
     return this.http.post('/accounts/share', sharesAccount);
   }
 
+  /**
+   * @param {any} sharesAccount Shares Account
+   * @returns {Observable<any>}
+   */
+  updateSharesAccount(accountId: string, sharesAccount: any): Observable<any> {
+    return this.http.put(`/accounts/share/${accountId}`, sharesAccount);
+  }
+
 }