Merge branch 'main' of https://github.com/hotwax/bopis

hotwax · Jun 25, 2024 · e08d0a3 · e08d0a3
2 parents 8d0b3ee + 63a6f76
commit e08d0a3
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/src/components/ProductListItem.vue b/src/components/ProductListItem.vue
@@ -4,7 +4,7 @@
       <DxpShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small" />
     </ion-thumbnail>
     <ion-label class="ion-text-wrap">
-      <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
+      <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) : getProduct(item.productId).productName }}</h2>
       <p class="ion-text-wrap">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
     </ion-label>
     <!-- Only show stock if its not a ship to store order -->

diff --git a/src/store/modules/order/actions.ts b/src/store/modules/order/actions.ts
@@ -312,6 +312,20 @@ const actions: ActionTree<OrderState , RootState> ={
     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
+        });
+      }
+    })
+
+    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");
@@ -1123,6 +1137,8 @@ const actions: ActionTree<OrderState , RootState> ={
 
       const reservedShipGroup = reservedShipGroupForOrder?.groupValue ? reservedShipGroupForOrder.doclist.docs[0] : ''
 
+      reservedShipGroupForOrder.doclist.docs.map((item: any) => item.isFetchingStock = false);
+
       return reservedShipGroup ? {
         ...shipGroup,
         items: reservedShipGroupForOrder.doclist.docs,

diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue
@@ -152,19 +152,25 @@
 
                   <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 }}
-                      <p>{{ translate("Color:", { color: getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR') }) }}</p>
-                      <p>{{ translate("Size:", { size: getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE') }) }}</p>
+                    <ion-label class="ion-text-wrap">
+                      <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) : getProduct(item.productId).productName }}</h2>
+                      <p class="ion-text-wrap">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</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>
@@ -210,12 +216,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";
@@ -229,6 +237,7 @@ import {
   checkmarkOutline,
   cubeOutline,
   giftOutline,
+  informationCircleOutline,
   locateOutline,
   mailOutline,
   printOutline,
@@ -252,6 +261,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",
@@ -276,6 +286,7 @@ export default defineComponent({
     IonLabel,
     IonNote,
     IonRow,
+    IonSpinner,
     IonThumbnail,
     IonTitle,
     IonToolbar,
@@ -315,8 +326,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({
@@ -477,7 +490,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")
@@ -513,6 +535,7 @@ export default defineComponent({
       giftOutline,
       getFeature,
       hasPermission,
+      informationCircleOutline,
       locateOutline,
       printOutline,
       productIdentificationPref,