Merge pull request #2 from edunzer/feature-AddPagination

edunzer · web-flow · commit c7cb274c1ea0 · 2024-08-23T11:48:35.000-07:00
Feature add pagination
diff --git a/force-app/main/default/classes/workCardController.cls b/force-app/main/default/classes/workCardController.cls
@@ -5,8 +5,9 @@ public with sharing class workCardController {
         return [
             SELECT Id, Name, Action_Type__c, Status__c, Due_Date__c, Description__c, User__c, Work__c
             FROM Work_Item_Action__c
-            WHERE 	Work__c = :workId
+            WHERE Work__c = :workId
             AND User__c = :currentUserId
+            ORDER BY Name DESC
         ];
     }
 }
diff --git a/force-app/main/default/classes/workListViewController.cls b/force-app/main/default/classes/workListViewController.cls
@@ -1,9 +1,9 @@
 public with sharing class workListViewController {
     @AuraEnabled(cacheable=true)
-    public static List<agf__ADM_Work__c> getWorkRecords() {
+    public static Map<String, Object> getWorkRecords(Integer pageSize, Integer pageNumber) {
         // Get the current user's Id
         Id currentUserId = UserInfo.getUserId();
-        System.debug('Current User ID: ' + currentUserId);
+        Integer offset = (pageNumber - 1) * pageSize;
 
         // Query for Work Item Team records related to the current user
         List<agf__ADM_Work__c> workRecords = [
@@ -14,13 +14,17 @@ public with sharing class workListViewController {
                 FROM Work_Item_Team__c
                 WHERE User__c = :currentUserId
             )
+            LIMIT :pageSize OFFSET :offset
         ];
 
-        System.debug('Work Records Found: ' + workRecords.size());
-        for (agf__ADM_Work__c workRecord : workRecords) {
-            System.debug('Work Record: ' + workRecord);
-        }
-        
-        return workRecords;
+        // Query for the total number of records for pagination
+        Integer totalRecords = [SELECT COUNT() FROM agf__ADM_Work__c WHERE Id IN (SELECT Work__c FROM Work_Item_Team__c WHERE User__c = :currentUserId)];
+
+        // Prepare the result map
+        Map<String, Object> result = new Map<String, Object>();
+        result.put('workRecords', workRecords);
+        result.put('totalRecords', totalRecords);
+
+        return result;
     }
 }
diff --git a/force-app/main/default/lwc/workCardComponent/workCardComponent.css b/force-app/main/default/lwc/workCardComponent/workCardComponent.css
@@ -1,3 +1,8 @@
 .slds-p-horizontal_small {
     font-size: 0.9rem; /* Adjust text size if needed */
 }
+
+/* Add padding between the card and the pagination buttons */
+.pagination-container {
+    margin-top: 20px;
+}
diff --git a/force-app/main/default/lwc/workCardComponent/workCardComponent.html b/force-app/main/default/lwc/workCardComponent/workCardComponent.html
@@ -1,15 +1,13 @@
 <template>
-    <!-- Header for the component -->
     <lightning-card title="Work Action Items">
         <div class="slds-m-around_medium">
-            <!-- Display message or work items based on conditions -->
             <template if:true={message}>
                 <div class="slds-text-align_center slds-m-around_medium slds-box">
                     {message}
                 </div>
             </template>
-            <template if:true={workItemActions}>
-                <template for:each={workItemActions} for:item="action">
+            <template if:true={paginatedWorkItemActions}>
+                <template for:each={paginatedWorkItemActions} for:item="action">
                     <lightning-card 
                         key={action.Id} 
                         icon-name="standard:action_list_component" 
@@ -35,6 +33,34 @@
                     </lightning-card>
                 </template>
             </template>
+            <template if:true={isPaginationVisible}>
+                <div class="pagination-container">
+                    <lightning-layout horizontal-align="space">
+                        <lightning-layout-item flexibility="auto">
+                            <lightning-button 
+                                label="Previous" 
+                                icon-name="utility:chevronleft" 
+                                onclick={handlePrevious}
+                                disabled={isPreviousDisabled}
+                            >
+                            </lightning-button>
+                        </lightning-layout-item>
+                        <lightning-layout-item flexibility="auto">
+                            Page {page} of {totalPage}
+                        </lightning-layout-item>
+                        <lightning-layout-item flexibility="auto">
+                            <lightning-button 
+                                label="Next" 
+                                icon-name="utility:chevronright" 
+                                icon-position="right"
+                                onclick={handleNext}
+                                disabled={isNextDisabled}
+                            >
+                            </lightning-button>
+                        </lightning-layout-item>
+                    </lightning-layout>
+                </div>
+            </template>
             <template if:true={error}>
                 <div class="slds-text-color_error slds-text-align_center slds-m-around_medium slds-box">
                     {error}
@@ -43,6 +69,5 @@
         </div>
     </lightning-card>
 
-    <!-- Include the workPopupComponent to ensure it's available in the DOM -->
     <c-work-popup-component></c-work-popup-component>
 </template>
diff --git a/force-app/main/default/lwc/workCardComponent/workCardComponent.js b/force-app/main/default/lwc/workCardComponent/workCardComponent.js
@@ -7,15 +7,18 @@ import WORK_ITEM_MESSAGE_CHANNEL from '@salesforce/messageChannel/WorkItemMessag
 import { refreshApex } from '@salesforce/apex';
 
 export default class WorkCardComponent extends NavigationMixin(LightningElement) {
-    @track workItemActions = []; // Track this property to ensure reactivity
+    @track workItemActions = [];
     error;
-    workRecordId; // Stores the Work record ID
-    selectedActionId; // Stores the Work Item Action record ID
+    workRecordId;
+    selectedActionId;
     isModalOpen = false;
-    message = 'Select work item to see action items'; // Default message
-
+    message = 'Select work item to see action items';
     wiredResult;
 
+    @track page = 1;
+    @track pageSize = 3;
+    @track totalPage = 1;
+
     @wire(MessageContext)
     messageContext;
 
@@ -42,27 +45,28 @@ export default class WorkCardComponent extends NavigationMixin(LightningElement)
 
     handleWorkMessage(message) {
         console.log('Message received in workCardComponent from WorkMessageChannel:', message);
-        this.workRecordId = message.recordId; // This is the Work record ID
-        this.message = undefined; // Clear any existing messages
-        this.refreshData(); // Fetch the latest work item actions
+        this.workRecordId = message.recordId;
+        this.page = 1; // Reset to first page
+        this.message = undefined;
+        this.refreshData();
     }
 
     handleWorkItemMessage(message) {
         console.log('Message received in workCardComponent from WorkItemMessageChannel:', message);
-        // Ensure the correct Work record data is refreshed
         this.refreshData();
     }
 
     @wire(getWorkItemActions, { workId: '$workRecordId' })
     wiredWorkItemActions(result) {
-        this.wiredResult = result; // Store the wired result for refreshing
+        this.wiredResult = result;
         const { data, error } = result;
         if (data) {
             if (data.length > 0) {
                 this.workItemActions = data.map(action => ({
                     ...action,
                     actionUrl: `/ideaexchange/s/work-item-action/${action.Id}/view`
                 }));
+                this.totalPage = Math.ceil(this.workItemActions.length / this.pageSize);
                 this.message = undefined;
             } else {
                 this.workItemActions = [];
@@ -78,16 +82,13 @@ export default class WorkCardComponent extends NavigationMixin(LightningElement)
     }
 
     refreshData() {
-        // Clear the existing data to force a re-render
         this.workItemActions = [];
         this.error = undefined;
 
-        // Explicitly refresh the wired data
         if (this.wiredResult) {
             refreshApex(this.wiredResult);
             console.log('Data refreshed via refreshApex.');
         } else {
-            // Fallback in case refreshApex is not applicable
             this.fetchWorkItemActions();
         }
     }
@@ -101,6 +102,7 @@ export default class WorkCardComponent extends NavigationMixin(LightningElement)
                         ...action,
                         actionUrl: `/ideaexchange/s/work-item-action/${action.Id}/view`
                     }));
+                    this.totalPage = Math.ceil(this.workItemActions.length / this.pageSize);
                     this.message = undefined;
                 } else {
                     this.workItemActions = [];
@@ -117,6 +119,36 @@ export default class WorkCardComponent extends NavigationMixin(LightningElement)
             });
     }
 
