feat(accounting): add frequent postings component

Add frequent postings component to create a journal entry.

Fixes #136

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

@@ -3,13 +3,24 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { Route, extract } from '../core';
 import { AccountingComponent } from './accounting.component';
+import { FrequentPostingsComponent } from './frequent-postings/frequent-postings.component';
 
 const routes: Routes = [
   Route.withShell([
     {
       path: 'accounting',
-      component: AccountingComponent,
+      data: { title: extract('Accounting'), breadcrumb: 'Accounting' },
-      data: { title: extract('Accounting'), breadcrumb: 'Accounting' }
+      children: [
+        {
+          path: '',
+          component: AccountingComponent
+        },
+        {
+          path: 'frequent-postings',
+          component: FrequentPostingsComponent,
+          data: { title: extract('Frequent Postings'), breadcrumb: 'Frequent Postings' }
+        }
+      ]
     }
   ])
 ];

src/app/accounting/accounting.component.html

@@ -6,11 +6,9 @@
 
       <mat-nav-list>
 
-        <mat-list-item>
+        <mat-list-item [routerLink]="['/accounting/frequent-postings']">
           <mat-icon matListIcon>repeat</mat-icon>
-          <a matLine href="https://www.google.com">
+          <h4 matLine>Frequent Postings</h4>
-            Frequent Postings
-          </a>
           <p matLine>These are predefined postings</p>
         </mat-list-item>
 

src/app/accounting/accounting.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { CoreModule } from '../core/core.module';
 import { AccountingComponent } from './accounting.component';
@@ -10,6 +11,7 @@ import { FrequentPostingsComponent } from './frequent-postings/frequent-postings
   imports: [
     CoreModule,
     CommonModule,
+    ReactiveFormsModule,
     AccountingRoutingModule
   ],
   declarations: [AccountingComponent, FrequentPostingsComponent]

