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

Add view GL Account component.

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

@@ -16,6 +16,8 @@ import { ChartOfAccountsComponent } from './chart-of-accounts/chart-of-accounts.
 
 import { ChartOfAccountsResolver } from './chart-of-accounts/chart-of-accounts.resolver';
 import { CreateGlAccountComponent } from './chart-of-accounts/create-gl-account/create-gl-account.component';
+import { ViewGlAccountComponent } from './chart-of-accounts/view-gl-account/view-gl-account.component';
+import { ViewGlAccountResolver } from './chart-of-accounts/view-gl-account/view-gl-account.resolver';
 
 const routes: Routes = [
   Route.withShell([
@@ -98,6 +100,14 @@ const routes: Routes = [
               path: 'gl-accounts/create',
               component: CreateGlAccountComponent,
               data: { title: extract('Create GL Account'), breadcrumb: 'Create GL Account' },
+            },
+            {
+              path: 'gl-accounts/view/:id',
+              component: ViewGlAccountComponent,
+              data: { title: extract('View GL Account'), routeResolveBreadcrumb: ['glAccount', 'name'] },
+              resolve: {
+                glAccount: ViewGlAccountResolver
+              }
             }
           ]
         }
@@ -109,6 +119,9 @@ const routes: Routes = [
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
-  providers: [ChartOfAccountsResolver]
+  providers: [
+    ChartOfAccountsResolver,
+    ViewGlAccountResolver
+  ]
 })
 export class AccountingRoutingModule { }

src/app/accounting/accounting.module.ts

@@ -17,6 +17,7 @@ import { ViewFinancialActivityMappingComponent } from './financial-activity-mapp
 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';
+import { ViewGlAccountComponent } from './chart-of-accounts/view-gl-account/view-gl-account.component';
 
 @NgModule({
   imports: [
@@ -39,7 +40,8 @@ import { CreateGlAccountComponent } from './chart-of-accounts/create-gl-account/
     ViewFinancialActivityMappingComponent,
     EditFinancialActivityMappingComponent,
     ChartOfAccountsComponent,
-    CreateGlAccountComponent
+    CreateGlAccountComponent,
+    ViewGlAccountComponent
   ],
   entryComponents: [
     RevertTransactionComponent,

src/app/accounting/accounting.service.ts

@@ -108,4 +108,9 @@ export class AccountingService {
     return this.http.post('/glaccounts', glAccount);
   }
 
+  getGlAccount(glAccountId: string, template: boolean = false) {
+    const httpParams = new HttpParams().set('template', template.toString());
+    return this.http.get(`/glaccounts/${glAccountId}`, { params: httpParams });
+  }
+
 }

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

@@ -65,7 +65,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="viewGLAccount(row)" class="select"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view', row.id]"></tr>
 
     </table>
 

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

@@ -25,11 +25,9 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-  //
   nestedTreeControl: NestedTreeControl<GLAccountNode>;
   nestedTreeDataSource: MatTreeNestedDataSource<GLAccountNode>;
   glAccount: GLAccountNode;
-  //
 
   constructor(private glAccountTreeService: GlAccountTreeService,
               private route: ActivatedRoute) {
@@ -37,20 +35,16 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
       this.glAccountData = data.glAccountData;
       glAccountTreeService.initialize(this.glAccountData);
     });
-    //
     this.nestedTreeControl = new NestedTreeControl<GLAccountNode>(this._getChildren);
     this.nestedTreeDataSource = new MatTreeNestedDataSource();
-    //
   }
 
   ngOnInit() {
     this.tableDataSource = new MatTableDataSource(this.glAccountData);
-    //
     this.glAccountTreeService.treeDataChange.subscribe((glAccountTreeData: any) => {
       this.nestedTreeDataSource.data = glAccountTreeData;
       this.nestedTreeControl.expand(this.nestedTreeDataSource.data[0]);
     });
-    //
   }
 
   ngAfterViewInit() {
@@ -69,11 +63,6 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
     this.tableDataSource.filter = filterValue.trim().toLowerCase();
   }
 
-  viewGLAccount(glAccount: any) {
-    console.log(glAccount);
-  }
-
-  //
   hasNestedChild = (_: number, node: GLAccountNode) => node.children.length;
 
   viewGLAccountNode(glAccount: GLAccountNode) {
@@ -85,6 +74,5 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
   }
 
   private _getChildren = (node: GLAccountNode) => of(node.children);
-  //
 
 }

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

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+
 import { AccountingService } from '../../accounting.service';
 
 @Component({
@@ -17,7 +19,8 @@ export class CreateGlAccountComponent implements OnInit {
   tagData: any;
 
   constructor(private formBuilder: FormBuilder,
-              private accountingService: AccountingService) { }
+              private accountingService: AccountingService,
+              private router: Router) { }
 
   ngOnInit() {
     this.createGlAccountForm();
@@ -69,8 +72,8 @@ export class CreateGlAccountComponent implements OnInit {
   }
 
   submit() {
-    this.accountingService.createGlAccount(this.glAccountForm.value).subscribe(response => {
-      console.log(response);
+    this.accountingService.createGlAccount(this.glAccountForm.value).subscribe((response: any) => {
+      this.router.navigate(['/accounting/chart-of-accounts/gl-accounts/view', response.resourceId]);
     });
   }
 

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;
+    }));
+  }
+
+}