BROKEN: Added wards table

src/app/dashboard/dashboard.module.ts

@@ -38,6 +38,7 @@ import { RecurResultComponent } from '../shared/recur-result.component';
 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 { PayrollResultComponent } from '../shared/payroll-result.component';
 import { LeaderboardResultComponent } from '../shared/leaderboard-result.component';
 
@@ -73,6 +74,7 @@ import { environment } from '../../environments/environment';
     CategoryMonthComponent,
     TransactionResultComponent,
     SupplierResultComponent,
+    WardResultComponent,
     PayrollLogComponent,
     PayrollResultComponent,
     LeaderboardComponent,

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

@@ -1,4 +1,53 @@
 <div class="animated fadeIn">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header">
+          <strong>List of Ward Transactions</strong>
+        </div>
+        <div *ngIf="wardListAvailable" 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 ward-result *ngFor="let ward of wardList" [ward]="ward"></tr>
+            </tbody>
+          </table>
+        </div>
+        <div *ngIf="!wardListAvailable" class="card-block">
+          No Data available.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="animated fadeIn">
+  <div class="card">
+    <div class="row">
+        <div class="col-sm-8">
+          <h4 class="card-title mb-0">Blah</h4>
+        </div>
+        <div *ngIf="" 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 ward-result *ngFor="let ward of wardList"></tr>
+            </tbody>
+          </table>
+        </div>
+    </div>
+  </div>
   <div class="card">
     <div class="card-block">
       <div class="row">

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

@@ -20,11 +20,14 @@ export class MoreStuffComponent implements OnInit {
   isBubbleChartLoaded:boolean = false;
   isLineChartLoaded:boolean = false;
   isSupplierChartLoaded:boolean = false;
+  wardList: any;
+  wardListAvailable = false;
 
   constructor(
     private api: ApiService,
     private currencyPipe: CurrencyPipe,
   ) {
+    this.tableSummary();
     this.bubbleChartBegin = moment().format('YYYY-MM-DD');
     this.bubbleChartEnd = moment().format('YYYY-MM-DD');
     this.lineChartBegin = moment().format('YYYY-MM-DD');
@@ -178,6 +181,21 @@ export class MoreStuffComponent implements OnInit {
     return `${value.supplier}: ${this.currencyPipe.transform(value.value, 'GBP', 'symbol', '1.2-2')} over ${value.count} purchases`;
   }
 
+  private tableSummary() {
+    this.api.loadMiscUrl('organisation/external/lcc_tables').subscribe(
+      result => {
+        this.wardList = result.wards;
+        if (this.wardList) {
+          this.wardListAvailable = true;
+        }
+      },
+      error => {
+        console.log('Retrieval Error');
+        console.log( error._body );
+      }
+    )
+  }
+
 
   private loadYearSpend() {
     this.api.loadMiscUrl('organisation/external/year_spend').subscribe(

src/app/shared/ward-result.component.html

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

src/app/shared/ward-result.component.ts

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