Skip to content

Commit

Permalink
Merge pull request #260 from amansinghbais/receiving/#259
Browse files Browse the repository at this point in the history 
Improved: enhanced visibility of completed items in POs and displayed items count (#259)
  • Loading branch information
@ravilodhi
ravilodhi authored Oct 6, 2023
2 parents 72d1f6a + 43d4d8e commit 8f7f6c1
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 8 deletions.
5 changes: 5 additions & 0 deletions src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
"Choosing a product identifier allows you to view products with your preferred identifiers.": "Choosing a product identifier allows you to view products with your preferred identifiers.",
"Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
"Complete": "Complete",
"COMPLETED: ITEM": "COMPLETED: {itemsCount} ITEM",
"COMPLETED: ITEMS": "COMPLETED: {itemsCount} ITEMS",
"Confirm": "Confirm",
"Copied": "Copied { value }",
"eCom Store": "eCom Store",
Expand All @@ -29,6 +31,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 @@ -48,6 +51,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 Down
80 changes: 72 additions & 8 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-fab vertical="bottom" horizontal="end" slot="fixed">
Expand Down Expand Up @@ -119,14 +170,15 @@ import {
IonLabel,
IonPage,
IonProgressBar,
IonText,
IonThumbnail,
IonTitle,
IonToolbar,
modalController,
alertController,
} 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 Down Expand Up @@ -158,14 +210,16 @@ export default defineComponent({
IonLabel,
IonPage,
IonProgressBar,
IonText,
IonThumbnail,
IonTitle,
IonToolbar,
LocationPopover
},
data() {
return {
queryString: ''
queryString: '',
showCompletedItems: false
}
},
computed: {
Expand Down Expand Up @@ -204,6 +258,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 @@ -278,7 +339,10 @@ export default defineComponent({
checkmarkDone,
copyOutline,
copyToClipboard,
eyeOffOutline,
eyeOutline,
hasPermission,
locationOutline,
productHelpers,
router,
saveOutline,
Expand Down

0 comments on commit 8f7f6c1

Please sign in to comment.