Improved: the logic for fixing infinite scroll(hotwax#289)

R-Sourabh · Apr 18, 2024 · 66b7531 · 66b7531
1 parent 48c369a
commit 66b7531
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 19 deletions.
diff --git a/src/views/Completed.vue b/src/views/Completed.vue
@@ -16,7 +16,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="view-size-selector">
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="view-size-selector">
       <ion-searchbar class="searchbar" :value="completedOrders.query.queryString" :placeholder="translate('Search orders')" @keyup.enter="updateQueryString($event.target.value)" />
 
       <div v-if="completedOrders.total">
@@ -156,7 +156,7 @@
               </div>
             </div>
           </ion-card>
-          <ion-infinite-scroll @ionInfinite="loadMoreCompletedOrders($event)" threshold="100px" :disabled="!isCompletedOrderScrollable()" :key="completedOrders.query.queryString">
+          <ion-infinite-scroll @ionInfinite="loadMoreCompletedOrders($event)" threshold="100px" v-show="isScrollingEnabled && isCompletedOrderScrollable()" ref="infiniteScrollRef">
             <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
           </ion-infinite-scroll>
         </div>
@@ -254,7 +254,8 @@ export default defineComponent({
     return {
       shipmentMethods: [] as Array<any>,
       carrierPartyIds: [] as Array<any>,
-      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: '<br />' })
@@ -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
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="view-size-selector">
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="view-size-selector">
       <ion-searchbar class="searchbar" :placeholder="translate('Search orders')" v-model="inProgressOrders.query.queryString" @keyup.enter="updateQueryString($event.target.value)"/>
       <div v-if="inProgressOrders.total">
         <ion-radio-group v-model="selectedPicklistId" @ionChange="updateSelectedPicklist($event.detail.value)">
@@ -218,7 +218,7 @@
               </div>
             </div>
           </ion-card>
-          <ion-infinite-scroll @ionInfinite="loadMoreInProgressOrders($event)" threshold="100px" :disabled="!isInProgressOrderScrollable()" :key="inProgressOrders.query.queryString">
+          <ion-infinite-scroll @ionInfinite="loadMoreInProgressOrders($event)" threshold="100px"  v-show="isScrollingEnabled && isInProgressOrderScrollable()" ref="infiniteScrollRef">
             <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
           </ion-infinite-scroll>
         </div>
@@ -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
@@ -19,7 +19,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="view-size-selector">
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="view-size-selector">
       <ion-searchbar class="searchbar" :value="openOrders.query.queryString" :placeholder="translate('Search orders')" @keyup.enter="updateQueryString($event.target.value)"/>
       <div v-if="openOrders.total">
         <div class="filters">
@@ -123,7 +123,7 @@
             </div> -->
           </ion-card>
 
-          <ion-infinite-scroll @ionInfinite="loadMoreOpenOrders($event)" threshold="100px" :disabled="!isOpenOrdersScrollable()" :key="openOrders.query.queryString">
+          <ion-infinite-scroll @ionInfinite="loadMoreOpenOrders($event)" threshold="100px" v-show="isScrollingEnabled && isOpenOrdersScrollable()" ref="infiniteScrollRef">
             <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
           </ion-infinite-scroll>
         </div>
@@ -226,16 +226,31 @@ export default defineComponent({
   data () {
     return {
       shipmentMethods: [] as Array<any>,
-      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: '<br />' })
     },
     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
@@ -15,7 +15,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="transfer-order-filters">
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="transfer-order-filters">
       <ion-searchbar class="better-name-here" :value="transferOrders.query.queryString" @keyup.enter="updateQueryString($event.target.value)"/>
       <div v-if="transferOrders.total">
         <div class="results">
@@ -29,14 +29,16 @@
               <ion-badge slot="end">{{ order.orderStatusDesc }}</ion-badge>
             </ion-item>
           </ion-list>
-            <!--
-              When searching for a keyword, and if the user moves to the last item, then the didFire value inside infinite scroll becomes true and thus the infinite scroll does not trigger again on the same page(https://github.com/hotwax/users/issues/84).
-              In ionic v7.6.0, an issue related to infinite scroll has been fixed that when more items can be added to the DOM, but infinite scroll does not fire as the window is not completely filled with the content(https://github.com/ionic-team/ionic-framework/issues/18071).
-              The above fix in ionic 7.6.0 is resulting in the issue of infinite scroll not being called again.
-              To fix this, we have added a key with value as queryString(searched keyword), so that the infinite scroll component can be re-rendered
-              whenever the searched string is changed resulting in the correct behaviour for infinite scroll
-            -->
-          <ion-infinite-scroll @ionInfinite="loadMoreTransferOrders($event)" threshold="100px" :disabled="!isTransferOrdersScrollable()" :key="transferOrders.query.queryString">
+             <!--
+                When searching for a keyword, and if the user moves to the last item, then the didFire value inside infinite scroll becomes true and thus the infinite scroll does not trigger again on the same page(https://github.com/hotwax/users/issues/84).
+                Also if we are at the section that has been loaded by infinite-scroll and then move to the details page then the list infinite scroll does not work after coming back to the page
+                In ionic v7.6.0, an issue related to infinite scroll has been fixed that when more items can be added to the DOM, but infinite scroll does not fire as the window is not completely filled with the content(https://github.com/ionic-team/ionic-framework/issues/18071).
+                The above fix in ionic 7.6.0 is resulting in the issue of infinite scroll not being called again.
+                To fix this we have maintained another variable `isScrollingEnabled` to check whether the scrolling can be performed or not.
+                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.
+              -->
+          <ion-infinite-scroll @ionInfinite="loadMoreTransferOrders($event)" threshold="100px" v-show="isScrollingEnabled && isTransferOrdersScrollable()" ref="infiniteScrollRef">
             <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
           </ion-infinite-scroll>
         </div>
@@ -105,13 +107,28 @@ export default defineComponent({
   data () {
     return {
       shipmentMethods: [] as Array<any>,
-      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);