feat(accounting): create journal entries component (#144)

Add create journal entries component for manual transactions.

Fixes #143

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

@@ -5,6 +5,7 @@ import { Route, extract } from '../core';
 import { AccountingComponent } from './accounting.component';
 import { FrequentPostingsComponent } from './frequent-postings/frequent-postings.component';
 import { ViewTransactionComponent } from './view-transaction/view-transaction.component';
+import { CreateJournalEntryComponent } from './create-journal-entry/create-journal-entry.component';
 
 const routes: Routes = [
   Route.withShell([
@@ -31,6 +32,11 @@ const routes: Routes = [
               data: { title: extract('View Transaction'), routeParamBreadcrumb: 'id' }
             }
           ]
+        },
+        {
+          path: 'journal-entries/create',
+          component: CreateJournalEntryComponent,
+          data: { title: extract('Create Journal Entry'), breadcrumb: 'Create Journal Entry' }
         }
       ]
     }

src/app/accounting/accounting.component.html

@@ -12,11 +12,9 @@
           <p matLine>These are predefined postings</p>
         </mat-list-item>
 
-        <mat-list-item>
+        <mat-list-item [routerLink]="['/accounting/journal-entries/create']">
           <mat-icon matListIcon>add</mat-icon>
-          <a matLine href="https://www.google.com">
-            Add Journal Entries
-          </a>
+          <h4 matLine>Create Journal Entries</h4>
           <p matLine>Manual journal entry transactions recorded in a journal</p>
         </mat-list-item>
 

src/app/accounting/accounting.module.ts

@@ -9,6 +9,7 @@ import { FrequentPostingsComponent } from './frequent-postings/frequent-postings
 import { ViewTransactionComponent } from './view-transaction/view-transaction.component';
 import { RevertTransactionComponent } from './revert-transaction/revert-transaction.component';
 import { ViewJournalEntryComponent } from './view-journal-entry/view-journal-entry.component';
