From 4daedcaab89f193d45dc259a081894aa7fd7f5fc Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 22 Oct 2024 11:44:43 +0530
Subject: [PATCH 1/3] Improved: migrated the picker fetching logic from
 performFind to solR(#447)

---
 src/components/EditPickerModal.vue | 137 +++++++++++++++++++----------
 src/services/PicklistService.ts    |   5 +-
 src/views/AssignPickerModal.vue    |  73 ++++++---------
 3 files changed, 119 insertions(+), 96 deletions(-)

diff --git a/src/components/EditPickerModal.vue b/src/components/EditPickerModal.vue
index 303cd53a0..e07dbf154 100644
--- a/src/components/EditPickerModal.vue
+++ b/src/components/EditPickerModal.vue
@@ -10,8 +10,8 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-content class="ion-padding">
-    <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; findPickers()" />
+  <ion-content class="ion-padding" ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
+    <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; searchPicker()" />
 
     <ion-list>
       <ion-list-header>{{ translate("Staff") }}</ion-list-header>
@@ -34,12 +34,25 @@
         </ion-radio-group>
       </div>
     </ion-list>
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button :disabled="isPickerAlreadySelected()" @click="confirmSave()">
-        <ion-icon :icon="saveOutline" />
-      </ion-fab-button>
-    </ion-fab>
+
+    <ion-infinite-scroll
+      @ionInfinite="loadMorePickers($event)"
+      threshold="100px"
+      v-show="isScrollable"
+      ref="infiniteScrollRef"
+    >
+      <ion-infinite-scroll-content
+        loading-spinner="crescent"
+        :loading-text="translate('Loading')"
+      />
+    </ion-infinite-scroll>
   </ion-content>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button :disabled="isPickerAlreadySelected()" @click="confirmSave()">
+      <ion-icon :icon="saveOutline" />
+    </ion-fab-button>
+  </ion-fab>
 </template>
 
 <script lang="ts">
@@ -51,6 +64,8 @@ import {
   IonFabButton,
   IonHeader,
   IonIcon,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
   IonItem,
   IonLabel,
   IonList,
@@ -82,6 +97,8 @@ export default defineComponent({
     IonContent,
     IonHeader,
     IonIcon,
+    IonInfiniteScroll,
+    IonInfiniteScrollContent,
     IonItem,
     IonFab,
     IonFabButton,
@@ -101,7 +118,9 @@ export default defineComponent({
       queryString: '',
       selectedPicker: {} as any,
       selectedPickerId: this.order.pickerIds[0],
-      isLoading: false
+      isLoading: false,
+      isScrollable: true,
+      isScrollingEnabled: false,
     }
   },
   async mounted() {
@@ -113,59 +132,81 @@ export default defineComponent({
     updateSelectedPicker(id: string) {
       this.selectedPicker = this.availablePickers.find((picker: any) => picker.id == id)
     },
-    async findPickers() {
-      this.isLoading = true;
-      let inputFields = {}
+    enableScrolling() {
+      const parentElement = (this as any).$refs.contentRef.$el
+      const scrollEl = parentElement.shadowRoot.querySelector("div[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 loadMorePickers(event: any) {
+      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+      if(!(this.isScrollingEnabled && this.isScrollable)) {
+        await event.target.complete();
+      }
+      this.findPickers(
+        undefined,
+        Math.ceil(
+          this.availablePickers.length / (process.env.VUE_APP_VIEW_SIZE)
+        ).toString()
+      ).then(async () => {
+        await event.target.complete();
+      });
+    },
+    async searchPicker() {
       this.availablePickers = []
+      this.findPickers()
+    },
+    async findPickers(vSize?: any, vIndex?: any) {
+      if(!vIndex) this.isLoading = true;
+      const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
+      let query = {}
 
-      if (this.queryString.length > 0) {
-        inputFields = {
-          firstName_value: this.queryString,
-          firstName_op: 'contains',
-          firstName_ic: 'Y',
-          firstName_grp: '1',
-          lastName_value: this.queryString,
-          lastName_op: 'contains',
-          lastName_ic: 'Y',
-          lastName_grp: '2',
-          partyId_value: this.queryString,
-          partyId_op: 'contains',
-          partyId_ic: 'Y',
-          partyId_grp: '3',
-          groupName_value: this.queryString,
-          groupName_op: 'contains',
-          groupName_ic: 'Y',
-          groupName_grp: '4'
-        }
+      if(this.queryString.length > 0) {
+        let keyword = this.queryString.trim().split(' ')
+        query = `(${keyword.map(key => `*${key}*`).join(' OR ')}) OR "${this.queryString}"^100`;
+      }
+      else {
+        query = `*:*`
       }
 
       const payload = {
-        inputFields: {
-          ...inputFields,
-          roleTypeIdTo: 'WAREHOUSE_PICKER'
-        },
-        viewSize: 50,
-        entityName: 'PartyRelationshipAndDetail',
-        noConditionFind: 'Y',
-        orderBy: "firstName ASC",
-        filterByDate: "Y",
-        distinct: "Y",
-        fieldList: ["firstName", "lastName", "partyId", "groupName"]
+        "json": {
+          "params": {
+            "rows": viewSize,
+            "start": viewSize*vIndex,
+            "q": query,
+            "defType" : "edismax",
+            "qf": "firstName lastName groupName partyId externalId",
+            "sort": "firstName asc"
+          },
+          "filter": ["docType:EMPLOYEE", "WAREHOUSE_PICKER_role:true"]
+        }
       }
-      
+      let total = 0;
+
       try {
         const resp = await PicklistService.getAvailablePickers(payload);
-        if (resp.status === 200 && !hasError(resp)) {
-          this.availablePickers = resp.data.docs.map((picker: any) => ({
-            name: picker.groupName ? picker.groupName : `${picker.firstName} ${picker.lastName}`,  
-            id: picker.partyId
+        if (resp.status === 200 && !hasError(resp) && resp.data.response.docs.length > 0) {
+          const pickers = resp.data.response.docs.map((picker: any) => ({
+            name: picker.groupName ? picker.groupName : (picker.firstName || picker.lastName)
+                ? (picker.firstName ? picker.firstName : '') + (picker.lastName ? ' ' + picker.lastName : '') : picker.partyId,
+            id: picker.partyId,
+            externalId: picker.externalId
           }))
+          this.availablePickers = this.availablePickers.concat(pickers);
+          total = resp.data.response?.numFound;
         } else {
-          throw resp.data
+          logger.error(translate('Something went wrong'))
         }
       } catch (err) {
-        logger.error('Failed to fetch the pickers information or there are no pickers available', err)
+        logger.error(translate('Something went wrong'))
       }
+      this.isScrollable = this.availablePickers.length < total;
       this.isLoading = false;
     },
     async confirmSave() {
diff --git a/src/services/PicklistService.ts b/src/services/PicklistService.ts
index 6f327ac8a..28b293a09 100644
--- a/src/services/PicklistService.ts
+++ b/src/services/PicklistService.ts
@@ -2,10 +2,9 @@ import { api } from '@/adapter';
 
 const getAvailablePickers = async (query: any): Promise <any> => {
   return api({
-    url: 'performFind',
-    method: 'POST',
+    url: "solr-query",
+    method: "post",
     data: query,
-    cache: true
   })
 }
 
diff --git a/src/views/AssignPickerModal.vue b/src/views/AssignPickerModal.vue
index b47f5d1b7..c356925d0 100644
--- a/src/views/AssignPickerModal.vue
+++ b/src/views/AssignPickerModal.vue
@@ -140,7 +140,7 @@ export default defineComponent({
     },
     enableScrolling() {
       const parentElement = (this).$refs.contentRef.$el
-      const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']")
+      const scrollEl = parentElement.shadowRoot.querySelector("div[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) {
@@ -165,60 +165,43 @@ export default defineComponent({
     },
     async getPicker(vSize, vIndex) {
       if(!vIndex) this.isLoading = true;
-      let inputFields = {}
+      const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
+      let query = {}
 
       if(this.queryString.length > 0) {
-
-        inputFields = {
-          firstName_value: this.queryString,
-          firstName_op: 'contains',
-          firstName_ic: 'Y',
-          firstName_grp: '1',
-          externalId_value: this.queryString,
-          externalId_op: 'contains',
-          externalId_ic: 'Y',
-          externalId_grp: '2',
-          lastName_value: this.queryString,
-          lastName_op: 'contains',
-          lastName_ic: 'Y',
-          lastName_grp: '3',
-          partyId_value: this.queryString,
-          partyId_op: 'contains',
-          partyId_ic: 'Y',
-          partyId_grp: '4',
-          groupName_value: this.queryString,
-          groupName_op: 'contains',
-          groupName_ic: 'Y',
-          groupName_grp: '5'
-        }
+        let keyword = this.queryString.trim().split(' ')
+        query = `(${keyword.map(key => `*${key}*`).join(' OR ')}) OR "${this.queryString}"^100`;
+      }
+      else {
+        query = `*:*`
       }
 
       const payload = {
-        inputFields: {
-          ...inputFields,
-          roleTypeIdTo: 'WAREHOUSE_PICKER'
-        },
-        viewSize: vSize ? vSize : process.env.VUE_APP_VIEW_SIZE,
-        viewIndex: vIndex ? vIndex : 0,
-        entityName: 'PartyRelationshipAndDetail',
-        noConditionFind: 'Y',
-        orderBy: "firstName ASC",
-        filterByDate: "Y",
-        distinct: "Y",
-        fieldList: ["firstName", "lastName", "partyId", "groupName"]
+        "json": {
+          "params": {
+            "rows": viewSize,
+            "start": viewSize*vIndex,
+            "q": query,
+            "defType" : "edismax",
+            "qf": "firstName lastName groupName partyId externalId",
+            "sort": "firstName asc"
+          },
+          "filter": ["docType:EMPLOYEE", "WAREHOUSE_PICKER_role:true"]
+        }
       }
-      let resp;
       let total = 0;
-      
+
       try {
-        resp = await PicklistService.getAvailablePickers(payload);
-        if (resp.status === 200 && !hasError(resp) && resp.data.docs.length > 0) {
-          const pickers = resp.data.docs.map((picker) => ({
-            name: picker.groupName ? picker.groupName : `${picker.firstName} ${picker.lastName}`,  
-            id: picker.partyId
+        const resp = await PicklistService.getAvailablePickers(payload);
+        if (resp.status === 200 && !hasError(resp) && resp.data.response.docs.length > 0) {
+          const pickers = resp.data.response.docs.map((picker) => ({
+            name: picker.groupName ? picker.groupName : (picker.firstName || picker.lastName)
+                ? (picker.firstName ? picker.firstName : '') + (picker.lastName ? ' ' + picker.lastName : '') : picker.partyId,
+            id: picker.partyId,
+            externalId: picker.externalId
           }))
           this.availablePickers = this.availablePickers.concat(pickers);
-          total = resp.data.count;
+          total = resp.data.response?.numFound;
         } else {
           logger.error(translate('Something went wrong'))
         }

From 0a61f70c18e50a2f6308300c2690c039d44d811b Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 22 Oct 2024 11:48:07 +0530
Subject: [PATCH 2/3] Reverted: changes in edit picker modal on toast fetching
 logic (#447)

---
 src/components/EditPickerModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/EditPickerModal.vue b/src/components/EditPickerModal.vue
index e07dbf154..62db852f0 100644
--- a/src/components/EditPickerModal.vue
+++ b/src/components/EditPickerModal.vue
@@ -201,10 +201,10 @@ export default defineComponent({
           this.availablePickers = this.availablePickers.concat(pickers);
           total = resp.data.response?.numFound;
         } else {
-          logger.error(translate('Something went wrong'))
+          throw resp.data;
         }
       } catch (err) {
-        logger.error(translate('Something went wrong'))
+        logger.error('Failed to fetch the pickers information or there are no pickers available', err)
       }
       this.isScrollable = this.availablePickers.length < total;
       this.isLoading = false;

From cfbc70de5c4eace1feec5a33606fc588df6d26a6 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 22 Oct 2024 11:58:21 +0530
Subject: [PATCH 3/3] Fixed: selected picker getting updated on closing modal
 post selection without saving(#447)

---
 src/components/EditPickerModal.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/EditPickerModal.vue b/src/components/EditPickerModal.vue
index 62db852f0..6145d0069 100644
--- a/src/components/EditPickerModal.vue
+++ b/src/components/EditPickerModal.vue
@@ -222,7 +222,7 @@ export default defineComponent({
             text: translate("Replace"),
             handler: () => {
               this.resetPicker().then(() => {
-                this.closeModal()
+                this.closeModal({ selectedPicker: this.selectedPicker })
               })
             }
           }
@@ -249,8 +249,8 @@ export default defineComponent({
         logger.error('Something went wrong, could not edit picker')
       }
     },
-    closeModal() {
-      modalController.dismiss({ selectedPicker: this.selectedPicker });
+    closeModal(payload = {}) {
+      modalController.dismiss({ dismissed: true, ...payload });
     },
     getAlreadyAssignedPicker() {
       this.selectedPicker = this.availablePickers.find((picker: any) => this.selectedPickerId === picker.id)