Added ability to read Transactions from server

src/app/dashboard/dashboard.module.ts

@@ -9,12 +9,14 @@ import { DashboardCustomerComponent } from './dashboard-customer.component';
 import { AccountEditComponent } from './account-edit.component';
 import { AddDataComponent } from './add-data.component';
 import { FeedbackComponent } from './feedback.component';
+import { TransactionLogComponent } from './transaction-log.component';
 
 import { GraphWidget } from '../widgets/graph-widget.component';
 
 import { DashboardRoutingModule } from './dashboard.routing';
 import { OrgResultComponent } from '../shared/org-result.component';
 import { OrgTableComponent } from '../shared/org-table.component';
+import { TransactionResultComponent } from '../shared/transaction-result.component';
 
 @NgModule({
   imports: [
@@ -33,6 +35,8 @@ import { OrgTableComponent } from '../shared/org-table.component';
     AddDataComponent,
     OrgResultComponent,
     OrgTableComponent,
+    TransactionLogComponent,
+    TransactionResultComponent,
     FeedbackComponent,
     GraphWidget,
   ]

src/app/dashboard/dashboard.routing.ts

@@ -11,6 +11,7 @@ import { FullLayoutComponent } from '../layouts/full-layout.component';
 import { AccountEditComponent } from './account-edit.component';
 import { AddDataComponent } from './add-data.component';
 import { FeedbackComponent } from './feedback.component';
+import { TransactionLogComponent } from './transaction-log.component';
 
 // Using child path to allow for FullLayout theming
 const routes: Routes = [
@@ -42,6 +43,11 @@ const routes: Routes = [
         component: AddDataComponent,
         data: { title: 'Add Transaction' },
       },
+      {
+        path: 'transaction-log',
+        component: TransactionLogComponent,
+        data: { title: 'Transaction Log' },
+      },
       {
         path: 'feedback',
         component: FeedbackComponent,

src/app/dashboard/transaction-log.component.html

@@ -0,0 +1,39 @@
+<div class="animated fadeIn">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header">
+          <strong>Log of Outgoing Transactions</strong>
+          <small>This lists all purchases that have been submitted.</small>
+        </div>
+        <div *ngIf="!noTransactionList" class="card-block">
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th>Seller</th>
+                <th>Value</th>
+                <th>Purchase Time</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr transaction-result *ngFor="let transaction of transactionList" [transaction]="transaction"></tr>
+            </tbody>
+          </table>
+          <ul class="pagination">
+            <li class="page-item"><a class="page-link" href="#">Prev</a></li>
+            <li class="page-item active">
+              <a class="page-link" href="#">1</a>
+            </li>
+            <li class="page-item"><a class="page-link" href="#">2</a></li>
+            <li class="page-item"><a class="page-link" href="#">3</a></li>
+            <li class="page-item"><a class="page-link" href="#">4</a></li>
+            <li class="page-item"><a class="page-link" href="#">Next</a></li>
+          </ul>
+        </div>
+        <div *ngIf="noTransactionList" class="card-block">
+          No Transactions available.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/transaction-log.component.ts

@@ -0,0 +1,65 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { ApiService } from '../providers/api-service';
+import { TransactionResultComponent } from '../shared/transaction-result.component';
+import * as moment from 'moment';
+import 'rxjs/add/operator/map';
+
+@Component({
+  templateUrl: 'transaction-log.component.html',
+  providers: [ApiService]
+})
+export class TransactionLogComponent {
+
+  transactionList;
+  noTransactionList = true;
+  myDate: any;
+  minDate: any;
+  logPage: any = 1;
+
+  constructor(
+  private http: Http,
+	private api: ApiService,
+	) {
+    this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
+    // this.myDate = new Date().toISOString().slice(0, 16);
+  }
+
+  ngOnInit(): void {
+    this.getMinDate();
+    this.loadTransactions();
+  }
+
+  getMinDate(){
+    // gets the April 1st date of the current year
+    let aprilDate = moment().month(3).date(1);
+    let now = moment();
+    // Checks if current time is before April 1st, if so returns true
+    let beforeApril = now.isBefore(aprilDate);
+    if ( beforeApril == true ) {
+      this.minDate = aprilDate.subtract(2, 'years').format('YYYY-MM-DD');
+    } else {
+      this.minDate = aprilDate.subtract(1, 'years').format('YYYY-MM-DD');
+    }
+  }
+
+  loadTransactions() {
+    this.api.transList(this.logPage).subscribe(
+      result => {
+        if(result.transactions.length > 0) {
+          this.transactionList = result.transactions;
+          console.log(this.transactionList);
+          this.noTransactionList = false;
+        } else {
+        // handle the case when the transactionList is empty
+          this.transactionList = null;
+          this.noTransactionList = true;
+        }
+      },
+      error => {
+        console.log(error);
+      }
+    );
+  }
+
+}

src/app/layouts/full-layout.component.html

@@ -30,14 +30,19 @@
             <i class="icon-speedometer"></i> Dashboard
           </a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
+            <i class="icon-basket"></i> Add Transaction
+          </a>
+        </li>
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/feedback']">
             <i class="icon-envelope-letter"></i> Enter Feedback
           </a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
-            <i class="icon-basket"></i> Add Transaction
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/transaction-log']">
+            <i class="icon-basket"></i> Transaction Log
           </a>
         </li>
       </ul>

src/app/providers/api-service.ts

@@ -97,6 +97,19 @@ export class ApiService {
       ).map( response => response.json() );
   }
 
+  // gets transaction list for log
+
+  public transList(data) {
+	  let key = this.sessionKey;
+	  return this.http.post(
+		this.apiUrl + '/outgoing-transactions',
+		{
+      session_key : key,
+      page : data
+    }
+	  ).map( response => response.json() );
+  }
+
   // Searches organisations used for transaction submission
 
   public search(data) {
@@ -200,8 +213,8 @@ export class ApiService {
     return this.http.post(
 		  this.apiUrl + '/stats/leaderboard',
 		  {
-			session_key : key,
-      type : data
+  			session_key : key,
+        type : data
 		}
 		).map( response => response.json() );
 	}

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

@@ -0,0 +1,3 @@
+<td>{{transaction.seller}}</td>
+<td>{{transaction.value | currency:'GBP':true:'1.2-2' }}</td>
+<td>{{transactionDate}}</td>

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

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import * as moment from 'moment';
+
+interface TransactionData {
+  seller: number;
+  value: string;
+  purchase_time: string;
+}
+
+@Component({
+  selector: '[transaction-result]',
+  templateUrl: 'transaction-result.component.html',
+})
+export class TransactionResultComponent implements OnInit {
+  @Input() public transaction: TransactionData;
+  public transactionDate: string;
+
+  ngOnInit(): void {
+    this.transactionDate = moment(this.transaction.purchase_time).format('llll');
+  }
+}