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

<div class="animated fadeIn">
  <div class="row">
    <div class="col-lg-6 col-md-8">
      <div class="card">
        <div class="card-header">
          <h4>Search Suppliers</h4>
        </div>
        <div *ngIf="supplierListAvailable" class="card-block">
          <div class="input-group">
            <input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off"
                   placeholder="Search by Name or Postcode" (keydown.enter)="searchSuppliers()">
            <div class="input-group-append">
              <button class="btn btn-primary" (click)="searchSuppliers()">Search</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="animated fadeIn">
  <div class="row">
    <div class="col-lg-6 col-md-8">
      <div class="card">
        <div class="card-header">
          <h4>List of Suppliers</h4>
          <div class="small">Click on Column Headers to change Sort Order</div>
        </div>
        <div *ngIf="supplierListAvailable" class="card-block">
          <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 *ngIf="!supplierListAvailable" class="card-block">
          No Suppliers available.
        </div>
      </div>
    </div>
  </div>
</div>