made fixes to imports and supplier list

This commit is contained in:
Finn 2019-07-12 20:18:28 +01:00
parent 8202cdfdb1
commit 75ba91379d
No known key found for this signature in database
GPG key ID: 7455B4B17685B598
4 changed files with 62 additions and 53 deletions

View file

@ -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';

View file

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

View file

@ -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';

View file

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