Implemented: Functional UI to Display Inventory Computation for Order Items(#386)

src/components/InventoryDetailsPopover.vue

@@ -3,20 +3,20 @@
     <ion-list>
       <ion-list-header>{{ translate("Inventory computation")}}</ion-list-header>
       <ion-item>
-        <ion-label class="ion-text-wrap">{{ translate("Quantity on hands")}}</ion-label>
-        <ion-note slot="end">52</ion-note>
+        <ion-label class="ion-text-wrap">{{ translate("Quantity on hand")}}</ion-label>
+        <ion-note slot="end">{{ getProductStock(item.productId).quantityOnHandTotal ?? '0' }}</ion-note>
       </ion-item>
       <ion-item>
         <ion-label class="ion-text-wrap">{{ translate("Safety stock")}}</ion-label>
-        <ion-note slot="end">4</ion-note>
+        <ion-note slot="end">{{ getInventoryInformation(item.productId).minimumStock ?? '0' }}</ion-note>
       </ion-item>
       <ion-item>
         <ion-label class="ion-text-wrap">{{ translate("Order reservations")}}</ion-label>
-        <ion-note slot="end">1</ion-note>
+        <ion-note slot="end">{{ getInventoryInformation(item.productId).reservedQuantity ?? '0' }}</ion-note>
       </ion-item>
       <ion-item lines="none">
         <ion-label class="ion-text-wrap">{{ translate("Online ATP")}}</ion-label>
-        <ion-badge slot="end" color="success">52</ion-badge>
+        <ion-badge slot="end" color="success">{{ getInventoryInformation(item.productId).onlineAtp ?? '0' }}</ion-badge>
       </ion-item>
     </ion-list>
   </ion-content>
@@ -25,56 +25,55 @@
 <script lang="ts">
 import {
   IonBadge,
-  IonButtons,
   IonContent,
-  IonHeader,
   IonItem,
   IonLabel,
   IonList,
-  IonNote,
-  IonTitle,
-  IonToolbar
+  IonListHeader,
+  IonNote
 } from '@ionic/vue'
 
 import { defineComponent } from 'vue';
-import { useStore } from 'vuex';
+import { useStore, mapGetters } from 'vuex';
 import { translate } from '@hotwax/dxp-components';
 
-export default defineComponent({
+export default defineComponent({  
   name: 'InventoryDetailsPopover',
-  component:{
+  components:{
     IonBadge,
-    IonButtons,
     IonContent,
-    IonHeader,
     IonItem,
     IonLabel,
     IonList,
+    IonListHeader,
     IonNote,
-    IonTitle,
-    IonToolbar
-  },
-  props: {
-  },
-  data () {
-      return {
-
-      }
   },
+  props: ['item'],
   computed: {
-
+    ...mapGetters({
+      product: "product/getCurrent",
+      getProductStock: 'stock/getProductStock',
+      getInventoryInformation: 'stock/getInventoryInformation',
+      currentFacility: 'user/getCurrentFacility',
+    })   
+  },
+  async beforeMount () {
+    const productId = this.item?.productId;
+    await this.store.dispatch('stock/fetchStock', { productId })
+    this.fetchReservedQuantity( this.item.productId );
   },
   methods: {
-
+    async fetchReservedQuantity(productId: any){
+      await this.store.dispatch('stock/fetchReservedQuantity', { productId });
+    },
   },
+
   setup () {
     const store = useStore();
     return {
-    store,
-    translate
-  };
-
-
+      store,
+      translate
+    }
   }
 })
 </script>

src/components/ProductListItem.vue

@@ -6,16 +6,14 @@
     <ion-label class="ion-text-wrap">
       <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
       <p class="ion-text-wrap">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
-      <p>Color: color</p>
-      <p>Size: size</p>
     </ion-label>
     <!-- Only show stock if its not a ship to store order -->
     <div v-if="!isShipToStoreOrder">
       <ion-button v-if="!isFetchingStock && !showInfoIcon" fill="clear" @click.stop="fetchProductStock(item.productId)">
         <ion-icon color="medium" slot="icon-only" :icon="cubeOutline" />
       </ion-button>
       <div v-else-if="showInfoIcon" class="atp-info">
-        <ion-note slot="end"> 50 ATP </ion-note>
+        <ion-note slot="end"> {{ getInventoryInformation(item.productId).onlineAtp ?? '0' }} </ion-note>
         <ion-button fill="clear" @click.stop="getInventoryComputationDetails($event)">
           <ion-icon slot="icon-only" :icon="informationCircleOutline" color="medium" />
         </ion-button>
@@ -52,34 +50,29 @@ export default defineComponent({
       showInfoIcon: false
     }
   },
-  props: {
-    item: Object,
-    isShipToStoreOrder: {
-      type: Boolean,
-      default: false
-    }
-  },
+  props: ['item', 'isShipToStoreOrder'],
   computed: {
     ...mapGetters({
       getProduct: 'product/getProduct',
-      getProductStock: 'stock/getProductStock'
+      product: "product/getCurrent",
+      getInventoryInformation: 'stock/getInventoryInformation',
+      currentFacility: 'user/getCurrentFacility',
     })
   },
   methods: {
     async fetchProductStock(productId: string) {
       this.isFetchingStock = true
-      await this.store.dispatch('stock/fetchStock', { productId })
+      await this.store.dispatch('stock/fetchInventoryCount', { productId });
       this.isFetchingStock = false
       this.showInfoIcon = true;
     },
     async getInventoryComputationDetails(Event: any){
       const popover = await popoverController.create({
         component: InventoryDetailsPopover,
         event: Event,
-        // componentProps: { otherStoresInventory: this.otherStoresInventoryDetails }
+        componentProps: { item: this.item }
       });
       await popover.present();
-
     },
     updateColor(stock: number) {
       return stock ? stock < 10 ? 'warning' : 'success' : 'danger';

src/locales/en.json

@@ -113,7 +113,7 @@
   "Orders Not Found": "Orders Not Found",
   "Order item rejection history": "Order item rejection history",
   "Order reservations": "Order reservations",
-  "order reservtions at the store": "{ count } order reservtions at the store",
+  "order reservations at the store": "{ count } order reservations at the store",
   "Other stores": "Other stores",
   "Packed": "Packed",
   "Packing Slip": "Packing Slip",
@@ -197,6 +197,8 @@
   "Worn Display": "Worn Display",
   "This order will be removed from your dashboard. This action cannot be undone.": "This order will be removed from your dashboard.{ space } This action cannot be undone.",
   "Update notification preferences": "Update notification preferences",
+  "units": "{ item } units",
+  "unit": "{ item } unit",
   "View shipping orders along with pickup orders.": "View shipping orders along with pickup orders.",
   "You do not have permission to access this page": "You do not have permission to access this page",
   "Zipcode": "Zipcode"

src/locales/es.json

@@ -110,7 +110,7 @@
   "Orders Not Found": "Órdenes no encontradas",
   "Order item rejection history": "Historial de rechazo de artículos de pedido",
   "Order reservations": "Order reservations",
-  "order reservtions at the store": "{ count } order reservtions at the store",
+  "order reservations at the store": "{ count } order reservations at the store",
   "Other stores": "Otras tiendas",
   "Packed": "Empacado",
   "Packing Slip": "Remisión de embalaje",
@@ -195,6 +195,8 @@
   "Worn Display": "Pantalla desgastada",
   "This order will be removed from your dashboard. This action cannot be undone.": "Este pedido será eliminado de tu panel de control.{ space } Esta acción no se puede deshacer.",
   "Update notification preferences": "Actualizar preferencias de notificación",
+  "units": "{ item } units",
+  "unit": "{ item } unit",
   "View shipping orders along with pickup orders.": "Ver órdenes de envío junto con órdenes de recogida.",
   "You do not have permission to access this page": "No tienes permiso para acceder a esta página",
   "Zipcode": "Código postal",

src/locales/ja.json

@@ -110,7 +110,7 @@
   "Orders Not Found": "注文が見つかりません",
   "Order item rejection history": "Order item rejection history",
   "Order reservations": "Order reservations",
-  "order reservtions at the store": "{ count } order reservtions at the store",
+  "order reservations at the store": "{ count } order reservations at the store",
   "Other stores": "Other stores",
   "Packed": "梱包済み",
   "Packing Slip": "納品書",
@@ -194,6 +194,8 @@
   "Worn Display": "すり切れたディスプレイ",
   "This order will be removed from your dashboard. This action cannot be undone.": "この注文はダッシュボードから削除されます。{ space } この操作は元に戻せません。",
   "Update notification preferences": "Update notification preferences",
+  "units": "{ item } units",
+  "unit": "{ item } unit",
   "View shipping orders along with pickup orders.": "店舗受取の注文と一緒に配送注文を表示します",
   "You do not have permission to access this page": "このページにアクセスする権限がありません",
   "Zipcode": "郵便番号"

src/services/StockService.ts

@@ -16,7 +16,16 @@ const getInventoryAvailableByFacility = async (query: any): Promise <any> => {
   });
 }
 
+const getInventoryComputation = async (payload: any ): Promise<any> => {
+  return api({
+    url: 'performFind',
+    method: 'post',
+    data: payload
+  });
+}
+
 export const StockService = {
   checkInventory,
-  getInventoryAvailableByFacility
+  getInventoryAvailableByFacility,
+  getInventoryComputation
 }

src/services/UtilService.ts

@@ -33,9 +33,18 @@ const resetPicker = async (payload: any): Promise<any> => {
   })
 }
 
+const fetchReservedQuantity = async (query: any): Promise <any>  => {
+  return api({
+    url: "solr-query", 
+    method: "post",
+    data: query
+  });
+}
+
 export const UtilService = {
   fetchPaymentMethodTypeDesc,
   fetchRejectReasons,
   fetchStatusDesc,
-  resetPicker
+  resetPicker,
+  fetchReservedQuantity
 }

src/store/modules/order/OrderState.ts

@@ -4,5 +4,6 @@ export default interface OrderState {
   current: any;
   packed: any;
   completed: any;
-  shipToStore: any
+  shipToStore: any;
+  otherItem: any;
 }

src/store/modules/order/actions.ts

@@ -10,8 +10,109 @@
 import store from "@/store";
 import { prepareOrderQuery } from "@/utils/solrHelper";
 import logger from "@/logger";
+import { getOrderCategory } from "@/utils/order";
 
 const actions: ActionTree<OrderState , RootState> ={
+
+  async getOrderDetails({commit}, payload ) {
+    // Show loader only when new query and not the infinite scroll
+    // if (payload.viewIndex === 0) 
+    emitter.emit("presentLoader");
+    let resp;
+    const orderQueryPayload = prepareOrderQuery({
+      ...payload,
+      orderStatusId: 'ORDER_APPROVED',
+      orderTypeId: 'SALES_ORDER',
+      '-fulfillmentStatus': '(Cancelled OR Rejected)',
+    })
+
+    try {
+      resp = await OrderService.getOpenOrders(orderQueryPayload);
+      if (resp.status === 200 && !hasError(resp) && resp.data.grouped?.orderId?.ngroups > 0) {
+        const orderIds = resp.data.grouped?.orderId?.groups.map((order: any) => order.doclist.docs[0].orderId);
+        const { productId, ...params } = payload;
+        this.dispatch('order/getOtherOrderItem', {...params, orderIds});
+      } else {  
+        showToast(translate("Orders Not Found"))
+      }
+    } catch(err) {
+      logger.error(err)
+      showToast(translate("Something went wrong"))
+    }
+    emitter.emit("dismissLoader");
+    return resp;
+  },
+
+  async getOtherOrderItem({ commit }, payload) {
+    // Show loader only when new query and not the infinite scroll
+    // if (payload.viewIndex === 0) 
+    emitter.emit("presentLoader");
+    let resp;
+    const orderQueryPayload = prepareOrderQuery({
+      ...payload,
+      orderStatusId: 'ORDER_APPROVED',
+      orderTypeId: 'SALES_ORDER',
+    })
+
+    try {
+      resp = await OrderService.getOpenOrders(orderQueryPayload);
+      if (resp.status === 200 && !hasError(resp) && resp.data.grouped?.orderId?.ngroups > 0) {
+        const orders = resp.data.grouped?.orderId?.groups.map((order: any) => {
+          const orderItem = order.doclist.docs[0]
+          return {
+            orderId: orderItem.orderId,
+            orderName: orderItem.orderName,
+            customer: {
+              partyId: orderItem.customerId,
+              name: orderItem.customerName
+            },
+            category: getOrderCategory(orderItem),
+            parts: order.doclist.docs.reduce((arr: Array<any>, item: any) => {
+              const currentOrderPart = arr.find((orderPart: any) => orderPart.orderPartSeqId === item.shipGroupSeqId)
+              if (!currentOrderPart) {
+                arr.push({
+                  orderPartSeqId: item.shipGroupSeqId,
+                  items: [{
+                    shipGroupSeqId: item.shipGroupSeqId,
+                    orderId: orderItem.orderId,
+                    orderItemSeqId: item.orderItemSeqId,
+                    quantity: item.itemQuantity,
+                    brand: item.productStoreId,
+                    virtualName: item.virtualProductName,
+                    productId: item.productId,
+                  }]
+                })
+              } else {
+                currentOrderPart.items.push({
+                  shipGroupSeqId: item.shipGroupSeqId,
+                  orderId: orderItem.orderId,
+                  orderItemSeqId: item.orderItemSeqId,
+                  quantity: item.itemQuantity,
+                  brand: item.productStoreId,
+                  virtualName: item.virtualProductName,
+                  productId: item.productId,
+                })
+              }
+              return arr
+            }, []),
+          }
+        })
+        // const total = resp.data.grouped?.orderId?.ngroups;
+        // if(payload.viewIndex && payletload.viewIndex > 0) orders = state.open.list.concat(orders)
+        commit(types.OTHER_ITEM_UPDATED, { orders })
+      } else {
+        commit(types.OTHER_ITEM_UPDATED, { orders: {} })
+        showToast(translate("Orders Not Found"))
+      }
+    }
+    catch(err) {
+      logger.error(err)
+      showToast(translate("Something went wrong"))
+    }
+    emitter.emit("dismissLoader");
+    return resp;
+  },
+
   async getOpenOrders({ commit, state }, payload) {
     // Show loader only when new query and not the infinite scroll
     if (payload.viewIndex === 0) emitter.emit("presentLoader");
@@ -413,7 +514,7 @@
     return resp;
   },
 
   async packDeliveryItems ({ commit }, shipmentId) {
     const params = {
       shipmentId: shipmentId,
       statusId: 'SHIPMENT_PACKED'
@@ -529,7 +630,7 @@
     }).catch(err => err);
   },
 
   async rejectOrderItems ({ commit }, order) {
     const payload = {
       'orderId': order.orderId
     }

src/store/modules/order/getters.ts

@@ -3,6 +3,9 @@ import OrderState from "./OrderState"
 import RootState from "../../RootState";
 
 const getters: GetterTree<OrderState , RootState> = {
+  getOtherItem: (state) => {
+    return state.otherItem;
+  },
   getOpenOrders: (state) => {
     return state.open.list;
   },

src/store/modules/order/index.ts

@@ -15,6 +15,7 @@ const orderModule: Module<OrderState, RootState> = {
       list: {},
       total: 0
     },
+    otherItem:{},
     packed: {
       list: {},
       total: 0