Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved: enhanced visibility of completed items in POs and displayed items count (#259) #260

Merged
merged 7 commits into from
Oct 6, 2023
Merged

Improved: enhanced visibility of completed items in POs and displayed items count (#259) #260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
39eacff
Improved: enhanced visibility of completed items in POs and displayed…
amansinghbais Sep 8, 2023
aeb2486
Improved: code for showing completed orders (#259)
amansinghbais Sep 14, 2023
3c75516
Improved: code for removing useless trailing spaces (#259)
amansinghbais Sep 14, 2023
f51f419
Merge branch 'main' of https://github.com/hotwax/receiving into recei…
amansinghbais Sep 15, 2023
d8f597f
Improved: code for rendering order items (#259)
amansinghbais Sep 15, 2023
fd6c25a
Fixed: items text showing when 1 order available (#259)
amansinghbais Sep 15, 2023
43d4d8e
Improved: code for PO items rendering (#259)
amansinghbais Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/locales/en.json
View file
Open in desktop
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
Open in desktop
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
Loading