From 2731188779e1ca0a4a8ebd3361dee575c4179465 Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Fri, 25 Aug 2023 12:07:20 +0530 Subject: [PATCH 1/9] Implemented: added the functionality to the buttons in mobile view in completed page (#244) --- src/views/Completed.vue | 19 +++++++++++++------ src/views/ShippingPopover.vue | 32 ++++++++++++++++++++++++-------- 2 files changed, 37 insertions(+), 14 deletions(-) diff --git a/src/views/Completed.vue b/src/views/Completed.vue index cb6fb5d5..0c5ab7af 100644 --- a/src/views/Completed.vue +++ b/src/views/Completed.vue @@ -82,11 +82,11 @@ -
- {{ $t("Ship Now") }} - + {{ $t("Shipped") }} + {{ $t("Ship Now") }} + @@ -96,7 +96,7 @@
{{ $t("Shipped") }} - {{ $t("Ship Now") }} + {{ $t("Ship Now") }} {{ $t("Regenerate Shipping Label") }} @@ -365,12 +365,19 @@ export default defineComponent({ return shipOrderAlert.present(); }, - async shippingPopover(ev: Event) { + async shippingPopover(order:any) { const popover = await popoverController.create({ component: Popover, - event: ev, translucent: true, showBackdrop: false, + componentProps: { + order, + printPackingSlip: this.printPackingSlip, + regenerateShippingLabel: this.regenerateShippingLabel, + unpackOrder: this.unpackOrder, + showShippingLabelErrorModal: this.showShippingLabelErrorModal, + hasPackedShipments: this.hasPackedShipments + } }); return popover.present(); }, diff --git a/src/views/ShippingPopover.vue b/src/views/ShippingPopover.vue index 9be71c67..7409e4fe 100644 --- a/src/views/ShippingPopover.vue +++ b/src/views/ShippingPopover.vue @@ -1,19 +1,22 @@ @@ -26,7 +29,8 @@ import { IonList } from "@ionic/vue"; import { defineComponent } from "vue"; -import { printOutline, lockOpenOutline } from 'ionicons/icons' +import { printOutline, lockOpenOutline, receiptOutline, warningOutline } from 'ionicons/icons' +import { Actions, hasPermission } from '@/authorization' export default defineComponent({ name: "ShippingPopover", components: { @@ -38,8 +42,20 @@ export default defineComponent({ setup() { return { printOutline, - lockOpenOutline + lockOpenOutline, + receiptOutline, + warningOutline, + hasPermission, + Actions } - } + }, + props: [ + 'order', + 'printPackingSlip', + 'regenerateShippingLabel', + 'unpackOrder', + 'showShippingLabelErrorModal', + 'hasPackedShipments' + ] }); \ No newline at end of file From 6cb5b87af051d4bb85171880533f55c73f72fae2 Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Fri, 25 Aug 2023 12:34:22 +0530 Subject: [PATCH 2/9] Fixed: added the event parameter in shippingPopover to position the popover around the popover icon (#244) --- src/views/Completed.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/views/Completed.vue b/src/views/Completed.vue index 0c5ab7af..31e112af 100644 --- a/src/views/Completed.vue +++ b/src/views/Completed.vue @@ -86,7 +86,7 @@ {{ $t("Shipped") }} {{ $t("Ship Now") }} - + @@ -365,11 +365,12 @@ export default defineComponent({ return shipOrderAlert.present(); }, - async shippingPopover(order:any) { + async shippingPopover(ev: Event, order:any) { const popover = await popoverController.create({ component: Popover, translucent: true, showBackdrop: false, + event: ev, componentProps: { order, printPackingSlip: this.printPackingSlip, From 7755b1dd1cd43ca73a91a40485795446b7abfa07 Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Thu, 31 Aug 2023 10:42:09 +0530 Subject: [PATCH 3/9] Fixed: removed the icons from the mobile view popover and update the label with desktop label in completed page (#244) --- src/views/ShippingPopover.vue | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/views/ShippingPopover.vue b/src/views/ShippingPopover.vue index 7409e4fe..a0759b1f 100644 --- a/src/views/ShippingPopover.vue +++ b/src/views/ShippingPopover.vue @@ -2,19 +2,15 @@ - - {{ $t("Shipping label") }} + {{ $t("Regenerate Shipping Label") }} - - {{ $t("Customer letter") }} + {{ $t("Print Customer Letter") }} - - + {{ $t("Unpack") }} - - + {{ $t("Shipping label error") }} @@ -24,7 +20,6 @@ \ No newline at end of file From 02b4f4da677a8e58fcff387c98c855c648102133 Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Fri, 15 Sep 2023 15:33:57 +0530 Subject: [PATCH 6/9] Improved: shipped button styling in mobile view (#244) --- src/views/Completed.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Completed.vue b/src/views/Completed.vue index 6771b04f..73000db6 100644 --- a/src/views/Completed.vue +++ b/src/views/Completed.vue @@ -84,7 +84,7 @@
- {{ $t("Shipped") }} + {{ $t("Shipped") }} {{ $t("Ship Now") }} From 99f8cd7c6a508b018e7b639023d0e01879db6c1b Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Thu, 21 Sep 2023 15:00:44 +0530 Subject: [PATCH 7/9] Improved: called methods after dismissing popover instead of passing via props (#244) --- src/views/Completed.vue | 23 ++++++++++++++--------- src/views/ShippingPopover.vue | 26 +++++++++++++------------- 2 files changed, 27 insertions(+), 22 deletions(-) diff --git a/src/views/Completed.vue b/src/views/Completed.vue index 73000db6..298796ee 100644 --- a/src/views/Completed.vue +++ b/src/views/Completed.vue @@ -159,7 +159,7 @@ import { } from '@ionic/vue'; import { defineComponent } from 'vue'; import { printOutline, downloadOutline, pricetagOutline, ellipsisVerticalOutline, checkmarkDoneOutline, optionsOutline } from 'ionicons/icons' -import Popover from '@/views/ShippingPopover.vue' +import ShippingPopover from '@/views/ShippingPopover.vue' import { useRouter } from 'vue-router'; import { mapGetters, useStore } from 'vuex' import { copyToClipboard, formatUtcDate, getFeature, showToast } from '@/utils' @@ -367,22 +367,27 @@ export default defineComponent({ async shippingPopover(ev: Event, order:any) { const popover = await popoverController.create({ - component: Popover, + component: ShippingPopover, componentProps: { - hasPackedShipments: this.hasPackedShipments, - order, - printPackingSlip: this.printPackingSlip, - regenerateShippingLabel: this.regenerateShippingLabel, - showShippingLabelErrorModal: this.showShippingLabelErrorModal, - unpackOrder: this.unpackOrder + hasPackedShipments: this.hasPackedShipments(order), + order }, event: ev, translucent: true, showBackdrop: false, }); + + popover.onDidDismiss().then((result) => { + const selectedMethod = result.data.selectedMethod + + // Calls method which is clicked on the popover, functions name returns when popover dismiss. + if(typeof(this[selectedMethod]) === 'function') { + (this as any)[selectedMethod](order); + } + }) + return popover.present(); }, - async fetchShipmentMethods() { const payload = prepareOrderQuery({ viewSize: "0", // passing viewSize as 0, as we don't want to fetch any data diff --git a/src/views/ShippingPopover.vue b/src/views/ShippingPopover.vue index e30f2d7b..63d0a5ad 100644 --- a/src/views/ShippingPopover.vue +++ b/src/views/ShippingPopover.vue @@ -1,16 +1,16 @@