Merge pull request #2956 from Hackbard/feature/2810-order-history-module

#2810

CHANGELOG.md

@@ -20,7 +20,8 @@ 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)
-- orderNumber on ThankYouPage - @Flyingmana (#2743)
+- Added new Module order-history this provides the pagination via lazy laod - @hackbard (#2810) 
+- OrderNumber on ThankYouPage - @Flyingmana (#2743)
 
 ### Fixed
 - Products removed from the cart are no longer add back on the conectivity return - @pkarw (#2898)

core/helpers/index.ts

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

core/mixins/onBottomScroll.js

@@ -0,0 +1,19 @@
+import { isBottomVisible } from '@vue-storefront/core/helpers'
+
+/**
+ * By implementing this mixin add "onBottomScroll" mthod in component.
+ * It will be invoked when view reach the bottom.
+ */
+export default {
+  mounted () {
+    const scrollHandler = () => {
+      if (isBottomVisible()) {
+        this.onBottomScroll()
+      }
+    }
+    document.addEventListener('scroll', scrollHandler)
+    this.$once('hook:destroyed', () => {
+      document.removeEventListener('scroll', scrollHandler)
+    })
+  }
+}

core/modules/order/components/UserOrders.ts

@@ -1,15 +1,17 @@
+import { mapGetters } from 'vuex';
 
 /**
  * Component responsible for displaying user orders. Requires User module.
  */
 export const UserOrders = {
   name: 'UserOrders',
   computed: {
+    ...mapGetters('user', ['getOrdersHistory']),
     ordersHistory () {
-      return this.$store.state.user.orders_history.items
+      return this.getOrdersHistory
     },
     isHistoryEmpty () {
-      return this.$store.state.user.orders_history.items.length < 1
+      return this.getOrdersHistory.length < 1
     }
   },
   methods: {

core/modules/user/store/getters.ts

@@ -9,6 +9,9 @@ const getters: GetterTree<UserState, RootState> = {
   isLocalDataLoaded: state => state.local_data_loaded,
   getUserToken (state) {
     return state.token
+  },
+  getOrdersHistory (state) {
+    return state.orders_history ? state.orders_history.items : []
   }
 }
 

core/pages/Category.js

@@ -11,18 +11,18 @@ import { currentStoreView, localizedRoute } from '@vue-storefront/core/lib/multi
 import Composite from '@vue-storefront/core/mixins/composite'
 import { Logger } from '@vue-storefront/core/lib/logger'
 import { mapGetters, mapActions } from 'vuex'
+import onBottomScroll from '@vue-storefront/core/mixins/onBottomScroll'
 
 export default {
   name: 'Category',
-  mixins: [Composite],
+  mixins: [Composite, onBottomScroll],
   data () {
     return {
       pagination: {
         perPage: 50,
         current: 0,
         enabled: false
       },
-      bottom: false,
       lazyLoadProductsOnscroll: true
     }
   },
@@ -59,13 +59,6 @@ export default {
       return this.getCategoryBreadcrumbs
     }
   },
-  watch: {
-    bottom (bottom) {
-      if (bottom) {
-        this.pullMoreProducts()
-      }
-    }
-  },
   preAsyncData ({ store, route }) {
     Logger.log('preAsyncData query setup')()
     store.dispatch('category/setSearchOptions', {
@@ -136,11 +129,6 @@ export default {
       this.$bus.$on('user-after-loggedin', this.onUserPricesRefreshed)
       this.$bus.$on('user-after-logout', this.onUserPricesRefreshed)
     }
-    if (!isServer && this.lazyLoadProductsOnscroll) {
-      window.addEventListener('scroll', () => {
-        this.bottom = this.bottomVisible()
-      }, {passive: true})
-    }
   },
   beforeDestroy () {
     this.$bus.$off('list-change-sort', this.onSortOrderChanged)
@@ -156,12 +144,8 @@ 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
+    onBottomScroll () {
+      this.pullMoreProducts()
     },
     pullMoreProducts () {
       if (typeof navigator !== 'undefined' && !navigator.onLine) return

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,32 @@
+import MyOrders from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrders'
+import { mapGetters } from 'vuex';
+import onBottomScroll from '@vue-storefront/core/mixins/onBottomScroll'
+
+export default {
+  name: 'UserOrders',
+  mixins: [MyOrders, onBottomScroll],
+  data () {
+    return {
+      pagination: {
+        perPage: 10,
+        current: 1,
+        enabled: false
+      },
+      lazyLoadOrdersOnScroll: true
+    }
+  },
+  computed: {
+    ordersHistory () {
+      let items = this.getOrdersHistory
+      if (this.lazyLoadOrdersOnScroll) {
+        items = items.slice(0, (this.pagination.perPage + 1) *  this.pagination.current)
+      }
+      return items
+    }
+  },
+  methods: {
+    onBottomScroll () {
+      ++this.pagination.current
+    }
+  }
+}

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>