From 66b7531e13a5d17de1c3df23070d77dbf99c4219 Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Thu, 18 Apr 2024 10:33:43 +0530 Subject: [PATCH 1/2] Improved: the logic for fixing infinite scroll(#289) --- src/views/Completed.vue | 21 +++++++++++++++++--- src/views/InProgress.vue | 21 +++++++++++++++++--- src/views/OpenOrders.vue | 21 +++++++++++++++++--- src/views/TransferOrders.vue | 37 ++++++++++++++++++++++++++---------- 4 files changed, 81 insertions(+), 19 deletions(-) diff --git a/src/views/Completed.vue b/src/views/Completed.vue index d64ed0c7..9154912a 100644 --- a/src/views/Completed.vue +++ b/src/views/Completed.vue @@ -16,7 +16,7 @@ - +
@@ -156,7 +156,7 @@
- + @@ -254,7 +254,8 @@ export default defineComponent({ return { shipmentMethods: [] as Array, carrierPartyIds: [] as Array, - searchedQuery: '' + searchedQuery: '', + isScrollingEnabled: false } }, computed: { @@ -277,6 +278,9 @@ export default defineComponent({ this.store.dispatch('order/clearCompletedOrders') emitter.off('updateOrderQuery', this.updateOrderQuery) }, + async ionViewWillEnter() { + this.isScrollingEnabled = false; + }, methods: { getErrorMessage() { return this.searchedQuery === '' ? translate("doesn't have any completed orders right now.", { facilityName: this.currentFacility.facilityName }) : translate( "No results found for . Try searching In Progress or Open tab instead. If you still can't find what you're looking for, try switching stores.", { searchedQuery: this.searchedQuery, lineBreak: '
' }) @@ -294,6 +298,17 @@ export default defineComponent({ getCompletedOrders() { return JSON.parse(JSON.stringify(this.completedOrders.list)).slice(0, (this.completedOrders.query.viewIndex + 1) * (process.env.VUE_APP_VIEW_SIZE as any)); }, + 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 loadMoreCompletedOrders(event: any) { const completedOrdersQuery = JSON.parse(JSON.stringify(this.completedOrders.query)) completedOrdersQuery.viewIndex++; diff --git a/src/views/InProgress.vue b/src/views/InProgress.vue index 279cccde..05db26ef 100644 --- a/src/views/InProgress.vue +++ b/src/views/InProgress.vue @@ -20,7 +20,7 @@ - +
@@ -218,7 +218,7 @@
- + @@ -389,9 +389,13 @@ export default defineComponent({ orderBoxes: [] as any, searchedQuery: '', addingBoxForOrderIds: [] as any, - selectedPicklistId: '' + selectedPicklistId: '', + isScrollingEnabled: false } }, + async ionViewWillEnter() { + this.isScrollingEnabled = false; + }, methods: { async openRejectReasonPopover(ev: Event, kitProducts: any, order: any) { const reportIssuePopover = await popoverController.create({ @@ -956,6 +960,17 @@ export default defineComponent({ getPicklist(id: string) { return this.picklists.find((picklist: any) => picklist.id === id) }, + 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 loadMoreInProgressOrders(event: any) { const inProgressOrdersQuery = JSON.parse(JSON.stringify(this.inProgressOrders.query)) inProgressOrdersQuery.viewIndex++; diff --git a/src/views/OpenOrders.vue b/src/views/OpenOrders.vue index 1fa93957..e3470cde 100644 --- a/src/views/OpenOrders.vue +++ b/src/views/OpenOrders.vue @@ -19,7 +19,7 @@ - +
@@ -123,7 +123,7 @@
--> - +
@@ -226,9 +226,13 @@ export default defineComponent({ data () { return { shipmentMethods: [] as Array, - searchedQuery: '' + searchedQuery: '', + isScrollingEnabled: false } }, + async ionViewWillEnter() { + this.isScrollingEnabled = false; + }, methods: { getErrorMessage() { return this.searchedQuery === '' ? translate("doesn't have any outstanding orders right now.", { facilityName: this.currentFacility.facilityName }) : translate( "No results found for . Try searching In Progress or Completed tab instead. If you still can't find what you're looking for, try switching stores.", { searchedQuery: this.searchedQuery, lineBreak: '
' }) @@ -236,6 +240,17 @@ export default defineComponent({ getOpenOrders() { return JSON.parse(JSON.stringify(this.openOrders.list)).slice(0, (this.openOrders.query.viewIndex + 1) * (process.env.VUE_APP_VIEW_SIZE as any)); }, + 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 loadMoreOpenOrders(event: any) { const openOrdersQuery = JSON.parse(JSON.stringify(this.openOrders.query)) openOrdersQuery.viewIndex++; diff --git a/src/views/TransferOrders.vue b/src/views/TransferOrders.vue index e58b06b9..7979f91f 100644 --- a/src/views/TransferOrders.vue +++ b/src/views/TransferOrders.vue @@ -15,7 +15,7 @@ - +
@@ -29,14 +29,16 @@ {{ order.orderStatusDesc }} - - + +
@@ -105,13 +107,28 @@ export default defineComponent({ data () { return { shipmentMethods: [] as Array, - searchedQuery: '' + searchedQuery: '', + isScrollingEnabled: false } }, + async ionViewWillEnter() { + this.isScrollingEnabled = false; + }, methods: { getErrorMessage() { return this.searchedQuery === '' ? translate("doesn't have any transfer orders right now.", { facilityName: this.currentFacility.facilityName }) : translate( "No results found for .", { searchedQuery: this.searchedQuery }) }, + 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 loadMoreTransferOrders(event: any) { const transferOrdersQuery = JSON.parse(JSON.stringify(this.transferOrders.query)) transferOrdersQuery.viewIndex = this.transferOrders.list?.length / (process.env.VUE_APP_VIEW_SIZE as any); From be66cc2cb98cfbe894f1b79b0ed12e691c646465 Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Mon, 22 Apr 2024 10:03:53 +0530 Subject: [PATCH 2/2] Fixed: the case where loading label is not displayed when infinite scrolling(#289) --- src/views/Completed.vue | 6 +++++- src/views/InProgress.vue | 6 +++++- src/views/OpenOrders.vue | 6 +++++- src/views/TransferOrders.vue | 6 +++++- 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/views/Completed.vue b/src/views/Completed.vue index 9154912a..606f6206 100644 --- a/src/views/Completed.vue +++ b/src/views/Completed.vue @@ -156,7 +156,7 @@
- + @@ -310,6 +310,10 @@ export default defineComponent({ } }, async loadMoreCompletedOrders(event: any) { + // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed + if (!(this.isScrollingEnabled && this.isCompletedOrderScrollable())) { + await event.target.complete(); + } const completedOrdersQuery = JSON.parse(JSON.stringify(this.completedOrders.query)) completedOrdersQuery.viewIndex++; await this.store.dispatch('order/updateCompletedOrderIndex', { ...completedOrdersQuery }) diff --git a/src/views/InProgress.vue b/src/views/InProgress.vue index 05db26ef..bb3d99eb 100644 --- a/src/views/InProgress.vue +++ b/src/views/InProgress.vue @@ -218,7 +218,7 @@ - + @@ -972,6 +972,10 @@ export default defineComponent({ } }, async loadMoreInProgressOrders(event: any) { + // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed + if (!(this.isScrollingEnabled && this.isInProgressOrderScrollable())) { + await event.target.complete(); + } const inProgressOrdersQuery = JSON.parse(JSON.stringify(this.inProgressOrders.query)) inProgressOrdersQuery.viewIndex++; await this.store.dispatch('order/updateInProgressIndex', { ...inProgressOrdersQuery }) diff --git a/src/views/OpenOrders.vue b/src/views/OpenOrders.vue index e3470cde..0ca12b58 100644 --- a/src/views/OpenOrders.vue +++ b/src/views/OpenOrders.vue @@ -123,7 +123,7 @@ --> - + @@ -252,6 +252,10 @@ export default defineComponent({ } }, async loadMoreOpenOrders(event: any) { + // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed + if (!(this.isScrollingEnabled && this.isOpenOrdersScrollable())) { + await event.target.complete(); + } const openOrdersQuery = JSON.parse(JSON.stringify(this.openOrders.query)) openOrdersQuery.viewIndex++; await this.store.dispatch('order/updateOpenOrderIndex', { ...openOrdersQuery }) diff --git a/src/views/TransferOrders.vue b/src/views/TransferOrders.vue index 7979f91f..d39307b8 100644 --- a/src/views/TransferOrders.vue +++ b/src/views/TransferOrders.vue @@ -38,7 +38,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. --> - + @@ -130,6 +130,10 @@ export default defineComponent({ } }, async loadMoreTransferOrders(event: any) { + // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed + if (!(this.isScrollingEnabled && this.isTransferOrdersScrollable())) { + await event.target.complete(); + } const transferOrdersQuery = JSON.parse(JSON.stringify(this.transferOrders.query)) transferOrdersQuery.viewIndex = this.transferOrders.list?.length / (process.env.VUE_APP_VIEW_SIZE as any); await this.store.dispatch('transferorder/updateTransferOrderQuery', { ...transferOrdersQuery })