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";
|
|
|
//table css
|
import { loadStyle } from "lightning/platformResourceLoader";
|
import WrappedHeaderTable from "@salesforce/resourceUrl/lexdatatable";
|
|
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();
|
}
|
stylesLoaded = false;
|
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;
|
}
|
|
renderedCallback(){
|
if (!this.stylesLoaded) {
|
Promise.all([loadStyle(this, WrappedHeaderTable)])
|
.then(() => {
|
console.log("Custom styles loaded");
|
this.stylesLoaded = true;
|
})
|
.catch((error) => {
|
console.error("Error loading custom styles");
|
});
|
}
|
}
|
}
|
