Added proper supplier table
This commit is contained in:
parent
6b1e474916
commit
40462b7d8f
7 changed files with 77 additions and 24 deletions
|
@ -37,6 +37,7 @@ import { OrgTableComponent } from '../shared/org-table.component';
|
|||
import { RecurResultComponent } from '../shared/recur-result.component';
|
||||
import { RecurTableComponent } from '../shared/recur-table.component';
|
||||
import { TransactionResultComponent } from '../shared/transaction-result.component';
|
||||
import { SupplierResultComponent } from '../shared/supplier-result.component';
|
||||
import { PayrollResultComponent } from '../shared/payroll-result.component';
|
||||
import { LeaderboardResultComponent } from '../shared/leaderboard-result.component';
|
||||
|
||||
|
@ -71,6 +72,7 @@ import { environment } from '../../environments/environment';
|
|||
TransactionLogComponent,
|
||||
CategoryMonthComponent,
|
||||
TransactionResultComponent,
|
||||
SupplierResultComponent,
|
||||
PayrollLogComponent,
|
||||
PayrollResultComponent,
|
||||
LeaderboardComponent,
|
||||
|
|
|
@ -10,24 +10,28 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- table body - name, postcode and spend data should be presented here in cost descending order -->
|
||||
<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>
|
||||
<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">
|
||||
<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><!--/.col-->
|
||||
|
|
|
@ -16,6 +16,15 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
|
|||
@Output() public onClick = new EventEmitter();
|
||||
@Input() public categories: any;
|
||||
|
||||
supplierList: any;
|
||||
supplierListAvailable = false;
|
||||
|
||||
public paginateConfig: PaginationInstance = {
|
||||
id: 'transpaginate',
|
||||
itemsPerPage: 10,
|
||||
currentPage: 1,
|
||||
totalItems: 0
|
||||
};
|
||||
|
||||
public recurClick(event: any): void {
|
||||
this.onClick.emit( event );
|
||||
|
@ -26,7 +35,22 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
|
|||
) { }
|
||||
|
||||
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() {
|
||||
|
|
|
@ -31,11 +31,11 @@ export class TransactionLogComponent implements OnInit {
|
|||
updatedTime: string;
|
||||
|
||||
public paginateConfig: PaginationInstance = {
|
||||
id: 'transpaginate',
|
||||
itemsPerPage: 10,
|
||||
currentPage: 1,
|
||||
totalItems: 0
|
||||
};
|
||||
id: 'transpaginate',
|
||||
itemsPerPage: 10,
|
||||
currentPage: 1,
|
||||
totalItems: 0
|
||||
};
|
||||
|
||||
constructor(
|
||||
private api: ApiService,
|
||||
|
|
|
@ -144,12 +144,13 @@ export class ApiService {
|
|||
);
|
||||
}
|
||||
|
||||
public externalSuppliers() {
|
||||
public externalSuppliers(data) {
|
||||
const key = this.sessionKey;
|
||||
return this.http.post<any>(
|
||||
this.apiUrl + '/organisation/external/suppliers',
|
||||
this.apiUrl + '/v1/organisation/external/suppliers',
|
||||
{
|
||||
session_key : key,
|
||||
page : data
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
3
src/app/shared/supplier-result.component.html
Normal file
3
src/app/shared/supplier-result.component.html
Normal file
|
@ -0,0 +1,3 @@
|
|||
<td>{{supplier.name}}</td>
|
||||
<td>{{supplier.postcode}}</td>
|
||||
<td>{{supplier.spend | currency:'GBP':'symbol':'1.2-2' }}</td>
|
19
src/app/shared/supplier-result.component.ts
Normal file
19
src/app/shared/supplier-result.component.ts
Normal 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 {
|
||||
}
|
||||
}
|
Reference in a new issue