Added initial working table for transaction types

src/app/dashboard/dashboard.module.ts

@@ -40,6 +40,7 @@ import { RecurTableComponent } from '../shared/recur-table.component';
 import { TransactionResultComponent } from '../shared/transaction-result.component';
 import { SupplierResultComponent } from '../shared/supplier-result.component';
 import { WardResultComponent } from '../shared/ward-result.component';
+import { MetaTypeResultComponent } from '../shared/meta-type-result.component';
 import { PayrollResultComponent } from '../shared/payroll-result.component';
 import { LeaderboardResultComponent } from '../shared/leaderboard-result.component';
 
@@ -76,6 +77,7 @@ import { environment } from '../../environments/environment';
     TransactionResultComponent,
     SupplierResultComponent,
     WardResultComponent,
+    MetaTypeResultComponent,
     PayrollLogComponent,
     PayrollResultComponent,
     LeaderboardComponent,

src/app/dashboard/more-graphs-and-tables.component.html

@@ -1,3 +1,31 @@
+<div class="animated fadeIn">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header">
+          <strong>List of Transaction Types</strong>
+        </div>
+        <div *ngIf="metaTypeListAvailable" class="card-block">
+          <table class="table table-striped table-hover">
+            <thead>
+              <tr>
+                <th>Ward</th>
+                <th>Amount of Transactions</th>
+                <th>Sum of Transactions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr meta-type-result *ngFor="let type of metaTypeList" [type]="type"></tr>
+            </tbody>
+          </table>
+        </div>
+        <div *ngIf="!metaTypeListAvailable" class="card-block">
+          No Data available.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 <div class="animated fadeIn">
   <div class="row">
     <div class="col-lg-12">

src/app/dashboard/more-graphs-and-tables.component.ts

@@ -22,6 +22,8 @@ export class MoreStuffComponent implements OnInit {
   isSupplierChartLoaded:boolean = false;
   wardList: any;
   wardListAvailable = false;
+  metaTypeList: any;
+  metaTypeListAvailable = false;
 
   constructor(
     private api: ApiService,
@@ -185,9 +187,13 @@ export class MoreStuffComponent implements OnInit {
     this.api.loadMiscUrl('organisation/external/lcc_tables').subscribe(
       result => {
         this.wardList = result.wards;
+        this.metaTypeList = Object.keys(result.types).map(key => result.types[key]);
         if (this.wardList) {
           this.wardListAvailable = true;
         }
+        if (this.metaTypeList) {
+          this.metaTypeListAvailable = true;
+        }
       },
       error => {
         console.log('Retrieval Error');
@@ -196,14 +202,12 @@ export class MoreStuffComponent implements OnInit {
     )
   }
 
-
   private loadYearSpend() {
     this.api.loadMiscUrl('organisation/external/year_spend').subscribe(
       result => {
         let value_data = [];
         let count_data = [];
 
-        console.log("The server is UP");
         result.data.map(item => {
           value_data.push({
             t: item.date,