FoodLoop-Web/src/app/dashboard/suppliers.component.html

<script type="text/javascript" charset="utf8" src=""></script>
<div class="animated fadeIn">
  <div class="form-group row">
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th (click)="sortName()">Name <span class="fa-stack">
            <i *ngIf="sortBy !== 'name' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
            <i *ngIf="sortBy !== 'name' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
          </span></th>
          <th (click)="sortPostcode()">Postcode <span class="fa-stack">
            <i *ngIf="sortBy !== 'postcode' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
            <i *ngIf="sortBy !== 'postcode' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
          </span></th>
          <th (click)="sortSpend()">Spend <span class="fa-stack">
            <i *ngIf="sortBy !== 'spend' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
            <i *ngIf="sortBy !== 'spend' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
          </span></th>
        </tr>
      </thead>
      <tbody>
        <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-->