79 lines
3.6 KiB
HTML
79 lines
3.6 KiB
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>
|