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 { 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,
|
||||||
|
|
|
@ -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-->
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
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