+    get paginatedWorkItemActions() {
+        const start = (this.page - 1) * this.pageSize;
+        const end = start + this.pageSize;
+        return this.workItemActions.slice(start, end);
+    }
+
+    get isPaginationVisible() {
+        return this.workItemActions.length > 4;
+    }
+
+    get isPreviousDisabled() {
+        return this.page === 1;
+    }
+
+    get isNextDisabled() {
+        return this.page === this.totalPage || this.totalPage === 0;
+    }
+
+    handlePrevious() {
+        if (this.page > 1) {
+            this.page -= 1;
+        }
+    }
+
+    handleNext() {
+        if (this.page < this.totalPage) {
+            this.page += 1;
+        }
+    }
+
     handleEditClick(event) {
         const actionRecordId = event.currentTarget.dataset.id;
         console.log('View button clicked for recordId:', actionRecordId);
diff --git a/force-app/main/default/lwc/workListViewComponent/workListViewComponent.css b/force-app/main/default/lwc/workListViewComponent/workListViewComponent.css
@@ -13,7 +13,12 @@
     padding: 0; /* Adjust padding */
 }
 
-/* Optionally, you can add some margin or padding to the datatable if needed */
+/* Add some margin or padding to the datatable */
 .lightning-datatable {
     margin-top: 10px; /* Example of adding some margin above the table */
 }
+
+/* Add padding between the datatable and the pagination buttons */
+.pagination-container {
+    margin-top: 20px;
+}
diff --git a/force-app/main/default/lwc/workListViewComponent/workListViewComponent.html b/force-app/main/default/lwc/workListViewComponent/workListViewComponent.html
@@ -9,5 +9,32 @@
             max-row-selection="1"
         >
         </lightning-datatable>
