feat: added Pagination for Wishlist

.changeset/light-cows-protect.md

@@ -0,0 +1,6 @@
+---
+"vue-demo-store": minor
+"@shopware-pwa/composables-next": patch
+---
+
+I added a paginatin for order history page.

.changeset/tough-queens-swim.md

@@ -0,0 +1,6 @@
+---
+"vue-demo-store": minor
+"@shopware-pwa/composables-next": patch
+---
+
+I have added a pagination for wishlist page. I made a changes to variable name to get the proper context of it.

packages/composables/src/useCustomerOrders.ts

@@ -1,5 +1,5 @@
-import { ref } from "vue";
-import type { Ref } from "vue";
+import { ref, computed } from "vue";
+import type { Ref, ComputedRef } from "vue";
 import { useShopwareContext } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -13,11 +13,22 @@ export type UseCustomerOrdersReturn = {
    *
    * In order to change a page with additional parameters please use `loadOrders` method.
    */
-  changeCurrentPage(pageNumber: number | string): Promise<void>;
+  changeCurrentPage(
+    pageNumber: number | string,
+    limit: number | string,
+  ): Promise<void>;
   /**
    * Fetches the orders list and assigns the result to the `orders` property
    */
   loadOrders(parameters?: Schemas["Criteria"]): Promise<void>;
+  /**
+   * Current page number
+   */
+  getCurrentPage: ComputedRef<number>;
+  /**
+   * total pages count
+   */
+  getTotalPagesCount: ComputedRef<number>;
 };
 
 /**
@@ -30,6 +41,12 @@ export function useCustomerOrders(): UseCustomerOrdersReturn {
 
   const orders: Ref<Schemas["Order"][]> = ref([]);
 
+  const currentPage = ref<number>(1);
+
+  const totalOrderItemsCount: Ref<number> = ref(0);
+
+  const limit = ref<number>(15);
+
   const loadOrders = async (
     parameters: Schemas["Criteria"] = {},
   ): Promise<void> => {
@@ -38,14 +55,28 @@ export function useCustomerOrders(): UseCustomerOrdersReturn {
       parameters,
     );
     orders.value = fetchedOrders.orders.elements;
+    totalOrderItemsCount.value = fetchedOrders.orders.total!;
   };
 
-  const changeCurrentPage = async (pageNumber: number | string) =>
-    await loadOrders({ page: +pageNumber });
+  const changeCurrentPage = async (
+    pageNumber: number | string,
+    currentLimit: string | number,
+  ) => {
+    limit.value = +currentLimit;
+    await loadOrders({ page: +pageNumber, limit: +currentLimit });
+  };
+
+  const getCurrentPage = computed(() => currentPage.value);
+
+  const getTotalPagesCount = computed(() =>
+    Math.ceil(totalOrderItemsCount.value / +limit.value),
+  );
 
   return {
     orders,
     changeCurrentPage,
     loadOrders,
+    getCurrentPage,
+    getTotalPagesCount,
   };
 }

packages/composables/src/useSyncWishlist.test.ts

@@ -19,7 +19,7 @@
         vm.getWishlistProducts();
         vm.removeFromWishlistSync("some-id");
         // Mocked value
-        expect(vm.count).toBe(vm.count);
+        expect(vm.totalWishlistItemsCount).toBe(vm.totalWishlistItemsCount);
       });
     });
 
@@ -38,7 +38,7 @@
         const { vm } = useSetup(() => useSyncWishlist());
 
         vm.getWishlistProducts();
-        expect(vm.count).toBe(0);
+        expect(vm.totalWishlistItemsCount).toBe(0);
         expect(vm.items.length).toBe(0);
       });
     });

packages/composables/src/useSyncWishlist.ts

@@ -2,12 +2,15 @@ import { ref, computed } from "vue";
 import type { Ref, ComputedRef } from "vue";
 import { useShopwareContext } from "#imports";
 import { ApiClientError } from "@shopware/api-client";
+import type { RequestParameters } from "#shopware";
 
 export type UseSyncWishlistReturn = {
   /**
    * Get products from wishlist
    */
-  getWishlistProducts(): void;
+  getWishlistProducts(
+    defaultPaginationCriteria?: RequestParameters<"searchPage">,
+  ): void;
   /**
    * Merge products with wishlist already existing in API wishlist
    */
@@ -27,10 +30,11 @@ export type UseSyncWishlistReturn = {
   /**
    * Wishlist items count
    */
-  count: ComputedRef<number>;
+  totalWishlistItemsCount: Ref<number>;
 };
 
 const _wishlistItems: Ref<string[]> = ref([]);
