feat(accounting-rules): view rule component

Add view rule component.

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

@@ -27,6 +27,8 @@ import { ViewClosureComponent } from './closing-entries/view-closure/view-closur
 import { EditClosureComponent } from './closing-entries/edit-closure/edit-closure.component';
 import { AccountingRulesComponent } from './accounting-rules/accounting-rules.component';
 import { CreateRuleComponent } from './accounting-rules/create-rule/create-rule.component';
+import { ViewRuleComponent } from './accounting-rules/view-rule/view-rule.component';
+import { ViewAccountingRuleResolver } from './accounting-rules/view-rule/view-rule.resolver';
 
 const routes: Routes = [
   Route.withShell([
@@ -176,6 +178,14 @@ const routes: Routes = [
               path: 'create',
               component: CreateRuleComponent,
               data: { title: extract('Create Accounting Rule'), breadcrumb: 'Create' }
+            },
+            {
+              path: 'view/:id',
+              component: ViewRuleComponent,
+              data: { title: extract('View Accounting Rule'), routeResolveBreadcrumb: ['accountingRule', 'name'] },
+              resolve: {
+                accountingRule: ViewAccountingRuleResolver
+              }
             }
           ]
         }
@@ -189,7 +199,8 @@ const routes: Routes = [
   exports: [RouterModule],
   providers: [
     ChartOfAccountsResolver,
-    ViewGlAccountResolver
+    ViewGlAccountResolver,
+    ViewAccountingRuleResolver
   ]
 })
 export class AccountingRoutingModule { }

src/app/accounting/accounting-rules/create-rule/create-rule.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, ValidatorFn, ValidationErrors } from '@angular/forms';
+import { Router } from '@angular/router';
 
 import { AccountingService } from '../../accounting.service';
 
@@ -25,7 +26,8 @@ export class CreateRuleComponent implements OnInit {
   creditTagData: any;
 
   constructor(private formBuilder: FormBuilder,
-              private accountingService: AccountingService) { }
+              private accountingService: AccountingService,
+              private router: Router) { }
 
   ngOnInit() {
     this.createAccountingRulesForm();
@@ -82,7 +84,7 @@ export class CreateRuleComponent implements OnInit {
     delete accountingRule.debitRuleType;
     delete accountingRule.creditRuleType;
     this.accountingService.createAccountingRule(accountingRule).subscribe((response: any) => {
-      console.log(response);
+      this.router.navigate(['/accounting/accounting-rules/view', response.resourceId]);
     });
   }
 

src/app/accounting/accounting-rules/view-rule/view-rule.component.html

@@ -0,0 +1,112 @@
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+  <button mat-raised-button color="primary" [routerLink]="['/accounting/accounting-rules/view', accountingRule?.id, 'edit']">
+    <mat-icon>edit</mat-icon>&nbsp;&nbsp;Edit
+  </button>
+  <button mat-raised-button color="warn" (click)="deleteAccountingRule()">
+    <mat-icon>delete</mat-icon>&nbsp;&nbsp;Delete
+  </button>
+</div>
+
+<div class="container" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+  <div fxFlex="48%">
+
+    <mat-card>
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" class="content">
+
+          <div fxFlex="50%" class="header">
+            Office
+          </div>
+
+          <div fxFlex="50%">
+            {{ accountingRule.officeName }}
+          </div>
+
+          <div fxFlex="50%" class="header">
+            Description
+          </div>
+
+          <div fxFlex="50%">
+            {{ accountingRule.description }}
+          </div>
+
+          <div fxFlex="50%" class="header">
+            Multiple Debit Entries Allowed
+          </div>
+
+          <div fxFlex="50%">
+            {{ accountingRule.allowMultipleDebitEntries }}
+          </div>
+
+          <div fxFlex="50%" class="header">
+            Multiple Credit Entries Allowed
+          </div>
+
+          <div fxFlex="50%">
+            {{ accountingRule.allowMultipleCreditEntries }}
+          </div>
+
+        </div>
+
+      </mat-card-content>
+
+    </mat-card>
+
+  </div>
+
+  <div fxFlex>
+
+    <mat-card>
+
+      <mat-card-content>
+
+        <div fxLayout="row" class="content">
+
+          <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitTags">
+            <div class="header">
+              Debit Tags
+            </div>
+            <div *ngFor="let debitTag of accountingRule.debitTags">
+              {{ debitTag.tag.name }}
+            </div>
+          </div>
+
+          <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitAccounts">
+            <div class="header">
+              Debit Account Name
+            </div>
+            <div *ngFor="let debitAccount of accountingRule.debitAccounts">
+              {{ debitAccount.name + ' (' + debitAccount.glCode + ')' }}
+            </div>
+          </div>
+
+          <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditTags">
+            <div class="header">
+              Credit Tags
+            </div>
+            <div *ngFor="let creditTag of accountingRule.creditTags">
+              {{ creditTag.tag.name }}
+            </div>
+          </div>
+
+          <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditAccounts">
+            <div class="header">
+              Credit Account Name
+            </div>
+            <div *ngFor="let creditAccount of accountingRule.creditAccounts">
+              {{ creditAccount.name + ' (' + creditAccount.glCode + ')' }}
+            </div>
+          </div>
+
+        </div>
+
+      </mat-card-content>
+
+    </mat-card>
+
+  </div>
+
+</div>

src/app/accounting/accounting-rules/view-rule/view-rule.component.scss

@@ -0,0 +1,10 @@
+.content {
+  div {
+    margin: 1rem 0;
+    word-wrap: break-word;
+  }
+
+  .header {
+    font-weight: 500;
+  }
+}

src/app/accounting/accounting-rules/view-rule/view-rule.component.spec.ts

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

src/app/accounting/accounting-rules/view-rule/view-rule.component.ts

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

src/app/accounting/accounting-rules/view-rule/view-rule.resolver.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+import { Observable } from 'rxjs';
+
+import { AccountingService } from '../../accounting.service';
+
+@Injectable()
+export class ViewAccountingRuleResolver implements Resolve<Object> {
+
+  constructor(private accountingService: AccountingService) {}
+
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const id = route.paramMap.get('id');
+
+    return this.accountingService.getAccountingRule(id);
+  }
+
+}

src/app/accounting/accounting.module.ts

@@ -26,6 +26,7 @@ import { ViewClosureComponent } from './closing-entries/view-closure/view-closur
 import { EditClosureComponent } from './closing-entries/edit-closure/edit-closure.component';
 import { AccountingRulesComponent } from './accounting-rules/accounting-rules.component';
 import { CreateRuleComponent } from './accounting-rules/create-rule/create-rule.component';
+import { ViewRuleComponent } from './accounting-rules/view-rule/view-rule.component';
 
 @NgModule({
   imports: [
@@ -56,7 +57,8 @@ import { CreateRuleComponent } from './accounting-rules/create-rule/create-rule.
     ViewClosureComponent,
     EditClosureComponent,
     AccountingRulesComponent,
-    CreateRuleComponent
+    CreateRuleComponent,
+    ViewRuleComponent
   ],
   entryComponents: [
     RevertTransactionComponent,

src/app/accounting/accounting.service.ts

@@ -153,4 +153,8 @@ export class AccountingService {
     return this.http.post('/accountingrules', accountingRule);
   }
 
+  getAccountingRule(accountingRuleId: string) {
+    return this.http.get(`/accountingrules/${accountingRuleId}`);
+  }
+
 }