Merge pull request #15 from disha1202/#2335ca9

Implemented logic to display toast for success/error after upload act…

changelogs/unreleased/-2335ca9.yml

@@ -0,0 +1,6 @@
+---
+title: Implemented logic to display toast for success/error after upload action
+ticket_id: "#2335ca9"
+merge_request: 15
+author: Disha Talreja
+type: added

src/locales/en.json

@@ -14,6 +14,7 @@
   "Dismiss": "Dismiss",
   "Facility": "Facility",
   "Facility ID": "Facility ID",
+  "File uploaded successfully": "File uploaded successfully",
   "Import": "Import",
   "Instance Url": "Instance Url",
   "Lead time": "Lead time",
@@ -40,6 +41,7 @@
   "Select time zone": "Select time zone",
   "Select the column index for the following information in the uploaded CSV.": "Select the column index for the following information in the uploaded CSV.",
   "Something went wrong": "Something went wrong",
+  "Something went wrong, Please try again": "Something went wrong, Please try again",
   "Sorry, your username or password is incorrect. Please try again.": "Sorry, your username or password is incorrect. Please try again.",
   "Select CSV": "Select CSV",
   "Settings": "Settings",
@@ -48,6 +50,7 @@
   "Start with Ionic": "Start with Ionic",
   "Store": "Store",
   "store name": "store name",
+  "The PO has been uploaded successfully": "The PO has been uploaded successfully",
   "Time zone updated successfully": "Time zone updated successfully",
   "UI Components": "UI Components",
   "Update time zone": "Update time zone",

src/store/modules/order/actions.ts

@@ -18,9 +18,9 @@ const actions: ActionTree<OrderState, RootState> = {
       viewIndex,
       productIds
     }
