Skip to content

Commit

Permalink
Improved: used emitter to call parent component function from modal (#…
Browse files Browse the repository at this point in the history 
…212)
  • Loading branch information
@amansinghbais
amansinghbais committed Oct 9, 2023
2 parents 75398ef + 8f7f6c1 commit 3c07e28
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 27 deletions.
8 changes: 7 additions & 1 deletion src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
"Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
"Complete": "Complete",
"Completed": "Completed",
"COMPLETED: ITEM": "COMPLETED: {itemsCount} ITEM",
"COMPLETED: ITEMS": "COMPLETED: {itemsCount} ITEMS",
"Confirm": "Confirm",
"Copied": "Copied { value }",
"Close purchase order items": "Close purchase order items",
Expand All @@ -32,6 +34,7 @@
"Internal ID saved to clipboard": "Internal ID saved to clipboard",
"Inventory can be received for purchase orders in multiple shipments. Proceeding will receive a new shipment for this purchase order but it will still be available for receiving later": "Inventory can be received for purchase orders in multiple shipments. { space } Proceeding will receive a new shipment for this purchase order but it will still be available for receiving later",
"item": "item",
"Item count": "Item count",
"items": "items",
"Load more returns": "Load more returns",
"Load more shipments": "Load more shipments",
Expand All @@ -51,6 +54,8 @@
"ordered": "ordered",
"Orders not found": "Orders not found",
"Password": "Password",
"PENDING: ITEM": "PENDING: {itemsCount} ITEM",
"PENDING: ITEMS": "PENDING: {itemsCount} ITEMS",
"primary identifier": "primary identifier",
"Primary Product Identifier": "Primary Product Identifier",
"Proceed": "Proceed",
Expand All @@ -61,7 +66,8 @@
"Purchase Order": "Purchase Order",
"Purchase Order Details": "Purchase Order Details",
"Purchase Orders": "Purchase Orders",
"Purchase order update failed. Verify your internet connection and retry.": "Purchase order update failed. Verify your internet connection and retry.",
"Purchase order update failed.": "Purchase order update failed.",
"Purchase order updated successfully.": "Purchase order updated successfully.",
"Qty": "Qty",
"Receive": "Receive",
"Receive All": "Receive All",
Expand Down
23 changes: 14 additions & 9 deletions src/views/ClosePurchaseOrderModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ import { OrderService } from "@/services/OrderService";
import { productHelpers, showToast } from '@/utils';
import { ShopifyImg } from '@hotwax/dxp-components';
import { translate } from '@/i18n'
import emitter from "@/event-bus"
export default defineComponent({
name: "ClosePurchaseOrder",
Expand Down Expand Up @@ -100,7 +101,7 @@ export default defineComponent({
productIdentificationPref: 'user/getProductIdentificationPref'
})
},
props: ['createShipment', 'isEligibileForCreatingShipment'],
props: ['isEligibileForCreatingShipment'],
methods: {
closeModal() {
modalController.dismiss({ dismissed: true });
Expand All @@ -116,11 +117,11 @@ export default defineComponent({
{
text: this.$t('Proceed'),
role: 'proceed',
handler: async () => {
if(this.isEligibileForCreatingShipment()) {
await this.createShipment()
handler: async() => {
if(this.isEligibileForCreatingShipment) {
emitter.emit('create-shipment')
}
this.updatePOItemStatus()
await this.updatePOItemStatus()
}
}]
});
Expand All @@ -140,11 +141,15 @@ export default defineComponent({
selectedItem.statusId = "ITEM_COMPLETED"
}
await OrderService.updatePOItemStatus({orderId: item.orderId, orderItemSeqId: item.orderItemSeqId})
.catch((err)=>{
try{
await OrderService.updatePOItemStatus({orderId: item.orderId, orderItemSeqId: item.orderItemSeqId})
.then(() => {
showToast(translate('Purchase order updated successfully.'))
})
} catch(err) {
console.error(err);
showToast(translate("Purchase order update failed. Verify your internet connection and retry."))
})
showToast(translate("Purchase order update failed."))
}
});
},
areAllItemsSelected(eligibleItems: any) {
Expand Down
87 changes: 77 additions & 10 deletions src/views/PurchaseOrderDetail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,18 @@
<main>
<div class="doc-id">
<ion-item lines="none">
<h1>{{$t("Purchase Order")}}: {{ order.externalOrderId }}</h1>
<ion-label>
<h1>{{ $t("Purchase Order")}}: {{ order.externalOrderId }}</h1>
<p>{{ $t("Item count") }}: {{ order.items.length }}</p>
</ion-label>
</ion-item>

<div class="doc-meta">
<ion-chip @click="copyToClipboard(order.orderId, 'Internal ID saved to clipboard')">{{ order.orderId }}<ion-icon :icon="copyOutline"/></ion-chip>
<ion-badge :color="order.orderStatusId === 'ORDER_CREATED' ? 'medium' : 'primary'">{{ order.orderStatusDesc }}</ion-badge>
</div>
</div>

<div class="scanner">
<ion-item>
<ion-label position="fixed">{{$t("Scan items")}}</ion-label>
Expand All @@ -38,14 +41,22 @@
{{ $t("Scan") }}
</ion-button>
</div>

<!-- TODO: need UI for rejected and completed items -->
<ion-card v-for="(item, index) in order.items" v-show="item.orderItemStatusId !== 'ITEM_COMPLETED' && item.orderItemStatusId !== 'ITEM_REJECTED'" :key="index">

<ion-item lines="none">
<ion-label v-if="getPOItems('pending').length > 1" color="medium" class="ion-margin-end">
{{ $t("PENDING: ITEMS", { itemsCount: getPOItems('pending').length }) }}
</ion-label>
<ion-label v-else color="medium" class="ion-margin-end">
{{ $t("PENDING: ITEM", { itemsCount: getPOItems('pending').length }) }}
</ion-label>
</ion-item>

<ion-card v-for="(item, index) in getPOItems('pending')" v-show="item.orderItemStatusId !== 'ITEM_COMPLETED' && item.orderItemStatusId !== 'ITEM_REJECTED'" :key="index">
<div class="product">
<div class="product-info">
<ion-item lines="none">
<ion-thumbnail slot="start" @click="openImage(getProduct(item.productId).mainImageUrl, getProduct(item.productId).productName)">
<ShopifyImg :src="getProduct(item.productId).mainImageUrl" />
<ShopifyImg size="small" :src="getProduct(item.productId).mainImageUrl" />
</ion-thumbnail>
<ion-label class="ion-text-wrap">
<h2>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
Expand Down Expand Up @@ -90,6 +101,46 @@
</div>
</div>
</ion-card>

<ion-item lines="none">
<ion-text v-if="getPOItems('completed').length > 1" color="medium" class="ion-margin-end">
{{ $t("COMPLETED: ITEMS", { itemsCount: getPOItems('completed').length }) }}
</ion-text>
<ion-text v-else color="medium" class="ion-margin-end">
{{ $t("COMPLETED: ITEM", { itemsCount: getPOItems('completed').length }) }}
</ion-text>
<ion-icon v-if="getPOItems('completed').length" :icon="showCompletedItems ? eyeOutline : eyeOffOutline" @click="showCompletedItems = !showCompletedItems" />
</ion-item>

<ion-card v-for="(item, index) in getPOItems('completed')" v-show="showCompletedItems && item.orderItemStatusId === 'ITEM_COMPLETED'" :key="index">
<div class="product">
<div class="product-info">
<ion-item lines="none">
<ion-thumbnail slot="start" @click="openImage(getProduct(item.productId).mainImageUrl, getProduct(item.productId).productName)">
<ShopifyImg size="small" :src="getProduct(item.productId).mainImageUrl" />
</ion-thumbnail>
<ion-label class="ion-text-wrap">
<h2>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
<p>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
</ion-label>
</ion-item>
</div>

<div class="location">
<ion-chip :disabled="true" outline>
<ion-icon :icon="locationOutline"/>
<ion-label>{{ item.locationSeqId }}</ion-label>
</ion-chip>
</div>

<div>
<ion-item lines="none">
<ion-badge color="medium" slot="end">{{ item.quantity }} {{ $t("ordered") }}</ion-badge>
<ion-badge color="success" class="ion-margin-start" slot="end">{{ getPOItemAccepted(item.productId) }} {{ $t("received") }}</ion-badge>
</ion-item>
</div>
</div>
</ion-card>
</main>
</ion-content>

Expand Down Expand Up @@ -121,14 +172,15 @@ import {
IonLabel,
IonPage,
IonProgressBar,
IonText,
IonThumbnail,
IonTitle,
IonToolbar,
alertController,
modalController
} from '@ionic/vue';
import { defineComponent } from 'vue';
import { addOutline, cameraOutline, checkmarkDone, saveOutline, timeOutline, copyOutline } from 'ionicons/icons';
import { addOutline, cameraOutline, checkmarkDone, copyOutline, eyeOffOutline, eyeOutline, locationOutline, saveOutline, timeOutline } from 'ionicons/icons';
import ReceivingHistoryModal from '@/views/ReceivingHistoryModal.vue'
import { ShopifyImg } from '@hotwax/dxp-components';
import { useStore, mapGetters } from 'vuex';
Expand All @@ -140,6 +192,7 @@ import LocationPopover from '@/components/LocationPopover.vue'
import ImageModal from '@/components/ImageModal.vue';
import { copyToClipboard, hasError, productHelpers } from '@/utils';
import { Actions, hasPermission } from '@/authorization'
import emitter from "@/event-bus"
export default defineComponent({
name: "PurchaseOrderDetails",
Expand All @@ -160,14 +213,16 @@ export default defineComponent({
IonLabel,
IonPage,
IonProgressBar,
IonText,
IonThumbnail,
IonTitle,
IonToolbar,
LocationPopover
},
data() {
return {
queryString: ''
queryString: '',
showCompletedItems: false
}
},
computed: {
Expand Down Expand Up @@ -206,6 +261,13 @@ export default defineComponent({
if(this.queryString) payload = this.queryString
this.store.dispatch('order/updateProductCount', payload)
},
getPOItems(orderType: string) {
if(orderType === 'completed'){
return this.order.items.filter((item: any) => item.orderItemStatusId === 'ITEM_COMPLETED')
} else {
return this.order.items.filter((item: any) => item.orderItemStatusId !== 'ITEM_COMPLETED' && item.orderItemStatusId !== 'ITEM_REJECTED')
}
},
async addProduct() {
const modal = await modalController
.create({
Expand Down Expand Up @@ -247,11 +309,12 @@ export default defineComponent({
const modal = await modalController.create({
component: ClosePurchaseOrderModal,
componentProps: {
createShipment: this.createShipment,
isEligibileForCreatingShipment: this.isEligibileForCreatingShipment
isEligibileForCreatingShipment: this.isEligibileForCreatingShipment()
}
})
emitter.on('create-shipment', this.createShipment)
return modal.present();
},
async createShipment() {
Expand All @@ -260,6 +323,7 @@ export default defineComponent({
if (resp.status === 200 && !hasError(resp)) {
this.router.push('/purchase-orders')
}
emitter.off('create-shipment', this.createShipment)
},
isEligibileForCreatingShipment() {
return this.order.items.some((item: any) => item.quantityAccepted > 0)
Expand Down Expand Up @@ -291,7 +355,10 @@ export default defineComponent({
checkmarkDone,
copyOutline,
copyToClipboard,
eyeOffOutline,
eyeOutline,
hasPermission,
locationOutline,
productHelpers,
router,
saveOutline,
Expand Down
17 changes: 10 additions & 7 deletions src/views/Shipments.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,12 +104,14 @@ export default defineComponent({
"inputFields": {
"destinationFacilityId": this.user.facilityId,
"statusId": "PURCH_SHIP_SHIPPED",
"shipmentTypeId_fld0_value": "INCOMING_SHIPMENT",
"shipmentTypeId_fld0_op": "equals",
"shipmentTypeId_fld0_grp": "1",
"parentTypeId_fld0_value": "INCOMING_SHIPMENT",
"parentTypeId_fld0_op": "equals",
"parentTypeId_fld0_grp": "2",
"grp_op": "AND",
"shipmentTypeId_value": "INCOMING_SHIPMENT",
"shipmentTypeId_op": "equals",
"shipmentTypeId_grp": "1",
"parentTypeId_value": "INCOMING_SHIPMENT",
"parentTypeId_op": "equals",
"parentTypeId_grp": "1",
"grp_op_1": "OR"
},
"entityName": "ShipmentAndTypeAndItemCount",
"fieldList" : [ "shipmentId","primaryShipGroupSeqId","partyIdFrom","partyIdTo","estimatedArrivalDate","destinationFacilityId","statusId", "shipmentItemCount", "externalId", "externalOrderId", "shipmentTypeId" ],
Expand All @@ -121,11 +123,12 @@ export default defineComponent({
payload.inputFields["shipmentId_value"] = this.queryString
payload.inputFields["shipmentId_op"] = 'contains'
payload.inputFields["shipmentId_ic"] = 'Y'
payload.inputFields["shipmentId_grp"] = '1'
payload.inputFields["shipmentId_grp"] = '2'
payload.inputFields["externalOrderId_value"] = this.queryString
payload.inputFields["externalOrderId_op"] = 'contains'
payload.inputFields["externalOrderId_ic"] = 'Y'
payload.inputFields["externalOrderId_grp"] = '2'
payload.inputFields["grp_op_2"] = 'OR'
}
await this.store.dispatch("shipment/findShipment", payload);
this.fetchingShipments = false;
Expand Down

0 comments on commit 3c07e28

Please sign in to comment.