feat: add create GL Account component

Add create GL Account component in chart of accounts.

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

@@ -15,6 +15,7 @@ import { EditFinancialActivityMappingComponent } from './financial-activity-mapp
 import { ChartOfAccountsComponent } from './chart-of-accounts/chart-of-accounts.component';
 
 import { ChartOfAccountsResolver } from './chart-of-accounts/chart-of-accounts.resolver';
+import { CreateGlAccountComponent } from './chart-of-accounts/create-gl-account/create-gl-account.component';
 
 const routes: Routes = [
   Route.withShell([
@@ -84,11 +85,21 @@ const routes: Routes = [
         },
         {
           path: 'chart-of-accounts',
-          component: ChartOfAccountsComponent,
           data: { title: extract('Chart of Accounts'), breadcrumb: 'Chart of Accounts' },
-          resolve: {
-            glAccountData: ChartOfAccountsResolver
-          }
+          children: [
+            {
+              path: '',
+              component: ChartOfAccountsComponent,
+              resolve: {
+                glAccountData: ChartOfAccountsResolver
+              }
+            },
+            {
+              path: 'gl-accounts/create',
+              component: CreateGlAccountComponent,
+              data: { title: extract('Create GL Account'), breadcrumb: 'Create GL Account' },
+            }
+          ]
         }
       ]
     }

src/app/accounting/accounting.module.ts

@@ -16,6 +16,7 @@ import { CreateFinancialActivityMappingComponent } from './financial-activity-ma
 import { ViewFinancialActivityMappingComponent } from './financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component';
 import { EditFinancialActivityMappingComponent } from './financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component';
 import { ChartOfAccountsComponent } from './chart-of-accounts/chart-of-accounts.component';
+import { CreateGlAccountComponent } from './chart-of-accounts/create-gl-account/create-gl-account.component';
 
 @NgModule({
   imports: [
@@ -37,7 +38,8 @@ import { ChartOfAccountsComponent } from './chart-of-accounts/chart-of-accounts.
     CreateFinancialActivityMappingComponent,
     ViewFinancialActivityMappingComponent,
     EditFinancialActivityMappingComponent,
-    ChartOfAccountsComponent
+    ChartOfAccountsComponent,
+    CreateGlAccountComponent
   ],
   entryComponents: [
     RevertTransactionComponent,

src/app/accounting/accounting.service.ts

@@ -100,4 +100,12 @@ export class AccountingService {
     return this.http.get('/glaccounts');
   }
 
+  getChartOfAccountsTemplate() {
+    return this.http.get('/glaccounts/template');
+  }
+
+  createGlAccount(glAccount: any) {
+    return this.http.post('/glaccounts', glAccount);
+  }
+
 }

src/app/accounting/chart-of-accounts/chart-of-accounts.component.html

@@ -7,7 +7,7 @@
       <mat-icon>device_hub</mat-icon>
     </mat-button-toggle>
   </mat-button-toggle-group>
-  <button mat-raised-button color="primary">
+  <button mat-raised-button color="primary" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']">
     <mat-icon>add</mat-icon>&nbsp;&nbsp;Add Account
   </button>
 </div>

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html

@@ -0,0 +1,74 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="glAccountForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="48%">
+            <mat-select placeholder="Account Type" required formControlName="type">
+              <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
+                {{ accountType.value }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <input matInput placeholder="Account Name" required formControlName="name">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-select placeholder="Account Usage" required formControlName="usage">
+              <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
+                {{ accountUsage.value }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <input matInput placeholder="GL Code" required formControlName="glCode">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-select placeholder="Parent" formControlName="parentId">
+              <mat-option *ngFor="let parent of parentData" [value]="parent.id">
+                {{ parent.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="28%">
+            <mat-select placeholder="Tag" formControlName="tagId">
+              <mat-option *ngFor="let tag of tagData" [value]="tag.id">
+                {{ tag.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <div fxFlex="18%" class="manualEntriesAllowedWrapper">
+            <mat-checkbox labelPosition="before" required formControlName="manualEntriesAllowed" class="manualEntriesAllowed">
+              Manual Entries Allowed
+            </mat-checkbox>
+          </div>
+
+          <mat-form-field fxFlex="98%">
+            <textarea matInput placeholder="Description" formControlName="description"></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/chart-of-accounts']">Cancel</button>
+        <button mat-raised-button color="primary">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.scss

@@ -0,0 +1,10 @@
+.manualEntriesAllowedWrapper {
+  position: relative;
+
+  .manualEntriesAllowed {
+    padding: 0 0 17.5px 0;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.spec.ts

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

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { AccountingService } from '../../accounting.service';
+
+@Component({
+  selector: 'mifosx-create-gl-account',
+  templateUrl: './create-gl-account.component.html',
+  styleUrls: ['./create-gl-account.component.scss']
+})
+export class CreateGlAccountComponent implements OnInit {
+
+  glAccountForm: FormGroup;
+  chartOfAccountsData: any;
+  accountTypeData: any;
+  parentData: any;
+  accountUsageData: any;
+  tagData: any;
+
+  constructor(private formBuilder: FormBuilder,
+              private accountingService: AccountingService) { }
+
+  ngOnInit() {
+    this.createGlAccountForm();
+    this.getChartOfAccountsTemplate();
+    this.setGLAccountForm();
+  }
+
+  createGlAccountForm() {
+    this.glAccountForm = this.formBuilder.group({
+      'type': ['', Validators.required],
+      'name': ['', Validators.required],
+      'usage': ['', Validators.required],
+      'glCode': ['', Validators.required],
+      'parentId': [''],
+      'tagId': [''],
+      'manualEntriesAllowed': [true, Validators.required],
+      'description': ['']
+    });
+  }
+
+  getChartOfAccountsTemplate() {
+    this.accountingService.getChartOfAccountsTemplate().subscribe((chartOfAccountsData: any) => {
+      this.chartOfAccountsData = chartOfAccountsData;
+      this.accountTypeData = chartOfAccountsData.accountTypeOptions;
+      this.accountUsageData = chartOfAccountsData.usageOptions;
+    });
+  }
+
+  setGLAccountForm() {
+    this.glAccountForm.get('type').valueChanges.subscribe(accountTypeId => {
+      switch (accountTypeId) {
+        case 1: this.parentData = this.chartOfAccountsData.assetHeaderAccountOptions;
+                this.tagData = this.chartOfAccountsData.allowedAssetsTagOptions;
+        break;
+        case 2: this.parentData = this.chartOfAccountsData.liabilityHeaderAccountOptions;
+                this.tagData = this.chartOfAccountsData.allowedLiabilitiesTagOptions;
+        break;
+        case 3: this.parentData = this.chartOfAccountsData.equityHeaderAccountOptions;
+                this.tagData = this.chartOfAccountsData.allowedEquityTagOptions;
+        break;
+        case 4: this.parentData = this.chartOfAccountsData.incomeHeaderAccountOptions;
+                this.tagData = this.chartOfAccountsData.allowedIncomeTagOptions;
+        break;
+        case 5: this.parentData = this.chartOfAccountsData.expenseHeaderAccountOptions;
+                this.tagData = this.chartOfAccountsData.allowedExpensesTagOptions;
+        break;
+      }
+    });
+  }
+
+  submit() {
+    this.accountingService.createGlAccount(this.glAccountForm.value).subscribe(response => {
+      console.log(response);
+    });
+  }
+
+}