From cf86d54a7f09972f62f5747f034e6815cb202c11 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Tue, 16 Apr 2024 10:57:23 +0530
Subject: [PATCH 1/3] Fixed: infinite scroll issue when used with
 searchbar(#289)

---
 src/views/AssignPickerModal.vue | 1 +
 src/views/Catalog.vue           | 1 +
 src/views/Orders.vue            | 5 ++++-
 src/views/ShipToStoreOrders.vue | 4 +++-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/views/AssignPickerModal.vue b/src/views/AssignPickerModal.vue
index 1ab49382b..9eaa5fc2e 100644
--- a/src/views/AssignPickerModal.vue
+++ b/src/views/AssignPickerModal.vue
@@ -29,6 +29,7 @@
       @ionInfinite="loadMorePickers($event)"
       threshold="100px"
       :disabled="!isScrollable"
+      :key="queryString"
     >
       <ion-infinite-scroll-content
         loading-spinner="crescent"
diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
index d4dbc3e10..9968a47af 100644
--- a/src/views/Catalog.vue
+++ b/src/views/Catalog.vue
@@ -25,6 +25,7 @@
         @ionInfinite="loadMoreProducts($event)"
         threshold="100px"
         :disabled="!isScrollable"
+        :key="queryString"
       >
         <ion-infinite-scroll-content
           loading-spinner="crescent"
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 0fe00842a..ca6d32d3c 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -157,7 +157,9 @@
       <ion-refresher slot="fixed" @ionRefresh="refreshOrders($event)">
         <ion-refresher-content pullingIcon="crescent" refreshingSpinner="crescent" />
       </ion-refresher>
-      <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" :disabled="segmentSelected === 'open' ? !isOpenOrdersScrollable : segmentSelected === 'packed' ? !isPackedOrdersScrollable : !isCompletedOrdersScrollable">
+      <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" 
+        :disabled="segmentSelected === 'open' ? !isOpenOrdersScrollable : segmentSelected === 'packed' ? !isPackedOrdersScrollable : !isCompletedOrdersScrollable"
+        :key="queryString">
         <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')" />
       </ion-infinite-scroll>
     </ion-content>
@@ -404,6 +406,7 @@ export default defineComponent({
       }
     },
     async searchOrders() {
+      console.log('serach', this.queryString);
       if(this.segmentSelected === 'open') {
         this.getPickupOrders()
       } else if(this.segmentSelected === 'packed') {
diff --git a/src/views/ShipToStoreOrders.vue b/src/views/ShipToStoreOrders.vue
index 21d9229ff..b8e8a79c5 100644
--- a/src/views/ShipToStoreOrders.vue
+++ b/src/views/ShipToStoreOrders.vue
@@ -90,7 +90,9 @@
       <ion-refresher slot="fixed" @ionRefresh="refreshOrders($event)">
         <ion-refresher-content pullingIcon="crescent" refreshingSpinner="crescent" />
       </ion-refresher>
-      <ion-infinite-scroll @ionInfinite="loadMoreOrders($event)" threshold="100px" :disabled="segmentSelected === 'incoming' ? !isIncomingOrdersScrollable : segmentSelected === 'readyForPickup' ? !isReadyForPickupOrdersScrollable : !isCompletedOrdersScrollable">
+      <ion-infinite-scroll @ionInfinite="loadMoreOrders($event)" threshold="100px" 
+        :disabled="segmentSelected === 'incoming' ? !isIncomingOrdersScrollable : segmentSelected === 'readyForPickup' ? !isReadyForPickupOrdersScrollable : !isCompletedOrdersScrollable"
+        :key="queryString">
         <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')" />
       </ion-infinite-scroll>
     </ion-content>

From 5cb6b86e07a387b54fcf9ad8e6422a600d2919f1 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Tue, 16 Apr 2024 14:53:39 +0530
Subject: [PATCH 2/3] Improved: added comment to the ion key change(#289)

---
 src/views/AssignPickerModal.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/views/AssignPickerModal.vue b/src/views/AssignPickerModal.vue
index 9eaa5fc2e..36e71c3b4 100644
--- a/src/views/AssignPickerModal.vue
+++ b/src/views/AssignPickerModal.vue
@@ -25,6 +25,13 @@
         </ion-radio-group>
       </div>
     </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="loadMorePickers($event)"
       threshold="100px"

From 7ce7647627cdceecb5695f876ff56477ad05966b Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Wed, 17 Apr 2024 17:57:27 +0530
Subject: [PATCH 3/3] Improved: the logic for fixing infinite scroll(#289)

---
 src/views/AssignPickerModal.vue | 33 ++++++++++++++++++++-------
 src/views/Catalog.vue           | 23 ++++++++++++++-----
 src/views/Orders.vue            | 40 +++++++++++++++++++++------------
 src/views/ShipToStoreOrders.vue | 39 +++++++++++++++++++++-----------
 4 files changed, 95 insertions(+), 40 deletions(-)

diff --git a/src/views/AssignPickerModal.vue b/src/views/AssignPickerModal.vue
index 36e71c3b4..b9a3b1d37 100644
--- a/src/views/AssignPickerModal.vue
+++ b/src/views/AssignPickerModal.vue
@@ -10,7 +10,7 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-content>
+  <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
     <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; searchPicker()"/>
 
     <div class="ion-text-center ion-margin-top" v-if="!availablePickers.length">{{ translate('No picker found') }}</div>
@@ -27,16 +27,18 @@
     </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).
+        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 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
+        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="loadMorePickers($event)"
       threshold="100px"
-      :disabled="!isScrollable"
-      :key="queryString"
+      v-show="isScrollingEnabled && isScrollable"
+      ref="infiniteScrollRef"
     >
       <ion-infinite-scroll-content
         loading-spinner="crescent"
@@ -108,7 +110,8 @@ export default defineComponent({
       selectedPicker: '',
       queryString: '',
       availablePickers: [],
-      isScrollable: true
+      isScrollable: true,
+      isScrollingEnabled: false
     }
   },
   methods: {
@@ -127,14 +130,25 @@ export default defineComponent({
         showToast(translate('Select a picker'))
       }
     },
+    enableScrolling() {
+      const parentElement = (this).$refs.contentRef.$el
+      const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']")
+      let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this).$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 loadMorePickers(event) {
       this.getPicker(
         undefined,
         Math.ceil(
           this.availablePickers.length / (process.env.VUE_APP_VIEW_SIZE)
         ).toString()
-      ).then(() => {
-        event.target.complete();
+      ).then(async () => {
+        await event.target.complete();
       });
     },
     async getPicker(vSize, vIndex) {
@@ -201,6 +215,9 @@ export default defineComponent({
     // getting picker information on initial load
     await this.getPicker();
   },
+  async ionViewWillEnter() {
+    this.isScrollingEnabled = false;
+  },
   setup() {
     const store = useStore();
 
diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
index 9968a47af..4021c5ef7 100644
--- a/src/views/Catalog.vue
+++ b/src/views/Catalog.vue
@@ -5,7 +5,7 @@
         <ion-title>{{ translate("Catalog") }}</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content>
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <ion-searchbar @ionFocus="selectSearchBarText($event)" v-model="queryString" @keypress.enter="queryString = $event.target.value; getProducts()" />
       <main v-if="products.list.length">
         <ion-card button v-for="product in products.list" :key="product.productId"  @click="viewProduct(product)">
@@ -24,8 +24,8 @@
       <ion-infinite-scroll
         @ionInfinite="loadMoreProducts($event)"
         threshold="100px"
-        :disabled="!isScrollable"
-        :key="queryString"
+        v-show="isScrollingEnabled && isScrollable"
+        ref="infiniteScrollRef"
       >
         <ion-infinite-scroll-content
           loading-spinner="crescent"
@@ -74,6 +74,7 @@ export default defineComponent({
   data() {
     return {
       queryString: "",
+      isScrollingEnabled: false
     };
   },
   computed: {
@@ -83,14 +84,25 @@ export default defineComponent({
     }),
   },
   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.list?.length / (process.env.VUE_APP_VIEW_SIZE as any)
         ).toString()
-      ).then(() => {
-        event.target.complete();
+      ).then(async () => {
+        await event.target.complete();
       });
     },
     async getProducts(vSize?: any, vIndex?: any) {
@@ -116,6 +128,7 @@ export default defineComponent({
   },
 
   async ionViewWillEnter() {
+    this.isScrollingEnabled = false;
     this.queryString = this.products.queryString;
     this.getProducts();
   },
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index ca6d32d3c..25608770c 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -28,7 +28,7 @@
         </ion-segment>
       </div>    
     </ion-header>
-    <ion-content>
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <div v-if="segmentSelected === 'open'">
         <div v-for="(order, index) in getOrdersByPart(orders)" :key="index" v-show="order.parts.length > 0">
           <ion-card button @click.prevent="viewOrder(order, order.part, 'open')">
@@ -158,8 +158,8 @@
         <ion-refresher-content pullingIcon="crescent" refreshingSpinner="crescent" />
       </ion-refresher>
       <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" 
-        :disabled="segmentSelected === 'open' ? !isOpenOrdersScrollable : segmentSelected === 'packed' ? !isPackedOrdersScrollable : !isCompletedOrdersScrollable"
-        :key="queryString">
+        v-show="isScrollingEnabled && (segmentSelected === 'open' ? isOpenOrdersScrollable : segmentSelected === 'packed' ? isPackedOrdersScrollable : isCompletedOrdersScrollable)"
+        ref="infiniteScrollRef">
         <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')" />
       </ion-infinite-scroll>
     </ion-content>
@@ -259,7 +259,8 @@ export default defineComponent({
   },
   data() {
     return {
-      queryString: ''
+      queryString: '',
+      isScrollingEnabled: false
     }
   },
   methods: {
@@ -339,28 +340,39 @@ export default defineComponent({
 
       await this.store.dispatch("order/getCompletedOrders", { viewSize, viewIndex, queryString: this.queryString, facilityId: this.currentFacility.facilityId });
     },
+    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) {
       if (this.segmentSelected === 'open') {
         this.getPickupOrders(
           undefined,
           Math.ceil(this.orders.length / process.env.VUE_APP_VIEW_SIZE).toString()
-        ).then(() => {
-          event.target.complete();
-        })
+        ).then(async () => {
+          await event.target.complete();
+       });
       } else if (this.segmentSelected === 'packed') {
         this.getPackedOrders(
           undefined,
           Math.ceil(this.packedOrders.length / process.env.VUE_APP_VIEW_SIZE).toString()
-        ).then(() => {
-          event.target.complete();
-        })
+        ).then(async () => {
+          await event.target.complete();
+       });
       } else {
         this.getCompletedOrders(
           undefined,
           Math.ceil(this.completedOrders.length / process.env.VUE_APP_VIEW_SIZE).toString()
-        ).then(() => {
-          event.target.complete();
-        })
+        ).then(async () => {
+          await event.target.complete();
+       });
       }
     },
     async readyForPickup (order: any, part: any) {
@@ -406,7 +418,6 @@ export default defineComponent({
       }
     },
     async searchOrders() {
-      console.log('serach', this.queryString);
       if(this.segmentSelected === 'open') {
         this.getPickupOrders()
       } else if(this.segmentSelected === 'packed') {
@@ -462,6 +473,7 @@ export default defineComponent({
     }
   },
   ionViewWillEnter () {
+    this.isScrollingEnabled = false;
     this.queryString = '';
 
     if(this.segmentSelected === 'open') {
diff --git a/src/views/ShipToStoreOrders.vue b/src/views/ShipToStoreOrders.vue
index b8e8a79c5..d3e6371e9 100644
--- a/src/views/ShipToStoreOrders.vue
+++ b/src/views/ShipToStoreOrders.vue
@@ -20,7 +20,7 @@
         </ion-segment>
       </div>    
     </ion-header>
-    <ion-content>
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <div v-if="segmentSelected === 'incoming'">
         <div v-for="(order, index) in incomingOrders" :key="index" v-show="order.items.length">
           <ion-card button>
@@ -91,8 +91,8 @@
         <ion-refresher-content pullingIcon="crescent" refreshingSpinner="crescent" />
       </ion-refresher>
       <ion-infinite-scroll @ionInfinite="loadMoreOrders($event)" threshold="100px" 
-        :disabled="segmentSelected === 'incoming' ? !isIncomingOrdersScrollable : segmentSelected === 'readyForPickup' ? !isReadyForPickupOrdersScrollable : !isCompletedOrdersScrollable"
-        :key="queryString">
+        v-show="isScrollingEnabled && (segmentSelected === 'incoming' ? isIncomingOrdersScrollable : segmentSelected === 'readyForPickup' ? isReadyForPickupOrdersScrollable : isCompletedOrdersScrollable)"
+        ref="infiniteScrollRef">
         <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')" />
       </ion-infinite-scroll>
     </ion-content>
@@ -180,7 +180,8 @@ export default defineComponent({
   },
   data() {
     return {
-      queryString: ''
+      queryString: '',
+      isScrollingEnabled: false
     }
   },
   methods: {
@@ -214,28 +215,39 @@ export default defineComponent({
 
       await this.store.dispatch("order/getShipToStoreCompletedOrders", { viewSize, viewIndex, queryString: this.queryString, facilityId: this.currentFacility.facilityId });
     },
+    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) {
       if (this.segmentSelected === 'incoming') {
         this.getIncomingOrders(
           undefined,
           Math.ceil(this.incomingOrders.length / process.env.VUE_APP_VIEW_SIZE).toString()
-        ).then(() => {
-          event.target.complete();
-        })
+        ).then(async () => {
+          await event.target.complete();
+        });
       } else if (this.segmentSelected === 'packed') {
         this.getReadyForPickupOrders(
           undefined,
           Math.ceil(this.readyForPickupOrders.length / process.env.VUE_APP_VIEW_SIZE).toString()
-        ).then(() => {
-          event.target.complete();
-        })
+        ).then(async () => {
+          await event.target.complete();
+        });
       } else {
         this.getCompletedOrders(
           undefined,
           Math.ceil(this.completedOrders.length / process.env.VUE_APP_VIEW_SIZE).toString()
-        ).then(() => {
-          event.target.complete();
-        })
+        ).then(async () => {
+          await event.target.complete();
+        });
       }
     },
     segmentChanged (event: CustomEvent) {
@@ -391,6 +403,7 @@ export default defineComponent({
     },
   },
   ionViewWillEnter() {
+    this.isScrollingEnabled = false;
     this.queryString = '';
     if (this.segmentSelected === 'incoming') {
       this.getIncomingOrders()