import { LightningElement, api, track } from 'lwc';
|
import getAccountsPaginated from '@salesforce/apex/PaginatedListControllerLwc.getAccountsPaginated';
|
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
|
import { reduceErrors } from 'c/ldsUtils';
|
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
|
import ACCOUNT_TYPE_FIELD from '@salesforce/schema/Account.Type';
|
import ACCOUNT_PHONE_FIELD from '@salesforce/schema/Account.Type';
|
import ACCOUNT_EMPLOYEES_FIELD from '@salesforce/schema/Account.NumberOfEmployees';
|
|
const COLUMNS = [
|
{
|
label: 'Account Name',
|
fieldName: ACCOUNT_NAME_FIELD.fieldApiName,
|
type: 'text',
|
sortable: 'true'
|
},
|
{ label: 'Type', fieldName: ACCOUNT_TYPE_FIELD.fieldApiName, type: 'text' },
|
{
|
label: 'Phone',
|
fieldName: ACCOUNT_PHONE_FIELD.fieldApiName,
|
type: 'phone'
|
},
|
{
|
label: 'Employees',
|
fieldName: ACCOUNT_EMPLOYEES_FIELD.fieldApiName,
|
type: 'Number'
|
}
|
];
|
|
export default class PaginatedList extends LightningElement {
|
columns = COLUMNS;
|
@track sortBy = 'Name';
|
@track sortDirection = 'asc';
|
@track pageSize = 10;
|
error;
|
records;
|
currentPageToken = 0;
|
nextPageToken = this.pageSize;
|
@track loader = false;
|
@track pageNumber = 1;
|
@track paginationVisibility = false;
|
@track totalPages = 1;
|
@api pageSizeOptions = [10, 25, 50, 75, 100];
|
connectedCallback() {
|
this.getAccounts();
|
}
|
|
getAccounts() {
|
this.loader = true;
|
getAccountsPaginated({
|
pageSize: this.pageSize,
|
pageToken: this.currentPageToken,
|
sortField: this.sortBy,
|
sortOrder: this.sortDirection
|
})
|
.then((result) => {
|
this.loader = false;
|
if (result) {
|
this.records = result.records;
|
this.nextPageToken = result.nextPageToken;
|
this.totalRecords = result.totalRecords;
|
this.recordStart = result.recordStart;
|
this.recordEnd = result.recordEnd;
|
this.totalPages = Math.ceil(
|
result.totalRecords / this.pageSize
|
);
|
this.paginationVisibility =
|
this.totalPages > 1 ? true : false;
|
}
|
})
|
.catch((error) => {
|
this.loader = false;
|
this.error = error;
|
this.currentPageToken = 0;
|
const evt = new ShowToastEvent({
|
title: 'Error',
|
message: reduceErrors(error).join(', '),
|
variant: 'error'
|
});
|
this.dispatchEvent(evt);
|
});
|
}
|
doSorting(event) {
|
console.log('Sort');
|
this.sortBy = event.detail.fieldName;
|
this.sortDirection = event.detail.sortDirection;
|
this.currentPageToken = 0;
|
this.getAccounts();
|
}
|
|
handlePrevious() {
|
this.currentPageToken =
|
Number(this.currentPageToken) - Number(this.pageSize);
|
this.getAccounts();
|
}
|
|
handleNext() {
|
this.currentPageToken =
|
Number(this.currentPageToken) + Number(this.pageSize);
|
this.getAccounts();
|
}
|
handleFirst() {
|
this.currentPageToken = 0;
|
this.getAccounts();
|
}
|
|
handleLast() {
|
this.currentPageToken =
|
this.totalPages > 1 ? (this.totalPages - 1) * this.pageSize : 0;
|
this.getAccounts();
|
}
|
|
handlePageschange(event) {
|
console.log(event.detail);
|
this.pageSize = event.detail;
|
this.currentPageToken = 0;
|
this.getAccounts();
|
}
|
get previousButtonDisabled() {
|
return this.currentPageToken === 0;
|
}
|
|
get nextButtonDisabled() {
|
return this.nextPageToken === undefined;
|
}
|
}
|