made fixes to imports and supplier list
This commit is contained in:
parent
8202cdfdb1
commit
75ba91379d
4 changed files with 62 additions and 53 deletions
|
@ -9,7 +9,6 @@ import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component'
|
||||||
import { PiePanel } from '../panels/pie-panel.component';
|
import { PiePanel } from '../panels/pie-panel.component';
|
||||||
import { DataType } from '../shared/data-types.enum';
|
import { DataType } from '../shared/data-types.enum';
|
||||||
import * as moment from 'moment';
|
import * as moment from 'moment';
|
||||||
import { SuppliersComponent } from '../dashboard/suppliers.component';
|
|
||||||
import { MoreStuffComponent } from '../dashboard/more-graphs-and-tables.component';
|
import { MoreStuffComponent } from '../dashboard/more-graphs-and-tables.component';
|
||||||
// import { StackedBarChartComponent } from '../panels/stacked-bar.component';
|
// import { StackedBarChartComponent } from '../panels/stacked-bar.component';
|
||||||
|
|
||||||
|
|
|
@ -1,46 +1,58 @@
|
||||||
<script type="text/javascript" charset="utf8" src=""></script>
|
|
||||||
<div class="animated fadeIn">
|
<div class="animated fadeIn">
|
||||||
<div class="form-group row">
|
<div class="row">
|
||||||
<table class="table table-striped table-hover">
|
<div class="col-lg-12">
|
||||||
<thead>
|
<div class="card">
|
||||||
<tr>
|
<div class="card-header">
|
||||||
<th (click)="sortName()">Name <span class="fa-stack">
|
<strong>List of Suppliers</strong>
|
||||||
<i *ngIf="sortBy !== 'name' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
|
<small>This lists all suppliers that have been submitted.</small>
|
||||||
<i *ngIf="sortBy !== 'name' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
|
</div>
|
||||||
</span></th>
|
<div *ngIf="supplierListAvailable" class="card-block">
|
||||||
<th (click)="sortPostcode()">Postcode <span class="fa-stack">
|
<table class="table table-striped table-hover">
|
||||||
<i *ngIf="sortBy !== 'postcode' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
|
<thead>
|
||||||
<i *ngIf="sortBy !== 'postcode' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
|
<tr>
|
||||||
</span></th>
|
<th (click)="sortName()">Name <span class="fa-stack">
|
||||||
<th (click)="sortSpend()">Spend <span class="fa-stack">
|
<i *ngIf="sortBy !== 'name' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
|
||||||
<i *ngIf="sortBy !== 'spend' || 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>
|
||||||
<i *ngIf="sortBy !== 'spend' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
|
</span></th>
|
||||||
</span></th>
|
<th (click)="sortPostcode()">Postcode <span class="fa-stack">
|
||||||
</tr>
|
<i *ngIf="sortBy !== 'postcode' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
|
||||||
</thead>
|
<i *ngIf="sortBy !== 'postcode' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
|
||||||
<tbody>
|
</span></th>
|
||||||
<tr supplier-result *ngFor="let supplier of supplierList | paginate: paginateConfig" [supplier]="supplier"></tr>
|
<th (click)="sortSpend()">Spend <span class="fa-stack">
|
||||||
</tbody>
|
<i *ngIf="sortBy !== 'spend' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
|
||||||
</table>
|
<i *ngIf="sortBy !== 'spend' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
|
||||||
<pagination-template #p="paginationApi"
|
</span></th>
|
||||||
[id]="paginateConfig.id"
|
</tr>
|
||||||
(pageChange)="loadSuppliers($event)">
|
</thead>
|
||||||
<ul class="pagination">
|
<tbody>
|
||||||
<li class="page-item" [class.disabled]="p.isFirstPage()">
|
<tr supplier-result *ngFor="let supplier of supplierList | paginate: paginateConfig" [supplier]="supplier"></tr>
|
||||||
<a class="page-link clickable" *ngIf="!p.isFirstPage()" (click)="p.previous()">Prev</a>
|
</tbody>
|
||||||
</li>
|
</table>
|
||||||
<li *ngFor="let page of p.pages" class="page-item" [class.active]="p.getCurrent() === page.value">
|
<pagination-template #p="paginationApi"
|
||||||
<a class="page-link clickable" (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
|
[id]="paginateConfig.id"
|
||||||
<span>{{ page.label }}</span>
|
(pageChange)="loadSuppliers($event)">
|
||||||
</a>
|
<ul class="pagination">
|
||||||
<div class="page-link" *ngIf="p.getCurrent() === page.value">
|
<li class="page-item" [class.disabled]="p.isFirstPage()">
|
||||||
<span>{{ page.label }}</span>
|
<a class="page-link clickable" *ngIf="!p.isFirstPage()" (click)="p.previous()">Prev</a>
|
||||||
</div>
|
</li>
|
||||||
</li>
|
<li *ngFor="let page of p.pages" class="page-item" [class.active]="p.getCurrent() === page.value">
|
||||||
<li class="page-item" [class.disabled]="p.isLastPage()">
|
<a class="page-link clickable" (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
|
||||||
<a class="page-link clickable" *ngIf="!p.isLastPage()" (click)="p.next()">Next</a>
|
<span>{{ page.label }}</span>
|
||||||
</li>
|
</a>
|
||||||
</ul>
|
<div class="page-link" *ngIf="p.getCurrent() === page.value">
|
||||||
</pagination-template>
|
<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>
|
||||||
</div><!--/.col-->
|
</div>
|
||||||
|
|
|
@ -3,16 +3,12 @@ import { ApiService } from '../providers/api-service';
|
||||||
import { AgmCoreModule } from '@agm/core';
|
import { AgmCoreModule } from '@agm/core';
|
||||||
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
|
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
|
||||||
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
|
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
|
||||||
|
import { PaginationInstance } from 'ngx-pagination';
|
||||||
interface SuppliersComponent {
|
|
||||||
name : string;
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
templateUrl: 'suppliers.component.html',
|
templateUrl: 'suppliers.component.html',
|
||||||
})
|
})
|
||||||
export class SuppliersComponent implements OnInit, AfterViewInit {
|
export class SuppliersComponent implements OnInit, AfterViewInit {
|
||||||
@Input() public recurList: Array<RecurSupplierData>;
|
|
||||||
@Output() public onClick = new EventEmitter();
|
@Output() public onClick = new EventEmitter();
|
||||||
@Input() public categories: any;
|
@Input() public categories: any;
|
||||||
|
|
||||||
|
@ -44,9 +40,11 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
|
||||||
this.api.externalSuppliers(logPage, this.sortBy, this.sortDir).subscribe(
|
this.api.externalSuppliers(logPage, this.sortBy, this.sortDir).subscribe(
|
||||||
result => {
|
result => {
|
||||||
this.supplierList = result.suppliers;
|
this.supplierList = result.suppliers;
|
||||||
|
if (this.supplierList) {
|
||||||
|
this.supplierListAvailable = true;
|
||||||
|
}
|
||||||
this.paginateConfig.totalItems = result.page_no;
|
this.paginateConfig.totalItems = result.page_no;
|
||||||
this.paginateConfig.currentPage = logPage;
|
this.paginateConfig.currentPage = logPage;
|
||||||
this.noTransactionList = false;
|
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
console.log('Retrieval Error');
|
console.log('Retrieval Error');
|
||||||
|
@ -59,7 +57,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
|
||||||
sortName() { this.sortByColumn('name'); }
|
sortName() { this.sortByColumn('name'); }
|
||||||
sortPostcode() { this.sortByColumn('postcode'); }
|
sortPostcode() { this.sortByColumn('postcode'); }
|
||||||
sortSpend() { this.sortByColumn('spend'); }
|
sortSpend() { this.sortByColumn('spend'); }
|
||||||
|
|
||||||
sortByColumn(name) {
|
sortByColumn(name) {
|
||||||
this.sortBy = name;
|
this.sortBy = name;
|
||||||
this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
|
this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||||
interface SupplierData {
|
interface SupplierData {
|
||||||
name: string;
|
name: string;
|
||||||
postcode: string;
|
postcode: string;
|
||||||
spend: number = 0;
|
spend: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
|
Reference in a new issue