Skip to content

Commit

Permalink
Removed accidental call to apex
Browse files Browse the repository at this point in the history 
Added labels for the pagination controls
Added ability to show / disable the pagination controls on the filterAndResults screen
Default the pagination controls to the first page
Disable all buttons when the controls are not properly initialised
  • Loading branch information
@rob-baillie-ortoo
rob-baillie-ortoo committed Jan 12, 2022
1 parent 6d965e5 commit 6772f4f
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 17 deletions.
49 changes: 49 additions & 0 deletions framework/default/ortoo-core/default/labels/ortoo-core-CustomLabels.labels-meta.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,4 +140,53 @@
<shortDescription>The title that is used on search buttons.</shortDescription>
<value>Apply Filters</value>
</labels>
<labels>
<fullName>ortoo_core_first_page</fullName>
<language>en_US</language>
<protected>false</protected>
<shortDescription>The label to use on the 'First Page' button of the pagination controls.</shortDescription>
<value>First Page</value>
</labels>
<labels>
<fullName>ortoo_core_previous_page</fullName>
<language>en_US</language>
<protected>false</protected>
<shortDescription>The label to use on the 'Previous Page' button of the pagination controls.</shortDescription>
<value>Previous</value>
</labels>
<labels>
<fullName>ortoo_core_next_page</fullName>
<language>en_US</language>
<protected>false</protected>
<shortDescription>The label to use on the 'Next Page' button of the pagination controls.</shortDescription>
<value>Next</value>
</labels>
<labels>
<fullName>ortoo_core_last_page</fullName>
<language>en_US</language>
<protected>false</protected>
<shortDescription>The label to use on the 'Last Page' button of the pagination controls.</shortDescription>
<value>Last Page</value>
</labels>
<labels>
<fullName>ortoo_core_total_records</fullName>
<language>en_US</language>
<protected>false</protected>
<shortDescription>The label that is used with a 'Total Records' count.</shortDescription>
<value>Total Records</value>
</labels>
<labels>
<fullName>ortoo_core_page_size</fullName>
<language>en_US</language>
<protected>false</protected>
<shortDescription>The label that is used with a 'Page Size' count.</shortDescription>
<value>Page Size</value>
</labels>
<labels>
<fullName>ortoo_core_page_number_description</fullName>
<language>en_US</language>
<protected>false</protected>
<shortDescription>Describes the page no. of a total. {0} - Current Page, {1} - Total Pages.</shortDescription>
<value>Page {0} of {1}</value>
</labels>
</CustomLabels>
2 changes: 2 additions & 0 deletions framework/default/ortoo-core/default/lwc/filterAndResults/filterAndResults.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@

<lightning-layout-item>
<c-pagination-controls
if:true={showPaginationControls}
ortoo-elem-id-prefix={pageSelectorTopId}
number-of-records={numberOfRecords}
records-per-page={recordsPerPage}
Expand All @@ -69,6 +70,7 @@

<lightning-layout-item>
<c-pagination-controls
if:true={showPaginationControls}
ortoo-elem-id-prefix={pageSelectorTopId}
number-of-records={numberOfRecords}
records-per-page={recordsPerPage}
Expand Down
1 change: 1 addition & 0 deletions framework/default/ortoo-core/default/lwc/filterAndResults/filterAndResults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default class FilterAndResults extends LightningElement {
@api numberOfRecords;
@api recordsPerPage;
@api currentPage;
@api showPaginationControls;

connectedCallback() {
configureElementIdGenerator( this );
Expand Down
41 changes: 24 additions & 17 deletions framework/default/ortoo-core/default/lwc/paginationControls/paginationControls.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
import { LightningElement, api, wire } from 'lwc';
import configureElementIdGenerator from 'c/elementIdGenerator';

import pageSizeOptions from '@salesforce/apex/UsersComponentController.pageSizeOptions';

//import XXX_LABEL from '@salesforce/label/c.ortoo_core_xxxx';

const FIRST_LABEL = 'First Page'; // labels, as per above
const PREVIOUS_LABEL = 'Previous';
const NEXT_LABEL = 'Next';
const LAST_LABEL = 'Last Page';
const TOTAL_RECORDS_LABEL = 'Total records';
const PAGE_DESCRIPTION = 'Page {0} of {1}';
const PAGE_SIZE_LABEL = 'Page Size';
import FIRST_LABEL from '@salesforce/label/c.ortoo_core_first_page';
import PREVIOUS_LABEL from '@salesforce/label/c.ortoo_core_previous_page';
import NEXT_LABEL from '@salesforce/label/c.ortoo_core_next_page';
import LAST_LABEL from '@salesforce/label/c.ortoo_core_last_page';
import TOTAL_RECORDS_LABEL from '@salesforce/label/c.ortoo_core_total_records';
import PAGE_SIZE_LABEL from '@salesforce/label/c.ortoo_core_page_size';
import PAGE_DESCRIPTION from '@salesforce/label/c.ortoo_core_page_number_description';

export default class PaginationControls extends LightningElement {

// TODO: errors on trying to navigate if these are not set
@api numberOfRecords;
@api recordsPerPage;
@api currentPage;
@api currentPage = 1;

labels = {
first: FIRST_LABEL,
Expand All @@ -38,7 +35,13 @@ export default class PaginationControls extends LightningElement {
pageSizeId: 'pagesize',
}

@wire(pageSizeOptions, {}) pageSizeOptions;
// Could potentially be loaded from the DB, but I'm not sure why you need to
pageSizeOptions = [
{ label: '20', value: 20 },
{ label: '50', value: 50 },
{ label: '100', value: 100 },
{ label: '200', value: 200 },
];

connectedCallback() {
configureElementIdGenerator( this );
Expand All @@ -62,20 +65,24 @@ export default class PaginationControls extends LightningElement {
return this.currentPage >= this.numberOfPages;
}

get initialised() {
return this.numberOfRecords && this.recordsPerPage && this.currentPage;
}

get disableFirstButton() {
return this.onFirstPage;
return this.initialised && this.onFirstPage;
}

get disablePreviousButton() {
return this.onFirstPage;
return this.initialised && this.onFirstPage;
}

get disableNextButton() {
return this.onLastPage;
return this.initialised && this.onLastPage;
}

get disableLastButton() {
return this.onLastPage;
return this.initialised && this.onLastPage;
}

handleFirstClick( event ) {
Expand Down

0 comments on commit 6772f4f

Please sign in to comment.