buli
2023-07-14 5b5c1e16deaa3a9d6d0ed1ffca390655ed103df7
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
121
122
123
124
125
126
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;
    }
}