fix: pagination reset after filters apply in category (#1364)

## Description ## References ### Jira-link: https://virtocommerce.atlassian.net/browse/VCST-1926 ### Artifact URL: https://vc3prerelease.blob.core.windows.net/packages/vc-theme-b2b-vue-2.7.0-pr-1364-77dd-77ddaea7.zip
VirtoCommerce · Oct 10, 2024 · 2377142 · 2377142
1 parent e87450f
commit 2377142
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 9 deletions.
diff --git a/client-app/shared/catalog/components/category.vue b/client-app/shared/catalog/components/category.vue
@@ -124,6 +124,7 @@
               :items="PRODUCT_SORTING_LIST"
               class="w-0 grow lg:w-48"
               size="sm"
+              @change="resetCurrentPage"
             />
           </div>
 
@@ -141,6 +142,7 @@
             :loading="fetchingProducts"
             :saved-branches="localStorageBranches"
             @open-branches-modal="openBranchesModal"
+            @apply-in-stock="resetCurrentPage"
           />
         </div>
 
@@ -157,6 +159,7 @@
           @reset-facet-filters="resetFacetFilters"
           @apply-filters="applyFilters"
           @show-popup-sidebar="showFiltersSidebar"
+          @apply-sort="resetCurrentPage"
         />
 
         <!-- Filters chips -->
@@ -199,7 +202,7 @@
           :has-selected-facets="hasSelectedFacets"
           :items-per-page="itemsPerPage"
           :pages-count="pagesCount"
-          :page-number="productsPageNumber"
+          :page-number="currentPage"
           :products="products"
           :saved-view-mode="savedViewMode"
           :search-params="searchParams"
@@ -320,6 +323,10 @@ const {
   resetFilterKeyword,
   showFiltersSidebar,
   updateProductsFilters,
+
+  currentPage,
+  updateCurrentPage,
+  resetCurrentPage,
 } = useProducts({
   filtersDisplayOrder,
   useQueryParams: true,
@@ -330,7 +337,6 @@ const ga = useGoogleAnalytics();
 
 const savedViewMode = useLocalStorage<ViewModeType>("viewMode", "grid");
 
-const productsPageNumber = ref(1);
 const itemsPerPage = ref(DEFAULT_PAGE_SIZE);
 
 const stickyMobileHeaderAnchor = shallowRef<HTMLElement | null>(null);
@@ -402,19 +408,19 @@ async function changeProductsPage(pageNumber: number): Promise<void> {
     return;
   }
 
-  productsPageNumber.value = pageNumber;
+  updateCurrentPage(pageNumber);
 
   await fetchMoreProducts({
     ...searchParams.value,
-    page: productsPageNumber.value,
+    page: currentPage.value,
   });
 
   /**
    * Send Google Analytics event for products on next page.
    */
   ga.viewItemList(products.value, {
-    item_list_id: `${currentCategory.value?.slug}_page_${productsPageNumber.value}`,
-    item_list_name: `${currentCategory.value?.name} (page ${productsPageNumber.value})`,
+    item_list_id: `${currentCategory.value?.slug}_page_${currentPage.value}`,
+    item_list_name: `${currentCategory.value?.name} (page ${currentPage.value})`,
   });
 }
 

diff --git a/client-app/shared/catalog/components/category/category-controls.vue b/client-app/shared/catalog/components/category/category-controls.vue
@@ -35,7 +35,12 @@
   <div class="order-2 ms-4 flex items-center xl:ms-8">
     <VcTooltip placement="bottom-start" width="12rem">
       <template #trigger>
-        <VcCheckbox v-model="savedInStock" :disabled="loading">
+        <VcCheckbox
+          v-model="savedInStock"
+          :disabled="loading"
+          @click="$emit('applyInStock')"
+          @keyup.enter="$emit('applyInStock')"
+        >
           <span
             class="whitespace-nowrap text-sm"
             :class="{
@@ -60,6 +65,7 @@ defineProps<IProps>();
 
 interface IEmits {
   (event: "openBranchesModal", value: boolean): void;
+  (event: "applyInStock"): void;
 }
 
 const savedInStock = defineModel<boolean>();

diff --git a/client-app/shared/catalog/components/category/category-horizontal-filters.vue b/client-app/shared/catalog/components/category/category-horizontal-filters.vue
@@ -53,7 +53,12 @@
               :value="sortingOption.id"
               :label="sortingOption.name"
               class="category-horizontal-filters__sorting-input"
-              @change="close"
+              @change="
+                () => {
+                  emit('applySort');
+                  close();
+                }
+              "
               @click.stop
             />
           </VcMenuItem>
@@ -70,14 +75,15 @@ import { QueryParamName } from "@/core/enums";
 import type { ProductsFiltersType } from "@/shared/catalog";
 import ProductsFilters from "@/shared/catalog/components/products-filters.vue";
 
-defineEmits<IEmits>();
+const emit = defineEmits<IEmits>();
 withDefaults(defineProps<IProps>(), {
   hideAllFilters: false,
   hideSorting: false,
 });
 
 interface IEmits {
   (event: "applyFilters", filters: ProductsFiltersType): void;
+  (event: "applySort"): void;
   (event: "showPopupSidebar"): void;
 }
 

diff --git a/client-app/shared/catalog/composables/useProducts.ts b/client-app/shared/catalog/composables/useProducts.ts
@@ -145,6 +145,8 @@ export function useProducts(
     if (!isEqual(localStorageBranches.value, newFilters.branches)) {
       localStorageBranches.value = newFilters.branches;
     }
+
+    resetCurrentPage();
   }
 
   function removeFacetFilter(payload: Pick<FacetItemType, "paramName"> & Pick<FacetValueItemType, "value">): void {
@@ -156,6 +158,7 @@ export function useProducts(
       facetsQueryParam.value = options?.useQueryParams ? getFilterExpressionFromFacets(facets) : "";
 
       triggerRef(facets);
+      resetCurrentPage();
     }
   }
 
@@ -167,6 +170,7 @@ export function useProducts(
     );
 
     triggerRef(facets);
+    resetCurrentPage();
   }
 
   function resetFilterKeyword(): void {
@@ -199,6 +203,7 @@ export function useProducts(
           } else {
             localStorageBranches.value = branches;
           }
+          resetFacetFilters();
         },
       },
     });
@@ -318,6 +323,16 @@ export function useProducts(
     });
   });
 
+  const currentPage = ref(1);
+
+  function updateCurrentPage(page: number) {
+    currentPage.value = page;
+  }
+
+  function resetCurrentPage() {
+    updateCurrentPage(1);
+  }
+
   return {
     facets,
     facetsQueryParam,
@@ -338,6 +353,10 @@ export function useProducts(
     sortQueryParam,
     totalProductsCount: readonly(totalProductsCount),
 
+    currentPage: readonly(currentPage),
+    resetCurrentPage,
+    updateCurrentPage,
+
     applyFilters,
     getFacets,
     fetchMoreProducts,