Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix a large amount of things in the ui

Browse source
This commit is contained in:
Thomas Bloor 2019-09-09 19:52:38 +01:00
parent 52bce4dd0a
commit 7883dbb169
No known key found for this signature in database
GPG key ID: 4657C7EBE42CC5CC
7 changed files with 185 additions and 266 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.idea/.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
# Default ignored files
/workspace.xml

1
package.json
View file

@ -9,6 +9,7 @@
"ng": "ng",
"start": "ng serve",
"start:dev": "ng serve --optimization=false --configuration=dev",
"start:local": "ng serve --optimization=false --configuration=local",
"build": "ng build",
"test": "ng test",
"test:ci": "ng test --watch=false",

63
src/app/dashboard/more-graphs-and-tables.component.html
View file

@ -3,7 +3,25 @@
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<strong>List of Transaction Types</strong>
<h4>Filter</h4>
</div>
<div class="card-block">
<form class="form-inline">
<label class="mr-2" for="filter-from">From</label>
<input id="filter-from" class="form-control" type="date" [(ngModel)]="filterFrom" name="from">
<label class="mx-2" for="filter-to">To</label>
<input class="form-control" id="filter-to" type="date" [(ngModel)]="filterTo" name="to">
<button type="submit" class="btn btn-primary ml-2" (click)="loadData()">Filter</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<strong>Transaction Types</strong>
</div>
<div *ngIf="metaTypeListAvailable" class="card-block">
<table class="table table-striped table-hover">
@ -24,14 +42,10 @@
</div>
</div>
</div>
</div>
</div>
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<strong>List of Ward Transactions</strong>
<strong>Ward Spending</strong>
</div>
<div *ngIf="wardListAvailable" class="card-block">
<table class="table table-striped table-hover">
@ -55,37 +69,12 @@
</div>
</div>
<div class="animated fadeIn">
<div class="card">
<div class="row">
<div class="col-sm-8">
<h4 class="card-title mb-0">Blah</h4>
</div>
<div *ngIf="" class="card-block">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Ward</th>
<th>Amount of Transactions</th>
<th>Sum of Transactions</th>
</tr>
</thead>
<tbody>
<tr ward-result *ngFor="let ward of wardList"></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-sm-8">
<h4 class="card-title mb-0">Supplier spend amount and number of purchases</h4>
</div>
<div class="col-sm-4 hidden-sm-down" *ngIf="isBubbleChartLoaded">
<input type="date" [(ngModel)]="bubbleChartBegin" (change)="bubbleChartUpdate()">
<input type="date" [(ngModel)]="bubbleChartEnd" (change)="bubbleChartUpdate()">
</div>
</div>
<small>vertical shows number of purchases, size of bubble shows the total spend amount, horizontal shows date</small>
<div class="col-sm-12" *ngIf="!isBubbleChartLoaded">
@ -106,8 +95,8 @@
<div class="card-block">
<div class="row">
<div class="col-sm-12">
<h4 class="card-title mb-0">Spend amount and number of organisations</h4>
<small>horizontal axis shows date, vertical axis shows total number of orgs and amount spent</small>
<h4 class="card-title mb-0">Spend & Number of Transactions</h4>
<small>Date against Value and Number of Transactions</small>
</div>
</div>
<div>
@ -128,15 +117,15 @@
<h4 class="card-title mb-0">Supplier Spend History</h4>
</div>
<div class="col-sm-6 hidden-sm-down">
<button type="button" class="btn btn-danger" (click)="supplierChartPrevious()">Previous Suppliers</button>
<button type="button" class="btn btn-info" (click)="supplierChartNext()">Next Suppliers</button>
<button type="button" class="btn btn-danger" (click)="previousSupplierHistoryPage()">Previous Page</button>
<button type="button" class="btn btn-info" (click)="nextSupplierHistoryPage()">Next Page</button>
<span class="ml-2">Page {{ _supplierHistoryPage }} of {{ _supplierHistoryPages }}</span>
</div>
</div>
<div *ngIf="isSupplierChartLoaded">
<canvas baseChart #supplierChart
[datasets]="supplierMonthChartData"
[options]="supplierMonthChartOptions"
[colors]="supplierMonthChartColours"
[labels]="supplierMonthChartLabels"
[legend]="showLegend"
[chartType]="supplierMonthChartType">

