Merge branch 'development' into TBSliver/Widget-Graph-Improvements
This commit is contained in:
commit
1b075cdff6
13 changed files with 203 additions and 5 deletions
5
package-lock.json
generated
5
package-lock.json
generated
|
@ -5586,6 +5586,11 @@
|
||||||
"moment": "2.18.1"
|
"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": {
|
"no-case": {
|
||||||
"version": "2.3.1",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.1.tgz",
|
||||||
|
|
|
@ -33,6 +33,7 @@
|
||||||
"ng2-charts": "1.6.0",
|
"ng2-charts": "1.6.0",
|
||||||
"ng2-validation-manager": "^0.3.1",
|
"ng2-validation-manager": "^0.3.1",
|
||||||
"ngx-bootstrap": "1.6.6",
|
"ngx-bootstrap": "1.6.6",
|
||||||
|
"ngx-pagination": "^3.0.1",
|
||||||
"rxjs": "5.4.2",
|
"rxjs": "5.4.2",
|
||||||
"ts-helpers": "1.1.2",
|
"ts-helpers": "1.1.2",
|
||||||
"webpack": "3.5.4",
|
"webpack": "3.5.4",
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { HttpModule } from '@angular/http';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||||
import { TabsModule } from 'ngx-bootstrap/tabs';
|
import { TabsModule } from 'ngx-bootstrap/tabs';
|
||||||
|
import { NgxPaginationModule } from 'ngx-pagination';
|
||||||
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';
|
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';
|
||||||
|
|
||||||
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
|
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
|
||||||
|
@ -37,6 +38,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
HttpModule,
|
HttpModule,
|
||||||
|
NgxPaginationModule,
|
||||||
BsDropdownModule.forRoot(),
|
BsDropdownModule.forRoot(),
|
||||||
TabsModule.forRoot(),
|
TabsModule.forRoot(),
|
||||||
AuthModule,
|
AuthModule,
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
|
||||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||||
|
import { NgxPaginationModule } from 'ngx-pagination';
|
||||||
|
|
||||||
import { CurrencyPipe } from '@angular/common';
|
import { CurrencyPipe } from '@angular/common';
|
||||||
|
|
||||||
|
@ -11,12 +12,14 @@ import { DashboardCustomerComponent } from './dashboard-customer.component';
|
||||||
import { AccountEditComponent } from './account-edit.component';
|
import { AccountEditComponent } from './account-edit.component';
|
||||||
import { AddDataComponent } from './add-data.component';
|
import { AddDataComponent } from './add-data.component';
|
||||||
import { FeedbackComponent } from './feedback.component';
|
import { FeedbackComponent } from './feedback.component';
|
||||||
|
import { TransactionLogComponent } from './transaction-log.component';
|
||||||
|
|
||||||
import { GraphWidget } from '../widgets/graph-widget.component';
|
import { GraphWidget } from '../widgets/graph-widget.component';
|
||||||
|
|
||||||
import { DashboardRoutingModule } from './dashboard.routing';
|
import { DashboardRoutingModule } from './dashboard.routing';
|
||||||
import { OrgResultComponent } from '../shared/org-result.component';
|
import { OrgResultComponent } from '../shared/org-result.component';
|
||||||
import { OrgTableComponent } from '../shared/org-table.component';
|
import { OrgTableComponent } from '../shared/org-table.component';
|
||||||
|
import { TransactionResultComponent } from '../shared/transaction-result.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
@ -26,6 +29,7 @@ import { OrgTableComponent } from '../shared/org-table.component';
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
ChartsModule,
|
ChartsModule,
|
||||||
BsDropdownModule,
|
BsDropdownModule,
|
||||||
|
NgxPaginationModule,
|
||||||
DashboardRoutingModule,
|
DashboardRoutingModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
|
@ -35,6 +39,8 @@ import { OrgTableComponent } from '../shared/org-table.component';
|
||||||
AddDataComponent,
|
AddDataComponent,
|
||||||
OrgResultComponent,
|
OrgResultComponent,
|
||||||
OrgTableComponent,
|
OrgTableComponent,
|
||||||
|
TransactionLogComponent,
|
||||||
|
TransactionResultComponent,
|
||||||
FeedbackComponent,
|
FeedbackComponent,
|
||||||
GraphWidget,
|
GraphWidget,
|
||||||
],
|
],
|
||||||
|
|
|
@ -11,6 +11,7 @@ import { FullLayoutComponent } from '../layouts/full-layout.component';
|
||||||
import { AccountEditComponent } from './account-edit.component';
|
import { AccountEditComponent } from './account-edit.component';
|
||||||
import { AddDataComponent } from './add-data.component';
|
import { AddDataComponent } from './add-data.component';
|
||||||
import { FeedbackComponent } from './feedback.component';
|
import { FeedbackComponent } from './feedback.component';
|
||||||
|
import { TransactionLogComponent } from './transaction-log.component';
|
||||||
|
|
||||||
// Using child path to allow for FullLayout theming
|
// Using child path to allow for FullLayout theming
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
|
@ -42,6 +43,11 @@ const routes: Routes = [
|
||||||
component: AddDataComponent,
|
component: AddDataComponent,
|
||||||
data: { title: 'Add Transaction' },
|
data: { title: 'Add Transaction' },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'transaction-log',
|
||||||
|
component: TransactionLogComponent,
|
||||||
|
data: { title: 'Transaction Log' },
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'feedback',
|
path: 'feedback',
|
||||||
component: FeedbackComponent,
|
component: FeedbackComponent,
|
||||||
|
|
49
src/app/dashboard/transaction-log.component.html
Normal file
49
src/app/dashboard/transaction-log.component.html
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
<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-striped 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 | paginate: paginateConfig" [transaction]="transaction"></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<pagination-template #p="paginationApi"
|
||||||
|
[id]="paginateConfig.id"
|
||||||
|
(pageChange)="loadTransactions($event)">
|
||||||
|
<ul class="pagination">
|
||||||
|
<li class="page-item" [class.disabled]="p.isFirstPage()">
|
||||||
|
<a class="page-link clickable" *ngIf="!p.isFirstPage()" (click)="p.previous()">Prev</a>
|
||||||
|
</li>
|
||||||
|
<li *ngFor="let page of p.pages" class="page-item" [class.active]="p.getCurrent() === page.value">
|
||||||
|
<a class="page-link clickable" (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
|
||||||
|
<span>{{ page.label }}</span>
|
||||||
|
</a>
|
||||||
|
<div class="page-link" *ngIf="p.getCurrent() === page.value">
|
||||||
|
<span>{{ page.label }}</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" [class.disabled]="p.isLastPage()">
|
||||||
|
<a class="page-link clickable" *ngIf="!p.isLastPage()" (click)="p.next()">Next</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</pagination-template>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="noTransactionList" class="card-block">
|
||||||
|
No Transactions available.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
78
src/app/dashboard/transaction-log.component.ts
Normal file
78
src/app/dashboard/transaction-log.component.ts
Normal file
|
@ -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);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -30,14 +30,19 @@
|
||||||
<i class="icon-speedometer"></i> Dashboard
|
<i class="icon-speedometer"></i> Dashboard
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item">
|
||||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/feedback']">
|
<a class="nav-link" routerLinkActive="active" [routerLink]="['/feedback']">
|
||||||
<i class="icon-envelope-letter"></i> Enter Feedback
|
<i class="icon-envelope-letter"></i> Enter Feedback
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
|
<a class="nav-link" routerLinkActive="active" [routerLink]="['/transaction-log']">
|
||||||
<i class="icon-basket"></i> Add Transaction
|
<i class="icon-basket"></i> Transaction Log
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -97,6 +97,19 @@ export class ApiService {
|
||||||
).map( response => response.json() );
|
).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
|
// Searches organisations used for transaction submission
|
||||||
|
|
||||||
public search(data) {
|
public search(data) {
|
||||||
|
@ -200,8 +213,8 @@ export class ApiService {
|
||||||
return this.http.post(
|
return this.http.post(
|
||||||
this.apiUrl + '/stats/leaderboard',
|
this.apiUrl + '/stats/leaderboard',
|
||||||
{
|
{
|
||||||
session_key : key,
|
session_key : key,
|
||||||
type : data
|
type : data
|
||||||
}
|
}
|
||||||
).map( response => response.json() );
|
).map( response => response.json() );
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Search Results</strong></label>
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Search Results</strong></label>
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<span class="help-block"><strong>Select an Organisation from the table below</strong></span>
|
<span class="help-block"><strong>Select an Organisation from the table below</strong></span>
|
||||||
<table class="table table-hover">
|
<table class="table table-striped table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Organisation Name</th>
|
<th>Organisation Name</th>
|
||||||
|
|
3
src/app/shared/transaction-result.component.html
Normal file
3
src/app/shared/transaction-result.component.html
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<td>{{transaction.seller}}</td>
|
||||||
|
<td>{{transaction.value | currency:'GBP':true:'1.2-2' }}</td>
|
||||||
|
<td>{{transactionDate}}</td>
|
21
src/app/shared/transaction-result.component.ts
Normal file
21
src/app/shared/transaction-result.component.ts
Normal file
|
@ -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');
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +1,14 @@
|
||||||
// Here you can add other styles
|
// 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
|
// white title font variant on type-2 as defined in _widgets.css
|
||||||
.horizontal-bars {
|
.horizontal-bars {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
Reference in a new issue