Improved: added support for showing completed returns and updated det…

…ails page respectively (hotwax#380)
amansinghbais · Aug 21, 2024 · ed1881a · ed1881a
1 parent a193f0a
commit ed1881a
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 15 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -139,7 +139,6 @@
   "There are no purchase orders to receive": "There are no purchase orders to receive",
   "There are no returns to receive": "There are no returns to receive",
   "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.": "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.",
-  "This return has been and cannot be edited.": "This return has been {status} and cannot be edited.",
   "Timezone": "Timezone",
   "Time zone updated successfully": "Time zone updated successfully",
   "To close the purchase order, select all.": "To close the purchase order, select all.",

diff --git a/src/views/PurchaseOrders.vue b/src/views/PurchaseOrders.vue
@@ -8,7 +8,7 @@
       <div>
         <ion-searchbar :placeholder="translate('Search purchase orders')" v-model="queryString" @keyup.enter="queryString = $event.target.value; getPurchaseOrders()" />
 
-        <ion-segment v-model="selectedSegment" @ionChange="segmentChanged($event)">
+        <ion-segment v-model="selectedSegment" @ionChange="segmentChanged()">
           <ion-segment-button value="open">
             <ion-label>{{ translate("Open") }}</ion-label>
           </ion-segment-button>

diff --git a/src/views/ReturnDetails.vue b/src/views/ReturnDetails.vue
@@ -25,10 +25,10 @@
 
         <div class="scanner">
           <ion-item>
-            <ion-input :label="translate('Scan items')" autofocus :placeholder="translate('Scan barcodes to receive them')" v-model="queryString" @keyup.enter="updateProductCount()" />
+            <ion-input :label="translate(isReturnReceivable(current.statusId) ? 'Scan items' : 'Search items')" autofocus v-model="queryString" @keyup.enter="isReturnReceivable(current.statusId) ? updateProductCount() : searchProduct()" />
           </ion-item>
 
-          <ion-button expand="block" fill="outline" @click="scanCode()">
+          <ion-button expand="block" fill="outline" @click="scanCode()" :disabled="!isReturnReceivable(current.statusId)">
             <ion-icon slot="start" :icon="barcodeOutline" />{{ translate("Scan") }}
           </ion-button>
         </div>
@@ -157,10 +157,8 @@ export default defineComponent({
   },
   async ionViewWillEnter() {
     const current = await this.store.dispatch('return/setCurrent', { shipmentId: this.$route.params.id })
-
-    if(!this.isReturnReceivable(current.statusId)) {
-      showToast(translate("This return has been and cannot be edited.", { status: current?.statusDesc?.toLowerCase() }));
-    }
+    console.log(this.current);
+    
   },
   computed: {
     ...mapGetters({
@@ -280,6 +278,24 @@ export default defineComponent({
       });
       return modal.present();
     },
+    searchProduct() {
+      if(!this.queryString) {
+        showToast(translate("Please provide a valid barcode identifier."))
+        return;
+      }
+      const scannedElement = document.getElementById(this.queryString);
+      if(scannedElement) {
+        this.lastScannedId = this.queryString
+        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: this.queryString }));
+      }
+      this.queryString = ''
+    }
   }, 
   setup() {
     const store = useStore(); 

diff --git a/src/views/Returns.vue b/src/views/Returns.vue
@@ -5,11 +5,22 @@
         <ion-menu-button slot="start" />
         <ion-title>{{ translate("Returns") }}</ion-title>
       </ion-toolbar>
+
+      <div>
+        <ion-searchbar :placeholder="translate('Search returns')" v-model="queryString" @keyup.enter="queryString = $event.target.value; getReturns()" />
+
+        <ion-segment v-model="selectedSegment" @ionChange="segmentChanged()">
+          <ion-segment-button value="open">
+            <ion-label>{{ translate("Open") }}</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="completed">
+            <ion-label>{{ translate("Completed") }}</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
     </ion-header>
     <ion-content>
       <main>
-        <ion-searchbar :placeholder="translate('Search returns')" v-model="queryString" @keyup.enter="queryString = $event.target.value; getReturns()" />
-
         <ReturnListItem v-for="returnShipment in returns" :key="returnShipment.shipmentId" :returnShipment="returnShipment" />
 
         <div v-if="returns.length" class="load-more-action ion-text-center">
@@ -44,11 +55,14 @@ import {
   IonContent,
   IonHeader,
   IonIcon,
+  IonLabel,
   IonMenuButton,
   IonPage,
   IonRefresher,
   IonRefresherContent,
   IonSearchbar,
+  IonSegment,
+  IonSegmentButton,
   IonTitle,
   IonToolbar
 } from '@ionic/vue';
@@ -65,11 +79,14 @@ export default defineComponent({
     IonContent,
     IonHeader,
     IonIcon,
+    IonLabel,
     IonMenuButton,
     IonSearchbar,
     IonPage,
     IonRefresher,
     IonRefresherContent,
+    IonSegment,
+    IonSegmentButton,
     IonTitle,
     IonToolbar,
     ReturnListItem
@@ -84,7 +101,8 @@ export default defineComponent({
     return {
       queryString: '',
       fetchingReturns: false,
-      showErrorMessage: false
+      showErrorMessage: false,
+      selectedSegment: "open"
     }
   },
   mounted () {
@@ -102,7 +120,9 @@ export default defineComponent({
       const payload = {
         "entityName": "SalesReturnShipmentView",
         "inputFields": {
-          "destinationFacilityId": this.currentFacility.facilityId
+          "destinationFacilityId": this.currentFacility.facilityId,
+          "statusId": "PURCH_SHIP_RECEIVED",
+          "statusId_op": this.selectedSegment === "open" ? "notEqual" : "equals"
         },
         "fieldList" : [ "shipmentId","externalId","statusId","shopifyOrderName","hcOrderId","trackingCode", "destinationFacilityId" ],
         "noConditionFind": "Y",
@@ -146,6 +166,9 @@ export default defineComponent({
         if (event) event.target.complete();
       })
     },
+    segmentChanged() {
+      this.getReturns();
+    }
   },
   setup() {
     const store = useStore();
@@ -157,4 +180,12 @@ export default defineComponent({
     }
   }
 })
-</script>
+</script>
+
+<style scoped>
+@media (min-width: 991px) {
+  ion-header > div {
+    display: flex;
+  }
+}
+</style>
diff --git a/src/views/Shipments.vue b/src/views/Shipments.vue
@@ -9,7 +9,7 @@
       <div>
         <ion-searchbar :placeholder="translate('Search')" v-model="queryString" @keyup.enter="queryString = $event.target.value; getShipments();" />
 
-        <ion-segment v-model="selectedSegment" @ionChange="segmentChanged($event)">
+        <ion-segment v-model="selectedSegment" @ionChange="segmentChanged()">
           <ion-segment-button value="open">
             <ion-label>{{ translate("Open") }}</ion-label>
           </ion-segment-button>
@@ -161,7 +161,7 @@ export default defineComponent({
         if (event) event.target.complete();
       })
     },
-    segmentChanged(event: any) {
+    segmentChanged() {
       this.getShipments()
     }
   },