feat: add edit share account page (#881)

Fixes: #880

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 });
+    });
+  }
+
+}