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

---
 src/views/FindFacilities.vue | 1 +
 src/views/FindGroups.vue     | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/views/FindFacilities.vue b/src/views/FindFacilities.vue
index 8728b7a6..b762c061 100644
--- a/src/views/FindFacilities.vue
+++ b/src/views/FindFacilities.vue
@@ -110,6 +110,7 @@
         @ionInfinite="loadMoreFacilities($event)"
         threshold="100px"
         :disabled="!isScrollable"
+        :key="query.queryString"
       >
         <ion-infinite-scroll-content
           loading-spinner="crescent"
diff --git a/src/views/FindGroups.vue b/src/views/FindGroups.vue
index a572f9c1..aca05569 100644
--- a/src/views/FindGroups.vue
+++ b/src/views/FindGroups.vue
@@ -65,6 +65,7 @@
         @ionInfinite="loadMoreGroups($event)"
         threshold="100px"
         :disabled="!isScrollable"
+        :key="query.queryString"
       >
         <ion-infinite-scroll-content
           loading-spinner="crescent"

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

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

diff --git a/src/views/FindFacilities.vue b/src/views/FindFacilities.vue
index b762c061..44a3e75f 100644
--- a/src/views/FindFacilities.vue
+++ b/src/views/FindFacilities.vue
@@ -105,7 +105,13 @@
           </ion-fab-button>
         </ion-fab-list>
       </ion-fab>
-
+        <!--
+        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="loadMoreFacilities($event)"
         threshold="100px"

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

---
 src/views/FindFacilities.vue | 34 +++++++++++++++++++++++++---------
 src/views/FindGroups.vue     | 29 ++++++++++++++++++++++++-----
 2 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/views/FindFacilities.vue b/src/views/FindFacilities.vue
index 44a3e75f..779a8c1b 100644
--- a/src/views/FindFacilities.vue
+++ b/src/views/FindFacilities.vue
@@ -13,7 +13,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="filter-content">
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="filter-content">
       <div class="find">
         <section class="search">
           <ion-searchbar :placeholder="translate('Search facilities')" v-model="query.queryString" @keyup.enter="updateQuery()" />
@@ -107,16 +107,18 @@
       </ion-fab>
         <!--
         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="loadMoreFacilities($event)"
         threshold="100px"
-        :disabled="!isScrollable"
-        :key="query.queryString"
+        v-show="isScrollingEnabled && isScrollable"
+        ref="infiniteScrollRef"
       >
         <ion-infinite-scroll-content
           loading-spinner="crescent"
@@ -203,7 +205,8 @@ export default defineComponent({
   },
   data() {
     return {
-      facilityGroups: [] as any
+      facilityGroups: [] as any,
+      isScrollingEnabled: false
     }
   },
   computed: {
@@ -224,6 +227,7 @@ export default defineComponent({
     // fetching facilities information in the ionViewWillEnter hook as when updating facilityGroup or fulfillment limit
     // from the details page and again coming to the list page, the UI does not gets updated when fetching information in
     // the mounted hook
+    this.isScrollingEnabled = false;
     await this.fetchFacilities();
   },
   methods: {
@@ -243,14 +247,26 @@ export default defineComponent({
     async viewFacilityDetails(facilityId: string) {
       this.router.push({ path: `/facility-details/${facilityId}` })
     },
+    enableScrolling() {
+      console.log('scroll');
+      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 loadMoreFacilities(event: any) {
       this.fetchFacilities(
         undefined,
         Math.ceil(
           this.facilities?.length / (process.env.VUE_APP_VIEW_SIZE as any)
         ).toString()
-      ).then(() => {
-        event.target.complete();
+      ).then(async () => {
+        await event.target.complete();
       });
     },
     async changeOrderLimitPopover(ev: Event, facility: any) {
diff --git a/src/views/FindGroups.vue b/src/views/FindGroups.vue
index aca05569..04bd32aa 100644
--- a/src/views/FindGroups.vue
+++ b/src/views/FindGroups.vue
@@ -6,7 +6,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="filter-content">
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="filter-content">
       <div class="find">
         <section class="search">
           <ion-searchbar :placeholder="translate('Search groups')" v-model="query.queryString" @keyup.enter="updateQuery()" />
@@ -64,8 +64,8 @@
       <ion-infinite-scroll
         @ionInfinite="loadMoreGroups($event)"
         threshold="100px"
-        :disabled="!isScrollable"
-        :key="query.queryString"
+        v-show="isScrollingEnabled && isScrollable"
+        ref="infiniteScrollRef"
       >
         <ion-infinite-scroll-content
           loading-spinner="crescent"
@@ -147,6 +147,11 @@ export default defineComponent({
     IonTitle,
     IonToolbar
   },
+  data() {
+    return {
+      isScrollingEnabled: false
+    }
+  },
   computed: {
     ...mapGetters({
       groups: "facility/getFacilityGroups",
@@ -159,6 +164,9 @@ export default defineComponent({
     await this.fetchGroups();
     await this.store.dispatch('util/fetchFacilityGroupTypes')
   },
+  async ionViewWillEnter() {
+    this.isScrollingEnabled = false;
+  },
   methods: {
     async updateQuery() {
       await this.store.dispatch('facility/updateGroupQuery', this.query)
@@ -173,14 +181,25 @@ export default defineComponent({
       };
       await this.store.dispatch('facility/fetchFacilityGroups', 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 loadMoreGroups(event: any) {
       this.fetchGroups(
         undefined,
         Math.ceil(
           this.groups?.length / (process.env.VUE_APP_VIEW_SIZE as any)
         ).toString()
-      ).then(() => {
-        event.target.complete();
+      ).then(async () => {
+        await event.target.complete();
       });
     },
     async openCreateFacilityGroupModal() {

From 61b40b2eddfd75a8483787e04505c2f5c2ccb595 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Fri, 19 Apr 2024 12:04:52 +0530
Subject: [PATCH 4/4] Updated: remove console from findfacilities(#289)

---
 src/views/FindFacilities.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/FindFacilities.vue b/src/views/FindFacilities.vue
index 779a8c1b..c9466cb5 100644
--- a/src/views/FindFacilities.vue
+++ b/src/views/FindFacilities.vue
@@ -248,7 +248,6 @@ export default defineComponent({
       this.router.push({ path: `/facility-details/${facilityId}` })
     },
     enableScrolling() {
-      console.log('scroll');
       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