feat: add edit savings account page (#884)

Fixes: #222

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

@@ -0,0 +1,78 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
+
+    <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]="savingsAccountDetailsForm">
+
+      <ng-template matStepLabel>DETAILS</ng-template>
+
+      <mifosx-savings-account-details-step
+        [savingsAccountTemplate]="savingsAccountAndTemplate" 
+        (savingsAccountProductTemplate)="setTemplate($event)"
+      >
+      </mifosx-savings-account-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="savingsAccountTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-savings-account-terms-step 
+        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+        [savingsAccountTemplate]="savingsAccountAndTemplate"
+      ></mifosx-savings-account-terms-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-savings-account-charges-step
+        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+        [savingsAccountTemplate]="savingsAccountAndTemplate"
+        [currencyCode]="savingsAccountTermsForm.get('currencyCode')"
+      >
+      </mifosx-savings-account-charges-step>
+
+    </mat-step>
+
+    <mat-step *ngIf="savingsAccountFormValidAndNotPristine" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-savings-account-preview-step
+        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+        [savingsAccountTemplate]="savingsAccountAndTemplate"
+        [savingsAccountTermsForm]="savingsAccountTermsForm"
+        [savingsAccount]="savingsAccount"
+        (submit)="submit()"
+      >
+      </mifosx-savings-account-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>

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

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

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

@@ -0,0 +1,129 @@
+/** Angular Imports */
+import { Component, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Components */
+import { SavingsAccountDetailsStepComponent } from '../savings-account-stepper/savings-account-details-step/savings-account-details-step.component';
+import { SavingsAccountTermsStepComponent } from '../savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component';
+import { SavingsAccountChargesStepComponent } from '../savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component';
+
+/** Custom Services */
+import { SavingsService } from '../savings.service';
+
+/**
+ * Edit Savings Account Component
+ */
+@Component({
+  selector: 'mifosx-edit-savings-account',
+  templateUrl: './edit-savings-account.component.html',
+  styleUrls: ['./edit-savings-account.component.scss']
+})
+export class EditSavingsAccountComponent {
+
+  /** Savings Account Template */
+  savingsAccountAndTemplate: any;
+  /** Savings Account Product Template */
+  savingsAccountProductTemplate: any;
+
+  /** Savings Account Details Step */
+  @ViewChild(SavingsAccountDetailsStepComponent) savingsAccountDetailsStep: SavingsAccountDetailsStepComponent;
+  /** Savings Account Terms Step */
+  @ViewChild(SavingsAccountTermsStepComponent) savingsAccountTermsStep: SavingsAccountTermsStepComponent;
+  /** Savings Account Charges Step */
+  @ViewChild(SavingsAccountChargesStepComponent) savingsAccountChargesStep: SavingsAccountChargesStepComponent;
+
+  /**
+   * Fetches savings account template from `resolve`
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   * @param {DatePipe} datePipe Date Pipe
+   * @param {SavingsService} savingsService Savings Service
+   */
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private savingsService: SavingsService
+              ) {
+    this.route.data.subscribe((data: { savingsAccountAndTemplate: any }) => {
+      this.savingsAccountAndTemplate = data.savingsAccountAndTemplate;
+    });
+  }
+
+  /**
+   * Sets savings account product template.
+   * @param {any} $event API response
+   */
+  setTemplate($event: any) {
+    this.savingsAccountProductTemplate = $event;
+  }
+
+  /**
+   * Retrieves savings account details form.
+   */
+  get savingsAccountDetailsForm() {
+    return this.savingsAccountDetailsStep.savingsAccountDetailsForm;
+  }
+
+  /**
+   * Retrieves savings account terms form.
+   */
+  get savingsAccountTermsForm() {
+    return this.savingsAccountTermsStep.savingsAccountTermsForm;
+  }
+
+  /**
+   * Checks validity and pristinity of overall savings account form .
+   */
+  get savingsAccountFormValidAndNotPristine() {
+    return (
+      this.savingsAccountDetailsForm.valid &&
+      this.savingsAccountTermsForm.valid &&
+      (
+        !this.savingsAccountDetailsForm.pristine ||
+        !this.savingsAccountTermsForm.pristine ||
+        !this.savingsAccountChargesStep.pristine
+      )
+    );
+  }
+
+  /**
+   * Retrieves savings account object.
+   */
+  get savingsAccount() {
+    return {
+      ...this.savingsAccountDetailsStep.savingsAccountDetails,
+      ...this.savingsAccountTermsStep.savingsAccountTerms,
+      ...this.savingsAccountChargesStep.savingsAccountCharges
+    };
+  }
+
+  /**
+   * Creates a new share account.
+   */
+  submit() {
+    // TODO: Update once language and date settings are setup
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const monthDayFormat = 'dd MMMM';
+    const savingsAccount = {
+      ...this.savingsAccount,
+      clientId: this.savingsAccountAndTemplate.clientId,
+      charges: this.savingsAccount.charges.map((charge: any) => ({
+        chargeId: charge.id,
+        amount: charge.amount,
+        dueDate: this.datePipe.transform(charge.dueDate, dateFormat),
+        feeOnMonthDay: this.datePipe.transform(charge.feeOnMonthDay, dateFormat),
+        feeInterval: charge.feeInterval
+      })),
+      submittedOnDate: this.datePipe.transform(this.savingsAccount.submittedOnDate, dateFormat),
+      dateFormat,
+      monthDayFormat,
+      locale
+    };
+    this.savingsService.updateSavingsAccount(this.savingsAccountAndTemplate.id, savingsAccount).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}