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

src/components/InventoryDetailsPopover.vue

@@ -4,19 +4,19 @@
       <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-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

@@ -15,7 +15,7 @@
         <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,20 +52,20 @@ 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',
     })
   },
+  async beforeMount () {
+    await this.store.dispatch('stock/fetchInventoryCount', { productId: this.item.productId });
+  },
   methods: {
+
     async fetchProductStock(productId: string) {
       this.isFetchingStock = true
       await this.store.dispatch('stock/fetchStock', { productId })
@@ -76,10 +76,9 @@ export default defineComponent({
       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

@@ -197,6 +197,7 @@
   "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",
   "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

@@ -195,6 +195,7 @@
   "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",
   "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

@@ -194,6 +194,7 @@
   "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",
   "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

src/store/modules/order/mutation-types.ts

@@ -1,6 +1,7 @@
 export const SN_ORDER = 'order'
 export const ORDER_CURRENT_UPDATED = SN_ORDER + '/CURRENT_UPDATED'
 export const ORDER_OPEN_UPDATED = SN_ORDER + '/OPEN_UPDATED'
+export const OTHER_ITEM_UPDATED = SN_ORDER + '/OTHER_ITEM_UPDATED'
 export const ORDER_PACKED_UPDATED = SN_ORDER + '/PACKED_UPDATED'
 export const ORDER_COMPLETED_UPDATED = SN_ORDER + '/COMPLETED_UPDATED'
 export const ORDER_SHIP_TO_STORE_INCOMING_UPDATED = SN_ORDER + '/SHIP_TO_STORE_INCOMING_UPDATED'

src/store/modules/order/mutations.ts

@@ -3,6 +3,9 @@ import ProductState from './OrderState'
 import * as types from './mutation-types'
 
 const mutations: MutationTree <ProductState> = {
+  [types.OTHER_ITEM_UPDATED] (state, payload){
+    state.otherItem = payload.orders
+  },
   [types.ORDER_OPEN_UPDATED] (state , payload ) {
     state.open.list = payload.orders
     state.open.total = payload.total
@@ -35,4 +38,4 @@ const mutations: MutationTree <ProductState> = {
   }
 }
 
-export default mutations;
+export default mutations;

src/store/modules/stock/StockState.ts

@@ -1,3 +1,4 @@
 export default interface StockState {
   products: any;
+  inventoryInformation: any;
 }