From 2e27e7a43b424c0a47646d80747e4e15ca4a352e Mon Sep 17 00:00:00 2001 From: piratefinn Date: Wed, 6 Sep 2017 16:05:35 +0100 Subject: [PATCH] Added ability to read Transactions from server --- src/app/dashboard/dashboard.module.ts | 4 ++ src/app/dashboard/dashboard.routing.ts | 6 ++ .../dashboard/transaction-log.component.html | 39 +++++++++++ .../dashboard/transaction-log.component.ts | 65 +++++++++++++++++++ src/app/layouts/full-layout.component.html | 9 ++- src/app/providers/api-service.ts | 17 ++++- .../shared/transaction-result.component.html | 3 + .../shared/transaction-result.component.ts | 21 ++++++ 8 files changed, 160 insertions(+), 4 deletions(-) create mode 100644 src/app/dashboard/transaction-log.component.html create mode 100644 src/app/dashboard/transaction-log.component.ts create mode 100644 src/app/shared/transaction-result.component.html create mode 100644 src/app/shared/transaction-result.component.ts diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 117f427..770d9e2 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/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, ] diff --git a/src/app/dashboard/dashboard.routing.ts b/src/app/dashboard/dashboard.routing.ts index 1fa4903..acb81b7 100644 --- a/src/app/dashboard/dashboard.routing.ts +++ b/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, diff --git a/src/app/dashboard/transaction-log.component.html b/src/app/dashboard/transaction-log.component.html new file mode 100644 index 0000000..3e16020 --- /dev/null +++ b/src/app/dashboard/transaction-log.component.html @@ -0,0 +1,39 @@ +
+
+
+
+
+ Log of Outgoing Transactions + This lists all purchases that have been submitted. +
+
+ + + + + + + + + + + +
SellerValuePurchase Time
+ +
+
+ No Transactions available. +
+
+
+
+
diff --git a/src/app/dashboard/transaction-log.component.ts b/src/app/dashboard/transaction-log.component.ts new file mode 100644 index 0000000..9c3dc54 --- /dev/null +++ b/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); + } + ); + } + +} diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html index 4bb30ab..102b8dc 100644 --- a/src/app/layouts/full-layout.component.html +++ b/src/app/layouts/full-layout.component.html @@ -30,14 +30,19 @@ Dashboard +
  • + + Add Transaction + +
  • Enter Feedback
  • - - Add Transaction + + Transaction Log
    • diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index a171f1b..1be481f 100644 --- a/src/app/providers/api-service.ts +++ b/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() ); } diff --git a/src/app/shared/transaction-result.component.html b/src/app/shared/transaction-result.component.html new file mode 100644 index 0000000..5736bdf --- /dev/null +++ b/src/app/shared/transaction-result.component.html @@ -0,0 +1,3 @@ +{{transaction.seller}} +{{transaction.value | currency:'GBP':true:'1.2-2' }} +{{transactionDate}} diff --git a/src/app/shared/transaction-result.component.ts b/src/app/shared/transaction-result.component.ts new file mode 100644 index 0000000..782830a --- /dev/null +++ b/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'); + } +}