src/app/accounting/accounting.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { AccountingService } from './accounting.service';
+
+describe('AccountingService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AccountingService]
+    });
+  });
+
+  it('should be created', inject([AccountingService], (service: AccountingService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/accounting/accounting.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AccountingService {
+
+  constructor(private http: HttpClient) { }
+
+  getOffices(): Observable<any> {
+    return  this.http.get('/offices?orderBy=id');
+  }
+
+  getAccountingRules(): Observable<any> {
+    return this.http.get('/accountingrules?associations=all');
+  }
+
+  getCurrencies(): Observable<any> {
+    return this.http.get('/currencies');
+  }
+
+  getPaymentTypes(): Observable<any> {
+    return this.http.get('/paymenttypes');
+  }
+
+  createJournalEntry(journalEntry: any): Observable<any> {
+    return this.http.post('/journalentries', journalEntry);
+  }
+
+
+}

src/app/accounting/frequent-postings/frequent-postings.component.html

@@ -0,0 +1,140 @@
+<mat-card class="container">
+
+  <form [formGroup]="frequentPostingsForm" (ngSubmit)="submit()">
+
+    <mat-card-content>
+
+      <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+        <mat-form-field fxFlex="48%">
+          <mat-select placeholder="Office" required formControlName="officeId">
+            <mat-option *ngFor="let office of officeData" [value]="office.id">
+              {{ office.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field fxFlex="48%">
+          <mat-select placeholder="Accounting Rule" required formControlName="accountingRule">
+            <mat-option *ngFor="let accountingRule of accountingRuleData" [value]="accountingRule">
+              {{ accountingRule.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field fxFlex="48%">
+          <mat-select placeholder="Currency" required formControlName="currencyCode">
+            <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
+              {{ currency.displayLabel }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <span fxFlex="48%" fxHide.lt-md></span>
+
+        <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="debits"
+          *ngFor="let debit of frequentPostingsForm.get('debits').controls; let i = index;">
+
+          <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
+
+            <mat-form-field fxFlex="48%">
+              <mat-select placeholder="Affected GL Entry (Debit)" required formControlName="glAccountId">
+                <mat-option *ngFor="let affectedGLEntryDebit of debitAccountData" [value]="affectedGLEntryDebit.id">
+                  {{ affectedGLEntryDebit.name }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+
+            <mat-form-field fxFlex="43%">
+              <input type="number" matInput placeholder="Debit Amount" required formControlName="amount">
+            </mat-form-field>
+
+            <span fxFlex>
+              <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(frequentPostingsForm.get('debits'), i)"><mat-icon>remove_circle</mat-icon></button>
+              <button *ngIf="i === 0 && allowMultipleDebitEntries" type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(frequentPostingsForm.get('debits'))"><mat-icon>add_circle</mat-icon></button>
+            </span>
+
+          </div>
+
+        </div>
+
+        <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="credits"
+          *ngFor="let credit of frequentPostingsForm.get('credits').controls; let i = index;">
+
+          <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
+
+            <mat-form-field fxFlex="48%">
+              <mat-select placeholder="Affected GL Entry (Credit)" required formControlName="glAccountId">
+                <mat-option *ngFor="let affectedGLEntryCredit of creditAccountData" [value]="affectedGLEntryCredit.id">
+                  {{ affectedGLEntryCredit.name }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+
+            <mat-form-field fxFlex="43%">
+              <input type="number" matInput placeholder="Credit Amount" required formControlName="amount">
+            </mat-form-field>
+
+            <span fxFlex>
+              <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(frequentPostingsForm.get('credits'), i)"><mat-icon>remove_circle</mat-icon></button>
+              <button *ngIf="i === 0 && allowMultipleCreditEntries" type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(frequentPostingsForm.get('credits'))"><mat-icon>add_circle</mat-icon></button>
+            </span>
+
+          </div>
+
+        </div>
+
+        <mat-form-field fxFlex="48%">
+          <input matInput placeholder="Reference Number" formControlName="referenceNumber">
+        </mat-form-field>
+
+        <mat-form-field fxFlex="48%">
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" placeholder="Transaction Date" required formControlName="transactionDate">
+          <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #transactionDatePicker></mat-datepicker>
+        </mat-form-field>
+
+        <mat-form-field fxFlex="48%">
+          <mat-select placeholder="Payment Type" formControlName="paymentTypeId">
+            <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
+              {{ paymentType.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field fxFlex="48%">
+          <input matInput placeholder="Account Number" formControlName="accountNumber">
+        </mat-form-field>
+
+        <mat-form-field fxFlex="48%">
+          <input matInput placeholder="Cheque Number" formControlName="checkNumber">
+        </mat-form-field>
+
+        <mat-form-field fxFlex="48%">
+          <input matInput placeholder="Routing Code" formControlName="routingCode">
+        </mat-form-field>
+
+        <mat-form-field fxFlex="48%">
+          <input matInput placeholder="Receipt Number" formControlName="receiptNumber">
+        </mat-form-field>
+
+        <mat-form-field fxFlex="48%">
+          <input matInput placeholder="Bank Number" formControlName="bankNumber">
+        </mat-form-field>
+
+        <mat-form-field fxFlex="98%">
+          <textarea matInput placeholder="Comments" formControlName="comments"></textarea>
+        </mat-form-field>
+
+      </div>
+
+    </mat-card-content>
+
+    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button mat-raised-button color="primary">Submit</button>
+      <button type="button" mat-raised-button>Cancel</button>
+    </mat-card-actions>
+
+  </form>
+
+</mat-card>

src/app/accounting/frequent-postings/frequent-postings.component.spec.ts

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

src/app/accounting/frequent-postings/frequent-postings.component.ts

@@ -0,0 +1,132 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
+
+import { AccountingService } from '../accounting.service';
+
+@Component({
+  selector: 'mifosx-frequent-postings',
+  templateUrl: './frequent-postings.component.html',
+  styleUrls: ['./frequent-postings.component.scss']
+})
+export class FrequentPostingsComponent implements OnInit {
+
+  // TODO: Validations
+  // https://github.com/openMF/incubator-fineract/blob/master/fineract-provider/src/main/java/org/apache/fineract/accounting/journalentry/exception/JournalEntryInvalidException.java
+  // TESTING: transactionId: 8b5748a57b73
+
+  minDate = new Date(2000, 0, 1);
+  maxDate = new Date();
+  frequentPostingsForm: FormGroup;
+  officeData: any;
+  accountingRuleData: any;
+  currencyData: any;
+  paymentTypeData: any;
+  debitAccountData: any;
+  creditAccountData: any;
+
+  allowMultipleCreditEntries: boolean;
+  allowMultipleDebitEntries: boolean;
+
+  constructor(private formBuilder: FormBuilder,
+              private accountingService: AccountingService) { }
+
+  ngOnInit() {
+    this.createFrequentPostingsForm();
+    this.setAffectedGLEntryForm();
+    this.getOffices();
+    this.getAccountingRules();
+    this.getCurrencies();
+    this.getPaymentTypes();
+  }
+
+  createFrequentPostingsForm() {
+    this.frequentPostingsForm = this.formBuilder.group({
+      'officeId': ['', Validators.required],
+      'accountingRule': ['', Validators.required],
+      'currencyCode': ['', Validators.required],
+      'debits': this.formBuilder.array([]),
+      'credits': this.formBuilder.array([]),
+      'referenceNumber': [''],
+      'transactionDate': ['', Validators.required],
+      'paymentTypeId': [''],
+      'accountNumber': [''],
+      'checkNumber': [''],
+      'routingCode': [''],
+      'receiptNumber': [''],
+      'bankNumber': [''],
+      'comments': ['']
+    });
+  }
+
+  setAffectedGLEntryForm() {
+    this.frequentPostingsForm.get('accountingRule').valueChanges.subscribe(accountingRule => {
+      const debits = this.frequentPostingsForm.get('debits') as FormArray;
+      const credits = this.frequentPostingsForm.get('credits') as FormArray;
+      while (debits.length) {
+        debits.removeAt(0);
+      }
+      while (credits.length) {
+        credits.removeAt(0);
+      }
+      this.allowMultipleDebitEntries = accountingRule.allowMultipleDebitEntries;
+      this.allowMultipleCreditEntries = accountingRule.allowMultipleCreditEntries;
+      this.debitAccountData = accountingRule.debitAccounts;
+      this.creditAccountData = accountingRule.creditAccounts;
+      this.addAffectedGLEntry(debits);
+      this.addAffectedGLEntry(credits);
+    });
+  }
+
+  createAffectedGLEntryForm(): FormGroup {
+    return this.formBuilder.group({
+      'glAccountId': ['', Validators.required],
+      'amount': ['', Validators.required]
+    });
+  }
+
+  addAffectedGLEntry(affectedGLEntryFormArray: FormArray) {
+    affectedGLEntryFormArray.push(this.createAffectedGLEntryForm());
+  }
+
+  removeAffectedGLEntry(affectedGLEntryFormArray: FormArray, index: number) {
+    affectedGLEntryFormArray.removeAt(index);
+  }
+
+  getOffices() {
+    this.accountingService.getOffices().subscribe(officeData => {
+      this.officeData = officeData;
+    });
+  }
+
+  getAccountingRules() {
+    this.accountingService.getAccountingRules().subscribe(accountingRuleData => {
+      this.accountingRuleData = accountingRuleData;
+    });
+  }
+
+  getCurrencies() {
+    this.accountingService.getCurrencies().subscribe(currencyData => {
+      this.currencyData = currencyData.selectedCurrencyOptions;
+    });
+  }
+
+  getPaymentTypes() {
+    this.accountingService.getPaymentTypes().subscribe(paymentTypeData => {
+      this.paymentTypeData = paymentTypeData;
+    });
+  }
+
+  submit() {
+    const journalEntry = this.frequentPostingsForm.value;
+    journalEntry.accountingRule = journalEntry.accountingRule.id;
+    // TODO: Update once language and date settings are setup
+    journalEntry.locale = 'en';
+    journalEntry.dateFormat = 'dd MMMM yyyy';
+    journalEntry.transactionDate = '20 July 2018';
+    this.accountingService.createJournalEntry(journalEntry).subscribe(response => {
+      console.log(response);
+      // navigate to view transaction with response.transactionId
+    });
+  }
+
+}