Added proper supplier table

This commit is contained in:
Finn 2019-07-12 18:50:59 +01:00
parent 6b1e474916
commit 40462b7d8f
No known key found for this signature in database
GPG key ID: 7455B4B17685B598
7 changed files with 77 additions and 24 deletions

View file

@ -37,6 +37,7 @@ import { OrgTableComponent } from '../shared/org-table.component';
import { RecurResultComponent } from '../shared/recur-result.component'; import { RecurResultComponent } from '../shared/recur-result.component';
import { RecurTableComponent } from '../shared/recur-table.component'; import { RecurTableComponent } from '../shared/recur-table.component';
import { TransactionResultComponent } from '../shared/transaction-result.component'; import { TransactionResultComponent } from '../shared/transaction-result.component';
import { SupplierResultComponent } from '../shared/supplier-result.component';
import { PayrollResultComponent } from '../shared/payroll-result.component'; import { PayrollResultComponent } from '../shared/payroll-result.component';
import { LeaderboardResultComponent } from '../shared/leaderboard-result.component'; import { LeaderboardResultComponent } from '../shared/leaderboard-result.component';
@ -71,6 +72,7 @@ import { environment } from '../../environments/environment';
TransactionLogComponent, TransactionLogComponent,
CategoryMonthComponent, CategoryMonthComponent,
TransactionResultComponent, TransactionResultComponent,
SupplierResultComponent,
PayrollLogComponent, PayrollLogComponent,
PayrollResultComponent, PayrollResultComponent,
LeaderboardComponent, LeaderboardComponent,

View file

@ -10,24 +10,28 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<!-- table body - name, postcode and spend data should be presented here in cost descending order --> <tr supplier-result *ngFor="let supplier of supplierList | paginate: paginateConfig" [supplier]="supplier"></tr>
<tr recur-result *ngFor="let recur of recurList" tr.names="name" tr.recur="recur" (onClick)="recurClick($event, template)"></tr>
<tr>
<td>Tom's Tippity Top Toenails Ltd.</td>
<td>LA11LY</td>
<td>£250,000.00</td>
</tr>
<tr>
<td>Selena's Scratching Sticks Inc.</td>
<td>WS15PQ</td>
<td>£5.00</td>
</tr>
<tr>
<td>Big Barry and Son's Balloon Store and Clown Outfits Corp.</td>
<td>PF43RD</td>
<td>£22.00</td>
</tr>
</tbody> </tbody>
</table> </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">
<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>
</div><!--/.col--> </div><!--/.col-->

View file

@ -16,6 +16,15 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
@Output() public onClick = new EventEmitter(); @Output() public onClick = new EventEmitter();
@Input() public categories: any; @Input() public categories: any;
supplierList: any;
supplierListAvailable = false;
public paginateConfig: PaginationInstance = {
id: 'transpaginate',
itemsPerPage: 10,
currentPage: 1,
totalItems: 0
};
public recurClick(event: any): void { public recurClick(event: any): void {
this.onClick.emit( event ); this.onClick.emit( event );
@ -26,7 +35,22 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.loadSuppliers(1);
}
loadSuppliers(logPage: number) {
this.api.externalSuppliers(logPage).subscribe(
result => {
this.supplierList = result.suppliers;
this.paginateConfig.totalItems = result.page_no;
this.paginateConfig.currentPage = logPage;
this.noTransactionList = false;
},
error => {
console.log('Retrieval Error');
console.log( error._body );
}
);
} }
ngAfterViewInit() { ngAfterViewInit() {

View file

@ -31,11 +31,11 @@ export class TransactionLogComponent implements OnInit {
updatedTime: string; updatedTime: string;
public paginateConfig: PaginationInstance = { public paginateConfig: PaginationInstance = {
id: 'transpaginate', id: 'transpaginate',
itemsPerPage: 10, itemsPerPage: 10,
currentPage: 1, currentPage: 1,
totalItems: 0 totalItems: 0
}; };
constructor( constructor(
private api: ApiService, private api: ApiService,

View file

@ -144,12 +144,13 @@ export class ApiService {
); );
} }
public externalSuppliers() { public externalSuppliers(data) {
const key = this.sessionKey; const key = this.sessionKey;
return this.http.post<any>( return this.http.post<any>(
this.apiUrl + '/organisation/external/suppliers', this.apiUrl + '/v1/organisation/external/suppliers',
{ {
session_key : key, session_key : key,
page : data
} }
); );
} }

View file

@ -0,0 +1,3 @@
<td>{{supplier.name}}</td>
<td>{{supplier.postcode}}</td>
<td>{{supplier.spend | currency:'GBP':'symbol':'1.2-2' }}</td>

View file

@ -0,0 +1,19 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
interface SupplierData {
name: string;
postcode: string;
spend: number = 0;
}
@Component({
// tslint:disable-next-line
selector: '[supplier-result]',
templateUrl: 'supplier-result.component.html',
})
export class SupplierResultComponent implements OnInit {
@Input() public supplier: SupplierData;
ngOnInit(): void {
}
}