From a2dd6c19d801bbfed83741f909dcc06074d3127c Mon Sep 17 00:00:00 2001 From: Disha Talreja Date: Tue, 8 Mar 2022 14:10:40 +0530 Subject: [PATCH 1/6] Implemented logic to display toast for success/error after upload action(#2335ca9) --- src/views/PurchaseOrder.vue | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/views/PurchaseOrder.vue b/src/views/PurchaseOrder.vue index 14dc07f4..6cb91aae 100644 --- a/src/views/PurchaseOrder.vue +++ b/src/views/PurchaseOrder.vue @@ -65,6 +65,8 @@ import { defineComponent } from "vue"; import { useRouter } from 'vue-router'; import { parseCsv } from '@/utils'; import { useStore } from "vuex"; +import { showToast } from '@/utils'; +import { translate } from "@/i18n"; export default defineComponent({ name: " purchase orders", components: { @@ -96,6 +98,12 @@ export default defineComponent({ methods: { getFile(event) { this.file = event.target.files[0]; + if(this.file){ + showToast(translate("File uploaded successfully")); + } + else { + showToast(translate("Something went wrong, Please try again")); + } this.parseFile(); }, async parseFile(){ From 13d115183edef39d92b2f045afe8da7cc5e6c9f5 Mon Sep 17 00:00:00 2001 From: Disha Talreja Date: Tue, 8 Mar 2022 14:14:02 +0530 Subject: [PATCH 2/6] Added changelog entry(#2335ca9) --- changelogs/unreleased/-2335ca9.yml | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 changelogs/unreleased/-2335ca9.yml diff --git a/changelogs/unreleased/-2335ca9.yml b/changelogs/unreleased/-2335ca9.yml new file mode 100644 index 00000000..c6325fe6 --- /dev/null +++ b/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 From 38c275d98fb00871bc163b1194a54cab30b962ea Mon Sep 17 00:00:00 2001 From: Disha Talreja Date: Tue, 8 Mar 2022 15:15:10 +0530 Subject: [PATCH 3/6] Improved the code and updated en.json file(#2335ca9) --- src/locales/en.json | 2 ++ src/views/PurchaseOrder.vue | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/locales/en.json b/src/locales/en.json index 10dd320a..5f6adf65 100644 --- a/src/locales/en.json +++ b/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", diff --git a/src/views/PurchaseOrder.vue b/src/views/PurchaseOrder.vue index 6cb91aae..326140a7 100644 --- a/src/views/PurchaseOrder.vue +++ b/src/views/PurchaseOrder.vue @@ -63,9 +63,8 @@ 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 } from '@/utils'; +import { showToast, parseCsv } from '@/utils'; import { translate } from "@/i18n"; export default defineComponent({ name: " purchase orders", @@ -100,11 +99,12 @@ export default defineComponent({ this.file = event.target.files[0]; if(this.file){ showToast(translate("File uploaded successfully")); + this.parseFile(); } else { showToast(translate("Something went wrong, Please try again")); } - this.parseFile(); + }, async parseFile(){ await parseCsv(this.file).then(res => { From d22776a35a36779bf0d0799b9d307f9f799444b0 Mon Sep 17 00:00:00 2001 From: Disha Talreja Date: Tue, 8 Mar 2022 17:47:21 +0530 Subject: [PATCH 4/6] Updated product action, removed unwanted code, added check to upload only selected products(2335ca9) --- src/locales/en.json | 1 + src/store/modules/order/actions.ts | 4 ++-- src/store/modules/product/actions.ts | 3 ++- src/views/OrderDetail.vue | 34 ++++++++++++++++++---------- src/views/PurchaseOrder.vue | 9 +------- 5 files changed, 28 insertions(+), 23 deletions(-) diff --git a/src/locales/en.json b/src/locales/en.json index 5f6adf65..726dd86c 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -50,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", diff --git a/src/store/modules/order/actions.ts b/src/store/modules/order/actions.ts index 356657f0..8e55d90e 100644 --- a/src/store/modules/order/actions.ts +++ b/src/store/modules/order/actions.ts @@ -18,9 +18,9 @@ const actions: ActionTree = { 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; diff --git a/src/store/modules/product/actions.ts b/src/store/modules/product/actions.ts index 2aa1485f..c944d873 100644 --- a/src/store/modules/product/actions.ts +++ b/src/store/modules/product/actions.ts @@ -24,7 +24,7 @@ const actions: ActionTree = { }, ''); // 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 = { 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; diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue index e07ea789..08365245 100644 --- a/src/views/OrderDetail.vue +++ b/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"; @@ -155,16 +157,18 @@ export default defineComponent({ methods: { async save(){ const uploadData = this.ordersList.items.map((item: any) => { - return { - "poId": " ", - "externalId": item.orderId, - "facilityId": "", - "externalFacilityId": item.facilityId, - "arrivalDate": item.arrivalDate, - "quantity": item.quantityOrdered, - "isNewProduct": item.isNewProduct, - "idValue": item.shopifyProductSKU, - "idType": "SKU" + if(item.isSelected){ + return { + "poId": " ", + "externalId": item.orderId, + "facilityId": "", + "externalFacilityId": item.facilityId, + "arrivalDate": item.arrivalDate, + "quantity": item.quantityOrdered, + "isNewProduct": item.isNewProduct, + "idValue": item.shopifyProductSKU, + "idType": "SKU" + } } }) const fileName = "Upload_PO_Member_" + Date.now() +".json"; @@ -175,7 +179,14 @@ export default defineComponent({ uploadData, fileName, params - })); + })) + .then(() => { + showToast(translate("The PO has been uploaded successfully")); + this.ordersList = []; + this.router.push("/purchase-order"); + }).catch(() => { + showToast(translate("Something went wrong, please try again")); + }) }, async fetchFacilities(){ const payload = { @@ -221,7 +232,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'); diff --git a/src/views/PurchaseOrder.vue b/src/views/PurchaseOrder.vue index 326140a7..e8256fa7 100644 --- a/src/views/PurchaseOrder.vue +++ b/src/views/PurchaseOrder.vue @@ -29,12 +29,6 @@ {{ prop }} - - {{ $t("Shopify product UPC") }} - - {{ prop }} - - {{ $t("Arrival date") }} @@ -104,7 +98,6 @@ export default defineComponent({ else { showToast(translate("Something went wrong, Please try again")); } - }, async parseFile(){ await parseCsv(this.file).then(res => { @@ -134,7 +127,7 @@ export default defineComponent({ name:'PurchaseOrderDetail' }) }, - }, + }, setup() { const router = useRouter(); const store = useStore(); From 3b3809b46241fe48c4111be10bd842bee5129f01 Mon Sep 17 00:00:00 2001 From: Disha Talreja Date: Tue, 8 Mar 2022 18:28:43 +0530 Subject: [PATCH 5/6] Implemented logic to navigate to import purchase order(#2335ca9) --- src/utils/index.ts | 12 ++++++++++-- src/views/OrderDetail.vue | 9 ++++++++- src/views/PurchaseOrder.vue | 2 +- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/utils/index.ts b/src/utils/index.ts index 7e6f2c9f..19948e20 100644 --- a/src/utils/index.ts +++ b/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(); } diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue index 08365245..36067f71 100644 --- a/src/views/OrderDetail.vue +++ b/src/views/OrderDetail.vue @@ -137,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 @@ -181,7 +182,13 @@ export default defineComponent({ params })) .then(() => { - showToast(translate("The PO has been uploaded successfully")); + 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(() => { diff --git a/src/views/PurchaseOrder.vue b/src/views/PurchaseOrder.vue index e8256fa7..c8758b33 100644 --- a/src/views/PurchaseOrder.vue +++ b/src/views/PurchaseOrder.vue @@ -61,7 +61,7 @@ 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, From b3ed82cf9b2f1f755ec77c8ce887e4cf4b8d8f72 Mon Sep 17 00:00:00 2001 From: Disha Talreja Date: Tue, 8 Mar 2022 18:42:26 +0530 Subject: [PATCH 6/6] Updated save method to upload only checked products(#2335ca9) --- src/views/OrderDetail.vue | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue index 36067f71..d1f1bb72 100644 --- a/src/views/OrderDetail.vue +++ b/src/views/OrderDetail.vue @@ -157,19 +157,19 @@ export default defineComponent({ }, methods: { async save(){ - const uploadData = this.ordersList.items.map((item: any) => { - if(item.isSelected){ - return { - "poId": " ", - "externalId": item.orderId, - "facilityId": "", - "externalFacilityId": item.facilityId, - "arrivalDate": item.arrivalDate, - "quantity": item.quantityOrdered, - "isNewProduct": item.isNewProduct, - "idValue": item.shopifyProductSKU, - "idType": "SKU" - } + const uploadData = this.ordersList.items.filter((item: any) => { + return item.isSelected; + }).map((item: any) => { + return { + "poId": " ", + "externalId": item.orderId, + "facilityId": "", + "externalFacilityId": item.facilityId, + "arrivalDate": item.arrivalDate, + "quantity": item.quantityOrdered, + "isNewProduct": item.isNewProduct, + "idValue": item.shopifyProductSKU, + "idType": "SKU" } }) const fileName = "Upload_PO_Member_" + Date.now() +".json";