294
src/app/dashboard/more-graphs-and-tables.component.ts
View file

@ -1,10 +1,9 @@
import {Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef} from '@angular/core';
import {Component, OnInit, Input, Output, EventEmitter, ViewChild} from '@angular/core';
import {ApiService} from '../providers/api-service';
import {BaseChartDirective, Color} from 'ng2-charts';
import {BaseChartDirective} from 'ng2-charts';
import {CurrencyPipe} from '@angular/common';
import {ChartType} from "chart.js";
import * as moment from 'moment';
import { NgModel } from '@angular/forms';
@Component({
templateUrl: 'more-graphs-and-tables.component.html',
@ -12,14 +11,13 @@ import { NgModel } from '@angular/forms';
export class MoreStuffComponent implements OnInit {
@Output() public onClick = new EventEmitter();
@Input() public categories: any;
lineChartBegin: any;
lineChartEnd: any;
bubbleChartBegin: any;
bubbleChartEnd: any;
cached_graph_data: any;
isBubbleChartLoaded:boolean = false;
isLineChartLoaded:boolean = false;
isSupplierChartLoaded:boolean = false;
// Global Filter Setup
filterFrom: any;
filterTo: any;
isBubbleChartLoaded: boolean = false;
isSupplierChartLoaded: boolean = false;
wardList: any;
wardListAvailable = false;
metaTypeList: any;
@ -29,114 +27,59 @@ export class MoreStuffComponent implements OnInit {
private api: ApiService,
private currencyPipe: CurrencyPipe,
) {
let now = moment();
this.filterTo = now.format('YYYY-MM-DD');
now.subtract(1, 'months');
this.filterFrom = now.format('YYYY-MM-DD');
this.tableSummary();
this.bubbleChartBegin = moment().format('YYYY-MM-DD');
this.bubbleChartEnd = moment().format('YYYY-MM-DD');
this.lineChartBegin = moment().format('YYYY-MM-DD');
this.lineChartEnd = moment().format('YYYY-MM-DD');
}
ngOnInit(): void {
this.loadData();
}
private loadData() {
this.tableSummary();
this.loadYearSpend();
this.loadSupplierBubble(false, ('0'), ('0'));
this.loadSupplierBubble();
this.loadSupplierHistory();
}
public showLegend = true;
public sampleColours: Color[] = [
{
backgroundColor: [
'red',
'green',
'#52afed',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
]
}
];
/*
* Supplier Bubble Chart Setup
*/
private formatGraphData(passed_graph_data: any, useRange : boolean, start_range: string, end_range: string) : any[] {
private formatGraphData(data: any): any[] {
let graph_data = [];
if (useRange == true) {
passed_graph_data.data.map(item=> {
let is_item_in_range = (new Date(item.date.substring(0, 10)) >= new Date(start_range) && new Date(item.date.substring(0, 10)) <= new Date(end_range));
if (is_item_in_range) {
graph_data.push({
t: new Date(item.date.substring(0, 10)),
r: item.value > 1000000 ? (item.value / 200000) : (item.value / 100000) + 5,
supplier: item.seller,
y: item.count,
value: item.value,
count: item.count,
});
}
data.data.map(item => {
graph_data.push({
t: item.date,
r: item.value > 1000000 ? (item.value / 200000) : (item.value / 100000) + 5,
supplier: item.seller,
y: item.count,
value: item.value,
count: item.count,
});
});
return graph_data;
} else {
passed_graph_data.data.map(item => {
graph_data.push({
t: item.date,
r: item.value > 1000000 ? (item.value / 200000) : (item.value / 100000) + 5,
supplier: item.seller,
y: item.count,
value: item.value,
count: item.count,
});
});
return graph_data;
}
return graph_data;
}
private loadSupplierBubble(useRange: boolean, start_range : string, end_range : string) {
this.isBubbleChartLoaded = false;
// console.log("Fetching data for bubble chart... this will take a while. custom range = " + useRange);
var is_cached = false;
try {
if (this.cached_graph_data) {
is_cached = true;
private loadSupplierBubble() {
this.api.loadMiscUrl('organisation/external/supplier_count', {
from: this.filterFrom,
to: this.filterTo,
}).subscribe(
result => {
this.supplierBubbleChartData[0].data = this.formatGraphData(result);
this.isBubbleChartLoaded = true;
}
} catch {
// not cached
}
if (is_cached) {
// console.log("Using cached data of " + this.cached_graph_data.length + " items.");
this.supplierBubbleChartData[0].data = this.formatGraphData(this.cached_graph_data, useRange, start_range, end_range);
this.isBubbleChartLoaded = true;
// console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded);
}
else {
// console.log("Not using cached data.");
this.api.loadMiscUrl('organisation/external/supplier_count').subscribe(
result => {
this.cached_graph_data = result;
this.supplierBubbleChartData[0].data = this.formatGraphData(result, useRange, start_range, end_range);
// console.log("Graph fetched with " + this.supplierBubbleChartData[0].data.length + " items.");
this.isBubbleChartLoaded = true;
// console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded);
}
)
}
// console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded);
)
}
public supplierBubbleChartType: ChartType = 'bubble';
public supplierBubbleChartData: any[] = [
{
@ -156,15 +99,15 @@ export class MoreStuffComponent implements OnInit {
time: {
unit: 'month'
},
scaleLabel:{
display:true,
labelString:'Date'
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display:true,
labelString:'Number of purchases'
display: true,
labelString: 'Number of purchases'
}
}]
},
@ -184,7 +127,10 @@ export class MoreStuffComponent implements OnInit {
}
private tableSummary() {
this.api.loadMiscUrl('organisation/external/lcc_tables').subscribe(
this.api.loadMiscUrl('organisation/external/lcc_tables', {
from: this.filterFrom,
to: this.filterTo,
}).subscribe(
result => {
this.wardList = result.wards;
this.metaTypeList = Object.keys(result.types).map(key => result.types[key]);
@ -197,13 +143,16 @@ export class MoreStuffComponent implements OnInit {
},
error => {
console.log('Retrieval Error');
console.log( error._body );
console.log(error._body);
}
)
}
private loadYearSpend() {
this.api.loadMiscUrl('organisation/external/year_spend').subscribe(
this.api.loadMiscUrl('organisation/external/year_spend', {
from: this.filterFrom,
to: this.filterTo,
}).subscribe(
result => {
let value_data = [];
let count_data = [];
@ -226,20 +175,6 @@ export class MoreStuffComponent implements OnInit {
)
}
bubbleChartUpdate() {
// console.log("start_range input box: " + this.bubbleChartBegin);
// console.log("end_range input box: " + this.bubbleChartEnd);
// this is called when daterange is changed
this.loadSupplierBubble(true, (this.bubbleChartBegin), (this.bubbleChartEnd));
// console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded);
/*
bubbleChartBegin: any;
bubbleChartEnd: any;
*/
}
public yearSpendChartData: any[] = [
{
data: [],
@ -261,6 +196,7 @@ export class MoreStuffComponent implements OnInit {
},
];
public yearSpendChartOptions: any = {
elements: {line: {tension: 0}},
responsive: true,
scales: {
xAxes: [{
@ -269,24 +205,16 @@ export class MoreStuffComponent implements OnInit {
unit: 'month'
},
scaleLabel: {
display:true,
display: true,
labelString: 'Date'
}
}],
yAxes: [
{id: 'y-value', position: 'left', beginAtZero: true},
{id: 'y-count', position: 'right', beginAtZero: true},
{id: 'y-value', position: 'left', beginAtZero: true, type: 'linear'},
{id: 'y-count', position: 'right', beginAtZero: true, type: 'linear'},
]
},
};
public yearSpendChartColors: Color[] = [
{
backgroundColor: [
'#ffa1b5',
'#52afed'
]
}
];
public yearSpendChartLabels: string[] = [];
public yearSpendChartType: ChartType = 'line';
@ -304,64 +232,60 @@ export class MoreStuffComponent implements OnInit {
private loadSupplierHistory() {
this.api.loadMiscUrl('organisation/external/supplier_history').subscribe(
result => {
let labels = [];
let year = [];
let half = [];
let quarter = [];
result.data.map(item => {
labels.push(item.name);
year.push(item.year_total);
half.push(item.half_total);
quarter.push(item.quarter_total);
});
this.supplierMonthChartData[0].data = quarter.slice(0,15);
this.supplierMonthChartData[1].data = half.slice(0,15);
this.supplierMonthChartData[2].data = year.slice(0,15);
this.supplierMonthChartLabels = labels.slice(0,15);
this._supplierHistoryData = result.data;
this._supplierHistoryPage = 1;
this._supplierHistoryPages = Math.ceil(this._supplierHistoryData.length / this._supplierHistoryPerPage);
this.updateSupplierHistoryData();
this.isSupplierChartLoaded = true;
}
)
this.isSupplierChartLoaded = true;
);
}
private supplierChartNext() {
result => {
let labels = [];
let year = [];
let half = [];
let quarter = [];
result.data.map(item => {
labels.push(item.name);
year.push(item.year_total);
half.push(item.half_total);
quarter.push(item.quarter_total);
});
this.supplierMonthChartData[0].data = quarter.slice(16,30);
this.supplierMonthChartData[1].data = half.slice(16,30);
this.supplierMonthChartData[2].data = year.slice(16,30);
this.supplierMonthChartLabels = labels.slice(16,30);
}
this.isSupplierChartLoaded = true;
}
private supplierChartPrevious() {
result => {
let labels = [];
let year = [];
let half = [];
let quarter = [];
result.data.map(item => {
labels.push(item.name);
year.push(item.year_total);
half.push(item.half_total);
quarter.push(item.quarter_total);
});
this.supplierMonthChartData[0].data = quarter.slice(0,15);
this.supplierMonthChartData[1].data = half.slice(0,15);
this.supplierMonthChartData[2].data = year.slice(0,15);
this.supplierMonthChartLabels = labels.slice(0,15);
}
this.isSupplierChartLoaded = true;
private updateSupplierHistoryData() {
const lastResult = this._supplierHistoryPerPage * this._supplierHistoryPage;
console.log(this._supplierHistoryPage);
const firstResult = lastResult - this._supplierHistoryPerPage;
const pageData = this._supplierHistoryData.slice(firstResult, lastResult);
console.log(pageData);
let labels = [];
let year = [];
let half = [];
let quarter = [];
pageData.map(item => {
labels.push(item.name);
year.push(item.year_total);
half.push(item.half_total);
quarter.push(item.quarter_total);
});
this.supplierMonthChartData[0].data = quarter;
this.supplierMonthChartData[1].data = half;
this.supplierMonthChartData[2].data = year;
this.supplierMonthChartLabels = labels;
}
public nextSupplierHistoryPage() {
if (this._supplierHistoryPage < this._supplierHistoryPages) {
this._supplierHistoryPage++;
}
this.updateSupplierHistoryData();
}
public previousSupplierHistoryPage() {
if (this._supplierHistoryPage > 1) {
this._supplierHistoryPage--;
}
this.updateSupplierHistoryData();
}
private _supplierHistoryData: any[];
private _supplierHistoryPerPage: number = 15;
private _supplierHistoryPage: number = 1;
private _supplierHistoryPages: number = 1;
public supplierMonthChartData: any[] = [
{
data: [],
@ -394,13 +318,13 @@ export class MoreStuffComponent implements OnInit {
scales: {
xAxes: [{
scaleLabel: {
display:true,
display: true,
labelString: 'Spend amount £'
}
}],
yAxes: [{
scaleLabel: {
display:true,
display: true,
labelString: 'Supplier Names'
}
}]

65
src/app/dashboard/suppliers.component.html
View file

@ -3,14 +3,17 @@
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<strong>Search list of suppliers</strong>
<small>Search by name or postcode of suppliers here</small>
<h4>Search Suppliers</h4>
</div>
<div *ngIf="supplierListAvailable" class="card-block">
<div class="search-hero">
<input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="Search for a supplier here">
<div *ngIf="supplierListAvailable" class="card-block">
<div class="input-group">
<input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off"
placeholder="Search by Name or Postcode" (keydown.enter)="searchSuppliers()">
<div class="input-group-append">
<button class="btn btn-primary" (click)="searchSuppliers()">Search</button>
</div>
</div>
</div>
</div>
</div>
</div>
@ -20,58 +23,52 @@
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<strong>List of Suppliers</strong>
<small>This lists all suppliers that have been submitted.</small>
<h4>List of Suppliers</h4>
<div class="small">Click on Column Headers to change Sort Order</div>
</div>
<div *ngIf="supplierListAvailable" class="card-block">
<table class="table table-striped table-hover">
<thead>
<tr>
<th (click)="sortName()">Name <span class="fa-stack">
<tr>
<th (click)="sortName()">Name <span class="fa-stack">
<i *ngIf="sortBy !== 'name' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
<i *ngIf="sortBy !== 'name' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
</span></th>
<th (click)="sortPostcode()">Postcode <span class="fa-stack">
<th (click)="sortPostcode()">Postcode <span class="fa-stack">
<i *ngIf="sortBy !== 'postcode' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
<i *ngIf="sortBy !== 'postcode' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
</span></th>
<th (click)="sortSpend()">Spend <span class="fa-stack">
<th (click)="sortSpend()">Spend <span class="fa-stack">
<i *ngIf="sortBy !== 'spend' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
<i *ngIf="sortBy !== 'spend' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
</span></th>
</tr>
</tr>
</thead>
<tbody>
<tr supplier-result *ngFor="let supplier of supplierList | paginate: paginateConfig" [supplier]="supplier"></tr>
<tr supplier-result *ngFor="let supplier of supplierList | paginate: paginateConfig"
[supplier]="supplier"></tr>
</tbody>
</table>
<pagination-template #p="paginationApi"
[id]="paginateConfig.id"
(pageChange)="loadSuppliers($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">
[id]="paginateConfig.id"
(pageChange)="loadSuppliers($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>
<span>{{ page.label }}</span>
</a>
<div class="page-link" *ngIf="p.getCurrent() === page.value">
<span>{{ page.label }}</span>
<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>
</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>
<select (change)="loadSuppliers(1)" [(ngModel)]="perPage">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
</div>
<div *ngIf="!supplierListAvailable" class="card-block">
No Suppliers available.

13
src/app/dashboard/suppliers.component.ts
View file

@ -13,6 +13,8 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
@Input() public categories: any;
public perPage: number = 10;
searchText: string;
supplierList: any;
supplierListAvailable = false;
sortBy = 'name';
@ -25,10 +27,6 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
totalItems: 0
};
public recurClick(event: any): void {
this.onClick.emit( event );
}
constructor(
private api: ApiService,
) { }
@ -38,7 +36,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
}
loadSuppliers(logPage: number) {
this.api.externalSuppliers(logPage, this.sortBy, this.sortDir, this.perPage).subscribe(
this.api.externalSuppliers(logPage, this.sortBy, this.sortDir, this.perPage, this.searchText).subscribe(
result => {
this.supplierList = result.suppliers;
if (this.supplierList) {
@ -65,6 +63,11 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
this.loadSuppliers(1);
}
searchSuppliers() {
// Go back to page 1 when searching
this.loadSuppliers(1);
}
ngAfterViewInit() {
}

10
src/app/providers/api-service.ts
View file

@ -144,26 +144,28 @@ export class ApiService {
);
}
public loadMiscUrl(extra_url) {
public loadMiscUrl(extra_url, extraArgs = {}) {
const key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/v1/' + extra_url,
{
session_key : key,
...extraArgs,
}
);
}
public externalSuppliers(data, sortBy, sortDir, perPage) {
public externalSuppliers(page, sortBy, sortDir, perPage, search) {
const key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/v1/organisation/external/suppliers',
{
session_key : key,
page : data,
page : page,
sort_by : sortBy,
sort_dir : sortDir,
per_page : perPage
per_page : perPage,
search : search,
}
);
}