+import { CreateJournalEntryComponent } from './create-journal-entry/create-journal-entry.component';
 
 @NgModule({
   imports: [
@@ -22,7 +23,8 @@ import { ViewJournalEntryComponent } from './view-journal-entry/view-journal-ent
     FrequentPostingsComponent,
     ViewTransactionComponent,
     RevertTransactionComponent,
-    ViewJournalEntryComponent
+    ViewJournalEntryComponent,
+    CreateJournalEntryComponent
   ],
   entryComponents: [
     RevertTransactionComponent,

src/app/accounting/accounting.service.ts

@@ -46,4 +46,12 @@ export class AccountingService {
     return this.http.post(`/journalentries/${transactionId}`, data, { params: httpParams });
   }
 
+  getGlAccounts() {
+    let httpParams = new HttpParams();
+    httpParams = httpParams.set('manualEntriesAllowed', 'true');
+    httpParams = httpParams.set('usage', '1');
+    httpParams = httpParams.set('disabled', 'false');
+    return this.http.get(`/glaccounts`, { params: httpParams });
+  }
+
 }

src/app/accounting/create-journal-entry/create-journal-entry.component.html

@@ -0,0 +1,131 @@
+<mat-card class="container">
+
+  <form [formGroup]="journalEntryForm" (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="Currency" required formControlName="currencyCode">
+            <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
+              {{ currency.displayLabel }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="debits"
+          *ngFor="let debit of getFormArrayData('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 glAccountData" [value]="affectedGLEntryDebit.id">
+                  {{ affectedGLEntryDebit.name + ' (' + affectedGLEntryDebit.glCode + ')' }}
+                </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(journalEntryForm.get('debits'), i)"><mat-icon>remove_circle</mat-icon></button>
+              <button *ngIf="i === 0" type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(journalEntryForm.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 getFormArrayData('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 glAccountData" [value]="affectedGLEntryCredit.id">
+                  {{ affectedGLEntryCredit.name + ' (' + affectedGLEntryCredit.glCode + ')' }}
+                </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(journalEntryForm.get('credits'), i)"><mat-icon>remove_circle</mat-icon></button>
+              <button *ngIf="i === 0 glAccountData" type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(journalEntryForm.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 type="button" mat-raised-button [routerLink]="['/accounting']">Cancel</button>
+      <button mat-raised-button color="primary">Submit</button>
+    </mat-card-actions>
+
+  </form>
+
+</mat-card>
+

src/app/accounting/create-journal-entry/create-journal-entry.component.spec.ts

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

src/app/accounting/create-journal-entry/create-journal-entry.component.ts

@@ -0,0 +1,108 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { AccountingService } from '../accounting.service';
+
+@Component({
+  selector: 'mifosx-create-journal-entry',
+  templateUrl: './create-journal-entry.component.html',
+  styleUrls: ['./create-journal-entry.component.scss']
+})
+export class CreateJournalEntryComponent implements OnInit {
+
+  // TODO: Validations
+
+  minDate = new Date(2000, 0, 1);
+  maxDate = new Date();
+  journalEntryForm: FormGroup;
+  officeData: any;
+  currencyData: any;
+  paymentTypeData: any;
+  glAccountData: any;
+
+  constructor(private formBuilder: FormBuilder,
+              private accountingService: AccountingService,
+              private router: Router) { }
+
+  ngOnInit() {
+    this.createJournalEntryForm();
+    this.getOffices();
+    this.getCurrencies();
+    this.getPaymentTypes();
+    this.getGlAccounts();
+  }
+
+  createJournalEntryForm() {
+    this.journalEntryForm = this.formBuilder.group({
+      'officeId': ['', Validators.required],
+      'currencyCode': ['', Validators.required],
+      'debits': this.formBuilder.array([this.createAffectedGLEntryForm()]),
+      'credits': this.formBuilder.array([this.createAffectedGLEntryForm()]),
+      'referenceNumber': [''],
+      'transactionDate': ['', Validators.required],
+      'paymentTypeId': [''],
+      'accountNumber': [''],
+      'checkNumber': [''],
+      'routingCode': [''],
+      'receiptNumber': [''],
+      'bankNumber': [''],
+      'comments': ['']
+    });
+  }
+
+  createAffectedGLEntryForm(): FormGroup {
+    return this.formBuilder.group({
+      'glAccountId': ['', Validators.required],
+      'amount': ['', Validators.required]
+    });
+  }
+
+  getFormArrayData(type: string): FormArray {
+    return <FormArray>this.journalEntryForm.get(type);
+  }
+
+  addAffectedGLEntry(affectedGLEntryFormArray: FormArray) {
+    affectedGLEntryFormArray.push(this.createAffectedGLEntryForm());
+  }
+
+  removeAffectedGLEntry(affectedGLEntryFormArray: FormArray, index: number) {
+    affectedGLEntryFormArray.removeAt(index);
+  }
+
+  getOffices() {
+    this.accountingService.getOffices().subscribe(officeData => {
+      this.officeData = officeData;
+    });
+  }
+
+  getCurrencies() {
+    this.accountingService.getCurrencies().subscribe(currencyData => {
+      this.currencyData = currencyData.selectedCurrencyOptions;
+    });
+  }
+
+  getPaymentTypes() {
+    this.accountingService.getPaymentTypes().subscribe(paymentTypeData => {
+      this.paymentTypeData = paymentTypeData;
+    });
+  }
+
+  getGlAccounts() {
+    this.accountingService.getGlAccounts().subscribe(glAccountData => {
+      this.glAccountData = glAccountData;
+    });
+  }
+
+  submit() {
+    const journalEntry = this.journalEntryForm.value;
+    // 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 => {
+      this.router.navigate(['/accounting/transactions/view', response.transactionId]);
+    });
+  }
+
+}

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

@@ -131,8 +131,8 @@
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button type="button" mat-raised-button [routerLink]="['/accounting']">Cancel</button>
       <button mat-raised-button color="primary">Submit</button>
-      <button type="button" mat-raised-button>Cancel</button>
     </mat-card-actions>
 
   </form>