vuestorefront#2810

* provide changelog message
* Move bottomVisible to core helper
* remove bottomVisible from Category
* Add new Module order-history

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)
+- Added new Module order-history this provides the pagination via lazy laod @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/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

src/modules/index.ts

@@ -24,6 +24,7 @@ import { PaymentCashOnDelivery } from './payment-cash-on-delivery';
 import { RawOutputExample } from './raw-output-example'
 import { Magento2CMS } from './magento-2-cms'
 import { InstantCheckout } from './instant-checkout'
+import { OrderHistory } from './order-history'
 
 // import { Example } from './module-template'
 
@@ -76,6 +77,7 @@ export const registerModules: VueStorefrontModule[] = [
   RawOutputExample,
   AmpRenderer,
   InstantCheckout,
-  Url
+  Url,
+  OrderHistory
   // Example
 ]

src/modules/order-history/components/UserOrders.ts

@@ -0,0 +1,50 @@
+import { isServer, bottomVisible } from '@vue-storefront/core/helpers'
+import MyOrder from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrder'
+
+export default {
+  name: 'UserOrders',
+  mixins: [MyOrder],
+  data () {
+    return {
+      pagination: {
+        perPage: 10,
+        current: 0,
+        enabled: false
+      },
+      bottom: false,
+      lazyLoadOrdersOnscroll: true
+    }
+  },
+  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
+    }
+  },
+  methods: {
+    paginate (array, page_size, page_number) {
+      return array.slice(0, (page_number + 1) * page_size);
+    }
+  }
+}

src/modules/order-history/index.ts

@@ -0,0 +1,6 @@
+import { createModule } from '@vue-storefront/core/lib/module'
+
+const KEY = 'order-history'
+export const OrderHistory = createModule({
+  key: KEY
+})

src/themes/default/components/core/blocks/MyAccount/MyOrders.vue

@@ -55,10 +55,10 @@
 </template>
 
 <script>
-import MyOrders from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrders'
+import UserOrder from 'src/modules/order-history/components/UserOrders'
 
 export default {
-  mixins: [MyOrders]
+  mixins: [UserOrder]
 }
 </script>