From 9364eb6099e1c9cb56723674ebf8efce0263c619 Mon Sep 17 00:00:00 2001 From: Benjamin Klein Date: Fri, 24 May 2019 14:54:56 +0200 Subject: [PATCH] #2810 * provide changelog message * Move bottomVisible to core helper * remove bottomVisible from Category * Add new Module order-history --- CHANGELOG.md | 1 + core/helpers/index.ts | 8 +++ core/pages/Category.js | 11 +--- src/modules/index.ts | 4 +- .../order-history/components/UserOrders.ts | 50 +++++++++++++++++++ src/modules/order-history/index.ts | 6 +++ .../core/blocks/MyAccount/MyOrders.vue | 4 +- 7 files changed, 72 insertions(+), 12 deletions(-) create mode 100644 src/modules/order-history/components/UserOrders.ts create mode 100644 src/modules/order-history/index.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 269582e923..4f457bf949 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/core/helpers/index.ts b/core/helpers/index.ts index e1e5203b67..c508d9b562 100644 --- a/core/helpers/index.ts +++ b/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 +} diff --git a/core/pages/Category.js b/core/pages/Category.js index 0bd6fc18f8..a938545721 100644 --- a/core/pages/Category.js +++ b/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 diff --git a/src/modules/index.ts b/src/modules/index.ts index 3c76298a52..395dd1d3a9 100644 --- a/src/modules/index.ts +++ b/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 ] diff --git a/src/modules/order-history/components/UserOrders.ts b/src/modules/order-history/components/UserOrders.ts new file mode 100644 index 0000000000..e8b611e35c --- /dev/null +++ b/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); + } + } +} diff --git a/src/modules/order-history/index.ts b/src/modules/order-history/index.ts new file mode 100644 index 0000000000..d7c3bd3774 --- /dev/null +++ b/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 +}) diff --git a/src/themes/default/components/core/blocks/MyAccount/MyOrders.vue b/src/themes/default/components/core/blocks/MyAccount/MyOrders.vue index 608a448876..85cab4ff6b 100644 --- a/src/themes/default/components/core/blocks/MyAccount/MyOrders.vue +++ b/src/themes/default/components/core/blocks/MyAccount/MyOrders.vue @@ -55,10 +55,10 @@