Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improved: logic to show inventory computation of other shipment items in an order (#396) #397

Merged
merged 3 commits into from
Jun 25, 2024
Merged

Improved: logic to show inventory computation of other shipment items in an order (#396) #397

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0e62c48
Improved: logic to show inventory computation of other shipment items…
amansinghbais Jun 17, 2024
6b2277e
Merge branch 'main' of https://github.com/hotwax/bopis into 396-other…
amansinghbais Jun 21, 2024
13ad04f
Improved: product details to be shown for other shipment items (#396)
amansinghbais Jun 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions src/store/modules/order/actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,20 @@
await dispatch('fetchShipGroupForOrder');
},

async updateOrderItemFetchingStatus ({ commit, state }, payload) {
const order = state.current ? JSON.parse(JSON.stringify(state.current)) : {};

order.shipGroups?.find((shipGroup: any) => {
if(shipGroup.shipGroupSeqId === payload.shipGroupSeqId){
shipGroup.items?.find((item: any) => {
if(item.productId === payload.productId) item.isFetchingStock = !item.isFetchingStock
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of adding this whole logic, we can simply update the item.isFetchingStock in the component method directly and then directly update the current order.

});
}
})

commit(types.ORDER_CURRENT_UPDATED, { order })
},

async getPackedOrders ({ commit, state }, payload) {
// Show loader only when new query and not the infinite scroll
if (payload.viewIndex === 0) emitter.emit("presentLoader");
Expand Down Expand Up @@ -513,7 +527,7 @@
return resp;
},

async packDeliveryItems ({ commit }, shipmentId) {

Check warning on line 530 in src/store/modules/order/actions.ts

View workflow job for this annotation

GitHub Actions / call-workflow-in-another-repo / reusable_workflow_job (18.x) 

'commit' is defined but never used

Check warning on line 530 in src/store/modules/order/actions.ts

View workflow job for this annotation

GitHub Actions / call-workflow-in-another-repo / reusable_workflow_job (20.x) 

'commit' is defined but never used
const params = {
shipmentId: shipmentId,
statusId: 'SHIPMENT_PACKED'
Expand Down Expand Up @@ -629,7 +643,7 @@
}).catch(err => err);
},

async rejectOrderItems ({ commit }, order) {

Check warning on line 646 in src/store/modules/order/actions.ts

View workflow job for this annotation

GitHub Actions / call-workflow-in-another-repo / reusable_workflow_job (18.x) 

'commit' is defined but never used

Check warning on line 646 in src/store/modules/order/actions.ts

View workflow job for this annotation

GitHub Actions / call-workflow-in-another-repo / reusable_workflow_job (20.x) 

'commit' is defined but never used
const payload = {
'orderId': order.orderId
}
Expand Down Expand Up @@ -1035,7 +1049,7 @@

const orderQueryPayload = prepareOrderQuery(params)

let resp, total, shipGroups = [];

Check warning on line 1052 in src/store/modules/order/actions.ts

View workflow job for this annotation

GitHub Actions / call-workflow-in-another-repo / reusable_workflow_job (18.x) 

'total' is defined but never used

Check warning on line 1052 in src/store/modules/order/actions.ts

View workflow job for this annotation

GitHub Actions / call-workflow-in-another-repo / reusable_workflow_job (20.x) 

'total' is defined but never used
const facilityTypeIds: Array<string> = [];

try {
Expand Down Expand Up @@ -1123,6 +1137,8 @@

const reservedShipGroup = reservedShipGroupForOrder?.groupValue ? reservedShipGroupForOrder.doclist.docs[0] : ''

reservedShipGroupForOrder.doclist.docs.map((item: any) => item.isFetchingStock = false);

return reservedShipGroup ? {
...shipGroup,
items: reservedShipGroupForOrder.doclist.docs,
Expand Down
43 changes: 34 additions & 9 deletions src/views/OrderDetail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,19 +152,27 @@

<ion-item lines="none" v-for="item in shipGroup.items" :key="item">
<ion-thumbnail slot="start">
<ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
<DxpShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
</ion-thumbnail>
<ion-label>
<p class="overline">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) : getProduct(item.productId).productName }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the same pattern as used in Product list item card

<p>{{ translate("Color:", { color: getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR') }) }}</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should not display color and size, as we not displaying the same in product list item.

<p>{{ translate("Size:", { size: getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE') }) }}</p>
</ion-label>
<!-- TODO: add a spinner if the api takes too long to fetch the stock -->
<ion-note slot="end" v-if="getProductStock(item.productId, item.facilityId).quantityOnHandTotal >= 0">{{ getProductStock(item.productId, item.facilityId).quantityOnHandTotal }} {{ translate('pieces in stock') }}</ion-note>
<ion-button slot="end" fill="clear" v-else size="small" @click.stop="fetchProductStock(item.productId)">
<ion-icon color="medium" slot="icon-only" :icon="cubeOutline"/>
</ion-button>

<div slot="end">
<ion-spinner v-if="item.isFetchingStock" color="medium" name="crescent" />
<div v-else-if="getProductStock(item.productId).quantityOnHandTotal >= 0" class="atp-info">
<ion-note slot="end"> {{ translate("on hand", { count: getProductStock(item.productId).quantityOnHandTotal ?? '0' }) }} </ion-note>
<ion-button fill="clear" @click.stop="openInventoryDetailPopover($event, item)">
<ion-icon slot="icon-only" :icon="informationCircleOutline" color="medium" />
</ion-button>
</div>
<ion-button v-else fill="clear" @click.stop="fetchProductStock(item.productId, shipGroup.shipGroupSeqId)">
<ion-icon color="medium" slot="icon-only" :icon="cubeOutline" />
</ion-button>
</div>
</ion-item>
</ion-card>
</div>
Expand Down Expand Up @@ -210,12 +218,14 @@ import {
IonLabel,
IonNote,
IonRow,
IonSpinner,
IonThumbnail,
IonTitle,
IonToolbar,
IonFab,
IonFabButton,
modalController
modalController,
popoverController
} from "@ionic/vue";
import { computed, defineComponent } from "vue";
import { mapGetters, useStore } from "vuex";
Expand All @@ -229,6 +239,7 @@ import {
checkmarkOutline,
cubeOutline,
giftOutline,
informationCircleOutline,
locateOutline,
mailOutline,
printOutline,
Expand All @@ -252,6 +263,7 @@ import { getProductIdentificationValue, translate, useProductIdentificationStore
import EditPickerModal from "@/components/EditPickerModal.vue";
import emitter from '@/event-bus'
import logger from "@/logger";
import InventoryDetailsPopover from '@/components/InventoryDetailsPopover.vue'

export default defineComponent({
name: "OrderDetail",
Expand All @@ -276,6 +288,7 @@ export default defineComponent({
IonLabel,
IonNote,
IonRow,
IonSpinner,
IonThumbnail,
IonTitle,
IonToolbar,
Expand Down Expand Up @@ -315,8 +328,10 @@ export default defineComponent({
},
props: ['orderType', 'orderId', 'orderPartSeqId'],
methods: {
async fetchProductStock(productId: string) {
async fetchProductStock(productId: string, shipGroupSeqId: any) {
this.store.dispatch('order/updateOrderItemFetchingStatus', { productId, shipGroupSeqId })
await this.store.dispatch('stock/fetchStock', { productId })
this.store.dispatch('order/updateOrderItemFetchingStatus', { productId, shipGroupSeqId })
},
async assignPicker(order: any, part: any, facilityId: any) {
const assignPickerModal = await modalController.create({
Expand Down Expand Up @@ -477,7 +492,16 @@ export default defineComponent({
},
async printShippingLabelAndPackingSlip(order: any) {
await OrderService.printShippingLabelAndPackingSlip(order.shipmentId)
}
},
async openInventoryDetailPopover(Event: any, item: any){
const popover = await popoverController.create({
component: InventoryDetailsPopover,
event: Event,
showBackdrop: false,
componentProps: { item }
});
await popover.present();
},
},
async mounted() {
emitter.emit("presentLoader")
Expand Down Expand Up @@ -513,6 +537,7 @@ export default defineComponent({
giftOutline,
getFeature,
hasPermission,
informationCircleOutline,
locateOutline,
printOutline,
productIdentificationPref,
Expand Down
Loading