I am trying to fetch data from a service and show them in a datatable using Covalent , the only issue I seem not to figure out how to go about it. Initially Was using twitter bootstrap with datable and it was working fine. I was chug to material design 2 using covalent, this is the only part am stuck.
Here is my component
getSpReceiptsList(){
//console.log(this.webApiPathService.getWebApiPath('get-sp-receipts').path);
this.getReceiptService.getReceipts( this.webApiPathService.getWebApiPath('get-sp-receipts').path, this.token)
.subscribe(response => {
if(response){
this.spReceiptsList = this.getReceiptService.getReceiptsList();
this.spReceiptsList.forEach((object)=>{
let paymentDate = new Date(object.paymentDate);
let year = paymentDate.getFullYear();
let month = paymentDate.getMonth()+1;
let dt = paymentDate.getDate();
let hours = paymentDate.getHours();
let minutes = paymentDate.getMinutes();
let seconds = paymentDate.getSeconds();
object.paymentDate = dt+'-' + month + '-'+year+' '+hours+':' + minutes + ':'+seconds;
});
}else{
this.snackBar.open('No receipts exist', '', {
duration: 2000,
});
}
},
errMsg => {
this.snackBar.open(errMsg, '', {
duration: 2000,
});
console.log(errMsg);
});
}
//Covalent
data: any[] = [
{ approve: 'True', serviceName: 'Hotel', userName: 'gbrigens', amount: 1000, paymentDate: '12/08/2017' },
];
columns: ITdDataTableColumn[] = [
{ name: 'approve', label: 'APPROVE', tooltip: 'Approve' },
{ name: 'serviceName', label: 'SERVICE NAME' },
{ name: 'userName', label: 'USER NAME' },
{ name: 'amount', label: 'AMOUNT' },
{ name: 'paymentDate', label: 'PAYMENT DATE' }
];
filteredData: any[] = this.data;
filteredTotal: number = this.data.length;
searchTerm: string = '';
fromRow: number = 1;
currentPage: number = 1;
pageSize: number = 5;
sortBy: string = 'approve';
selectedRows: any[] = [];
sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
sort(sortEvent: ITdDataTableSortChangeEvent): void {
this.sortBy = sortEvent.name;
this.sortOrder = sortEvent.order;
this.filter();
}
search(searchTerm: string): void {
this.searchTerm = searchTerm;
this.filter();
}
page(pagingEvent: IPageChangeEvent): void {
this.fromRow = pagingEvent.fromRow;
this.currentPage = pagingEvent.page;
this.pageSize = pagingEvent.pageSize;
this.filter();
}
filter(): void {
let newData: any[] = this.data;
let excludedColumns: string[] = this.columns
.filter((column: ITdDataTableColumn) => {
return ((column.filter === undefined && column.hidden === true) ||
(column.filter !== undefined && column.filter === false));
}).map((column: ITdDataTableColumn) => {
return column.name;
});
newData = this._dataTableService.filterData(newData, this.searchTerm, true, excludedColumns);
this.filteredTotal = newData.length;
newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
this.filteredData = newData;
}
Template to show the table
<div layout="row" layout-align="start center" class="pad-left-sm pad-right-sm">
<span *ngIf="!searchBox.searchVisible" class="push-left-sm">
<span class="md-title">Receipts</span>
</span>
<span *ngIf="!searchBox.searchVisible" class="push-left-sm">
<span *ngIf="(selectable && !selectedRows.length) || !selectable" class="md-title">Receipts</span>
<span *ngIf="selectedRows.length && selectable" class="md-body-1">0 item(s) selected</span>
</span>
<td-search-box #searchBox backIcon="arrow_back" class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
</td-search-box>
</div>
<md-divider></md-divider>
<td-data-table
#dataTable
[data]="filteredData"
[columns]="columns"
[selectable]="selectable"
[clickable]="clickable"
[multiple]="multiple"
[sortable]="true"
[sortBy]="sortBy"
[(ngModel)]="selectedRows"
[sortOrder]="sortOrder"
(sortChange)="sort($event)">
</td-data-table>
<div class="md-padding" *ngIf="!dataTable.hasData" layout="row" layout-align="center center">
<h3>No results to display.</h3>
</div>
<td-paging-bar #pagingBar [pageSize]="pageSize" [total]="filteredTotal" (change)="page($event)">
<span hide-xs>Rows per page:</span>
<md-select [style.width.px]="50" [(ngModel)]="pageSize">
<md-option *ngFor="let size of [5,10,15,20]" [value]="size">
{{size}}
</md-option>
</md-select>
{{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
</td-paging-bar>
And lastly my service
getReceipts(path: string, token: string): Observable<Boolean>{
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('x-access-token', token);
headers.append('Accept', 'application/json');
let requestoptions = new RequestOptions({
headers: headers
});
let urlPath: string = this.authUrl + path;
console.log(urlPath);
return this.http
.get(urlPath, requestoptions)
.map((res: Response) => {
let test: Array<SpReceiptModel> = res.json();
this.spReceiptList = test;
if(this.spReceiptList.length !== 0){
return true;
}else{
return false;
}
})
.catch((err) => this.handleError(err));
}
