diff --git a/src/views/Completed.vue b/src/views/Completed.vue index d64ed0c7..606f6206 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,7 +298,22 @@ 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) { + // 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 279cccde..bb3d99eb 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,7 +960,22 @@ 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) { + // 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 1fa93957..0ca12b58 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,7 +240,22 @@ 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) { + // 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 e58b06b9..d39307b8 100644 --- a/src/views/TransferOrders.vue +++ b/src/views/TransferOrders.vue @@ -15,7 +15,7 @@ - +
@@ -29,14 +29,16 @@ {{ order.orderStatusDesc }} - - + +
@@ -105,14 +107,33 @@ 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) { + // 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 })