Skip to content

Commit

Permalink
Improved: migrated the picker fetching logic from performFind to solR(h…
Browse files Browse the repository at this point in the history 
…otwax#447)
  • Loading branch information
@amansinghbais
amansinghbais committed Oct 22, 2024
1 parent 8469575 commit 4daedca
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 96 deletions.
137 changes: 89 additions & 48 deletions src/components/EditPickerModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand All @@ -51,6 +64,8 @@ import {
IonFabButton,
IonHeader,
IonIcon,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonItem,
IonLabel,
IonList,
Expand Down Expand Up @@ -82,6 +97,8 @@ export default defineComponent({
IonContent,
IonHeader,
IonIcon,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonItem,
IonFab,
IonFabButton,
Expand All @@ -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() {
Expand All @@ -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() {
Expand Down
5 changes: 2 additions & 3 deletions src/services/PicklistService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
}

Expand Down
73 changes: 28 additions & 45 deletions src/views/AssignPickerModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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'))
}
Expand Down

0 comments on commit 4daedca

Please sign in to comment.