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 005e72b..9ddfae6 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 { CurrencyPipe } from '@angular/common'; @@ -11,12 +12,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: [ @@ -26,6 +29,7 @@ import { OrgTableComponent } from '../shared/org-table.component'; ReactiveFormsModule, ChartsModule, BsDropdownModule, + NgxPaginationModule, DashboardRoutingModule, ], declarations: [ @@ -35,6 +39,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..b4f1e30 --- /dev/null +++ b/src/app/dashboard/transaction-log.component.html @@ -0,0 +1,49 @@ +
+
+
+
+
+ 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..cf6f982 --- /dev/null +++ b/src/app/dashboard/transaction-log.component.ts @@ -0,0 +1,78 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { Http, Response } from '@angular/http'; +import { ApiService } from '../providers/api-service'; +// 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'; + +@Component({ + templateUrl: 'transaction-log.component.html', + providers: [ApiService] +}) +export class TransactionLogComponent { + + transactionList; + noTransactionList = true; + myDate: any; + minDate: any; + + public paginateConfig: PaginationInstance = { + id: 'transpaginate', + itemsPerPage: 10, + currentPage: 1, + totalItems: 0 + }; + + 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(1); + } + + 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(logPage: number) { + console.log(logPage); + this.api.transList(logPage).subscribe( + result => { + if(result.transactions.length > 0) { + this.transactionList = result.transactions; + //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 + 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/org-table.component.html b/src/app/shared/org-table.component.html index 6d9a627..d5b2d39 100644 --- a/src/app/shared/org-table.component.html +++ b/src/app/shared/org-table.component.html @@ -2,7 +2,7 @@
    Select an Organisation from the table below - +
    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 @@ + + + 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'); + } +} diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss index 4ff87f5..6ac457b 100644 --- a/src/scss/_custom.scss +++ b/src/scss/_custom.scss @@ -1,5 +1,14 @@ // Here you can add other styles +.clickable { + cursor: pointer; +} +.table-striped tbody tr:nth-of-type(odd) { + background-color: #d2eef7; +} +.table-hover tbody tr:hover td { + background-color: $table-bg-hover; +} // white title font variant on type-2 as defined in _widgets.css .horizontal-bars { padding: 0;
    Organisation Name{{transaction.seller}}{{transaction.value | currency:'GBP':true:'1.2-2' }}{{transactionDate}}