Skip to content

Commit

Permalink
Merge pull request #184 from k2maan/preorder/#139
Browse files Browse the repository at this point in the history 
Updated: removed skeleton text from static labels (#139)
  • Loading branch information
@ravilodhi
ravilodhi authored Sep 7, 2023
2 parents 787e629 + 836a16d commit 8a17c01
Showing 1 changed file with 109 additions and 129 deletions.
238 changes: 109 additions & 129 deletions src/views/catalog-product-details.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,22 +47,22 @@
</div>
<div class="product-info" v-else>
<div class="ion-padding">
<ion-skeleton-text animated style="width: 40%; height: 80%;" />
<ion-skeleton-text animated style="width: 60%;" />
<ion-skeleton-text animated style="width: 60%; height: 80%;" />
<ion-skeleton-text animated style="width: 40%; height: 40%;" />
</div>

<div class="product-features">
<ion-list>
<ion-skeleton-text class="ion-margin" animated style="width: 30%" />
<ion-item lines="none">
<ion-skeleton-text animated style="width: 70%;" />
<ion-skeleton-text animated style="width: 60%;" />
</ion-item>
</ion-list>

<ion-list>
<ion-skeleton-text class="ion-margin" animated style="width: 30%" />
<ion-item lines="none">
<ion-skeleton-text animated style="width: 70%;" />
<ion-skeleton-text animated style="width: 60%;" />
</ion-item>
</ion-list>
</div>
Expand All @@ -71,19 +71,30 @@
<div>
<ion-card v-if="!poSummary.listingCountStatusMessage">
<ion-item>
<ion-skeleton-text animated style="height: 60%; width: 90%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 40%; width: 70%;" />
<ion-label class="ion-text-wrap">{{ $t("Eligible") }}</ion-label>
<ion-skeleton-text slot="end" animated style="height: 30%; width: 20%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 40%; width: 60%;" />
<ion-label class="ion-text-wrap">{{ $t("Category") }}</ion-label>
<ion-skeleton-text slot="end" animated style="height: 30%; width: 40%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 40%; width: 70%;" />
<ion-label class="ion-text-wrap">{{ $t("Shopify listing") }}</ion-label>
<ion-skeleton-text slot="end" animated style="height: 30%; width: 50%;" />
</ion-item>
<ion-item-divider color="light">
<ion-label color="medium">{{ $t("Timeline") }}</ion-label>
</ion-item-divider>
<ion-item>
<ion-skeleton-text animated style="height: 40%; width: 60%;" />
<ion-icon slot="start" :icon="shirtOutline" />
<ion-label>
<ion-item lines="none">
<ion-skeleton-text animated style="width: 90%; height: 30%;" />
</ion-item>
<ion-item lines="none">
<ion-skeleton-text animated style="width: 100%; height: 60%;" />
</ion-item>
</ion-label>
</ion-item>
</ion-card>
<ion-card v-else>
Expand All @@ -107,13 +118,10 @@
</ion-item>
<ion-item-divider color="light">
<ion-label color="medium">{{ $t("Timeline") }}</ion-label>
<ion-button v-if="poSummary.header || poSummary.body" color="medium" fill="clear" slot="end" @click="copyAuditMsg()">
<ion-icon slot="icon-only" :icon="copyOutline" />
</ion-button>
</ion-item-divider>
<!-- internationalized while preparaion -->
<ion-item v-if="poSummary.header || poSummary.body">
<ion-icon slot="start" :icon="shirtOutline"></ion-icon>
<ion-icon slot="start" :icon="shirtOutline" />
<ion-label class="ion-text-wrap">
<h2 v-if="poSummary.header">{{ poSummary.header }}</h2>
<p v-if="poSummary.body">{{ poSummary.body }}</p>
Expand All @@ -125,15 +133,9 @@

<hr />

<div v-if="!Object.keys(poAndAtpDetails).length">
<ion-item lines="none">
<ion-skeleton-text animated style="width: 50%; height: 50%;" />
</ion-item>
</div>

<section>
<ion-card v-if="!Object.keys(poAndAtpDetails).length">
<ion-item>
<ion-item lines="none">
<ion-skeleton-text animated style="height: 40%; width: 70%;" />
</ion-item>
<ion-item>
Expand Down Expand Up @@ -198,7 +200,6 @@
<ion-label slot="end">{{ (poAndAtpDetails.totalPoAtp >= 0) ? poAndAtpDetails.totalPoAtp : '-' }}</ion-label>
</ion-item>
</ion-card>

<ion-card v-else>
<ion-card-header>
<ion-card-title>
Expand All @@ -217,89 +218,74 @@
</ion-item>
</ion-card>

<ion-card v-if="!Object.keys(inventoryConfig).length">
<ion-item>
<ion-skeleton-text animated style="height: 40%; width: 70%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 50%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 50%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
</ion-card>
<ion-card v-else>
<ion-card>
<ion-card-header>
<ion-card-title>
<h3>{{ $t("Online ATP calculation") }}</h3>
</ion-card-title>
</ion-card-header>
<ion-item>
<ion-label>{{ $t("Online ATP") }}</ion-label>
<ion-label slot="end">{{ (atpCalcDetails.onlineAtp >= 0) ? atpCalcDetails.onlineAtp : '-' }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ $t("Quantity on hand") }}</ion-label>
<ion-label slot="end">{{ (atpCalcDetails.totalQOH >= 0) ? atpCalcDetails.totalQOH : '-' }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ $t("Excluded ATP") }}</ion-label>
<ion-label slot="end">{{ (atpCalcDetails.excludedAtp || atpCalcDetails.excludedAtp === 0) ? atpCalcDetails.excludedAtp : '-' }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ $t("Reserve inventory") }}</ion-label>
<ion-toggle slot="end" :disabled="!inventoryConfig.reserveInvStatus" :checked="inventoryConfig.reserveInvStatus === 'Y'" @ionChange="updateReserveInvConfig($event.detail.checked)"/>
</ion-item>
<ion-item>
<ion-label>{{ $t("Hold pre-order physical inventory") }}</ion-label>
<ion-toggle slot="end" :disabled="!inventoryConfig.preOrdPhyInvHoldStatus" :checked="inventoryConfig.preOrdPhyInvHoldStatus != 'false'" @ionChange="updatePreOrdPhyInvHoldConfig($event.detail.checked)"/>
</ion-item>
<div v-if="!Object.keys(inventoryConfig).length">
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 50%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 50%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
</div>
<div v-else>
<ion-item>
<ion-label>{{ $t("Online ATP") }}</ion-label>
<ion-label slot="end">{{ (atpCalcDetails.onlineAtp >= 0) ? atpCalcDetails.onlineAtp : '-' }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ $t("Quantity on hand") }}</ion-label>
<ion-label slot="end">{{ (atpCalcDetails.totalQOH >= 0) ? atpCalcDetails.totalQOH : '-' }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ $t("Excluded ATP") }}</ion-label>
<ion-label slot="end">{{ (atpCalcDetails.excludedAtp || atpCalcDetails.excludedAtp === 0) ? atpCalcDetails.excludedAtp : '-' }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ $t("Reserve inventory") }}</ion-label>
<ion-toggle slot="end" :disabled="!inventoryConfig.reserveInvStatus" :checked="inventoryConfig.reserveInvStatus === 'Y'" @ionChange="updateReserveInvConfig($event.detail.checked)"/>
</ion-item>
<ion-item>
<ion-label>{{ $t("Hold pre-order physical inventory") }}</ion-label>
<ion-toggle slot="end" :disabled="!inventoryConfig.preOrdPhyInvHoldStatus" :checked="inventoryConfig.preOrdPhyInvHoldStatus != 'false'" @ionChange="updatePreOrdPhyInvHoldConfig($event.detail.checked)"/>
</ion-item>
</div>
</ion-card>
</section>

