Fix a large amount of things in the ui
This commit is contained in:
Thomas Bloor
parent
52bce4dd0a
commit
7883dbb169
7 changed files with 185 additions and 266 deletions
3
.idea/.gitignore
vendored
Normal file
3
.idea/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
|
||||
# Default ignored files
|
||||
/workspace.xml
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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,64 +27,34 @@ 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,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return graph_data;
|
||||
} else {
|
||||
passed_graph_data.data.map(item => {
|
||||
data.data.map(item => {
|
||||
graph_data.push({
|
||||
t: item.date,
|
||||
r: item.value > 1000000 ? (item.value / 200000) : (item.value / 100000) + 5,
|
||||
|
|
@ -99,44 +67,19 @@ export class MoreStuffComponent implements OnInit {
|
|||
|
||||
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;
|
||||
}
|
||||
} 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(
|
||||
private loadSupplierBubble() {
|
||||
this.api.loadMiscUrl('organisation/external/supplier_count', {
|
||||
from: this.filterFrom,
|
||||
to: this.filterTo,
|
||||
}).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.supplierBubbleChartData[0].data = this.formatGraphData(result);
|
||||
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;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
private supplierChartNext() {
|
||||
result => {
|
||||
let labels = [];
|
||||
let year = [];
|
||||
let half = [];
|
||||
let quarter = [];
|
||||
result.data.map(item => {
|
||||
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.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;
|
||||
|
||||
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'
|
||||
}
|
||||
}]
|
||||
|
|
|
|||
|
|
@ -3,12 +3,15 @@
|
|||
<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 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>
|
||||
|
|
@ -20,8 +23,8 @@
|
|||
<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">
|
||||
|
|
@ -42,7 +45,8 @@
|
|||
</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"
|
||||
|
|
@ -65,13 +69,6 @@
|
|||
</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,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() {
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue