Merge pull request #368 from amansinghbais/367-barcode-scanner

Improved: logic to clear the scanned SKU from the ion-input once successfully scanned and highlight scanned items (#367)

src/store/modules/order/actions.ts

@@ -44,6 +44,8 @@ const actions: ActionTree<OrderState, RootState> = {
     const item = state.current.items.find((item: any) => item.internalName === payload);
 
     if (item) {
+      if(item.orderItemStatusId === 'ITEM_COMPLETED') return { isCompleted: true }
+
       item.quantityAccepted = item.quantityAccepted ? parseInt(item.quantityAccepted) + 1 : 1;
       commit(types.ORDER_CURRENT_UPDATED, state.current )
       return { isProductFound: true }

src/store/modules/return/actions.ts

@@ -38,10 +38,10 @@ const actions: ActionTree<ReturnState, RootState> = {
     if (item) {
       item.quantityAccepted = item.quantityAccepted ? parseInt(item.quantityAccepted) + 1 : 1;
       commit(types.RETURN_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, state }, payload) {
     let resp;

src/views/PurchaseOrderDetail.vue

@@ -48,7 +48,7 @@
           </ion-label>
         </ion-item>
 
-        <ion-card v-for="(item, index) in getPOItems('pending')" v-show="item.orderItemStatusId !== 'ITEM_COMPLETED' && item.orderItemStatusId !== 'ITEM_REJECTED'" :key="index">
+        <ion-card v-for="(item, index) in getPOItems('pending')" v-show="item.orderItemStatusId !== 'ITEM_COMPLETED' && item.orderItemStatusId !== 'ITEM_REJECTED'" :key="index" :class="item.internalName === lastScannedId ? 'scanned-item' : '' " :id="item.internalName">
           <div  class="product">
             <div class="product-info">
               <ion-item lines="none">
@@ -219,7 +219,8 @@ export default defineComponent({
   data() {
     return {
       queryString: '',
-      showCompletedItems: false
+      showCompletedItems: false,
+      lastScannedId: ''
     }
   },
   computed: {
@@ -265,8 +266,19 @@ export default defineComponent({
       }
       const result = await this.store.dispatch('order/updateProductCount', payload)
 
-      if (result.isProductFound) {
+      if(result.isCompleted) {
+        showToast(translate("Scanned item is not present within the shipment:", { itemName: payload }))
+      } else if(result.isProductFound) {
         showToast(translate("Scanned successfully.", { itemName: payload }))
+        this.lastScannedId = payload
+        // Highlight specific element
+        const scannedElement = document.getElementById(payload);
+        scannedElement && (scannedElement.scrollIntoView());
+
+        // Scanned product should get un-highlighted after 3s for better experience hence adding setTimeOut
+        setTimeout(() => {
+          this.lastScannedId = ''
+        }, 3000)
       } else {
         showToast(translate("Scanned item is not present within the shipment:", { itemName: payload }), {
           buttons: [{
@@ -287,6 +299,7 @@ export default defineComponent({
           duration: 5000
         })
       }
+      this.queryString = ''
     },
     getPOItems(orderType: string) {
       if(orderType === 'completed'){
@@ -429,6 +442,14 @@ ion-thumbnail {
   cursor: pointer;
 } 
 
+.scanned-item {
+  /*
+    Todo: used outline for highliting items for now, need to use border
+    Done this because currently ion-item inside ion-card is not inheriting highlighted background property.
+  */
+  outline: 2px solid var( --ion-color-medium-tint);
+}
+
 @media (min-width: 720px) {
   .doc-id {
     display: flex;

src/views/ReturnDetails.vue

@@ -33,7 +33,7 @@
           </ion-button>
         </div>
 
-        <ion-card v-for="item in current.items" :key="item.id">
+        <ion-card v-for="item in current.items" :key="item.id" :class="item.sku === lastScannedId ? 'scanned-item' : ''" :id="item.sku">
           <div class="product">
             <div class="product-info">
               <ion-item lines="none">
@@ -151,7 +151,8 @@ export default defineComponent({
         'Cancelled': 'danger',
         'Shipped': 'medium',
         'Created': 'medium'
-      } as any
+      } as any,
+      lastScannedId: ''
     }
   },
   async ionViewWillEnter() {
@@ -244,11 +245,27 @@ export default defineComponent({
         }
       })
     },
-    updateProductCount(payload?: any){
+    async updateProductCount(payload?: any){
       if(this.queryString) payload = this.queryString
       // if not a valid status, skip updating the qunatity
       if(!this.isReturnReceivable(this.current.statusId)) return;
-      this.store.dispatch('return/updateReturnProductCount', payload)
+
+      const result = await this.store.dispatch('return/updateReturnProductCount', payload)
+
+      if(result.isProductFound) {
+        showToast(translate("Scanned successfully.", { itemName: payload }))
+        this.lastScannedId = payload
+        const scannedElement = document.getElementById(payload);
+        scannedElement && (scannedElement.scrollIntoView());
+
+        // Scanned product should get un-highlighted after 3s for better experience hence adding setTimeOut
+        setTimeout(() => {
+          this.lastScannedId = ''
+        }, 3000)
+      } else {
+        showToast(translate("Scanned item is not present within the shipment:", { itemName: payload }))
+      }
+      this.queryString = ''
     },
     async scanCode () {
       const modal = await modalController
@@ -287,5 +304,13 @@ export default defineComponent({
   ion-thumbnail {
     cursor: pointer;
   }
+
+  .scanned-item {
+    /*
+      Todo: used outline for highliting items for now, need to use border
+      Done this because currently ion-item inside ion-card is not inheriting highlighted background property.
+    */
+    outline: 2px solid var( --ion-color-medium-tint);
+  }
 </style>
 

src/views/ShipmentDetails.vue

@@ -31,7 +31,7 @@
           </ion-button>
         </div>
 
-        <ion-card v-for="item in current.items" :key="item.id">
+        <ion-card v-for="item in current.items" :key="item.id" :class="item.sku === lastScannedId ? 'scanned-item' : ''" :id="item.sku">
           <div class="product">
             <div class="product-info">
               <ion-item lines="none">
@@ -152,7 +152,8 @@ export default defineComponent({
   props: ["shipment"],
   data() {
     return {
-      queryString: ''
+      queryString: '',
+      lastScannedId: ''
     }
   },
   mounted() {
@@ -252,8 +253,16 @@ export default defineComponent({
       }
       const result = await this.store.dispatch('shipment/updateShipmentProductCount', payload)
 
-      if (result.isProductFound) {
+      if(result.isProductFound) {
         showToast(translate("Scanned successfully.", { itemName: payload }))
+        this.lastScannedId = payload
+        const scannedElement = document.getElementById(payload);
+        scannedElement && (scannedElement.scrollIntoView());
+
+        // Scanned product should get un-highlighted after 3s for better experience hence adding setTimeOut
+        setTimeout(() => {
+          this.lastScannedId = ''
+        }, 3000)
       } else {
         showToast(translate("Scanned item is not present within the shipment:", { itemName: payload }), {
           buttons: [{
@@ -274,6 +283,7 @@ export default defineComponent({
           duration: 5000
         })
       }
+      this.queryString = ''
     },
     async scanCode () {
       const modal = await modalController
@@ -323,4 +333,12 @@ ion-thumbnail {
 .border-top {
   border-top: 1px solid #ccc;
 }
+
+.scanned-item {
+  /*
+    Todo: used outline for highliting items for now, need to use border
+    Done this because currently ion-item inside ion-card is not inheriting highlighted background property.
+  */
+  outline: 2px solid var( --ion-color-medium-tint);
+}
 </style>