From 2e27e7a43b424c0a47646d80747e4e15ca4a352e Mon Sep 17 00:00:00 2001 From: piratefinn Date: Wed, 6 Sep 2017 16:05:35 +0100 Subject: [PATCH 1/2] 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'); + } +} From 6c52c09e43ec7d418d20a0cf52cefc92ceac2dfa Mon Sep 17 00:00:00 2001 From: piratefinn Date: Wed, 6 Sep 2017 17:51:56 +0100 Subject: [PATCH 2/2] Added in pagination for transaction list --- package-lock.json | 5 ++++ package.json | 1 + src/app/app.module.ts | 2 ++ src/app/dashboard/dashboard.module.ts | 2 ++ .../dashboard/transaction-log.component.html | 26 +++++++++++++------ .../dashboard/transaction-log.component.ts | 25 +++++++++++++----- src/scss/_custom.scss | 4 ++- 7 files changed, 50 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index a213fb6..2c53884 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5586,6 +5586,11 @@ "moment": "2.18.1" } }, + "ngx-pagination": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-3.0.1.tgz", + "integrity": "sha1-WoAA5AwEJNnEHJ1tWSVi4VR6vyQ=" + }, "no-case": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.1.tgz", diff --git a/package.json b/package.json index b50de08..2eadefd 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "ng2-charts": "1.6.0", "ng2-validation-manager": "^0.3.1", "ngx-bootstrap": "1.6.6", + "ngx-pagination": "^3.0.1", "rxjs": "5.4.2", "ts-helpers": "1.1.2", "webpack": "3.5.4", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 94f0749..c9ab0fc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,6 +6,7 @@ import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { TabsModule } from 'ngx-bootstrap/tabs'; +import { NgxPaginationModule } from 'ngx-pagination'; import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive'; import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive'; @@ -37,6 +38,7 @@ import { DashboardModule } from './dashboard/dashboard.module'; imports: [ BrowserModule, HttpModule, + NgxPaginationModule, BsDropdownModule.forRoot(), TabsModule.forRoot(), AuthModule, diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 770d9e2..7f2b40d 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ChartsModule } from 'ng2-charts/ng2-charts'; import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; +import { NgxPaginationModule } from 'ngx-pagination'; import { DashboardComponent } from './dashboard.component'; import { DashboardCustomerComponent } from './dashboard-customer.component'; @@ -26,6 +27,7 @@ import { TransactionResultComponent } from '../shared/transaction-result.compone ReactiveFormsModule, ChartsModule, BsDropdownModule, + NgxPaginationModule, DashboardRoutingModule, ], declarations: [ diff --git a/src/app/dashboard/transaction-log.component.html b/src/app/dashboard/transaction-log.component.html index 3e16020..46ddd7f 100644 --- a/src/app/dashboard/transaction-log.component.html +++ b/src/app/dashboard/transaction-log.component.html @@ -16,19 +16,29 @@ - + + +
    No Transactions available. diff --git a/src/app/dashboard/transaction-log.component.ts b/src/app/dashboard/transaction-log.component.ts index 9c3dc54..cf6f982 100644 --- a/src/app/dashboard/transaction-log.component.ts +++ b/src/app/dashboard/transaction-log.component.ts @@ -1,7 +1,11 @@ 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 { PaginatePipe } from 'ngx-pagination'; +import {PaginationInstance} from 'ngx-pagination'; +// import { PaginationControlsComponent } from 'ngx-pagination'; +// import { PaginationControlsDirective } from 'ngx-pagination'; +// import { TransactionResultComponent } from '../shared/transaction-result.component'; import * as moment from 'moment'; import 'rxjs/add/operator/map'; @@ -15,7 +19,13 @@ export class TransactionLogComponent { noTransactionList = true; myDate: any; minDate: any; - logPage: any = 1; + + public paginateConfig: PaginationInstance = { + id: 'transpaginate', + itemsPerPage: 10, + currentPage: 1, + totalItems: 0 + }; constructor( private http: Http, @@ -27,7 +37,7 @@ export class TransactionLogComponent { ngOnInit(): void { this.getMinDate(); - this.loadTransactions(); + this.loadTransactions(1); } getMinDate(){ @@ -43,12 +53,15 @@ export class TransactionLogComponent { } } - loadTransactions() { - this.api.transList(this.logPage).subscribe( + loadTransactions(logPage: number) { + console.log(logPage); + this.api.transList(logPage).subscribe( result => { if(result.transactions.length > 0) { this.transactionList = result.transactions; - console.log(this.transactionList); + //TODO Rename in server + this.paginateConfig.totalItems = result.page_no; + this.paginateConfig.currentPage = logPage; this.noTransactionList = false; } else { // handle the case when the transactionList is empty diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss index 4ff87f5..5be90ec 100644 --- a/src/scss/_custom.scss +++ b/src/scss/_custom.scss @@ -1,5 +1,7 @@ // Here you can add other styles - +.clickable { + cursor: pointer; +} // white title font variant on type-2 as defined in _widgets.css .horizontal-bars { padding: 0;