Improved: code to remove highlight from product after some time and on click on other products, moved lastScannedId to state (#198)

src/components/Picklist-detail-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <ion-item :id="picklistItem.id" :class="picklistItem.id === lastScannedId ? 'scanned-item' : '' " :key="picklistItem.id" v-for="picklistItem in picklistItems"  @click="picklistItem.isChecked = !picklistItem.isChecked" lines="none" >
+  <ion-item :id="picklistItem.id" :class="picklistItem.id === lastScannedId ? 'scanned-item' : '' " :key="picklistItem.id" v-for="picklistItem in picklistItems"  @click="picklistItem.isChecked = !picklistItem.isChecked; clearLastScannedId()" lines="none" >
     <ion-thumbnail slot="start">
       <DxpShopifyImg :src="getProduct(picklistItem.productId).mainImageUrl" size="small" />
     </ion-thumbnail>  
@@ -30,12 +30,18 @@ export default defineComponent({
     IonThumbnail,
     DxpShopifyImg
   },
-  props: ['picklistItems', 'lastScannedId'],
+  props: ['picklistItems'],
   computed: {
     ...mapGetters({
-      getProduct: 'product/getProduct'
+      getProduct: 'product/getProduct',
+      lastScannedId: 'picklist/getLastScannedId',
     }),
   },
+  methods: {
+    clearLastScannedId() {
+      this.store.dispatch("picklist/updateLastScannedId", "")
+    }
+  },
   setup() {
     const store = useStore(); 
     const productIdentificationStore = useProductIdentificationStore();

src/components/Picklist-item.vue

@@ -25,6 +25,7 @@ export default defineComponent({
   props: ['picklists'],
   methods: {
     async viewPicklist (picklist: any) {
+      this.store.dispatch("picklist/updateLastScannedId", "")
       // if current is not set promise.reject returns which will not allow further code execution
       // and hence, router.push will not execute stopping the code from breaking
       await this.store.dispatch('picklist/setCurrentPicklist', { id: picklist.picklistId })

src/store/modules/picklist/PicklistState.ts

@@ -9,4 +9,5 @@ export default interface PicklistState {
     total: any
   };
   filters: any;
+  lastScannedId: string;
 }

src/store/modules/picklist/actions.ts

@@ -139,7 +139,7 @@
   /**
    * Complete Picklist
    */
   async completePicklist ({ commit }, payload) {
     let resp;
 
     try {
@@ -170,6 +170,10 @@
   clearPicklist ({ commit }) {
     commit(types.PICKLISTS_UPDATED, { list: [], total: 0 })
     commit(types.PICKLISTS_COMPLETED_UPDATED, { list: [], total: 0 })
+  },
+
+  updateLastScannedId ({ commit }, id) {
+    commit(types.PICKLIST_LAST_SCANNED_ID_UPDATED, id)
   }
 }
 export default actions;

src/store/modules/picklist/getters.ts

@@ -20,6 +20,9 @@ const getters: GetterTree <PicklistState, RootState> = {
   },
   showMyPicklists(state) {
     return state.filters.showMyPicklists;
+  },
+  getLastScannedId(state) {
+    return state.lastScannedId;
   }
 }
 export default getters;

src/store/modules/picklist/index.ts

@@ -21,7 +21,8 @@ const picklistModule: Module<PicklistState, RootState> = {
       // enabling picklist filters by default
       hideCompletedPicklists: true,
       showMyPicklists: true
-    }
+    },
+    lastScannedId: ''
   },
   getters,
   mutations,

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

@@ -3,3 +3,4 @@ export const PICKLISTS_UPDATED = SN_PICKLIST + '/UPDATED'
 export const PICKLISTS_COMPLETED_UPDATED = SN_PICKLIST + '/COMPLETED'
 export const PICKLIST_CURRENT_UPDATED = SN_PICKLIST + '/CURRENT_UPDATED'
 export const PICKLIST_FILTERS_UPDATED = SN_PICKLIST + '/FILTERS_UPDATED'
+export const PICKLIST_LAST_SCANNED_ID_UPDATED = SN_PICKLIST + '/LAST_SCANNED_ID_UPDATED'

src/store/modules/picklist/mutations.ts

@@ -16,6 +16,9 @@ const mutations: MutationTree <PicklistState> = {
   },
   [types.PICKLIST_FILTERS_UPDATED] (state, payload) {
     state.filters = { ...state.filters, ...payload };
+  },
+  [types.PICKLIST_LAST_SCANNED_ID_UPDATED] (state, payload) {
+    state.lastScannedId = payload
   }
 }
 export default mutations;

src/views/Picklist-Detail.vue

@@ -39,7 +39,7 @@
           <ion-item-divider>
             <ion-label> {{ picklist.sortBy }}</ion-label>
           </ion-item-divider>
-          <PicklistDetailItem :lastScannedId="lastScannedId" :picklistItems="picklist.record"/>
+          <PicklistDetailItem :picklistItems="picklist.record"/>
         </ion-item-group>
       </ion-list>
      </ion-content>
@@ -128,7 +128,6 @@ export default defineComponent({
   data() {
     return {
       picklistGroup: [],
-      lastScannedId: '',
       sortOptions: JSON.parse(process.env.VUE_APP_PICKLISTS_SORT_OPTIONS)
     }
   },
@@ -185,12 +184,17 @@ export default defineComponent({
       const item = this.picklist.pickingItemList.find((product) => product.productId === productId && !product.isChecked)
       if (item) {
         item.isChecked = true;
-        this.lastScannedId = item.id;
+        this.store.dispatch("picklist/updateLastScannedId", item.id)
         // Highlight specific element
         const scannedElement = document.getElementById(item.id);
         scannedElement && (scannedElement.scrollIntoView());
+
+        // Scanned product should get un-highlighted after 3s for better experience hence adding setTimeOut
+        setTimeout(() => {
+          this.store.dispatch("picklist/updateLastScannedId", "")
+        }, 3000)
       } else {
-        this.lastScannedId = "";
+        this.store.dispatch("picklist/updateLastScannedId", "")
         showToast(translate("Product not found in remaining items"))
       }
     },

src/views/Settings.vue

@@ -157,6 +157,7 @@ export default defineComponent({
     logout () {
       this.store.dispatch('user/logout', { isUserUnauthorised: false }).then((redirectionUrl) => {
         this.store.dispatch('picklist/clearPicklist')
+        this.store.dispatch("picklist/updateLastScannedId", "")
 
         // if not having redirection url then redirect the user to launchpad
         if(!redirectionUrl) {