+const totalWishlistItemsCount: Ref<number> = ref(15);
 
 /**
  * Composable to manage wishlist via API
@@ -39,7 +43,6 @@ const _wishlistItems: Ref<string[]> = ref([]);
  */
 export function useSyncWishlist(): UseSyncWishlistReturn {
   const { apiClient } = useShopwareContext();
-
   async function addToWishlistSync(id: string) {
     await apiClient.invoke(
       "addProductOnWishlist post /customer/wishlist/add/{productId}",
@@ -62,15 +65,18 @@ export function useSyncWishlist(): UseSyncWishlistReturn {
    * Fetch wishlist items
    * Only for logged-in users
    */
-  async function getWishlistProducts() {
+  async function getWishlistProducts(
+    defaultSearchCriteria?: RequestParameters<"searchPage">,
+  ) {
     try {
       const response = await apiClient.invoke(
         "readCustomerWishlist post /customer/wishlist",
-        {},
+        { ...defaultSearchCriteria },
       );
       _wishlistItems.value = [
         ...response.products.elements.map((element) => element.id),
       ];
+      totalWishlistItemsCount.value = response.products.total!;
     } catch (e) {
       if (e instanceof ApiClientError) {
         // If 404 ignore printing error and reset wishlist
@@ -90,14 +96,13 @@ export function useSyncWishlist(): UseSyncWishlistReturn {
   }
 
   const items = computed(() => _wishlistItems.value);
-  const count = computed(() => items.value.length);
 
   return {
     getWishlistProducts,
     addToWishlistSync,
     removeFromWishlistSync,
     mergeWishlistProducts,
     items,
-    count,
+    totalWishlistItemsCount,
   };
 }

packages/composables/src/useWishlist.test.ts

@@ -17,7 +17,7 @@
     const { vm } = useSetup(() => useWishlist());
 
     expect(vm.items.length).toBe(1);
-    expect(vm.count).toBe(1);
+    expect(vm.totalWishlistItemsCount).toBe(1);
     await vm.clearWishlist();
     await vm.getWishlistProducts();
     await vm.mergeWishlistProducts();
@@ -29,7 +29,7 @@
     const { vm } = useSetup(() => useWishlist());
 
     expect(vm.items.length).toBe(1);
-    expect(vm.count).toBe(1);
+    expect(vm.totalWishlistItemsCount).toBe(1);
     await vm.clearWishlist();
     await vm.getWishlistProducts();
     await vm.mergeWishlistProducts();

packages/composables/src/useWishlist.ts

@@ -1,9 +1,10 @@
 /**
  * Template composable
  */
-import { computed } from "vue";
-import type { ComputedRef } from "vue";
+import { computed, ref } from "vue";
+import type { ComputedRef, Ref } from "vue";
 import { useUser, useLocalWishlist, useSyncWishlist } from "#imports";
+import type { RequestParameters } from "#shopware";
 
 export type UseWishlistReturn = {
   /**
@@ -23,9 +24,26 @@ export type UseWishlistReturn = {
    */
   items: ComputedRef<string[]>;
   /**
-   * Wishlist items count
+   * Changes the current page number
+   * @param pageNumber - page number to change to
+   * @returns
    */
-  count: ComputedRef<number>;
+  changeCurrentPage(
+    page: number,
+    query?: RequestParameters<"searchPage">,
+  ): Promise<void>;
+  /**
+   * Current page number
+   */
+  getCurrentPage: ComputedRef<number>;
+  /**
+   * total pages count
+   */
+  getTotalPagesCount: ComputedRef<number>;
+  /**
+   * total wishlist items count
+   */
+  totalWishlistItemsCount: Ref<number>;
 };
 
 /**
@@ -38,7 +56,6 @@ export function useWishlist(): UseWishlistReturn {
   const canSyncWishlist = computed(
     () => isLoggedIn.value && !isGuestSession.value,
   );
-
   const {
     getWishlistProducts: getWishlistProductsLocal,
     items: itemsLocal,
@@ -50,16 +67,39 @@ export function useWishlist(): UseWishlistReturn {
     items: itemsSync,
     mergeWishlistProducts: mergeWishlistProductsSync,
     removeFromWishlistSync,
+    totalWishlistItemsCount,
   } = useSyncWishlist();
 
+  const currentPage = ref<number>(1);
+  const limit = ref<number>(15);
+
   const getWishlistProducts = async () => {
     if (canSyncWishlist.value) {
-      await getWishlistProductsSync();
+      await getWishlistProductsSync({
+        page: currentPage.value,
+        limit: limit.value,
+        p: currentPage.value,
+      } as unknown as RequestParameters<"searchPage">);
     } else {
       await getWishlistProductsLocal();
     }
   };
 
+  const changeCurrentPage = async (
+    page: number,
+    query: RequestParameters<"searchPage">,
+  ) => {
+    currentPage.value = page;
+    if (query.limit) {
+      limit.value = +query.limit;
+    }
+    await getWishlistProductsSync({ ...query, page });
+  };
+
+  const getTotalPagesCount = computed(() =>
+    Math.ceil(totalWishlistItemsCount.value / +limit.value),
+  );
+
   const clearWishlist = async () => {
     if (canSyncWishlist.value) {
       await Promise.all(items.value.map((id) => removeFromWishlistSync(id)));
@@ -74,19 +114,23 @@ export function useWishlist(): UseWishlistReturn {
       await mergeWishlistProductsSync(itemsLocal.value);
       clearWishlist();
     }
-    getWishlistProductsSync();
+    await getWishlistProductsSync();
   };
 
   const items = computed(() =>
     canSyncWishlist.value ? itemsSync.value : itemsLocal.value,
   );
-  const count = computed(() => items.value.length);
+
+  const getCurrentPage = computed(() => currentPage.value);
 
   return {
     mergeWishlistProducts,
     getWishlistProducts,
     clearWishlist,
     items,
-    count,
+    changeCurrentPage,
+    getCurrentPage,
+    getTotalPagesCount,
+    totalWishlistItemsCount,
   };
 }

templates/vue-demo-store/components/layout/LayoutHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { count } = useCart();
-const { count: wishlistCount } = useWishlist();
+const { totalWishlistItemsCount: wishlistCount } = useWishlist();
 const localePath = useLocalePath();
 const { formatLink } = useInternationalization(localePath);
 
@@ -51,7 +51,7 @@ const sidebarController = useModal();
                 class="w-7 h-7 i-carbon-favorite text-secondary-600 hover:text-primary hover:animate-count-infinite hover:animate-heart-beat"
               />
               <span
-                v-if="wishlistCount > 0"
+                v-if="wishlistCount"
                 class="text-3 font-sm text-white absolute bg-red-600 rounded-full min-w-5 min-h-5 top-0 right-0 leading-5"
               >
                 {{ wishlistCount }}