From f01e8f1e00bef39b2437fac64fb9b24492a4172c Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Tue, 23 Jul 2024 12:58:57 +0530 Subject: [PATCH 1/5] Implemented: made the reportAnIssue modal in mobile view functional (#244) --- src/theme/variables.css | 2 + src/views/InProgress.vue | 22 +++-- src/views/PackagingPopover.vue | 20 ++-- src/views/ReportIssueModal.vue | 163 ++++++++++++++++++++++----------- 4 files changed, 139 insertions(+), 68 deletions(-) diff --git a/src/theme/variables.css b/src/theme/variables.css index 51e75451..6d1e1dd5 100644 --- a/src/theme/variables.css +++ b/src/theme/variables.css @@ -343,6 +343,8 @@ img { } .product-metadata { + display: flex; + align-items: center; margin-inline-start: auto; padding-inline-end: var(--spacer-sm); } diff --git a/src/views/InProgress.vue b/src/views/InProgress.vue index f9bd143b..1d2c08e3 100644 --- a/src/views/InProgress.vue +++ b/src/views/InProgress.vue @@ -138,7 +138,7 @@ - + {{ getProductStock(item.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }} @@ -175,7 +175,7 @@
{{ translate("Pack using default packaging") }} - + @@ -437,14 +437,22 @@ export default defineComponent({ getInProgressOrders() { return JSON.parse(JSON.stringify(this.inProgressOrders.list)).splice(0, (this.inProgressOrders.query.viewIndex + 1) * (process.env.VUE_APP_VIEW_SIZE as any)); }, - async packagingPopover(ev: Event) { + async packagingPopover(ev: Event, order: any) { const popover = await popoverController.create({ component: PackagingPopover, + componentProps: { order }, event: ev, translucent: true, showBackdrop: false, }); - return popover.present(); + + popover.present(); + + popover.onDidDismiss().then((result) => { + if(result.data?.updatedOrder) { + this.save(result.data.updatedOrder); + } + }) }, async packOrder(order: any) { const confirmPackOrder = await alertController @@ -1285,8 +1293,10 @@ ion-segment > ion-segment-button > ion-skeleton-text, ion-item > ion-skeleton-te height: 30px; } -.order-item { - grid-template-columns: repeat(3, 1fr); +@media (min-width: 991px) { + .order-item { + grid-template-columns: repeat(3, 1fr); + } } diff --git a/src/views/PackagingPopover.vue b/src/views/PackagingPopover.vue index 4e0cadd4..c3d4c60a 100644 --- a/src/views/PackagingPopover.vue +++ b/src/views/PackagingPopover.vue @@ -5,14 +5,10 @@ {{ translate("Edit packaging") }} - + {{ translate("Report an issue") }} - - - {{ translate("Reject order") }} - @@ -24,6 +20,7 @@ import { IonItem, IonList, modalController, + popoverController } from "@ionic/vue"; import { defineComponent } from "vue"; import EditPackagingModal from '@/views/EditPackagingModal.vue' @@ -39,6 +36,7 @@ export default defineComponent({ IonItem, IonList, }, + props: ["order"], methods: { async editPackaging() { const editmodal = await modalController.create({ @@ -48,9 +46,17 @@ export default defineComponent({ }, async reportIssue() { const reportmodal = await modalController.create({ - component: ReportIssueModal + component: ReportIssueModal, + componentProps: { order: this.order } }); - return reportmodal.present(); + + reportmodal.present(); + + reportmodal.onDidDismiss().then((result) => { + if(result.data?.dismissed) { + popoverController.dismiss(result.data); + } + }) } }, setup() { diff --git a/src/views/ReportIssueModal.vue b/src/views/ReportIssueModal.vue index 4894d84e..e111d6ae 100644 --- a/src/views/ReportIssueModal.vue +++ b/src/views/ReportIssueModal.vue @@ -7,75 +7,82 @@ {{ translate("Report an issue") }} - - {{ translate("Save") }} - - - -
-
- - - NN10584 - -
+ + +
+
+ + + {{ order.orderName }} + +
-
- - Darooty Magwood -

{{ translate("Ordered") }} 27th January 2020 9:24 PM EST

- -
+
+ + {{ order.customerName }} +

{{ translate("Ordered") }} {{ formatUtcDate(order.orderDate, 'dd MMMM yyyy t a ZZZZ') }}

+ +
-
- - Next Day Shipping -

{{ translate("Ordered") }} 28th January 2020 2:32 PM EST

- -
-
+
+ + {{ order.shipmentMethodTypeDesc }} +

{{ $t("Last brokered") }} {{ formatUtcDate(order.reservedDatetime, 'dd MMMM yyyy t a ZZZZ') }}

+ +
+
- +
- + -

WJ06-XL-PURPLE

- Juno Jacket -

Blue XL

+

{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}

+ {{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) : item.productName }} +

{{ getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/')}} {{ getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/')}}
- 49 {{ translate("pieces in stock") }} + {{ getProductStock(item.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }} + + +
- - Out of stock - Worn display + + {{ reason.description ? translate(reason.description) : reason.enumId }} + + + + + + - \ No newline at end of file + + + \ No newline at end of file diff --git a/src/views/InProgress.vue b/src/views/InProgress.vue index 1d2c08e3..b300e0fd 100644 --- a/src/views/InProgress.vue +++ b/src/views/InProgress.vue @@ -306,6 +306,8 @@ import ShipmentBoxPopover from '@/components/ShipmentBoxPopover.vue' import QRCodeModal from '@/components/QRCodeModal.vue' import { useAuthStore } from '@hotwax/dxp-components' import ScanOrderItemModal from "@/components/ScanOrderItemModal.vue"; +import EditPackagingModal from '@/views/EditPackagingModal.vue' +import ReportIssueModal from '@/views/ReportIssueModal.vue' export default defineComponent({ @@ -446,13 +448,26 @@ export default defineComponent({ showBackdrop: false, }); - popover.present(); + popover.onDidDismiss().then(async(result) => { + if(result.data?.dismissed) { + const selectedAction = result.data.selectedAction; + + const modal = await modalController.create({ + component: selectedAction === 'editPackaging' ? EditPackagingModal : ReportIssueModal, + componentProps: selectedAction === 'editPackaging' ? { order, addingBoxForOrderIds: this.addingBoxForOrderIds, addShipmentBox: this.addShipmentBox } : { order } + }) + + modal.onDidDismiss().then((result) => { + if(result.data?.updatedOrder) { + this.save(result.data.updatedOrder); + } + }) - popover.onDidDismiss().then((result) => { - if(result.data?.updatedOrder) { - this.save(result.data.updatedOrder); + modal.present(); } }) + + return popover.present(); }, async packOrder(order: any) { const confirmPackOrder = await alertController diff --git a/src/views/PackagingPopover.vue b/src/views/PackagingPopover.vue index b535556f..7b589b3d 100644 --- a/src/views/PackagingPopover.vue +++ b/src/views/PackagingPopover.vue @@ -1,11 +1,11 @@