feat(chart-of-accounts): view GL Account component

Add view GL Account component.

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

@@ -0,0 +1,89 @@
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+  <button mat-raised-button color="primary" *ngIf="glAccount.usage.value === 'HEADER'">
+    <mat-icon>add</mat-icon>&nbsp;&nbsp;Subledger Account
+  </button>
+  <button mat-raised-button color="primary" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view', glAccount.id, 'edit']">
+    <mat-icon>edit</mat-icon>&nbsp;&nbsp;Edit
+  </button>
+  <button mat-raised-button color="warn" *ngIf="!glAccount.disabled">
+    <mat-icon>lock</mat-icon>&nbsp;&nbsp;Disable
+  </button>
+  <button mat-raised-button color="accent" *ngIf="glAccount.disabled">
+    <mat-icon>lock_open</mat-icon>&nbsp;&nbsp;Enable
+  </button>
+  <button mat-raised-button color="warn" (click)="deleteGlAccount()">
+    <mat-icon>delete</mat-icon>&nbsp;&nbsp;Delete
+  </button>
+</div>
+
+<div class="container">
+
+  <mat-card>
+
+    <mat-card-content>
+
+      <div fxLayout="row wrap" class="content">
+
+        <div fxFlex="50%" class="header">
+          Account Type
+        </div>
+
+        <div fxFlex="50%">
+          {{ glAccount.type.value }}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          GL Code
+        </div>
+
+        <div fxFlex="50%">
+          {{ glAccount.glCode }}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          Parent Account Name
+        </div>
+
+        <div fxFlex="50%">
+          {{ glAccount.parent.name }}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          Tag
+        </div>
+
+        <div fxFlex="50%">
+          {{ glAccount.tagId.name }}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          Account Usage
+        </div>
+
+        <div fxFlex="50%">
+          {{ glAccount.usage.value }}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          Manual Entries Allowed
+        </div>
+
+        <div fxFlex="50%">
+          {{ glAccount.manualEntriesAllowed }}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          Description
+        </div>
+
+        <div fxFlex="50%">
+          {{ glAccount.description }}
+        </div>
+
+      </div>
+
+    </mat-card-content>
+
+  </mat-card>
+
+</div>

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

@@ -0,0 +1,14 @@
+.container {
+  max-width: 37rem;
+}
+
+.content {
+  div {
+    margin: 1rem 0;
+    word-wrap: break-word;
+  }
+
+  .header {
+    font-weight: 500;
+  }
+}

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

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

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

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-view-gl-account',
+  templateUrl: './view-gl-account.component.html',
+  styleUrls: ['./view-gl-account.component.scss']
+})
+export class ViewGlAccountComponent implements OnInit {
+
+  glAccount: any;
+
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { glAccount: any }) => {
+      this.glAccount = data.glAccount;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.resolver.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { AccountingService } from '../../accounting.service';
+
+@Injectable()
+export class ViewGlAccountResolver implements Resolve<Object> {
+
+  constructor(private accountingService: AccountingService) {}
+
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const id = route.paramMap.get('id');
+
+    return this.accountingService.getGlAccount(id, true).pipe(map((glAccountData: any) => {
+      let accountOptions = [];
+      switch (glAccountData.type.value) {
+        case 'ASSET': accountOptions = glAccountData.assetHeaderAccountOptions;
+        break;
+        case 'EQUITY': accountOptions = glAccountData.equityHeaderAccountOptions;
+        break;
+        case 'EXPENSE': accountOptions = glAccountData.expenseHeaderAccountOptions;
+        break;
+        case 'INCOME': accountOptions = glAccountData.incomeHeaderAccountOptions;
+        break;
+        case 'LIABILITY': accountOptions = glAccountData.liabilityHeaderAccountOptions;
+        break;
+      }
+      glAccountData.parent = accountOptions.find((accountOption: any) => {
+        return accountOption.id === glAccountData.parentId;
+      });
+      return glAccountData;
+    }));
+  }
+
+}