Added initial working table for transaction types

src/app/app.module.ts

@@ -43,7 +43,6 @@ import { AuthModule } from './auth/auth.module';
 import { DashboardModule } from './dashboard/dashboard.module';
 import { ChartsModule } from 'ng2-charts';
 // import { StackedBarChartComponent } from './panels/stacked-bar.component';
-//import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component';
 import { FilterPipeModule } from 'ngx-filter-pipe';
 
 
@@ -72,10 +71,8 @@ import { FilterPipeModule } from 'ngx-filter-pipe';
     BreadcrumbsComponent,
     SIDEBAR_TOGGLE_DIRECTIVES,
     AsideToggleDirective,
-    //MoreStuffComponent,
     P404Component,
     P500Component,
-
   ],
   providers: [
     AuthGuard,

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,

src/app/shared/meta-type-result.component.html

@@ -0,0 +1,3 @@
+<td>{{type.type}}</td>
+<td>{{type.count}}</td>
+<td>{{type.sum | currency:'GBP':'symbol':'1.2-2' }}</td>

src/app/shared/meta-type-result.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+interface MetaTypeData {
+  type: string;
+  sum: number;
+  count: number;
+}
+
+@Component({
+  // tslint:disable-next-line
+  selector: '[meta-type-result]',
+  templateUrl: 'meta-type-result.component.html',
+})
+export class MetaTypeResultComponent implements OnInit {
+  @Input() public type: MetaTypeData;
+
+  ngOnInit(): void {
+  }
+}