Implemented: functionality to allow user to add product on scanning (#…

…324)
hotwax · Mar 22, 2024 · 88b1428 · 88b1428
1 parent d53dcca
commit 88b1428
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 20 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1,4 +1,5 @@
 {
+  "Add": "Add",
   "Add a product": "Add a product",
   "Add to Purchase Order": "Add to Purchase Order",
   "Add to Shipment": "Add to Shipment",

diff --git a/src/store/modules/order/actions.ts b/src/store/modules/order/actions.ts
@@ -43,13 +43,13 @@ const actions: ActionTree<OrderState, RootState> = {
   async updateProductCount({ commit, state }, payload ) {
     const item = state.current.items.find((item: any) => item.internalName === payload);
 
-    if (item) {
+    if(item) {
       item.quantityAccepted = item.quantityAccepted ? parseInt(item.quantityAccepted) + 1 : 1;
       commit(types.ORDER_CURRENT_UPDATED, state.current )
-      showToast(translate("Scanned successfully.", { itemName: payload }))
-    } else {
-      showToast(translate("Scanned item is not present within the shipment:", { itemName: payload }))
+      return { isUpdated: true, itemName: payload }
     }
+
+    return { isUpdated: false, itemName: payload }
   },
   async addOrderItem ({ commit }, payload) {
     const product = { 

diff --git a/src/store/modules/shipment/actions.ts b/src/store/modules/shipment/actions.ts
@@ -48,10 +48,10 @@ const actions: ActionTree<ShipmentState, RootState> = {
     if (item) {
       item.quantityAccepted = item.quantityAccepted ? parseInt(item.quantityAccepted) + 1 : 1;
       commit(types.SHIPMENT_CURRENT_UPDATED, state);
-      showToast(translate("Scanned successfully.", { itemName: payload }))
-    } else {
-      showToast(translate("Scanned item is not present within the shipment:", { itemName: payload }))
+      return { isUpdated: true, itemName: payload }
     }
+
+    return { isUpdated: false, itemName: payload }
   },
   async setCurrent ({ commit }, payload) {
     let resp;

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -11,14 +11,28 @@ const hasError = (response: any) => {
   return typeof response.data != "object" || !!response.data._ERROR_MESSAGE_ || !!response.data._ERROR_MESSAGE_LIST_ || !!response.data.error;
 }
 
-const showToast = async (message: string) => {
-  const toast = await toastController
-    .create({
-      message,
-      duration: 3000,
-      position: 'bottom',
-    })
-  return toast.present();
+const showToast = async (message: string, options?: any) => {
+  const config = {
+    message,
+    ...options
+  } as any;
+
+  if(!options?.position) config.position = 'bottom';
+
+  if(options?.canDismiss) {
+    config.buttons = [
+      {
+        text: translate('Dismiss'),
+        role: 'cancel',
+      },
+    ]
+  }
+
+  if(!options?.manualDismiss && !options?.duration) config.duration = 3000;
+
+  const toast = await toastController.create(config)
+  // present toast if manual dismiss is not needed
+  return !options?.manualDismiss ? toast.present() : toast
 }
 
 const copyToClipboard = async (value: string, text?: string) => {

diff --git a/src/views/AddProductModal.vue b/src/views/AddProductModal.vue
@@ -85,9 +85,10 @@ export default defineComponent({
   },
   data() {
     return {
-      queryString: ''
+      queryString: this.selectedSKU
     }
   },
+  props: ["selectedSKU"],
   computed: {
     ...mapGetters({
       products: 'product/getProducts',
@@ -98,6 +99,9 @@ export default defineComponent({
       facilityLocationsByFacilityId: 'user/getFacilityLocationsByFacilityId'
     })
   },
+  mounted() {
+    if(this.selectedSKU) this.getProducts()
+  },
   methods: {
     async getProducts( vSize?: any, vIndex?: any) {
       const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;

diff --git a/src/views/AddProductToPOModal.vue b/src/views/AddProductToPOModal.vue
@@ -84,9 +84,10 @@ export default defineComponent({
   },
   data() {
     return {
-      queryString: ''
+      queryString: this.selectedSKU
     }
   },
+  props: ["selectedSKU"],
   computed: {
     ...mapGetters({
       products: 'product/getProducts',
@@ -97,6 +98,9 @@ export default defineComponent({
       facilityLocationsByFacilityId: 'user/getFacilityLocationsByFacilityId'
     })
   },
+  mounted() {
+    if(this.selectedSKU) this.getProducts()
+  },
   methods: {
     async getProducts( vSize?: any, vIndex?: any) {
       const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;

diff --git a/src/views/PurchaseOrderDetail.vue b/src/views/PurchaseOrderDetail.vue
@@ -190,6 +190,7 @@ import LocationPopover from '@/components/LocationPopover.vue'
 import ImageModal from '@/components/ImageModal.vue';
 import { copyToClipboard, hasError, productHelpers } from '@/utils';
 import { Actions, hasPermission } from '@/authorization'
+import { showToast } from '@/utils';
 
 export default defineComponent({
   name: "PurchaseOrderDetails",
@@ -258,7 +259,30 @@ export default defineComponent({
     },
     async updateProductCount(payload: any) {
       if(this.queryString) payload = this.queryString
-      this.store.dispatch('order/updateProductCount', payload)
+      const result = await this.store.dispatch('order/updateProductCount', payload)
+
+      if(result.isUpdated) {
+        showToast(translate("Scanned successfully.", { itemName: result.itemName }))
+      } else {
+        showToast(translate("Scanned item is not present within the shipment:", { itemName: result.itemName }), {
+          buttons: [{
+            text: translate('Add'),
+            handler: async() => {
+              const modal = await modalController.create({
+                component: AddProductToPOModal,
+                componentProps: { selectedSKU: result.itemName }
+              })
+
+              modal.onDidDismiss().then(() => {
+                this.store.dispatch('product/clearSearchedProducts');
+              })
+
+              return modal.present();
+            }
+          }],
+          duration: 5000
+        })
+      }
     },
     getPOItems(orderType: string) {
       if(orderType === 'completed'){

diff --git a/src/views/ShipmentDetails.vue b/src/views/ShipmentDetails.vue
@@ -243,9 +243,32 @@ export default defineComponent({
         }
       })
     },
-    updateProductCount(payload: any){
+    async updateProductCount(payload: any){
       if(this.queryString) payload = this.queryString
-      this.store.dispatch('shipment/updateShipmentProductCount', payload)
+      const result = await this.store.dispatch('shipment/updateShipmentProductCount', payload)
+
+      if(result.isUpdated) {
+        showToast(translate("Scanned successfully.", { itemName: result.itemName }))
+      } else {
+        showToast(translate("Scanned item is not present within the shipment:", { itemName: result.itemName }), {
+          buttons: [{
+            text: translate('Add'),
+            handler: async () => {
+              const modal = await modalController.create({
+                component: AddProductModal,
+                componentProps: { selectedSKU: result.itemName }
+              })
+
+              modal.onDidDismiss().then(() => {
+                this.store.dispatch('product/clearSearchedProducts')
+              })
+
+              return modal.present();
+            }
+          }],
+          duration: 5000
+        })
+      }
     },
     async scanCode () {
       const modal = await modalController