feat: add saving-deposit and withdrawal page (#389)

- Add Savings Module.
- Add saving-account-actions component.
- Add savings-account-transactions component.
- Add savings-routing.module.ts
- Add savings-transaction-template.resolver.ts

Fixes: #249

src/app/savings/common-resolvers/saving-transaction-template.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { SavingsService } from '../savings.service';
+
+/**
+ * Savings Account Transaction Template data resolver.
+ */
+@Injectable()
+export class SavingAccountTransactionTemplateResolver implements Resolve<Object> {
+
+    /**
+     * @param {SavingsService} savingsService Savings service.
+     */
+    constructor(private savingsService: SavingsService) { }
+
+    /**
+     * Returns the Savings Account Transaction Template.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const savingAccountId = route.paramMap.get('savingAccountId');
+        return this.savingsService.getSavingsTransactionTemplateResource(savingAccountId);
+    }
+}

src/app/savings/saving-account-actions/saving-account-actions.component.html

@@ -0,0 +1,5 @@
+<div class="container">
+  <mat-card>
+    <mifosx-savings-transactions *ngIf="actions.transaction"></mifosx-savings-transactions>
+  </mat-card>
+</div>

src/app/savings/saving-account-actions/saving-account-actions.component.spec.ts

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

src/app/savings/saving-account-actions/saving-account-actions.component.ts

@@ -0,0 +1,26 @@
+/** Angular Imports */
+import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+/**
+ * Create savings account actions component.
+ */
+@Component({
+  selector: 'mifosx-saving-account-actions',
+  templateUrl: './saving-account-actions.component.html',
+  styleUrls: ['./saving-account-actions.component.scss']
+})
+export class SavingAccountActionsComponent {
+
+  /** flag object to store possible actions and render appropriate UI to the user */
+  actions: { transaction: boolean } = { transaction: false };
+
+  constructor(private router: Router,
+    private route: ActivatedRoute) {
+    this.route.params.subscribe(params => {
+      this.actions[params['action']] = true;
+    });
+  }
+
+
+}

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html

@@ -0,0 +1,83 @@
+<div class="container">
+  <h2 mat-title *ngIf="transactionType.withdrawal">Withdraw Money From Saving Account</h2>
+  <h2 mat-title *ngIf="transactionType.deposit">Deposit Money To Saving Account</h2>
+
+  <form [formGroup]="savingAccountTransactionForm" (ngSubmit)="submit()">
+
+    <mat-card-content fxLayout="column">
+
+      <mat-form-field>
+        <mat-label>Transaction Date</mat-label>
+        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
+          formControlName="transactionDate" required>
+        <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #dueDatePicker></mat-datepicker>
+        <mat-error *ngIf="savingAccountTransactionForm.controls.transactionDate.hasError('required')">
+          Transaction Date is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-label>Transaction Amount</mat-label>
+        <input type="number" formControlName="transactionAmount" required matInput />
+        <mat-error *ngIf="savingAccountTransactionForm.controls.transactionAmount.hasError('required')">
+          Transaction Amount is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-label>Payment Type</mat-label>
+        <mat-select formControlName="paymentTypeId">
+          <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
+            {{ paymentType.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <div fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column">
+        <mat-label fxFlexAlign="center">Show Payment Details</mat-label>
+        <button type="button" mat-mini-fab color="primary" (click)="addPaymentDetails()">
+          <fa-icon icon="plus-circle" size="lg"></fa-icon>
+        </button>
+      </div>
+
+
+      <mat-form-field *ngIf="savingAccountTransactionForm.controls['accountNumber']">
+        <mat-label>Account Number</mat-label>
+        <input type="number" formControlName="accountNumber" matInput />
+      </mat-form-field>
+
+      <mat-form-field *ngIf="savingAccountTransactionForm.controls['checkNumber']">
+        <mat-label>Cheque</mat-label>
+        <input type="number" formControlName="checkNumber" matInput />
+      </mat-form-field>
+
+      <mat-form-field *ngIf="savingAccountTransactionForm.controls['routingCode']">
+        <mat-label>Routing Code</mat-label>
+        <input formControlName="routingCode" matInput />
+      </mat-form-field>
+
+      <mat-form-field *ngIf="savingAccountTransactionForm.controls['receiptNumber']">
+        <mat-label>Receipt Number</mat-label>
+        <input formControlName="receiptNumber" matInput />
+      </mat-form-field>
+
+      <mat-form-field *ngIf="savingAccountTransactionForm.controls['bankNumber']">
+        <mat-label>Bank</mat-label>
+        <input formControlName="bankNumber" matInput />
+      </mat-form-field>
+
+
+      <mat-form-field>
+        <mat-label>Notes</mat-label>
+        <textarea formControlName="note" matInput></textarea>
+      </mat-form-field>
+
+      <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!savingAccountTransactionForm.valid">Submit</button>
+      </mat-card-actions>
+
+    </mat-card-content>
+  </form>
+</div>

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.scss

@@ -0,0 +1,3 @@
+.container{
+    width: 70%;
+}

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.spec.ts

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

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.ts

@@ -0,0 +1,122 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { SavingsService } from '../../savings.service';
+
+/**
+ * Create savings account transactions component.
+ */
+@Component({
+  selector: 'mifosx-savings-transactions',
+  templateUrl: './savings-account-transactions.component.html',
+  styleUrls: ['./savings-account-transactions.component.scss']
+})
+export class SavingsAccountTransactionsComponent implements OnInit {
+
+  /** Minimum Due Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Due Date allowed. */
+  maxDate = new Date();
+  /** Savings account transaction form. */
+  savingAccountTransactionForm: FormGroup;
+  /** savings account transaction payment options. */
+  paymentTypeOptions: {
+    id: number,
+    name: string,
+    description: string,
+    isCashPayment: boolean,
+    position: number
+  }[];
+  /** Flag to enable payment details fields. */
+  addPaymentDetailsFlag: Boolean = false;
+  /** transaction type flag to render required UI */
+  transactionType: { deposit: boolean, withdrawal: boolean } = { deposit: false, withdrawal: false };
+  /** transaction command for submit request */
+  transactionCommand: string;
+  /** saving account's Id */
+  savingAccountId: string;
+
+  /**
+   * Retrieves the Saving Account transaction template data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {SavingsService} savingsService Savings Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {DatePipe} datePipe DatePipe.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private savingsService: SavingsService) {
+    this.route.data.subscribe((data: { savingAccountTransactionTemplate: any }) => {
+      this.paymentTypeOptions = data.savingAccountTransactionTemplate.paymentTypeOptions;
+    });
+  }
+
+  /**
+   * Creates the Saving account transaction form when component loads.
+   */
+  ngOnInit() {
+    this.route.queryParams.subscribe(params => {
+      this.transactionType[params.type] = true;
+      this.transactionCommand = params.type;
+    });
+    this.savingAccountId = this.route.snapshot.params['savingAccountId'];
+    this.createSavingAccountTransactionForm();
+  }
+
+  /**
+   * Method to create the Saving Account Transaction Form.
+   */
+  createSavingAccountTransactionForm() {
+    this.savingAccountTransactionForm = this.formBuilder.group({
+      'transactionDate': ['', Validators.required],
+      'transactionAmount': ['', Validators.required],
+      'paymentTypeId': [''],
+      'note': ['']
+    });
+  }
+
+  /**
+   * Method to add payment detail fields to the UI.
+   */
+  addPaymentDetails() {
+    this.addPaymentDetailsFlag = !this.addPaymentDetailsFlag;
+    if (this.addPaymentDetailsFlag) {
+      this.savingAccountTransactionForm.addControl('accountNumber', new FormControl(''));
+      this.savingAccountTransactionForm.addControl('checkNumber', new FormControl(''));
+      this.savingAccountTransactionForm.addControl('routingCode', new FormControl(''));
+      this.savingAccountTransactionForm.addControl('receiptNumber', new FormControl(''));
+      this.savingAccountTransactionForm.addControl('bankNumber', new FormControl(''));
+    } else {
+      this.savingAccountTransactionForm.removeControl('accountNumber');
+      this.savingAccountTransactionForm.removeControl('checkNumber');
+      this.savingAccountTransactionForm.removeControl('routingCode');
+      this.savingAccountTransactionForm.removeControl('receiptNumber');
+      this.savingAccountTransactionForm.removeControl('bankNumber');
+    }
+  }
+
+  /**
+   * Method to submit the transaction details.
+   */
+  submit() {
+    const prevTransactionDate: Date = this.savingAccountTransactionForm.value.transactionDate;
+    // TODO: Update once language and date settings are setup
+    const dateFormat = 'dd-MM-yyyy';
+    this.savingAccountTransactionForm.patchValue({
+      transactionDate: this.datePipe.transform(prevTransactionDate, dateFormat)
+    });
+    const transactionData = this.savingAccountTransactionForm.value;
+    transactionData.locale = 'en';
+    transactionData.dateFormat = dateFormat;
+    this.savingsService.makeTransaction(this.transactionCommand, this.savingAccountId, transactionData).subscribe(res => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+}

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

@@ -0,0 +1,44 @@
+/** Angular Imports */
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+/** Translation Imports */
+import { extract } from '../core/i18n/i18n.service';
+
+/** Custom Components */
+import { SavingAccountActionsComponent } from './saving-account-actions/saving-account-actions.component';
+
+/** Custom Resolvers */
+import { SavingAccountTransactionTemplateResolver } from './common-resolvers/saving-transaction-template.resolver';
+
+const routes: Routes = [
+    {
+        path: '',
+        data: { title: extract('All Savings'), breadcrumb: 'Savings', routeParamBreadcrumb: false },
+        // Component to view all saving accounts Comes Here
+        children: [
+            {
+                path: ':savingAccountId',
+                data: { title: extract('Saving Account View'), routeParamBreadcrumb: 'savingAccountId' },
+                // Component For Saving Account View Comes Here
+                children: [
+                    {
+                        path: ':action',
+                        component: SavingAccountActionsComponent,
+                        data: { title: extract('Saving Account Actions'), routeParamBreadcrumb: 'action' },
+                        resolve: {
+                            savingAccountTransactionTemplate: SavingAccountTransactionTemplateResolver
+                        }
+                    }
+                ]
+            }
+        ]
+    }
+];
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+    declarations: [],
+    providers: [SavingAccountTransactionTemplateResolver]
+})
+export class SavingsRoutingModule { }

src/app/savings/savings.module.spec.ts

@@ -0,0 +1,13 @@
+import { SavingsModule } from './savings.module';
+
+describe('SavingsModule', () => {
+  let savingsModule: SavingsModule;
+
+  beforeEach(() => {
+    savingsModule = new SavingsModule();
+  });
+
+  it('should create an instance', () => {
+    expect(savingsModule).toBeTruthy();
+  });
+});

src/app/savings/savings.module.ts

@@ -0,0 +1,29 @@
+/** Angular Imports */
+import { NgModule } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+/** Custom Modules */
+import { SavingsRoutingModule } from './savings-routing.module';
+import { SharedModule } from 'app/shared/shared.module';
+
+/** Custom Components */
+import { SavingAccountActionsComponent } from './saving-account-actions/saving-account-actions.component';
+import { SavingsAccountTransactionsComponent } from './saving-account-actions/savings-account-transactions/savings-account-transactions.component';
+
+/**
+ * Savings Module
+ *
+ * All components related to Savings functions should be declared here.
+ */
+@NgModule({
+  imports: [
+    SharedModule,
+    SavingsRoutingModule
+  ],
+  declarations: [
+    SavingAccountActionsComponent,
+    SavingsAccountTransactionsComponent
+  ],
+  providers: [DatePipe]
+})
+export class SavingsModule { }

src/app/savings/savings.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SavingsService } from './savings.service';
+
+describe('SavingsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: SavingsService = TestBed.get(SavingsService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/savings/savings.service.ts

@@ -0,0 +1,34 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/**
+ * Savings Service.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class SavingsService {
+
+  constructor(private http: HttpClient) { }
+  /**
+   * @param {string} savingAccountId is saving account's Id.
+   * @returns {Observable<any>}
+   */
+  getSavingsTransactionTemplateResource(savingAccountId: string): Observable<any> {
+    return this.http.get(`/savingsaccounts/${savingAccountId}/transactions/template`);
+  }
+
+  /**
+   * @param {string} action transaction type.
+   * @param {string} savingAccountId saving account id.
+   * @param {any} transactionData transaction details for saving account.
+   * @returns {Observable<any>}
+   */
+  makeTransaction(action: string, savingAccountId: string, transactionData: any): Observable<any> {
+    return this.http.post(`/savingsaccounts/${savingAccountId}/transactions?command=${action}`, transactionData);
+  }
+}