feat(component): new builder paginag control component (#23)

feat(component): update builder component

feat: add new paging control

Signed-off-by: tnadkarni <[email protected]>

force-app/main/default/labels/Search.labels-meta.xml

@@ -140,13 +140,6 @@
         <protected>false</protected>
         <shortDescription>Search_Results_allCategoriesName</shortDescription>
     </labels>
-    <labels>
-        <fullName>Search_Facets_backActionAssistiveText</fullName>
-        <value>Back to {categoryName}</value>
-        <language>en_US</language>
-        <protected>false</protected>
-        <shortDescription>Search_Facets_backActionAssistiveText</shortDescription>
-    </labels>
     <labels>
         <fullName>Search_Facets_showMore</fullName>
         <value>Show More</value>

force-app/main/default/lwc/builderSearchPagingControl/builderSearchPagingControl.html

@@ -0,0 +1,10 @@
+<template lwc:render-mode="light">
+    <c-search-paging-control
+        class="slds-p-top_x-large slds-p-bottom_medium"
+        current-page-number={currentPageNumber}
+        page-size={pageSize}
+        total-item-count={totalItemCount}
+        onpageprevious={handlePreviousPageEvent}
+        onpagenext={handleNextPageEvent}
+        onpagegoto={handleGotoPageEvent}></c-search-paging-control>
+</template>

force-app/main/default/lwc/builderSearchPagingControl/builderSearchPagingControl.js

@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2024, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ * For full license text, see the LICENSE file in the repo
+ * root or https://opensource.org/licenses/apache-2-0/
+ */
+import { LightningElement, api } from 'lwc';
+import { createSearchFiltersUpdateAction, dispatchAction } from 'commerce/actionApi';
+
+/**
+ * A builder pagination UI control for any record visualization controls.
+ */
+export default class BuilderSearchPagingControl extends LightningElement {
+    static renderMode = 'light';
+
+    /**
+     * Current page number.
+     */
+    @api
+    currentPageNumber;
+
+    /**
+     * Number of items per page.
+     */
+    @api
+    pageSize;
+
+    /**
+     * Total number of items.
+     */
+    @api
+    totalItemCount;
+
+    /**
+     * The maximum quantity of numbered pages displayed to the user.
+     * This includes numbers and range symbol.
+     */
+    @api
+    maximumPagesDisplayed;
+
+    /**
+     * Handles the `pageprevious` event.
+     * @param {CustomEvent} event A 'pageprevious' received from a paging control
+     * @private
+     */
+    handlePreviousPageEvent(event) {
+        event.stopPropagation();
+        const previousPageNumber = Number(this.currentPageNumber) - 1;
+        this.dispatchUpdateCurrentPageEvent(previousPageNumber);
+    }
+
+    /**
+     * Handles the `pagenext` event which
+     * @param {CustomEvent} event A 'pagenext' received from a paging control
+     * @private
+     */
+    handleNextPageEvent(event) {
+        event.stopPropagation();
+        const nextPageNumber = Number(this.currentPageNumber) + 1;
+        this.dispatchUpdateCurrentPageEvent(nextPageNumber);
+    }
+
+    /**
+     * Handles the `pagegoto` event which
+     * @param {CustomEvent} event A 'pagegoto' received from a paging control
+     * @private
+     */
+    handleGotoPageEvent(event) {
+        event.stopPropagation();
+        const pageNumber = event.detail.pageNumber;
+        this.dispatchUpdateCurrentPageEvent(pageNumber);
+    }
+
+    /**
+     * Dispatch filterChange action on search data provider.
+     * @param {number} newPageNumber page number
+     */
+    dispatchUpdateCurrentPageEvent(newPageNumber) {
+        dispatchAction(this, createSearchFiltersUpdateAction({ page: newPageNumber }));
+    }
+}

force-app/main/default/lwc/builderSearchPagingControl/builderSearchPagingControl.js-meta.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+    <targets>
+        <target>lightningCommunity__Page</target>
+        <target>lightningCommunity__Default</target>
+    </targets>
+    <masterLabel>Custom Search Paging Control</masterLabel>
+    <description>Displays pagination control for search page.</description>
+    <targetConfigs>
+        <targetConfig targets="lightningCommunity__Default">
+            <property name="currentPageNumber" type="String" default="{!Search.Pagination.currentPage}" />
+            <property name="pageSize" type="String" default="{!Search.Results.pageSize}" />
+            <property name="totalItemCount" type="String" default="{!Search.Results.total}" />
+            <property name="maximumPagesDisplayed" type="String" default="5" />
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>