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

Add create journal entries component for manual transactions. Fixes #143
2018-07-22 17:05:07 +05:30
parent ccb2f009db
commit 4f095b76cf
9 changed files with 284 additions and 6 deletions
@@ -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>
+
@@ -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();
+  });
+});
@@ -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]);
+    });
+  }
+
+}