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

---
 src/views/catalog.vue  | 2 +-
 src/views/orders.vue   | 2 +-
 src/views/products.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/catalog.vue b/src/views/catalog.vue
index efefca6c..564fc9cf 100644
--- a/src/views/catalog.vue
+++ b/src/views/catalog.vue
@@ -77,7 +77,7 @@
           </ion-item> -->
         </div>
 
-        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" :disabled="!isCatalogScrollable">
+        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" :disabled="!isCatalogScrollable" :key="queryString">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')" />
         </ion-infinite-scroll>
       </div>
diff --git a/src/views/orders.vue b/src/views/orders.vue
index 30bdaaf8..0236dfd0 100644
--- a/src/views/orders.vue
+++ b/src/views/orders.vue
@@ -142,7 +142,7 @@
           </div>
         </div>
         
-        <ion-infinite-scroll @ionInfinite="loadMoreOrders($event)" threshold="100px" id="infinite-scroll" :disabled="!isScrolleable">
+        <ion-infinite-scroll @ionInfinite="loadMoreOrders($event)" threshold="100px" id="infinite-scroll" :disabled="!isScrolleable" :key="query.queryString">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')"></ion-infinite-scroll-content>
         </ion-infinite-scroll>
       </div>  
diff --git a/src/views/products.vue b/src/views/products.vue
index 22636b5c..b726c5a3 100644
--- a/src/views/products.vue
+++ b/src/views/products.vue
@@ -38,7 +38,7 @@
           <ion-badge slot="end" color="success">{{ product.doclist.numFound }} {{ $t("pieces preordered") }}</ion-badge>
         </ion-item>
        
-        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" id="infinite-scroll" :disabled="!isScrolleable">
+        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" id="infinite-scroll" :disabled="!isScrolleable" :key="queryString">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')"></ion-infinite-scroll-content>
         </ion-infinite-scroll>
       </div>

From 64ceb831eabb0dccda8c9c3657a139c921ca284d Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Tue, 16 Apr 2024 15:00:59 +0530
Subject: [PATCH 2/6] Improved: added comment to the ion key change(#289)

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

diff --git a/src/views/orders.vue b/src/views/orders.vue
index 0236dfd0..53f8ad1e 100644
--- a/src/views/orders.vue
+++ b/src/views/orders.vue
@@ -141,7 +141,13 @@
             </ion-card>
           </div>
         </div>
-        
+          <!--
+            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="loadMoreOrders($event)" threshold="100px" id="infinite-scroll" :disabled="!isScrolleable" :key="query.queryString">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')"></ion-infinite-scroll-content>
         </ion-infinite-scroll>

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

---
 src/views/catalog.vue  | 25 +++++++++++++++++++------
 src/views/orders.vue   | 31 ++++++++++++++++++++++++-------
 src/views/products.vue | 27 +++++++++++++++++++++------
 3 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/src/views/catalog.vue b/src/views/catalog.vue
index 564fc9cf..c450d899 100644
--- a/src/views/catalog.vue
+++ b/src/views/catalog.vue
@@ -9,7 +9,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content>
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <div class="header">
         <div class="filters ion-padding-top">
           <ion-toolbar>
@@ -77,7 +77,7 @@
           </ion-item> -->
         </div>
 
-        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" :disabled="!isCatalogScrollable" :key="queryString">
+        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" v-show="isScrollingEnabled && isCatalogScrollable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')" />
         </ion-infinite-scroll>
       </div>
@@ -157,7 +157,8 @@ export default defineComponent({
         value: 'REMOVED'
       }*/],
       queryString: '',
-      preordBckordComputationJob: {} as any
+      preordBckordComputationJob: {} as any,
+      isScrollingEnabled: false
     }
   },
   computed: {
@@ -169,6 +170,7 @@ export default defineComponent({
     })
   },
   async ionViewWillEnter() {
+    this.isScrollingEnabled = false;
     await this.getCatalogProducts()
     await this.preparePreordBckordComputationJob()
   },
