Added proper supplier table

src/app/dashboard/dashboard.module.ts

@@ -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,

src/app/dashboard/suppliers.component.html

@@ -10,24 +10,28 @@
         </tr>
       </thead>
       <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>
     </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-->

src/app/dashboard/suppliers.component.ts

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

src/app/providers/api-service.ts

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

src/app/shared/supplier-result.component.html

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

src/app/shared/supplier-result.component.ts

@@ -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 {
+  }
+}