Improved communication from the filter and pagination controls

Will now describe the offset and window from the filter, being a more generic response
OrtooApps · Jan 13, 2022 · 49e8aa9 · 49e8aa9
1 parent 8aa25c8
commit 49e8aa9
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 28 deletions.
diff --git a/framework/default/ortoo-core/default/lwc/filterAndResults/filterAndResults.html b/framework/default/ortoo-core/default/lwc/filterAndResults/filterAndResults.html
@@ -50,9 +50,9 @@
                             if:true={showPaginationControls}
                             ortoo-elem-id-prefix={pageSelectorTopId}
                             number-of-records={numberOfRecords}
-                            records-per-page={recordsPerPage}
-                            current-page={currentPage}
-                            onnavigatetopage={handleNavigateToPage}
+                            records-per-page={recordsWindowSize}
+                            offset={offset}
+                            onnavigate={handleNavigate}
                         ></c-pagination-controls>
                     </lightning-layout-item>
 
@@ -73,9 +73,9 @@
                             if:true={showPaginationControls}
                             ortoo-elem-id-prefix={pageSelectorTopId}
                             number-of-records={numberOfRecords}
-                            records-per-page={recordsPerPage}
-                            current-page={currentPage}
-                            onnavigatetopage={handleNavigateToPage}
+                            records-per-page={recordsWindowSize}
+                            offset={offset}
+                            onnavigate={handleNavigate}
                         ></c-pagination-controls>
                     </lightning-layout-item>
 

diff --git a/framework/default/ortoo-core/default/lwc/filterAndResults/filterAndResults.js b/framework/default/ortoo-core/default/lwc/filterAndResults/filterAndResults.js
@@ -24,9 +24,10 @@ export default class FilterAndResults extends LightningElement {
     @api title;
     @api loading;
     @api numberOfRecords;
-    @api recordsPerPage;
-    @api currentPage;
+    @api recordsWindowSize;
     @api showPaginationControls;
+    @api offset;
+    @api searchType; // defines the type of search to load / save against
 
     connectedCallback() {
         configureElementIdGenerator( this );
@@ -37,14 +38,8 @@ export default class FilterAndResults extends LightningElement {
         this.dispatchEvent( newEvent );
     }
 
-    handleNavigateToPage( event ) {
-        const detail = {
-            pageToNavigateTo: event.detail.pageToNavigateTo,
-            recordsPerPage  : event.detail.recordsPerPage
-        };
-        console.log( detail );
-
-        const newEvent = new CustomEvent( 'navigatetopage', { detail: detail } );
+    handleNavigate( event ) {
+        const newEvent = new CustomEvent( 'navigate', { detail: event.detail } );
         this.dispatchEvent( newEvent );
     }
 }
diff --git a/framework/default/ortoo-core/default/lwc/paginationControls/paginationControls.js b/framework/default/ortoo-core/default/lwc/paginationControls/paginationControls.js
@@ -11,10 +11,35 @@ import PAGE_DESCRIPTION from '@salesforce/label/c.ortoo_core_page_number_descrip
 
 export default class PaginationControls extends LightningElement {
 
-    // TODO: errors on trying to navigate if these are not set
     @api numberOfRecords;
-    @api recordsPerPage;
-    @api currentPage = 1;
+
+    _recordsPerPage = 0;
+    @api get recordsPerPage() {
+        return this._recordsPerPage;
+    }
+    set recordsPerPage( value ) {
+        this._recordsPerPage = value;
+        this.currentPage = Math.min( this.currentPage, this.numberOfPages );
+    }
+
+    _currentPage = 1;
+    @api get currentPage() {
+        return this._currentPage;
+    }
+    set currentPage( value ) {
+        this._currentPage = ( value < 1 || isNaN( value ) ) ? 1 : value;
+        this.dispatchNavigateEvent();
+    }
+
+    @api
+    get offset() {
+        return ( this.currentPage - 1 ) * this.recordsPerPage;
+    }
+    set offset( value ) {
+        if ( ! isNaN( value ) && this.recordsPerPage ) {
+            this.currentPage = Math.floor( value / this.recordsPerPage ) + 1;
+        }
+    };
 
     labels = {
         first: FIRST_LABEL,
@@ -86,32 +111,33 @@ export default class PaginationControls extends LightningElement {
     }
 
     handleFirstClick( event ) {
-        this.dispatchNavigateToPageEvent( 0 );
+        this.currentPage = 0;
     }
 
     handlePreviousClick( event ) {
-        this.dispatchNavigateToPageEvent( this.currentPage - 1 );
+        this.currentPage--;
     }
 
     handleNextClick( event ) {
-        this.dispatchNavigateToPageEvent( this.currentPage + 1 );
+        this.currentPage++;
     }
 
     handleLastClick( event ) {
-        this.dispatchNavigateToPageEvent( this.numberOfPages );
+        this.currentPage = this.numberOfPages;
     }
 
     handleChangePageSize( event ) {
         this.recordsPerPage = event.detail.value;
-        this.dispatchNavigateToPageEvent( Math.min( this.currentPage, this.numberOfPages ) );
     }
 
-    dispatchNavigateToPageEvent( pageToNavigateTo ) {
+    dispatchNavigateEvent( pageToNavigateTo ) {
+
         const detail = {
-                            pageToNavigateTo: pageToNavigateTo,
-                            recordsPerPage  : this.recordsPerPage
+                            pageToNavigateTo: this.currentPage,
+                            offset: this.offset,
+                            window: this.recordsPerPage
                         };
-        const newEvent = new CustomEvent( 'navigatetopage', { detail: detail } );
+        const newEvent = new CustomEvent( 'navigate', { detail: detail } );
         this.dispatchEvent( newEvent );
     }
 }