| 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; | 
|     } | 
| } |