Feature/2810 order pagination

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added back to top functionality - @vishal-7037 (#2866)
 - Button for filters acceptance added with new styles for clear filters button - @965750 (#2811)
 - Added "Clear wishlist" button - @aniamusial (#2806)
+- Implementation of Order pagination like the categories @hackbard (#2810)
 
 ### Fixed
 - Products removed from the cart are no longer add back on the conectivity return - @pkarw (#2898)

core/helpers/index.ts

@@ -171,3 +171,11 @@ export const processURLAddress = (url: string = '') => {
   if (url.startsWith('/')) return `${config.api.url}${url}`
   return url
 }
+
+export function bottomVisible () {
+  const scrollY = window.scrollY
+  const visible = window.innerHeight
+  const pageHeight = document.documentElement.scrollHeight
+  const bottomOfPage = visible + scrollY >= pageHeight
+  return bottomOfPage || pageHeight < visible
+}

core/modules/order/components/UserOrders.ts

@@ -1,30 +1,69 @@
+import {isServer, bottomVisible} from '@vue-storefront/core/helpers'
 
 /**
  * Component responsible for displaying user orders. Requires User module.
  */
 export const UserOrders = {
-  name: 'UserOrders',
-  computed: {
-    ordersHistory () {
-      return this.$store.state.user.orders_history.items
+    name: 'UserOrders',
+    data() {
+        return {
+            pagination: {
+                perPage: 25,
+                current: 0,
+                enabled: false
+            },
+            bottom: false,
+            lazyLoadOrdersOnscroll: true
+        }
     },
-    isHistoryEmpty () {
-      return this.$store.state.user.orders_history.items.length < 1
-    }
-  },
-  methods: {
-    remakeOrder (products) {
-      products.forEach(item => {
-        this.$store.dispatch('product/single', { options: { sku: item.sku }, setCurrentProduct: false, selectDefaultVariant: false }).then((product) => {
-          product.qty = item.qty_ordered
-          this.$store.dispatch('cart/addItem', { productToAdd: product }).then(() => { })
-        })
-      })
+    watch: {
+        bottom(bottom) {
+            if (bottom) {
+                ++this.pagination.current
+            }
+        }
+    },
+    beforeMount() {
+        if (!isServer && this.lazyLoadOrdersOnscroll) {
+            window.addEventListener('scroll', () => {
+                this.bottom = bottomVisible()
+            }, {passive: true})
+        }
+    },
+    computed: {
+        ordersHistory() {
+            let items = []
+            items = this.$store.state.user.orders_history.items
+            if (!isServer && this.lazyLoadOrdersOnscroll) {
+                items = this.paginate(items, this.pagination.perPage, this.pagination.current)
+            }
+            return items
+        },
+        isHistoryEmpty() {
+            return this.$store.state.user.orders_history.items.length < 1
+        }
     },
-    skipGrouped (items) {
-      return items.filter((item) => {
-        return !item.parent_item_id
-      })
+    methods: {
+        paginate(array, page_size, page_number) {
+            return array.slice(0, (page_number + 1) * page_size);
+        },
+        remakeOrder(products) {
+            products.forEach(item => {
+                this.$store.dispatch('product/single', {
+                    options: {sku: item.sku},
+                    setCurrentProduct: false,
+                    selectDefaultVariant: false
+                }).then((product) => {
+                    product.qty = item.qty_ordered
+                    this.$store.dispatch('cart/addItem', {productToAdd: product}).then(() => {
+                    })
+                })
+            })
+        },
+        skipGrouped(items) {
+            return items.filter((item) => {
+                return !item.parent_item_id
+            })
+        },
     }
-  }
 }

core/pages/Category.js

@@ -5,7 +5,7 @@ import config from 'config'
 import i18n from '@vue-storefront/i18n'
 import store from '@vue-storefront/core/store'
 import EventBus from '@vue-storefront/core/compatibility/plugins/event-bus'
-import { baseFilterProductsQuery, buildFilterProductsQuery, isServer } from '@vue-storefront/core/helpers'
+import { baseFilterProductsQuery, buildFilterProductsQuery, isServer, bottomVisible } from '@vue-storefront/core/helpers'
 import { htmlDecode } from '@vue-storefront/core/filters/html-decode'
 import { currentStoreView, localizedRoute } from '@vue-storefront/core/lib/multistore'
 import Composite from '@vue-storefront/core/mixins/composite'
@@ -138,7 +138,7 @@ export default {
     }
     if (!isServer && this.lazyLoadProductsOnscroll) {
       window.addEventListener('scroll', () => {
-        this.bottom = this.bottomVisible()
+        this.bottom = bottomVisible()
       }, {passive: true})
     }
   },
@@ -156,13 +156,6 @@ export default {
   },
   methods: {
     ...mapActions('category', ['mergeSearchOptions']),
-    bottomVisible () {
-      const scrollY = window.scrollY
-      const visible = window.innerHeight
-      const pageHeight = document.documentElement.scrollHeight
-      const bottomOfPage = visible + scrollY >= pageHeight
-      return bottomOfPage || pageHeight < visible
-    },
     pullMoreProducts () {
       if (typeof navigator !== 'undefined' && !navigator.onLine) return
       let current = this.getCurrentCategoryProductQuery.current + this.getCurrentCategoryProductQuery.perPage