feat: add create savings account page (#883)

Fixes: #882

src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html

@@ -0,0 +1,112 @@
+<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+  <mat-form-field fxFlex="48%">
+    <mat-label>Charge</mat-label>
+    <mat-select #charge>
+      <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value" [value]="charge">
+        {{ charge.name }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <div fxFlex="48%" fxFlexAlign="center">
+    <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
+      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      Add
+    </button>
+  </div>
+
+  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
+
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let charge">
+        {{ charge.name + ', ' + charge.currency.displaySymbol }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="chargeCalculationType">
+      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <td mat-cell *matCellDef="let charge">
+        {{ charge.chargeCalculationType.value }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amount">
+      <th mat-header-cell *matHeaderCellDef> Amount </th>
+      <td mat-cell *matCellDef="let charge">
+        {{ charge.amount }} 
+        <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
+          <fa-icon icon="pen"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="chargeTimeType">
+      <th mat-header-cell *matHeaderCellDef> Collected On </th>
+      <td mat-cell *matCellDef="let charge">
+        {{ charge.chargeTimeType.value }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="date">
+      <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'}}
+        </span>
+        <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
+          {{charge.feeOnMonthDay || 'Unassigned'}}
+        </span>
+        <span 
+          *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
+            || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
+          N/A
+        </span>
+        <button mat-icon-button color="primary"
+          *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
+                  || charge.chargeTimeType.value === 'Specified due date'" 
+          (click)="editChargeDate(charge)">
+          <fa-icon icon="pen"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="repaymentsEvery">
+      <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+      <td mat-cell *matCellDef="let charge">
+        {{ charge.feeInterval || 'Not Provided' }} 
+        <button mat-icon-button color="primary" 
+          *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
+          (click)="editChargeFeeInterval(charge)">
+          <fa-icon icon="pen"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="action">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let charge">
+        <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
+          <fa-icon icon="trash"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+  </table>
+
+</div>
+
+<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <button mat-raised-button matStepperPrevious>
+    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    Previous
+  </button>
+  <button mat-raised-button matStepperNext>
+    Next&nbsp;&nbsp;
+    <fa-icon icon="arrow-right"></fa-icon>
+  </button>
+</div>

src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.scss

@@ -0,0 +1,11 @@
+table {
+  width: 100%;
+}
+
+.mat-elevation-z1 {
+  margin: 1em 0 1.5em 0;
+}
+
+.margin-t {
+  margin-top: 1em;
+}

src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.spec.ts

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

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

@@ -0,0 +1,202 @@
+/** Angular Imports */
+import { Component, OnInit, OnChanges, Input } from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { FormControl } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+
+/** Custom Dialogs */
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+
+/** Custom Models */
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+
+/**
+ * Savings Account Charges Step
+ */
+@Component({
+  selector: 'mifosx-savings-account-charges-step',
+  templateUrl: './savings-account-charges-step.component.html',
+  styleUrls: ['./savings-account-charges-step.component.scss']
+})
+export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
+
+  /** Savings Account Product Template */
+  @Input() savingsAccountProductTemplate: any;
+  /** Savings Account Template */
+  @Input() savingsAccountTemplate: any;
+  /** Currency Code */
+  @Input() currencyCode: FormControl;
+
+  /** Charge Data */
+  chargeData: any = [];
+  /** Charges Data Source */
+  chargesDataSource: {}[] = [];
+  /** Component is pristine if there has been no changes by user interaction */
+  pristine = true;
+  /** For Edit Savings Account Form */
+  isChargesPatched = false;
+  /** Display columns for charges table */
+  displayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date', 'repaymentsEvery', 'action'];
+
+  /**
+   * @param {MatDialog} dialog Mat Dialog
+   */
+  constructor(public dialog: MatDialog,
+              private datePipe: DatePipe) {}
+
+   ngOnInit() {
+    this.currencyCode.valueChanges.subscribe(() => {
+      if (!this.isChargesPatched && this.savingsAccountTemplate.charges) {
+        this.chargesDataSource = this.savingsAccountTemplate.charges || [];
+        this.isChargesPatched = true;
+      } else {
+        this.chargesDataSource = [];
+      }
+    });
+   }
+
+   ngOnChanges() {
+    if (this.savingsAccountProductTemplate) {
+      this.chargeData = this.savingsAccountProductTemplate.chargeOptions;
+    }
+   }
+
+  /**
+   * Adds the charge to charges table
+   * @param {any} charge Charge
+   */
+  addCharge(charge: any) {
+    this.chargesDataSource = this.chargesDataSource.concat([charge.value]);
+    charge.value = '';
+    this.pristine = false;
+  }
+
+  /**
+   * Edits the Charge Amount
+   * @param {any} charge Charge
+   */
+  editChargeAmount(charge: any) {
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlName: 'amount',
+        label: 'Amount',
+        value: charge.amount,
+        type: 'text',
+        required: false
+      }),
+    ];
+    const data = {
+      title: 'Edit Charge Amount',
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const editNoteDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editNoteDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const newCharge = { ...charge, amount: response.data.value.amount };
+        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1, newCharge);
+        this.chargesDataSource = this.chargesDataSource.concat([]);
+      }
+    });
+    this.pristine = false;
+  }
+
+  /**
+   * Edits the Charge Date
+   * @param {any} charge Charge
+   */
+  editChargeDate(charge: any) {
+    const formfields: FormfieldBase[] = [
+      new DatepickerBase({
+        controlName: 'date',
+        label: 'Date',
+        value: charge.dueDate || charge.feeOnMonthDay || '',
+        type: 'datetime-local',
+        required: false
+      }),
+    ];
+    const data = {
+      title: 'Edit Charge Date',
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const editNoteDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editNoteDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        let newCharge: any;
+        const dateFormat = 'dd MMMM yyyy';
+        const date = this.datePipe.transform(response.data.value.date, dateFormat);
+        switch (charge.chargeTimeType.value) {
+          case 'Specified due date':
+          case 'Weekly Fee':
+          newCharge = { ...charge, dueDate: date };
+          break;
+          case 'Annual Fee':
+          newCharge = { ...charge, feeOnMonthDay: date };
+          break;
+        }
+        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1, newCharge);
+        this.chargesDataSource = this.chargesDataSource.concat([]);
+      }
+    });
+    this.pristine = false;
+  }
+
+  /**
+   * Edits the Charge Fee Interval
+   * @param {any} charge Charge
+   */
+  editChargeFeeInterval(charge: any) {
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlName: 'feeInterval',
+        label: 'Fee Interval',
+        value: charge.feeInterval,
+        type: 'text',
+        required: false
+      }),
+    ];
+    const data = {
+      title: 'Edit Charge Fee Interval',
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const editNoteDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editNoteDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const newCharge = { ...charge, feeInterval: response.data.value.feeInterval };
+        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1, newCharge);
+        this.chargesDataSource = this.chargesDataSource.concat([]);
+      }
+    });
+    this.pristine = false;
+  }
+
+  /**
+   * Removes the charge from charges table
+   * @param {any} charge Charge
+   */
+  deleteCharge(charge: any) {
+    const deleteChargeDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `charge ${charge.name}` }
+    });
+    deleteChargeDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1);
+        this.chargesDataSource = this.chargesDataSource.concat([]);
+      }
+    });
+    this.pristine = false;
+  }
+
+  /**
+   * Returns savings account charges
+   */
+  get savingsAccountCharges() {
+    return { charges: this.chargesDataSource };
+  }
+
+}