Skip to content

Commit

Permalink
Merge pull request #651 from amansinghbais/job-manager/#524
Browse files Browse the repository at this point in the history 
Implemented: skeleton text in detail items to displayed till job fetched (#524)
  • Loading branch information
@ymaheshwari1
ymaheshwari1 authored Nov 26, 2024
2 parents 4a8bcc6 + 11fc7b7 commit ad6e02d
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 24 deletions.
22 changes: 16 additions & 6 deletions src/views/Fulfillment.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
</ion-card-header>
<ion-item button @click="viewJobConfiguration({ id: 'SHIP_PKD_ODRS', status: getJobStatus(jobEnums['SHIP_PKD_ODRS']) })" detail>
<ion-label class="ion-text-wrap">{{ translate("Ship packed orders") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('SHIP_PKD_ODRS') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('SHIP_PKD_ODRS') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item lines="none">
<ion-label class="ion-text-wrap">
Expand All @@ -31,7 +32,8 @@
</ion-card-header>
<ion-item button @click="viewJobConfiguration({ id: 'ODR_FLMNT_HST', status: getJobStatus(jobEnums['ODR_FLMNT_HST']) })" detail>
<ion-label class="ion-text-wrap">{{ translate("Order fulfillment") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('ODR_FLMNT_HST') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('ODR_FLMNT_HST') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item lines="none">
<ion-label class="ion-text-wrap">
Expand All @@ -46,15 +48,18 @@
</ion-card-header>
<ion-item button @click="viewJobConfiguration({ id: 'OPN_BOPIS_ORD_NT', status: getJobStatus(jobEnums['OPN_BOPIS_ORD_NT']) })" detail>
<ion-label class="ion-text-wrap">{{ translate("Open BOPIS order notification") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('OPN_BOPIS_ORD_NT') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('OPN_BOPIS_ORD_NT') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item button @click="viewJobConfiguration({ id: 'READYPICK_BOPIS_ORD_NT', status: getJobStatus(jobEnums['READYPICK_BOPIS_ORD_NT']) })" detail>
<ion-label class="ion-text-wrap">{{ translate("Ready to pick BOPIS order notification") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('READYPICK_BOPIS_ORD_NT') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('READYPICK_BOPIS_ORD_NT') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item button @click="viewJobConfiguration({ id: 'OPEN_SHIPPING_ORD_NT', status: getJobStatus(jobEnums['OPEN_SHIPPING_ORD_NT']) })" detail>
<ion-label class="ion-text-wrap">{{ translate("Open shipping order notification") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('OPEN_SHIPPING_ORD_NT') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('OPEN_SHIPPING_ORD_NT') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item lines="none">
<ion-label class="ion-text-wrap">
Expand Down Expand Up @@ -110,6 +115,7 @@ import {
IonLabel,
IonMenuButton,
IonPage,
IonSkeletonText,
IonTitle,
IonToggle,
IonToolbar,
Expand Down Expand Up @@ -142,6 +148,7 @@ export default defineComponent({
IonLabel,
IonMenuButton,
IonPage,
IonSkeletonText,
IonTitle,
IonToggle,
IonToolbar,
Expand All @@ -159,7 +166,8 @@ export default defineComponent({
isDesktop: isPlatform('desktop'),
autoCancelDays: '',
enumTypeId: 'FULFILLMENT_SYS_JOB',
initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any
initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
isLoading: false
}
},
computed: {
Expand Down Expand Up @@ -233,6 +241,7 @@ export default defineComponent({
}
},
async fetchJobs(){
this.isLoading = true
await this.store.dispatch("job/fetchJobs", {
"inputFields": {
"enumTypeId": "FULFILLMENT_SYS_JOB"
Expand All @@ -241,6 +250,7 @@ export default defineComponent({
if (this.currentEComStore.productStoreId) {
this.getAutoCancelDays();
}
this.isLoading = false
},
async getAutoCancelDays(){
const payload = {
Expand Down
12 changes: 9 additions & 3 deletions src/views/Inventory.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
</ion-card-header>
<ion-item button @click="viewJobConfiguration({ id: 'HARD_SYNC', status: getJobStatus(jobEnums['HARD_SYNC'])})" detail>
<ion-label class="ion-text-wrap">{{ translate("Hard sync") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('HARD_SYNC') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('HARD_SYNC') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item lines="none">
<ion-label class="ion-text-wrap">
Expand Down Expand Up @@ -56,6 +57,7 @@ import {
IonLabel,
IonMenuButton,
IonPage,
IonSkeletonText,
IonTitle,
IonToggle,
IonToolbar,
Expand Down Expand Up @@ -83,6 +85,7 @@ export default defineComponent({
IonLabel,
IonMenuButton,
IonPage,
IonSkeletonText,
IonTitle,
IonToggle,
IonToolbar,
Expand All @@ -100,6 +103,7 @@ export default defineComponent({
isDesktop: isPlatform('desktop'),
enumTypeId: 'INVENTORY_SYS_JOB',
webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
isLoading: false
}
},
computed: {
Expand Down Expand Up @@ -165,12 +169,14 @@ export default defineComponent({
this.getTemporalExpr(this.getJobStatus(this.jobEnums[enumId]))?.description :
translate('Disabled')
},
fetchJobs(){
this.store.dispatch("job/fetchJobs", {
async fetchJobs(){
this.isLoading = true
await this.store.dispatch("job/fetchJobs", {
"inputFields":{
"enumTypeId": "INVENTORY_SYS_JOB"
}
});
this.isLoading = false
},
fetchData() {
this.store.dispatch('webhook/fetchWebhooks')
Expand Down
34 changes: 24 additions & 10 deletions src/views/Orders.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,27 +16,33 @@
</ion-card-header>
<ion-item @click="viewJobConfiguration({ id: 'IMP_NEW_ORDERS', status: getJobStatus(jobEnums['IMP_NEW_ORDERS'])})" detail button>
<ion-label class="ion-text-wrap">{{ translate("New orders") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('IMP_NEW_ORDERS') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('IMP_NEW_ORDERS') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item @click="viewJobConfiguration({ id: 'APR_ORD', status: getJobStatus(jobEnums['APR_ORD'])})" detail button>
<ion-label class="ion-text-wrap">{{ translate("Approve orders") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('APR_ORD') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('APR_ORD') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item @click="viewJobConfiguration({ id: 'UPDT_ORDS', status: getJobStatus(jobEnums['UPDT_ORDS'])})" detail button>
<ion-label class="ion-text-wrap">{{ translate("Update orders") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('UPDT_ORDS') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('UPDT_ORDS') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item @click="viewJobConfiguration({ id: 'IMP_CANCELLED_ORDERS', status: getJobStatus(jobEnums['IMP_CANCELLED_ORDERS'])})" detail button>
<ion-label class="ion-text-wrap">{{ translate("Cancelled orders") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('IMP_CANCELLED_ORDERS') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('IMP_CANCELLED_ORDERS') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item @click="viewJobConfiguration({ id: 'IMP_CANCELLED_ITEMS', status: getJobStatus(jobEnums['IMP_CANCELLED_ITEMS'])})" detail button>
<ion-label class="ion-text-wrap">{{ translate("Cancelled items") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('IMP_CANCELLED_ITEMS') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('IMP_CANCELLED_ITEMS') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item @click="viewJobConfiguration({ id: 'IMP_RETURNS', status: getJobStatus(jobEnums['IMP_RETURNS'])})" detail button>
<ion-label class="ion-text-wrap">{{ translate("Returns") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('IMP_RETURNS') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('IMP_RETURNS') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
</ion-card>

Expand Down Expand Up @@ -72,15 +78,18 @@
</ion-card-header>
<ion-item @click="viewJobConfiguration({ id: 'UPLD_CMPLT_ORDRS', status: getJobStatus(jobEnums['UPLD_CMPLT_ORDRS'])})" detail button>
<ion-label class="ion-text-wrap">{{ translate("Completed orders") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('UPLD_CMPLT_ORDRS') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('UPLD_CMPLT_ORDRS') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item @click="viewJobConfiguration({ id: 'UPLD_CNCLD_ORDRS', status: getJobStatus(jobEnums['UPLD_CNCLD_ORDRS'])})" detail button>
<ion-label class="ion-text-wrap">{{ translate("Cancelled orders") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('UPLD_CNCLD_ORDRS') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('UPLD_CNCLD_ORDRS') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item @click="viewJobConfiguration({ id: 'UPLD_REFUNDS', status: getJobStatus(jobEnums['UPLD_REFUNDS'])})" detail button>
<ion-label class="ion-text-wrap">{{ translate("Refunds") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('UPLD_REFUNDS') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('UPLD_REFUNDS') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
</ion-card>
<MoreJobs v-if="getMoreJobs({...jobEnums, ...initialLoadJobEnums}, enumTypeId).length" :jobs="getMoreJobs({...jobEnums, ...initialLoadJobEnums}, enumTypeId)" />
Expand All @@ -105,6 +114,7 @@ import {
IonLabel,
IonMenuButton,
IonPage,
IonSkeletonText,
IonTitle,
IonToggle,
IonToolbar,
Expand Down Expand Up @@ -133,6 +143,7 @@ export default defineComponent({
IonLabel,
IonMenuButton,
IonPage,
IonSkeletonText,
IonTitle,
IonToggle,
IonToolbar,
Expand All @@ -150,7 +161,8 @@ export default defineComponent({
isJobDetailAnimationCompleted: false,
isDesktop: isPlatform('desktop'),
enumTypeId: 'ORDER_SYS_JOB',
initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any
initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
isLoading: false
}
},
computed: {
Expand Down Expand Up @@ -268,12 +280,14 @@ export default defineComponent({
translate('Disabled')
},
async fetchJobs(){
this.isLoading = true;
this.store.dispatch('webhook/fetchWebhooks')
await this.store.dispatch("job/fetchJobs", {
"inputFields": {
"enumTypeId": "ORDER_SYS_JOB"
}
});
this.isLoading = false
}
},
mounted () {
Expand Down
17 changes: 12 additions & 5 deletions src/views/Product.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@
</ion-card-header>
<ion-item button @click="viewJobConfiguration({ id: 'IMP_PRDTS', status: getJobStatus(jobEnums['IMP_PRDTS'])})" detail>
<ion-label class="ion-text-wrap">{{ translate("Import products") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('IMP_PRDTS') }}</ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('IMP_PRDTS') }}</ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item button @click="viewJobConfiguration({ id: 'SYNC_PRDTS', status: getJobStatus(jobEnums['SYNC_PRDTS'])})" detail>
<ion-label class="ion-text-wrap">{{ translate("Sync products") }}</ion-label>
<ion-label slot="end">{{ getTemporalExpression('SYNC_PRDTS') }} </ion-label>
<ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('SYNC_PRDTS') }} </ion-label>
<ion-skeleton-text v-else style="width: 30%;" animated />
</ion-item>
<ion-item lines="none">
<ion-label class="ion-text-wrap"><p>{{ translate("Sync products and category structures from Shopify into HotWax Commerce and keep them up to date.") }}</p></ion-label>
Expand Down Expand Up @@ -64,6 +66,7 @@ import {
IonLabel,
IonMenuButton,
IonPage,
IonSkeletonText,
IonTitle,
IonToolbar,
IonToggle,
Expand Down Expand Up @@ -91,6 +94,7 @@ export default defineComponent({
IonLabel,
IonMenuButton,
IonPage,
IonSkeletonText,
IonTitle,
IonToolbar,
IonToggle,
Expand Down Expand Up @@ -126,7 +130,8 @@ export default defineComponent({
isDesktop: isPlatform('desktop'),
webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
enumTypeId: 'PRODUCT_SYS_JOB',
initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any
initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
isLoading: false
}
},
mounted () {
Expand Down Expand Up @@ -187,13 +192,15 @@ export default defineComponent({
this.getTemporalExpr(this.getJobStatus(this.jobEnums[enumId]))?.description :
translate('Disabled')
},
fetchJobs(){
this.store.dispatch("job/fetchJobs", {
async fetchJobs(){
this.isLoading = true
await this.store.dispatch("job/fetchJobs", {
"inputFields":{
"enumTypeId": "PRODUCT_SYS_JOB"
}
});
this.store.dispatch('webhook/fetchWebhooks')
this.isLoading = false
}
},
setup() {
Expand Down

0 comments on commit ad6e02d

Please sign in to comment.