buli
2023-04-21 43fdbff49764d55c7b3a19a1d6e7d8aeb62072ef
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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;
    }
}