Skip to content

Commit

Permalink
Improved: added viewSize while fetching items & resolve UI distortion(h…
Browse files Browse the repository at this point in the history 
…otwax#357)
  • Loading branch information
@R-Sourabh
R-Sourabh committed Aug 9, 2024
1 parent dc37447 commit d0c5a35
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 117 deletions.
7 changes: 4 additions & 3 deletions src/services/CountService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,11 @@ const fetchCycleCount = async (inventoryCountImportId: string): Promise<any> =>
})
}

const fetchCycleCountItems = async (inventoryCountImportId: string): Promise<any> => {
const fetchCycleCountItems = async (payload: any): Promise<any> => {
return api({
url: `cycleCounts/${inventoryCountImportId}/items`,
method: "GET"
url: `cycleCounts/${payload.inventoryCountImportId}/items`,
method: "GET",
params: payload
})
}

Expand Down
7 changes: 6 additions & 1 deletion src/views/AssignedDetail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,8 +221,13 @@ onIonViewWillLeave(() => {
})
async function fetchCountItems() {
let payload = {
inventoryCountImportId : props?.inventoryCountImportId,
pageSize: 100
}
try {
const resp = await CountService.fetchCycleCountItems(props.inventoryCountImportId as string)
const resp = await CountService.fetchCycleCountItems(payload)
store.dispatch("count/fetchCycleCountStats", [props.inventoryCountImportId])
Expand Down
226 changes: 115 additions & 111 deletions src/views/CountDetail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,124 +61,124 @@
</template>
</aside>
<!--Product details-->
<main @scroll="onScroll" class="main" >
<div class="product" v-for="item in filteredItems" :key="item.importItemSeqId" :data-product-id="item.productId" :data-seq="item.importItemSeqId" :id="`${item.productId}-${item.importItemSeqId}`">
<div class="image">
<main class="main">
<div class="product" @scroll="onScroll">
<div class="image ion-padding-top" v-for="item in filteredItems" :key="item.importItemSeqId" :data-product-id="item.productId" :data-seq="item.importItemSeqId" :id="`${item.productId}-${item.importItemSeqId}`">
<Image :src="getProduct(item.productId)?.mainImageUrl" />
</div>
<div class="detail">
<ion-item lines="none">
<ion-label class="ion-text-wrap">
<h1>{{ getProductIdentificationValue(productStoreSettings["productIdentificationPref"].primaryId, getProduct(product.productId)) }}</h1>
<p>{{ getProductIdentificationValue(productStoreSettings["productIdentificationPref"].secondaryId, getProduct(product.productId)) }}</p>
</ion-label>
<ion-badge slot="end" v-if="product.itemStatusId === 'INV_COUNT_REJECTED'" color="danger">
{{ translate("rejected") }}
</ion-badge>
<ion-item lines="none" v-if="filteredItems.length">
<ion-label>{{ `${product.importItemSeqId}/${filteredItems.length}` }}</ion-label>
</ion-item>
</div>
<div class="detail">
<ion-item lines="none">
<ion-label class="ion-text-wrap">
<h1>{{ getProductIdentificationValue(productStoreSettings["productIdentificationPref"].primaryId, getProduct(product.productId)) }}</h1>
<p>{{ getProductIdentificationValue(productStoreSettings["productIdentificationPref"].secondaryId, getProduct(product.productId)) }}</p>
</ion-label>
<ion-badge v-if="product?.itemStatusId === 'INV_COUNT_REJECTED'" color="danger">
{{ translate("rejected") }}
</ion-badge>
<ion-item lines="none" v-if="filteredItems.length">
<ion-label>{{ `${product.importItemSeqId}/${filteredItems.length}` }}</ion-label>
</ion-item>
<ion-button @click="showPreviousProduct" :disabled="isFirstItem">
<ion-icon slot="icon-only" :icon="chevronUpCircleOutline"></ion-icon>
</ion-button>
<ion-button @click="showNextProduct" :disabled="isLastItem">
<ion-icon slot="icon-only" :icon="chevronDownCircleOutline"></ion-icon>
</ion-button>
<ion-button @click="showPreviousProduct" :disabled="isFirstItem">
<ion-icon slot="icon-only" :icon="chevronUpCircleOutline"></ion-icon>
</ion-button>
<ion-button @click="showNextProduct" :disabled="isLastItem">
<ion-icon slot="icon-only" :icon="chevronDownCircleOutline"></ion-icon>
</ion-button>
</ion-item>
<ion-list v-if="product?.statusId !== 'INV_COUNT_CREATED' && product?.statusId !== 'INV_COUNT_ASSIGNED'">
<ion-item>
{{ translate("Counted") }}
<ion-label slot="end">{{ product.quantity ? product.quantity : '-'}}</ion-label>
</ion-item>
<ion-list v-if="product.statusId !== 'INV_COUNT_CREATED' && product.statusId !== 'INV_COUNT_ASSIGNED'">
<template v-if="productStoreSettings['showQoh']">
<ion-item>
{{ translate("Counted") }}
<ion-label slot="end">{{ product.quantity ? product.quantity : '-'}}</ion-label>
{{ translate("Current on hand") }}
<ion-label slot="end">{{ product.qoh }}</ion-label>
</ion-item>
<ion-item v-if="product.itemStatusId !== 'INV_COUNT_REJECTED'">
{{ translate("Variance") }}
<ion-label slot="end">{{ getVariance(product) }}</ion-label>
</ion-item>
</template>
</ion-list>
<template v-else>
<ion-list v-if="product.isRecounting">
<ion-item>
<ion-input :label="translate('Count')" :placeholder="translate('submit physical count')" name="value" v-model="inputCount" id="value" type="number" required @ionInput="calculateVariance"/>
</ion-item>
<template v-if="productStoreSettings['showQoh']">
<ion-item>
{{ translate("Current on hand") }}
<ion-label slot="end">{{ product.qoh }}</ion-label>
</ion-item>
<ion-item v-if="product.itemStatusId !== 'INV_COUNT_REJECTED'">
<ion-item>
{{ translate("Variance") }}
<ion-label slot="end">{{ getVariance(product) }}</ion-label>
<ion-label slot="end">{{ variance }}</ion-label>
</ion-item>
</template>
<div class="ion-margin">
<ion-button color="medium" fill="outline" @click="discardRecount()">
{{ translate("Discard re-count") }}
</ion-button>
<ion-button fill="outline" @click="openRecountSaveAlert()">
{{ translate("Save new count") }}
</ion-button>
</div>
</ion-list>
<template v-else>
<ion-list v-if="product.isRecounting">
<ion-list v-else-if="product.quantity">
<ion-item>
{{ translate("Counted") }}
<ion-label slot="end">{{ product.quantity }}</ion-label>
</ion-item>
<ion-item>
{{ translate("Counted by") }}
<ion-label slot="end">{{ getPartyName(product)}}</ion-label>
</ion-item>
<!-- TODO: make the counted at information dynamic -->
<!-- <ion-item>
{{ translate("Counted at") }}
<ion-label slot="end">{{ "-" }}</ion-label>
</ion-item> -->
<template v-if="productStoreSettings['showQoh']">
<ion-item>
<ion-input :label="translate('Count')" :placeholder="translate('submit physical count')" name="value" v-model="inputCount" id="value" type="number" required @ionInput="calculateVariance"/>
{{ translate("Current on hand") }}
<ion-label slot="end">{{ product.qoh }}</ion-label>
</ion-item>
<template v-if="productStoreSettings['showQoh']">
<ion-item>
{{ translate("Current on hand") }}
<ion-label slot="end">{{ product.qoh }}</ion-label>
</ion-item>
<ion-item>
{{ translate("Variance") }}
<ion-label slot="end">{{ variance }}</ion-label>
</ion-item>
</template>
<div class="ion-margin">
<ion-button color="medium" fill="outline" @click="discardRecount()">
{{ translate("Discard re-count") }}
</ion-button>
<ion-button fill="outline" @click="openRecountSaveAlert()">
{{ translate("Save new count") }}
</ion-button>
</div>
</ion-list>
<ion-list v-else-if="product.quantity">
<ion-item>
{{ translate("Counted") }}
<ion-label slot="end">{{ product.quantity }}</ion-label>
<ion-item v-if="product.itemStatusId !== 'INV_COUNT_REJECTED'">
{{ translate("Variance") }}
<ion-label slot="end">{{ getVariance(product) }}</ion-label>
</ion-item>
</template>
<ion-button v-if="!['INV_COUNT_REJECTED', 'INV_COUNT_COMPLETED'].includes(product.itemStatusId)" class="ion-margin" fill="outline" expand="block" @click="openRecountAlert()">
{{ translate("Re-count") }}
</ion-button>
</ion-list>
<ion-list v-else>
<ion-item>
<ion-input :label="translate('Count')" :placeholder="translate('submit physical count')" name="value" v-model="inputCount" id="value" type="number" required @ionInput="calculateVariance"/>
</ion-item>
<template v-if="productStoreSettings['showQoh']">
<ion-item>
{{ translate("Counted by") }}
<ion-label slot="end">{{ getPartyName(product)}}</ion-label>
{{ translate("Current on hand") }}
<ion-label slot="end">{{ product.qoh }}</ion-label>
</ion-item>
<!-- TODO: make the counted at information dynamic -->
<!-- <ion-item>
{{ translate("Counted at") }}
<ion-label slot="end">{{ "-" }}</ion-label>
</ion-item> -->
<template v-if="productStoreSettings['showQoh']">
<ion-item>
{{ translate("Current on hand") }}
<ion-label slot="end">{{ product.qoh }}</ion-label>
</ion-item>
<ion-item v-if="product.itemStatusId !== 'INV_COUNT_REJECTED'">
{{ translate("Variance") }}
<ion-label slot="end">{{ getVariance(product) }}</ion-label>
</ion-item>
</template>
<ion-button v-if="!['INV_COUNT_REJECTED', 'INV_COUNT_COMPLETED'].includes(product.itemStatusId)" class="ion-margin" fill="outline" expand="block" @click="openRecountAlert()">
{{ translate("Re-count") }}
</ion-button>
</ion-list>
<ion-list v-else>
<ion-item>
<ion-input :label="translate('Count')" :placeholder="translate('submit physical count')" name="value" v-model="inputCount" id="value" type="number" required @ionInput="calculateVariance"/>
{{ translate("Variance") }}
<ion-label slot="end">{{ variance }}</ion-label>
</ion-item>
<template v-if="productStoreSettings['showQoh']">
<ion-item>
{{ translate("Current on hand") }}
<ion-label slot="end">{{ product.qoh }}</ion-label>
</ion-item>
<ion-item>
{{ translate("Variance") }}
<ion-label slot="end">{{ variance }}</ion-label>
</ion-item>
</template>
<ion-button v-if="!['INV_COUNT_REJECTED', 'INV_COUNT_COMPLETED'].includes(product.itemStatusId)" class="ion-margin" expand="block" @click="saveCount()">
{{ translate("Save count") }}
</ion-button>
</ion-list>
</template>
</div>
</template>
<ion-button v-if="!['INV_COUNT_REJECTED', 'INV_COUNT_COMPLETED'].includes(product.itemStatusId)" class="ion-margin" expand="block" @click="saveCount()">
{{ translate("Save count") }}
</ion-button>
</ion-list>
</template>
</div>
<template v-if="!filteredItems.length">
<div class="empty-state">
Expand Down Expand Up @@ -289,7 +289,10 @@ onIonViewDidEnter(async() => {
})
async function fetchCycleCountItems() {
let payload = props?.id
let payload = {
inventoryCountImportId : props?.id,
pageSize: 100
}
await store.dispatch("count/fetchCycleCountItems", payload);
}
Expand Down Expand Up @@ -345,7 +348,7 @@ function updateFilteredItems() {
// and updates the current product state and navigation when a product intersects with the main element.
const onScroll = (event) => {
const main = event.target;
const products = Array.from(main.querySelectorAll('.product'));
const products = Array.from(main.querySelectorAll('.image'));
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
Expand All @@ -358,6 +361,7 @@ const onScroll = (event) => {
store.dispatch("product/currentProduct", currentProduct);
updateNavigationState(currentIndex);
router.replace({ hash: `#${productId}-${seqId}` });
product.value.isRecounting = false;
}
}
});
Expand Down Expand Up @@ -583,35 +587,37 @@ async function readyForReview() {
.fixed-section {
position: sticky;
top: 0;
background: var(--ion-background-color, #fff);
z-index: 1000;
background: var(--ion-background-color, #fff);
}
aside {
overflow-y: scroll;
}
main {
display: block;
display: grid;
grid: "product detail" / 1fr 2fr;
height: 100%;
overflow: auto;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.product {
display: grid;
overflow: scroll;
height: 90vh;
grid: "image detail"
/1fr 2fr;
scroll-snap-stop: always;
scroll-snap-align: start;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.product::-webkit-scrollbar {
display: none;
}
.image {
grid-area: image;
margin-top: var(--spacer-lg);
margin-right: var(--spacer-lg);
height: 100vh;
scroll-snap-stop: always;
scroll-snap-align: start;
}
.detail {
Expand All @@ -621,8 +627,6 @@ main {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: max-content;
position: fixed;
justify-self: end;
}
.detail > ion-item {
Expand Down
7 changes: 6 additions & 1 deletion src/views/DraftDetail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,8 +267,13 @@ async function parse(event: any) {
}
async function fetchCountItems() {
let payload = {
inventoryCountImportId : props?.inventoryCountImportId,
pageSize: 100
}
try {
const resp = await CountService.fetchCycleCountItems(props.inventoryCountImportId as string)
const resp = await CountService.fetchCycleCountItems(payload)
if(!hasError(resp) && resp.data?.itemList?.length) {
currentCycleCount.value["items"] = resp.data.itemList
Expand Down
7 changes: 6 additions & 1 deletion src/views/PendingReviewDetail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,8 +265,13 @@ onIonViewWillLeave(() => {
})
async function fetchCountItems() {
let payload = {
inventoryCountImportId : props?.inventoryCountImportId,
pageSize: 100
}
try {
const resp = await CountService.fetchCycleCountItems(props.inventoryCountImportId as string)
const resp = await CountService.fetchCycleCountItems(payload)
store.dispatch("count/fetchCycleCountStats", [props.inventoryCountImportId])
Expand Down

0 comments on commit d0c5a35

Please sign in to comment.