<hr />

<section>
<ion-card v-if="!isCtgryAndBrkrngJobsLoaded">
<ion-item>
<ion-skeleton-text animated style="height: 40%; width: 70%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 50%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 50%;" />
</ion-item>
</ion-card>
<ion-card v-else>
<ion-card>
<ion-card-header>
<ion-card-title>
<h3>{{ $t('Category and brokering jobs') }}</h3>
</ion-card-title>
</ion-card-header>

<!-- in case jobs are not available -->
<div v-if="!Object.keys(getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT')).length
&& !Object.keys(getCtgryAndBrkrngJob('JOB_BKR_ORD')).length
&& !Object.keys(getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE')).length">
<ion-item>{{ $t("No jobs found") }}</ion-item>
<div v-if="!isCtgryAndBrkrngJobsLoaded">
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 50%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
</div>

<div v-else>
<ion-item v-if="Object.keys(getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT')).length" detail button @click="openJobActionsPopover($event, getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT'), 'Pre-sell computation')">
<ion-label class="ion-text-wrap">
Expand Down Expand Up @@ -333,48 +319,44 @@
</div>
</ion-card>

<ion-card v-if="!poSummary.listingCountStatusMessage">
<ion-item>
<ion-skeleton-text animated style="height: 40%; width: 60%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 50%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 50%;" />
</ion-item>
</ion-card>
<ion-card v-else>
<ion-card>
<ion-card-header>
<ion-card-title>
<h3>{{ $t('Shop listing status') }}</h3>
</ion-card-title>
</ion-card-header>
<ion-item v-if="!Object.keys(shopListings).length">
{{ $t('No shop listings found') }}
</ion-item>
<ion-item v-else v-for="(listData, index) in getSortedShopListings(shopListings)" :key="index">
<ion-label class="ion-text-wrap">
<h5>{{ listData.name }}</h5>
<!-- internationalized while preparation -->
<p>{{ listData.listingTimeAndStatus }}</p>
</ion-label>
<ion-label v-if="listData.shopifyShopProductId && listData.status" :color="listData.containsError ? 'danger' : (listData.status === 'inactive' ? 'warning' : 'success')" slot="end">
<h5>{{ $t(listData.listingStatus) }}</h5>
</ion-label>
<ion-label v-else-if="listData.shopifyShopProductId" color="medium" slot="end">
<h5>{{ $t("No listing data") }}</h5>
</ion-label>
<ion-label v-else color="medium" slot="end">
<h5>{{ $t("Not linked") }}</h5>
</ion-label>
</ion-item>
<div v-if="!poSummary.listingCountStatusMessage">
<ion-item>
<ion-skeleton-text animated style="height: 40%; width: 60%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 40%;" />
</ion-item>
<ion-item>
<ion-skeleton-text animated style="height: 30%; width: 50%;" />
</ion-item>
</div>
<div v-else>
<ion-item v-if="!Object.keys(shopListings).length">
{{ $t('No shop listings found') }}
</ion-item>
<ion-item v-else v-for="(listData, index) in shopListings" :key="index">
<ion-label class="ion-text-wrap">
<h5>{{ listData.name }}</h5>
<!-- internationalized while preparation -->
<p>{{ listData.listingTimeAndStatus }}</p>
</ion-label>
<ion-label v-if="listData.shopifyShopProductId && listData.status" :color="listData.containsError ? 'danger' : (listData.status === 'inactive' ? 'warning' : 'success')" slot="end">
<h5>{{ $t(listData.listingStatus) }}</h5>
</ion-label>
<ion-label v-else-if="listData.shopifyShopProductId" color="medium" slot="end">
<h5>{{ $t("No listing data") }}</h5>
</ion-label>
<ion-label v-else color="medium" slot="end">
<h5>{{ $t("Not linked") }}</h5>
</ion-label>
</ion-item>
</div>
</ion-card>
</section>
</ion-content>
Expand All @@ -383,7 +365,6 @@

<script lang="ts">
import {
IonButton,
IonButtons,
IonBackButton,
IonCard,
Expand Down Expand Up @@ -434,7 +415,6 @@ export default defineComponent({
name: "catalog-product-details",
components: {
Image,
IonButton,
IonButtons,
IonBackButton,
IonCard,
Expand Down Expand Up @@ -1114,7 +1094,7 @@ export default defineComponent({
<style scoped>
.header {
display: grid;
grid-template-columns: 200px 1fr 375px;
grid-template-columns: 200px 1fr 400px;
grid-gap: 16px;
padding: 16px 16px 48px;
}
Expand Down

0 comments on commit 8a17c01

Please sign in to comment.