From 88289742137ed6712b2ff9179f5b4a066263ca8d Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Tue, 16 Apr 2024 12:23:46 +0530 Subject: [PATCH 1/4] Fixed: infinite scroll issue when used with searchbar(#289) --- src/views/catalog.vue | 2 +- src/views/orders.vue | 2 +- src/views/products.vue | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/catalog.vue b/src/views/catalog.vue index efefca6c..564fc9cf 100644 --- a/src/views/catalog.vue +++ b/src/views/catalog.vue @@ -77,7 +77,7 @@ --> - + diff --git a/src/views/orders.vue b/src/views/orders.vue index 30bdaaf8..0236dfd0 100644 --- a/src/views/orders.vue +++ b/src/views/orders.vue @@ -142,7 +142,7 @@ - + diff --git a/src/views/products.vue b/src/views/products.vue index 22636b5c..b726c5a3 100644 --- a/src/views/products.vue +++ b/src/views/products.vue @@ -38,7 +38,7 @@ {{ product.doclist.numFound }} {{ $t("pieces preordered") }} - + From 64ceb831eabb0dccda8c9c3657a139c921ca284d Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Tue, 16 Apr 2024 15:00:59 +0530 Subject: [PATCH 2/4] Improved: added comment to the ion key change(#289) --- src/views/orders.vue | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/views/orders.vue b/src/views/orders.vue index 0236dfd0..53f8ad1e 100644 --- a/src/views/orders.vue +++ b/src/views/orders.vue @@ -141,7 +141,13 @@ - + From 897b2fd0466efecfe93697a1fae233005bb3c7b8 Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Wed, 17 Apr 2024 18:25:02 +0530 Subject: [PATCH 3/4] Improved: the logic for fixing infinite scroll(#289) --- src/views/catalog.vue | 25 +++++++++++++++++++------ src/views/orders.vue | 31 ++++++++++++++++++++++++------- src/views/products.vue | 27 +++++++++++++++++++++------ 3 files changed, 64 insertions(+), 19 deletions(-) diff --git a/src/views/catalog.vue b/src/views/catalog.vue index 564fc9cf..c450d899 100644 --- a/src/views/catalog.vue +++ b/src/views/catalog.vue @@ -9,7 +9,7 @@ - +
@@ -77,7 +77,7 @@ -->
- +
@@ -157,7 +157,8 @@ export default defineComponent({ value: 'REMOVED' }*/], queryString: '', - preordBckordComputationJob: {} as any + preordBckordComputationJob: {} as any, + isScrollingEnabled: false } }, computed: { @@ -169,6 +170,7 @@ export default defineComponent({ }) }, async ionViewWillEnter() { + this.isScrollingEnabled = false; await this.getCatalogProducts() await this.preparePreordBckordComputationJob() }, @@ -200,13 +202,24 @@ export default defineComponent({ await this.store.dispatch("product/findCatalogProducts", payload); }, + enableScrolling() { + const parentElement = (this as any).$refs.contentRef.$el + const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']") + let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this as any).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight + const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height + if(distanceFromInfinite < 0) { + this.isScrollingEnabled = false; + } else { + this.isScrollingEnabled = true; + } + }, async loadMoreProducts(event: any){ this.getCatalogProducts( undefined, Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString() - ).then(() => { - event.target.complete(); - }) + ).then(async () => { + await event.target.complete(); + }); }, async applyFilter(value: string) { if(value !== this.prodCatalogCategoryTypeId) { diff --git a/src/views/orders.vue b/src/views/orders.vue index 53f8ad1e..195019a0 100644 --- a/src/views/orders.vue +++ b/src/views/orders.vue @@ -18,7 +18,7 @@ - +
@@ -143,12 +143,14 @@
- +
@@ -264,6 +266,7 @@ export default defineComponent({ data() { return { cusotmerLoyaltyOptions : JSON.parse(process.env?.VUE_APP_CUST_LOYALTY_OPTIONS), + isScrollingEnabled: false } }, computed: { @@ -284,17 +287,31 @@ export default defineComponent({ query: 'order/getQuery', }), }, + async ionViewWillEnter() { + this.isScrollingEnabled = false; + }, methods: { updateQuery() { this.query.viewSize = parseInt(process.env.VUE_APP_VIEW_SIZE); this.query.viewIndex = 0; this.store.dispatch("order/updateQuery", { query: this.query}); }, + enableScrolling() { + const parentElement = (this as any).$refs.contentRef.$el + const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']") + let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this as any).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight + const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height + if(distanceFromInfinite < 0) { + this.isScrollingEnabled = false; + } else { + this.isScrollingEnabled = true; + } + }, async loadMoreOrders(event: any) { this.query.viewIndex = Math.ceil(this.orders.length / process.env.VUE_APP_VIEW_SIZE); - this.store.dispatch("order/updateQuery", { query: this.query}).then(() => { - event.target.complete(); - }) + this.store.dispatch("order/updateQuery", { query: this.query}).then(async () => { + await event.target.complete(); + }); }, async releaseItems() { emitter.emit("presentLoader") diff --git a/src/views/products.vue b/src/views/products.vue index b726c5a3..b4feccd8 100644 --- a/src/views/products.vue +++ b/src/views/products.vue @@ -14,7 +14,7 @@ - + @@ -38,7 +38,7 @@ {{ product.doclist.numFound }} {{ $t("pieces preordered") }} - + @@ -101,7 +101,8 @@ export default defineComponent({ orderedAfter: '', orderedBefore: '', selectedItems: [] as any, - hasQuery: false + hasQuery: false, + isScrollingEnabled: false } }, computed: { @@ -114,14 +115,28 @@ export default defineComponent({ currentEComStore: 'user/getCurrentEComStore', }) }, + async ionViewWillEnter() { + this.isScrollingEnabled = false; + }, methods: { + enableScrolling() { + const parentElement = (this as any).$refs.contentRef.$el + const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']") + let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this as any).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight + const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height + if(distanceFromInfinite < 0) { + this.isScrollingEnabled = false; + } else { + this.isScrollingEnabled = true; + } + }, async loadMoreProducts(event: any) { this.getProducts( undefined, Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString() - ).then(() => { - event.target.complete(); - }) + ).then(async () => { + await event.target.complete(); + }); }, async getProducts( vSize?: any, vIndex?: any) { const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE; From 9cf1ba14520cc4dc66b9d5afe3d69115397c9782 Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Fri, 19 Apr 2024 16:40:37 +0530 Subject: [PATCH 4/4] Fixed: the case where loading label is not displayed when infinite scrolling(#289) --- src/views/catalog.vue | 6 +++++- src/views/orders.vue | 6 +++++- src/views/products.vue | 6 +++++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/views/catalog.vue b/src/views/catalog.vue index c450d899..68fb027f 100644 --- a/src/views/catalog.vue +++ b/src/views/catalog.vue @@ -77,7 +77,7 @@ --> - + @@ -214,6 +214,10 @@ export default defineComponent({ } }, async loadMoreProducts(event: any){ + // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed + if(!(this.isScrollingEnabled && this.isCatalogScrollable)) { + await event.target.complete(); + } this.getCatalogProducts( undefined, Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString() diff --git a/src/views/orders.vue b/src/views/orders.vue index 195019a0..f85d2297 100644 --- a/src/views/orders.vue +++ b/src/views/orders.vue @@ -150,7 +150,7 @@ If we do not define an extra variable and just use v-show to check for `isScrollable` then when coming back to the page infinite-scroll is called programatically. We have added an ionScroll event on ionContent to check whether the infiniteScroll can be enabled or not by toggling the value of isScrollingEnabled whenever the height < 0. --> - + @@ -308,6 +308,10 @@ export default defineComponent({ } }, async loadMoreOrders(event: any) { + // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed + if(!(this.isScrollingEnabled && this.isScrolleable)) { + await event.target.complete(); + } this.query.viewIndex = Math.ceil(this.orders.length / process.env.VUE_APP_VIEW_SIZE); this.store.dispatch("order/updateQuery", { query: this.query}).then(async () => { await event.target.complete(); diff --git a/src/views/products.vue b/src/views/products.vue index b4feccd8..1fcab287 100644 --- a/src/views/products.vue +++ b/src/views/products.vue @@ -38,7 +38,7 @@ {{ product.doclist.numFound }} {{ $t("pieces preordered") }} - + @@ -131,6 +131,10 @@ export default defineComponent({ } }, async loadMoreProducts(event: any) { + // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed + if(!(this.isScrollingEnabled && this.isScrolleable)) { + await event.target.complete(); + } this.getProducts( undefined, Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString()