From 7883dbb16971dcb7c1dcd78fc03e5f6d3dc4a8cc Mon Sep 17 00:00:00 2001 From: Thomas Bloor Date: Mon, 9 Sep 2019 19:52:38 +0100 Subject: [PATCH] Fix a large amount of things in the ui --- .idea/.gitignore | 3 + package.json | 1 + .../more-graphs-and-tables.component.html | 63 ++-- .../more-graphs-and-tables.component.ts | 294 +++++++----------- src/app/dashboard/suppliers.component.html | 65 ++-- src/app/dashboard/suppliers.component.ts | 15 +- src/app/providers/api-service.ts | 10 +- 7 files changed, 185 insertions(+), 266 deletions(-) create mode 100644 .idea/.gitignore diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..0e40fe8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,3 @@ + +# Default ignored files +/workspace.xml \ No newline at end of file diff --git a/package.json b/package.json index d3e3510..d5348ee 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html index 31c0ddd..73cef98 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.html +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -3,7 +3,25 @@
- List of Transaction Types +

Filter

+
+
+
+ + + + + +
+
+
+
+ +
+
+
+
+ Transaction Types
@@ -24,14 +42,10 @@ - - -
-
-
+
- List of Ward Transactions + Ward Spending
@@ -55,37 +69,12 @@
-
-
-
-

Blah

-
-
-
- - - - - - - - - - -
WardAmount of TransactionsSum of Transactions
-
-
-

Supplier spend amount and number of purchases

-
- - -
vertical shows number of purchases, size of bubble shows the total spend amount, horizontal shows date
@@ -106,8 +95,8 @@
-

Spend amount and number of organisations

- horizontal axis shows date, vertical axis shows total number of orgs and amount spent +

Spend & Number of Transactions

+ Date against Value and Number of Transactions
@@ -128,15 +117,15 @@

Supplier Spend History

- - + + + Page {{ _supplierHistoryPage }} of {{ _supplierHistoryPages }}
diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts index 78e3cdc..1e41ad8 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -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' } }] diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html index 0497ecb..6543598 100644 --- a/src/app/dashboard/suppliers.component.html +++ b/src/app/dashboard/suppliers.component.html @@ -3,14 +3,17 @@
- Search list of suppliers - Search by name or postcode of suppliers here +

Search Suppliers

-
-
- +
+
+ +
+
+
@@ -20,58 +23,52 @@
- List of Suppliers - This lists all suppliers that have been submitted. +

List of Suppliers

+
Click on Column Headers to change Sort Order
- - + - - - + - +
Name +
Name Postcode + Postcode Spend + Spend
- -
No Suppliers available. diff --git a/src/app/dashboard/suppliers.component.ts b/src/app/dashboard/suppliers.component.ts index 3210cbc..50421cf 100644 --- a/src/app/dashboard/suppliers.component.ts +++ b/src/app/dashboard/suppliers.component.ts @@ -4,7 +4,7 @@ import { AgmCoreModule } from '@agm/core'; import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal'; import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; import { PaginationInstance } from 'ngx-pagination'; -import { FilterPipeModule } from 'ngx-filter-pipe'; +import { FilterPipeModule } from 'ngx-filter-pipe'; @Component({ templateUrl: 'suppliers.component.html', }) @@ -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() { } diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index 5ac5c2a..8307371 100644 --- a/src/app/providers/api-service.ts +++ b/src/app/providers/api-service.ts @@ -144,26 +144,28 @@ export class ApiService { ); } - public loadMiscUrl(extra_url) { + public loadMiscUrl(extra_url, extraArgs = {}) { const key = this.sessionKey; return this.http.post( 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( 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, } ); }