-    const resp = await store.dispatch("product/fetchProducts", payload);
+    const products = await store.dispatch("product/fetchProducts", payload);
     items = items.map((item: any) => {
-        const product = resp.data.response.docs.find((product: any) => {
+        const product = products.find((product: any) => {
           return item.shopifyProductSKU == product.internalName;
         })
         item.parentProductId = product.groupId;

src/store/modules/product/actions.ts

@@ -24,7 +24,7 @@ const actions: ActionTree<ProductState, RootState> = {
     }, '');
 
     // If there are no products skip the API call
-    if (productIdFilter === '') return;
+    if (productIdFilter === '') return productIds.map((productId: any) => state.cached[productId]);
 
     const resp = await ProductService.fetchProducts({
       "filters": ['internalName: (' + productIdFilter + ')']
@@ -33,6 +33,7 @@ const actions: ActionTree<ProductState, RootState> = {
       const products = resp.data.response.docs;
       // Handled empty response in case of failed query
       if (resp.data) commit(types.PRODUCT_ADD_TO_CACHED_MULTIPLE, { products });
+      return products;
     }
     // TODO Handle specific error
     return resp;

src/utils/index.ts

@@ -9,12 +9,20 @@ const hasError = (response: any) => {
   return !!response.data._ERROR_MESSAGE_ || !!response.data._ERROR_MESSAGE_LIST_;
 }
 
-const showToast = async (message: string) => {
+const showToast = async (message: string, configButtons?: any) => {
+  const defaultButtons = [{
+    text: 'Dismiss',
+    role: 'cancel'
+  }]
+
+  if (configButtons) defaultButtons.push(...configButtons);
+
   const toast = await toastController
     .create({
-      message,
+      message: message,
       duration: 3000,
       position: 'top',
+      buttons: defaultButtons
     })
   return toast.present();
 }

src/views/OrderDetail.vue

@@ -104,6 +104,8 @@ import { defineComponent } from 'vue';
 import { mapGetters, useStore } from "vuex";
 import { useRouter } from 'vue-router';
 import { DateTime } from 'luxon';
+import { showToast } from '@/utils';
+import { translate } from "@/i18n";
 import { IonPage, IonHeader, IonToolbar, IonBackButton, IonTitle, IonContent, IonSearchbar, IonItem, IonThumbnail, IonLabel, IonInput, IonChip, IonIcon, IonButton, IonCheckbox, IonSelect, IonSelectOption, IonButtons, popoverController, IonFab, IonFabButton } from '@ionic/vue'
 import { ellipsisVerticalOutline, sendOutline, checkboxOutline, arrowUndoOutline, cloudUploadOutline } from 'ionicons/icons'
 import { hasError } from "@/utils";
@@ -135,6 +137,7 @@ export default defineComponent({
     ...mapGetters({
       ordersList: 'order/getOrder',
       getProduct: 'product/getProduct',
+      instanceUrl: 'user/getInstanceUrl'
     }),
     orderId(){
       return (this as any).ordersList.items[0]?.orderId
@@ -154,8 +157,10 @@ export default defineComponent({
   },
   methods: {
     async save(){
-      const uploadData = this.ordersList.items.map((item: any) => {
-        return { 
+      const uploadData = this.ordersList.items.filter((item: any) => {
+       return item.isSelected;
+      }).map((item: any) => {
+        return {
           "poId": " ",
           "externalId": item.orderId,
           "facilityId": "",
@@ -175,7 +180,20 @@ export default defineComponent({
         uploadData,
         fileName,
         params
-      }));
+      }))
+      .then(() => {
+        showToast(translate("The PO has been uploaded successfully"), [{
+          text: translate('View'),
+          role: 'view',
+          handler: () => {
+            window.location.href = `https://${this.instanceUrl}.hotwax.io/commerce/control/ImportData?configId=IMP_PO`
+          }
+        }])
+        this.ordersList = [];
+        this.router.push("/purchase-order");
+      }).catch(() => {
+        showToast(translate("Something went wrong, please try again"));
+      })
     },
     async fetchFacilities(){
       const payload = {
@@ -221,7 +239,6 @@ export default defineComponent({
     },
     apply() {
       this.ordersList.items.map((item: any) => {
-        console.log(this.catalog);
         if (item.isSelected) {
           item.quantityOrdered -= this.numberOfPieces;
           item.arrivalDate = DateTime.fromFormat(item.arrivalDate, "D").plus({ days: this.numberOfDays }).toFormat('MM/dd/yyyy');

src/views/PurchaseOrder.vue

@@ -29,12 +29,6 @@
                 <ion-select-option v-bind:key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
               </ion-select>
           </ion-item>
-          <ion-item>
-              <ion-label>{{ $t("Shopify product UPC") }}</ion-label>
-              <ion-select v-if="content.length" :placeholder = "$t('Select')" v-model="productUpcField">
-                <ion-select-option v-bind:key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
-              </ion-select>
-          </ion-item>
           <ion-item>
               <ion-label>{{ $t("Arrival date") }}</ion-label>
               <ion-select v-if="content.length" :placeholder = "$t('Select')" v-model="dateField">
@@ -63,10 +57,11 @@
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonLabel, IonNote, IonButton, IonSelect, IonSelectOption } from "@ionic/vue";
 import { defineComponent } from "vue";
 import { useRouter } from 'vue-router';
-import { parseCsv } from '@/utils';
 import { useStore } from "vuex";
+import { showToast, parseCsv } from '@/utils';
+import { translate } from "@/i18n";
 export default defineComponent({
-    name: " purchase orders",
+    name: "purchase orders",
     components: {
       IonPage,
       IonHeader,
@@ -96,7 +91,13 @@ export default defineComponent({
     methods: {
       getFile(event) {
         this.file = event.target.files[0];
-        this.parseFile();
+        if(this.file){
+          showToast(translate("File uploaded successfully"));
+          this.parseFile();
+        }
+        else {
+          showToast(translate("Something went wrong, Please try again"));
+        }
       },
       async parseFile(){
         await parseCsv(this.file).then(res => {
@@ -126,7 +127,7 @@ export default defineComponent({
           name:'PurchaseOrderDetail'
         })
       },
-    }, 
+    },
     setup() {
     const router = useRouter();
     const store = useStore();