+
+        <div class="pagination-container">
+            <lightning-layout horizontal-align="space">
+                <lightning-layout-item flexibility="auto">
+                    <lightning-button 
+                        label="Previous" 
+                        icon-name="utility:chevronleft" 
+                        onclick={handlePrevious}
+                        disabled={isPreviousDisabled}
+                    >
+                    </lightning-button>
+                </lightning-layout-item>
+                <lightning-layout-item flexibility="auto">
+                    Page {page} of {totalPage}
+                </lightning-layout-item>
+                <lightning-layout-item flexibility="auto">
+                    <lightning-button 
+                        label="Next" 
+                        icon-name="utility:chevronright" 
+                        icon-position="right"
+                        onclick={handleNext}
+                        disabled={isNextDisabled}
+                    >
+                    </lightning-button>
+                </lightning-layout-item>
+            </lightning-layout>
+        </div>
     </lightning-card>
 </template>
diff --git a/force-app/main/default/lwc/workListViewComponent/workListViewComponent.js b/force-app/main/default/lwc/workListViewComponent/workListViewComponent.js
@@ -1,4 +1,4 @@
-import { LightningElement, wire } from 'lwc';
+import { LightningElement, wire, track } from 'lwc';
 import getWorkRecords from '@salesforce/apex/WorkListViewController.getWorkRecords';
 import { publish, MessageContext } from 'lightning/messageService';
 import WORK_MESSAGE_CHANNEL from '@salesforce/messageChannel/WorkMessageChannel__c';
@@ -14,16 +14,22 @@ const columns = [
 ];
 
 export default class WorkListViewComponent extends LightningElement {
-    columns = columns;
-    workRecords;
+    @track columns = columns;
+    @track workRecords;
+    @track page = 1;
+    @track pageSize = 10; // Number of records per page
+    @track totalRecords;
+    @track totalPage;
 
     @wire(MessageContext)
     messageContext;
 
-    @wire(getWorkRecords)
+    @wire(getWorkRecords, { pageSize: '$pageSize', pageNumber: '$page' })
     wiredWorkRecords({ error, data }) {
         if (data) {
-            this.workRecords = data.map(record => {
+            this.totalRecords = data.totalRecords;
+            this.updateTotalPages();
+            this.workRecords = data.workRecords.map(record => {
                 return {
                     ...record,
                     workUrl: `/ideaexchange/s/adm-work/${record.Id}`,
@@ -39,6 +45,30 @@ export default class WorkListViewComponent extends LightningElement {
         }
     }
 
+    updateTotalPages() {
+        this.totalPage = Math.ceil(this.totalRecords / this.pageSize);
+    }
+
+    get isPreviousDisabled() {
+        return this.page <= 1;
+    }
+
+    get isNextDisabled() {
+        return this.page >= this.totalPage;
+    }
+
+    handlePrevious() {
+        if (this.page > 1) {
+            this.page -= 1;
+        }
+    }
+
+    handleNext() {
+        if (this.page < this.totalPage) {
+            this.page += 1;
+        }
+    }
+
     handleRowSelection(event) {
         const selectedRows = event.detail.selectedRows;
         if (selectedRows.length > 0) {

Original file line number	Diff line number	Diff line change
`@@ -5,8 +5,9 @@ public with sharing class workCardController {`
`5`	`5`	`return [`
`6`	`6`	`SELECT Id, Name, Action_Type__c, Status__c, Due_Date__c, Description__c, User__c, Work__c`
`7`	`7`	`FROM Work_Item_Action__c`
`8`		`- WHERE Work__c = :workId`
	`8`	`+ WHERE Work__c = :workId`
`9`	`9`	`AND User__c = :currentUserId`
	`10`	`+ ORDER BY Name DESC`
`10`	`11`	`];`
`11`	`12`	`}`
`12`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,8 @@`
`1`	`1`	`.slds-p-horizontal_small {`
`2`	`2`	`font-size: 0.9rem; /* Adjust text size if needed */`
`3`	`3`	`}`
	`4`	`+`
	`5`	`+/* Add padding between the card and the pagination buttons */`
	`6`	`+.pagination-container {`
	`7`	`+ margin-top: 20px;`
	`8`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,12 @@`
`13`	`13`	`padding: 0; /* Adjust padding */`
`14`	`14`	`}`
`15`	`15`
`16`		`-/* Optionally, you can add some margin or padding to the datatable if needed */`
	`16`	`+/* Add some margin or padding to the datatable */`
`17`	`17`	`.lightning-datatable {`
`18`	`18`	`margin-top: 10px; /* Example of adding some margin above the table */`
`19`	`19`	`}`
	`20`	`+`
	`21`	`+/* Add padding between the datatable and the pagination buttons */`
	`22`	`+.pagination-container {`
	`23`	`+ margin-top: 20px;`
	`24`	`+}`