Merge pull request #364 from amansinghbais/324-add-product-on-scan

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

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",
@@ -59,6 +60,7 @@
   "Password": "Password",
   "Pending: item": "Pending: {itemsCount} item",
   "Pending: items": "Pending: {itemsCount} items",
+  "Please provide a valid SKU.": "Please provide a valid SKU.",
   "primary identifier": "primary identifier",
   "Primary Product Identifier": "Primary Product Identifier",
   "Proceed": "Proceed",

src/store/modules/order/actions.ts

@@ -46,10 +46,10 @@ const actions: ActionTree<OrderState, RootState> = {
     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 { isProductFound: true }
     }
+
+    return { isProductFound: false }
   },
   async addOrderItem ({ commit }, payload) {
     const product = { 

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 { isProductFound: true }
     }
+
+    return { isProductFound: false }
   },
   async setCurrent ({ commit }, payload) {
     let resp;

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) => {

src/views/AddProductModal.vue

@@ -85,9 +85,10 @@ export default defineComponent({
   },
   data() {
     return {
-      queryString: ''
+      queryString: this.selectedSKU ? 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;

src/views/AddProductToPOModal.vue

@@ -84,9 +84,10 @@ export default defineComponent({
   },
   data() {
     return {
-      queryString: ''
+      queryString: this.selectedSKU ? 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;

src/views/PurchaseOrderDetail.vue

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

src/views/ShipmentDetails.vue

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