@@ -200,13 +202,24 @@ export default defineComponent({
 
       await this.store.dispatch("product/findCatalogProducts", 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 loadMoreProducts(event: any){
       this.getCatalogProducts(
         undefined,
         Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString()
-      ).then(() => {
-        event.target.complete();
-      })
+      ).then(async () => {
+        await event.target.complete();
+      });
     },
     async applyFilter(value: string) {
       if(value !== this.prodCatalogCategoryTypeId) {
diff --git a/src/views/orders.vue b/src/views/orders.vue
index 53f8ad1e..195019a0 100644
--- a/src/views/orders.vue
+++ b/src/views/orders.vue
@@ -18,7 +18,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content>
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <div class="header">
         <div class="search">
           <ion-searchbar @ionFocus="selectSearchBarText($event)" @ionClear="query.queryString = ''; updateQuery()" :value="query.queryString" v-on:keyup.enter="query.queryString = $event.target.value; updateQuery()"> </ion-searchbar>
@@ -143,12 +143,14 @@
         </div>
           <!--
             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="loadMoreOrders($event)" threshold="100px" id="infinite-scroll" :disabled="!isScrolleable" :key="query.queryString">
+        <ion-infinite-scroll @ionInfinite="loadMoreOrders($event)" threshold="100px" id="infinite-scroll" v-show="isScrollingEnabled && isScrolleable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')"></ion-infinite-scroll-content>
         </ion-infinite-scroll>
       </div>  
@@ -264,6 +266,7 @@ export default defineComponent({
   data() {
     return {
       cusotmerLoyaltyOptions : JSON.parse(process.env?.VUE_APP_CUST_LOYALTY_OPTIONS),
+      isScrollingEnabled: false
     }
   },
   computed: {
@@ -284,17 +287,31 @@ export default defineComponent({
       query: 'order/getQuery',
     }),
   },
+  async ionViewWillEnter() {
+    this.isScrollingEnabled = false;
+  },
   methods: {
     updateQuery() {
       this.query.viewSize = parseInt(process.env.VUE_APP_VIEW_SIZE);
       this.query.viewIndex = 0;
       this.store.dispatch("order/updateQuery", { query: this.query});
     },
+    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) {
       this.query.viewIndex = Math.ceil(this.orders.length / process.env.VUE_APP_VIEW_SIZE);
-      this.store.dispatch("order/updateQuery", { query: this.query}).then(() => {
-        event.target.complete();
-      })
+      this.store.dispatch("order/updateQuery", { query: this.query}).then(async () => {
+        await event.target.complete();
+      });
     },
     async releaseItems() {
       emitter.emit("presentLoader")
diff --git a/src/views/products.vue b/src/views/products.vue
index b726c5a3..b4feccd8 100644
--- a/src/views/products.vue
+++ b/src/views/products.vue
@@ -14,7 +14,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content>
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search products')" v-model="queryString" v-on:keyup.enter="getProducts()"></ion-searchbar>
 
       <!-- Empty state -->
@@ -38,7 +38,7 @@
           <ion-badge slot="end" color="success">{{ product.doclist.numFound }} {{ $t("pieces preordered") }}</ion-badge>
         </ion-item>
        
-        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" id="infinite-scroll" :disabled="!isScrolleable" :key="queryString">
+        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" id="infinite-scroll"  v-show="isScrollingEnabled && isScrolleable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')"></ion-infinite-scroll-content>
         </ion-infinite-scroll>
       </div>
@@ -101,7 +101,8 @@ export default defineComponent({
       orderedAfter: '',
       orderedBefore: '',
       selectedItems: [] as any,
-      hasQuery:  false
+      hasQuery:  false,
+      isScrollingEnabled: false
     }
   },
   computed: {
@@ -114,14 +115,28 @@ export default defineComponent({
       currentEComStore: 'user/getCurrentEComStore',
     })
   },
+  async ionViewWillEnter() {
+    this.isScrollingEnabled = false;
+  },
   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.length / process.env.VUE_APP_VIEW_SIZE).toString()
-      ).then(() => {
-        event.target.complete();
-      })
+      ).then(async () => {
+        await event.target.complete();
+      });
     },
     async getProducts( vSize?: any, vIndex?: any) {
       const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;

From 9cf1ba14520cc4dc66b9d5afe3d69115397c9782 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Fri, 19 Apr 2024 16:40:37 +0530
Subject: [PATCH 4/6] Fixed: the case where loading label is not displayed when
 infinite scrolling(#289)

---
 src/views/catalog.vue  | 6 +++++-
 src/views/orders.vue   | 6 +++++-
 src/views/products.vue | 6 +++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/views/catalog.vue b/src/views/catalog.vue
index c450d899..68fb027f 100644
--- a/src/views/catalog.vue
+++ b/src/views/catalog.vue
@@ -77,7 +77,7 @@
           </ion-item> -->
         </div>
 
-        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" v-show="isScrollingEnabled && isCatalogScrollable" ref="infiniteScrollRef">
+        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" v-show="isCatalogScrollable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')" />
         </ion-infinite-scroll>
       </div>
@@ -214,6 +214,10 @@ export default defineComponent({
       }
     },
     async loadMoreProducts(event: any){
+      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+      if(!(this.isScrollingEnabled && this.isCatalogScrollable)) {
+        await event.target.complete();
+      }
       this.getCatalogProducts(
         undefined,
         Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString()
diff --git a/src/views/orders.vue b/src/views/orders.vue
index 195019a0..f85d2297 100644
--- a/src/views/orders.vue
+++ b/src/views/orders.vue
@@ -150,7 +150,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.
           -->
-        <ion-infinite-scroll @ionInfinite="loadMoreOrders($event)" threshold="100px" id="infinite-scroll" v-show="isScrollingEnabled && isScrolleable" ref="infiniteScrollRef">
+        <ion-infinite-scroll @ionInfinite="loadMoreOrders($event)" threshold="100px" id="infinite-scroll" v-show="isScrolleable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')"></ion-infinite-scroll-content>
         </ion-infinite-scroll>
       </div>  
@@ -308,6 +308,10 @@ export default defineComponent({
       }
     },
     async loadMoreOrders(event: any) {
+      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+      if(!(this.isScrollingEnabled && this.isScrolleable)) {
+        await event.target.complete();
+      }
       this.query.viewIndex = Math.ceil(this.orders.length / process.env.VUE_APP_VIEW_SIZE);
       this.store.dispatch("order/updateQuery", { query: this.query}).then(async () => {
         await event.target.complete();
diff --git a/src/views/products.vue b/src/views/products.vue
index b4feccd8..1fcab287 100644
--- a/src/views/products.vue
+++ b/src/views/products.vue
@@ -38,7 +38,7 @@
           <ion-badge slot="end" color="success">{{ product.doclist.numFound }} {{ $t("pieces preordered") }}</ion-badge>
         </ion-item>
        
-        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" id="infinite-scroll"  v-show="isScrollingEnabled && isScrolleable" ref="infiniteScrollRef">
+        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" id="infinite-scroll"  v-show="isScrolleable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')"></ion-infinite-scroll-content>
         </ion-infinite-scroll>
       </div>
@@ -131,6 +131,10 @@ export default defineComponent({
       }
     },
     async loadMoreProducts(event: any) {
+       // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+       if(!(this.isScrollingEnabled && this.isScrolleable)) {
+        await event.target.complete();
+      }
       this.getProducts(
         undefined,
         Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString()

From a733c58bae10db299780c9f764a07864c2001d3a Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Thu, 13 Jun 2024 15:22:10 +0530
Subject: [PATCH 5/6] Updated: the Pull request template (dxp/298)

---
 .github/PULL_REQUEST_TEMPLATE.md | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 2d1e5cbe..632c6c30 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,7 +1,7 @@
 ### Related Issues
 <!--  Put related issue number which this PR is closing. For example #123 -->
 
-Closes #
+#
 
 ### Short Description and Why It's Useful
 <!-- Describe in a few words what is this Pull Request changing and why it's useful -->
@@ -11,9 +11,6 @@ Closes #
 <!-- If you made any changes in the UI layer, please provide before/after screenshots -->
 
 
-**IMPORTANT NOTICE** - Remember to update `CHANGELOG.md` with description of your change
-
-
 ### Contribution and Currently Important Rules Acceptance
 <!-- Please get familiar with following info -->
 

From 9efd993719ca33d1eab6df2b02f9832dfd6a2f1a Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Fri, 14 Jun 2024 16:44:27 +0530
Subject: [PATCH 6/6] Updated: the contribution guideline link to Pre-order
 repo link(#298)

---
 .github/PULL_REQUEST_TEMPLATE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 632c6c30..0869913e 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -14,4 +14,4 @@
 ### Contribution and Currently Important Rules Acceptance
 <!-- Please get familiar with following info -->
 
-- [ ] I read and followed [contribution rules](https://github.com/DivanteLtd/vsf-capybara/blob/master/CONTRIBUTING.md)
\ No newline at end of file
+- [ ] I read and followed [contribution rules](https://github.com/hotwax/preorder#contribution-guideline)
\ No newline at end of file