feat: add view account transfer (#1192)

Fixes: #1188

src/app/account-transfers/make-account-transfers/make-account-transfers.component.html

@@ -0,0 +1,141 @@
+<div class="container">
+
+  <mat-card>
+
+    <mat-card-content>
+
+      <div fxLayout="row wrap" fxLayout.lt-md="column">
+
+        <h3 class="mat-h3" fxFlexFill>Transferring From Details</h3>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Applicant</span>
+          <span fxFlex="60%">{{ accountTransferTemplateData.fromClient.displayName }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Office</span>
+          <span fxFlex="60%">{{ accountTransferTemplateData.fromOffice.name }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">From Account</span>
+          <span
+            fxFlex="60%">{{ accountTransferTemplateData.fromAccount.productName}}&nbsp;-&nbsp;#{{ accountTransferTemplateData.fromAccount.accountNo }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">From Account Type</span>
+          <span fxFlex="60%">{{ accountTransferTemplateData.fromAccountType.value }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Currency</span>
+          <span fxFlex="60%">{{ accountTransferTemplateData.currency.name }}</span>
+        </div>
+
+      </div>
+
+      <h3 class="mat-h3" fxFlexFill>Transferring To</h3>
+
+      <mat-divider [inset]="true"></mat-divider>
+
+      <form [formGroup]="makeAccountTransferForm">
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Office</mat-label>
+            <mat-select required formControlName="toOfficeId" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
+                {{ toOfficeType.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="makeAccountTransferForm.controls.toOfficeId.hasError('required')">
+              Office is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Client</mat-label>
+            <input matInput formControlName="toClientId" [matAutocomplete]="clientsAutocomplete">
+            <mat-error *ngIf="makeAccountTransferForm.controls.toClientId.hasError('required')">
+              Client is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
+            <mat-option *ngFor="let client of clientsData" [value]="client">
+              {{ client.id }} - {{ client.displayName }}
+            </mat-option>
+          </mat-autocomplete>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Account Type</mat-label>
+            <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
+                {{ toAccountType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="makeAccountTransferForm.controls.toAccountType.hasError('required')">
+              Account Type is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Account</mat-label>
+            <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
+                {{ toAccount.productName }} - {{ toAccount.accountNo }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="makeAccountTransferForm.controls.toAccountId.hasError('required')">
+              Account is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Amount</mat-label>
+            <input type="number" matInput required formControlName="transferAmount">
+            <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
+              Amount is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Transaction Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required
+              formControlName="transferDate">
+            <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #transferDatePicker></mat-datepicker>
+            <mat-error *ngIf="makeAccountTransferForm.controls.transferDate.hasError('required')">
+              Transactions Date is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Description</mat-label>
+            <textarea matInput formControlName="transferDescription"></textarea>
+            <mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
+              Transfer Description is <strong>required</strong>
+            </mat-error>
+
+          </mat-form-field>
+
+        </div>
+
+      </form>
+
+    </mat-card-content>
+
+    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button mat-raised-button color="primary" [disabled]="!makeAccountTransferForm.valid"
+        (click)="submit()">Submit</button>
+    </mat-card-actions>
+
+  </mat-card>
+
+</div>

src/app/account-transfers/make-account-transfers/make-account-transfers.component.scss

@@ -0,0 +1,20 @@
+h2, h3, h4 {
+    margin: 0;
+    font-weight: 500;
+}
+
+span {
+    margin: 0.5em 0;
+}
+
+.margin-t {
+    margin-top: 1em;
+}
+
+mat-divider {
+  margin: 0 0 0.5em 0;
+}
+
+.container {
+    max-width: 37rem;
+}

src/app/account-transfers/make-account-transfers/make-account-transfers.component.spec.ts

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

src/app/account-transfers/make-account-transfers/make-account-transfers.component.ts

@@ -0,0 +1,182 @@
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AccountTransfersService } from '../account-transfers.service';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+import { ClientsService } from 'app/clients/clients.service';
+
+@Component({
+  selector: 'mifosx-make-account-transfers',
+  templateUrl: './make-account-transfers.component.html',
+  styleUrls: ['./make-account-transfers.component.scss']
+})
+export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
+
+  /** Standing Instructions Data */
+  accountTransferTemplateData: any;
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date(2100, 0, 1);
+  /** Edit Standing Instructions form. */
+  makeAccountTransferForm: FormGroup;
+  /** To Office Type Data */
+  toOfficeTypeData: any;
+  /** To Client Type Data */
+  toClientTypeData: any;
+  /** To Account Type Data */
+  toAccountTypeData: any;
+  /** To Account Data */
+  toAccountData: any;
+  /** Account Type Id */
+  accountTypeId: any;
+  /** Account Type */
+  accountType: any;
+  /** Savings Id or Loans Id */
+  id: any;
+  /** Clients Data */
+  clientsData: any;
+
+  /**
+   * Retrieves the standing instructions template from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {Router} router Router
+   * @param {AccountTransfersService} accountTransfersService Account Transfers Service
+   * @param {DatePipe} datePipe Date Pipe
+   */
+  constructor(private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private accountTransfersService: AccountTransfersService,
+    private datePipe: DatePipe,
+    private clientsService: ClientsService) {
+    this.route.data.subscribe((data: { accountTransferTemplate: any }) => {
+      this.accountTransferTemplateData = data.accountTransferTemplate;
+      this.setParams();
+      this.setOptions();
+    });
+  }
+  /** Sets the value from the URL */
+  setParams() {
+    this.accountType = this.route.snapshot.queryParams['accountType'];
+    switch (this.accountType) {
+      case 'fromloans':
+        this.accountTypeId = '1';
+        this.id = this.route.snapshot.queryParams['loanId'];
+        break;
+      case 'fromsavings':
+        this.accountTypeId = '2';
+        this.id = this.route.snapshot.queryParams['savingsId'];
+        break;
+      default:
+        this.accountTypeId = '0';
+    }
+  }
+
+  /**
+   * Creates and sets the create standing instructions form.
+   */
+  ngOnInit() {
+    this.createMakeAccountTransferForm();
+  }
+
+  /**
+   * Creates the standing instruction form.
+   */
+  createMakeAccountTransferForm() {
+    this.makeAccountTransferForm = this.formBuilder.group({
+      'toOfficeId': ['', Validators.required],
+      'toClientId': ['', Validators.required],
+      'toAccountType': ['', Validators.required],
+      'toAccountId': ['', Validators.required],
+      'transferAmount': [this.accountTransferTemplateData.transferAmount, Validators.required],
+      'transferDate': ['', Validators.required],
+      'transferDescription': ['', Validators.required],
+    });
+  }
+
+  /** Sets options value */
+  setOptions() {
+    this.toOfficeTypeData = this.accountTransferTemplateData.toOfficeOptions;
+    this.toAccountTypeData = this.accountTransferTemplateData.toAccountTypeOptions;
+    this.toAccountData = this.accountTransferTemplateData.toAccountOptions;
+  }
+
+  /** Executes on change of various select options */
+  changeEvent() {
+    const formValue = this.refineObject(this.makeAccountTransferForm.value);
+    this.accountTransfersService.newAccountTranferResource(this.id, this.accountTypeId, formValue).subscribe((response: any) => {
+      this.accountTransferTemplateData = response;
+      this.toClientTypeData = response.toClientOptions;
+      this.setOptions();
+    });
+  }
+
+  /** Refine Object
+   * Removes the object param with null or '' values
+   */
+  refineObject(dataObj: { [x: string]: any; transferAmount: any; transferDate: any; transferDescription: any; }) {
+    delete dataObj.transferAmount;
+    delete dataObj.transferDate;
+    delete dataObj.transferDescription;
+    if (dataObj.toClientId) {
+      dataObj.toClientId = dataObj.toClientId.id;
+    }
+    const propNames = Object.getOwnPropertyNames(dataObj);
+    for (let i = 0; i < propNames.length; i++) {
+      const propName = propNames[i];
+      if (dataObj[propName] === null || dataObj[propName] === undefined || dataObj[propName] === '') {
+        delete dataObj[propName];
+      }
+    }
+    return dataObj;
+  }
+
+  /**
+   * Subscribes to Clients search filter:
+   */
+  ngAfterViewInit() {
+    this.makeAccountTransferForm.controls.toClientId.valueChanges.subscribe((value: string) => {
+      if (value.length >= 2) {
+        this.clientsService.getFilteredClients('displayName', 'ASC', true, value)
+          .subscribe((data: any) => {
+            this.clientsData = data.pageItems;
+          });
+        this.changeEvent();
+      }
+    });
+  }
+
+  /**
+   * Displays Client name in form control input.
+   * @param {any} client Client data.
+   * @returns {string} Client name if valid otherwise undefined.
+   */
+  displayClient(client: any): string | undefined {
+    return client ? client.displayName : undefined;
+  }
+
+  /**
+   * Submits the standing instructions form
+   */
+  submit() {
+    const dateFormat = 'dd MMMM yyyy';
+    const locale = 'en';
+    const makeAccountTransferData = {
+      ... this.makeAccountTransferForm.value,
+      transferDate: this.datePipe.transform(this.makeAccountTransferForm.value.transferDate, dateFormat),
+      dateFormat,
+      locale,
+      toClientId: this.makeAccountTransferForm.controls.toClientId.value.id,
+      fromAccountId: this.id,
+      fromAccountType: this.accountTypeId,
+      fromClientId: this.accountTransferTemplateData.fromClient.id,
+      fromOfficeId: this.accountTransferTemplateData.fromClient.officeId
+    };
+    this.accountTransfersService.createAccountTransfer(makeAccountTransferData).subscribe(() => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    });
+  }
+
+}