From 5335c2939a7c2307fec946918c22c75115233b6d Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yash.maheshwari@hotwax.co>
Date: Wed, 29 May 2024 22:55:20 +0530
Subject: [PATCH] Fixed: code to handle errors(#285)

---
 src/components/ScheduledRestockPopover.vue |  33 +++++-
 src/services/StockService.ts               |  20 +++-
 src/store/index.ts                         |   2 +-
 src/store/modules/stock/actions.ts         |  10 +-
 src/views/ScheduledRestock.vue             | 116 +++++++++++++++------
 src/views/ScheduledRestockReview.vue       |  66 +++++++-----
 6 files changed, 178 insertions(+), 69 deletions(-)

diff --git a/src/components/ScheduledRestockPopover.vue b/src/components/ScheduledRestockPopover.vue
index 4effb876..5333fdc1 100644
--- a/src/components/ScheduledRestockPopover.vue
+++ b/src/components/ScheduledRestockPopover.vue
@@ -2,12 +2,12 @@
   <ion-content>
     <ion-list>
       <ion-list-header>
-        jobname
+        {{ job.jobName || job.jobId }}
       </ion-list-header>
       <ion-item button>
         Reschedule
       </ion-item>
-      <ion-item button>
+      <ion-item button @click="cancelJob()" lines="none">
         Cancel
       </ion-item>
     </ion-list>
@@ -15,6 +15,10 @@
 </template>
     
 <script lang="ts">
+import logger from "@/logger";
+import { StockService } from "@/services/StockService";
+import { hasError, showToast } from "@/utils";
+import { translate } from "@hotwax/dxp-components";
 import {
   IonContent,
   IonItem,
@@ -22,6 +26,7 @@ import {
   IonListHeader
 } from "@ionic/vue";
 import { defineComponent } from "vue";
+import { useStore } from "vuex";
   
 export default defineComponent({
   name: "ScheduledRestockPopover",
@@ -31,10 +36,32 @@ export default defineComponent({
     IonList,
     IonListHeader
   },
+  props: ["job"],
+  methods: {
+    async cancelJob() {
+      let resp;
 
+      try {
+        resp = await StockService.cancelJob({
+          jobId: this.job.jobId
+        });
+        if (resp.status == 200 && !hasError(resp)) {
+          showToast(translate('Service updated successfully'))
+          await this.store.dispatch('stock/fetchJobs')
+        } else {
+          throw resp.data;
+        }
+      } catch (err) {
+        showToast(translate('Failed to cancel job'))
+        logger.error(err)
+      }
+      return resp;
+    },
+  },
   setup() {
-    
+    const store = useStore();
     return {
+      store
     }
   },
 });
diff --git a/src/services/StockService.ts b/src/services/StockService.ts
index 129f7db1..453ba906 100644
--- a/src/services/StockService.ts
+++ b/src/services/StockService.ts
@@ -16,7 +16,25 @@ const fetchJobInformation = async (payload: any): Promise <any>  => {
   });
 }
 
+const updateJob = async (payload: any): Promise <any>  => {
+  return api({
+    url: "service/updateJobSandbox",
+    method: "post",
+    data: payload
+  });
+}
+
+const cancelJob = async (payload: any): Promise <any> => {
+  return api({
+    url: "service/cancelScheduledJob",
+    method: "post",
+    data: payload
+  });
+}
+
 export const StockService = {
+  cancelJob,
   scheduleJob,
-  fetchJobInformation
+  fetchJobInformation,
+  updateJob
 }
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
index b05f7e7d..98c0a335 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -22,7 +22,7 @@ const state: any = {
 }
 
 const persistState = createPersistedState({
-    paths: ['user'],
+    paths: ['user', 'util.productStores'],
     fetchBeforeUse: true
 })
 
diff --git a/src/store/modules/stock/actions.ts b/src/store/modules/stock/actions.ts
index b864af1b..cb2afbbc 100644
--- a/src/store/modules/stock/actions.ts
+++ b/src/store/modules/stock/actions.ts
@@ -86,7 +86,7 @@ const actions: ActionTree<StockState, RootState> = {
     }, {});
     const facilityIds = externalFacilityIds.map((externalFacilityId: any) => facilityMapping[externalFacilityId]).filter((facilityId: any) => facilityId);
     const cachedProducts = await store.dispatch("product/fetchProducts", payload);
-    
+
     const initial = items.map((item: any) => {
       const product = cachedProducts[item.product];
       
@@ -154,14 +154,6 @@ const actions: ActionTree<StockState, RootState> = {
         resp = await StockService.scheduleJob({ ...payload });
         if (resp.status == 200 && !hasError(resp)) {
           showToast(translate('Service has been scheduled'));
-          // await dispatch('fetchJobs', {
-          //   inputFields: {
-          //     'systemJobEnumId': payload.systemJobEnumId,
-          //     'systemJobEnumId_op': 'equals',
-          //   },
-          //   orderBy: "runTime ASC"
-          // })
-          router.push('/scheduled-restock')
         } else {
           showToast(translate('Something went wrong'))
         }
diff --git a/src/views/ScheduledRestock.vue b/src/views/ScheduledRestock.vue
index 4eefa1f7..3b237fde 100644
--- a/src/views/ScheduledRestock.vue
+++ b/src/views/ScheduledRestock.vue
@@ -19,11 +19,11 @@
         <ion-list>
           <ion-list-header>{{ translate("Saved mappings") }}</ion-list-header>
           <div>
-            <ion-chip outline @click="addFieldMapping()"> 
+            <ion-chip :disabled="!this.content.length" outline @click="addFieldMapping()"> 
               <ion-icon :icon="addOutline" />
               <ion-label>{{ translate("New mapping") }}</ion-label>
             </ion-chip>
-            <ion-chip outline="true" v-for="(mapping, index) in fieldMappings('RSTSTK') ?? []" :key="index" @click="mapFields(mapping)"> 
+            <ion-chip :disabled="!this.content.length" outline="true" v-for="(mapping, index) in fieldMappings('RSTSTK') ?? []" :key="index" @click="mapFields(mapping)"> 
               {{ mapping.name }}
             </ion-chip>
           </div>
@@ -81,12 +81,12 @@
           </ion-item>
         </ion-list>
         
-        <ion-button color="medium" expand="block" class="review" @click="review()">
+        <ion-button :disabled="!this.content.length" color="medium" expand="block" class="review" @click="review()">
           {{ translate("Review") }}
           <ion-icon slot="end" :icon="arrowForwardOutline" />
         </ion-button>
 
-        <ion-list>
+        <ion-list v-if="jobs.length">
           <ion-list-header>Scheduled Restock</ion-list-header>
           <ion-item v-for="job in jobs" :key="job.jobId">
             <ion-label>
@@ -94,11 +94,23 @@
                 {{ job.jobName }}
               <p>inbound</p>
             </ion-label>
-            <ion-button color="light">{{ getTime(job.runTime) }}</ion-button> 
-            <ion-button fill="clear" color="medium" @click="openScheduledRestockPopover($event)">
+            <ion-button color="light" @click="changeRunTime(job)">{{ getTime(job.runTime) }}</ion-button>
+            <ion-button fill="clear" color="medium" @click="openScheduledRestockPopover($event, job)">
               <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
-            </ion-button>     
+            </ion-button> 
           </ion-item>
+          <ion-modal class="date-time-modal" :is-open="isUpdateDateTimeModalOpen" @didDismiss="() => isUpdateDateTimeModalOpen = false">
+            <ion-content force-overscroll="false">
+              <ion-datetime    
+                id="schedule-datetime"        
+                show-default-buttons 
+                hour-cycle="h23"
+                presentation="date-time"
+                :value="currentJob.runTime ? getDateTime(currentJob.runTime) : getDateTime(DateTime.now().toMillis())"
+                @ionChange="changeJobRunTime($event)"
+              />
+            </ion-content>
+          </ion-modal>
         </ion-list>
 
       </main>
@@ -120,6 +132,7 @@ import CreateMappingModal from "@/components/CreateMappingModal.vue";
 import { DateTime } from 'luxon';
 import { UtilService } from '@/services/UtilService'
 import logger from "@/logger";
+import { StockService } from "@/services/StockService";
 
 export default defineComponent({
   name: "ScheduledRestock",
@@ -156,18 +169,24 @@ export default defineComponent({
       shopifyShops: [],
       restockName: '',
       selectedProductStoreId: '',
-      selectedShopifyShopId: ''
+      selectedShopifyShopId: '',
+      isUpdateDateTimeModalOpen: false,
+      shopId: '',
+      currentJob: {}
     }
   },
   computed: {
     ...mapGetters({
       fieldMappings: 'user/getFieldMappings',
       jobs: 'stock/getScheduledJobs',
-      productStores: 'util/getProductStores'
+      productStores: 'util/getProductStores',
+      userProfile: 'user/getUserProfile'
     })
   },
   mixins:[ parseFileMixin ],
   async ionViewDidEnter() {
+    this.selectedProductStoreId = ""
+    this.selectedShopifyShopId = ""
     this.file = {}
     this.content = []
     this.fieldMapping = Object.keys(this.fields)?.reduce((fieldMapping, field) => {
@@ -204,6 +223,10 @@ export default defineComponent({
     updateTime() {
       this.isDateTimeModalOpen = true
     },
+    changeRunTime(job) {
+      this.currentJob = job
+      this.isUpdateDateTimeModalOpen = true
+    },
     getTime(time) {
       return DateTime.fromMillis(time, { setZone: true}).toFormat("hh:mm a dd MMM yyyy")
     },
@@ -216,6 +239,49 @@ export default defineComponent({
       }
       this.schedule = setTime;
     },
+    changeJobRunTime(event) {
+      const currentTime = DateTime.now().toMillis();
+      const setTime = DateTime.fromISO(event.detail.value).toMillis();
+      if (setTime < currentTime) {
+        showToast('Please provide a future date and time');
+        return;
+      }
+      this.updateJob(setTime)
+    },
+    async updateJob(updatedTime) {
+      let resp;
+      const job = {
+        ...this.currentJob,
+        runTime: updatedTime
+      }
+
+      const payload = {
+        'jobId': job.jobId,
+        'systemJobEnumId': job.systemJobEnumId,
+        'recurrenceTimeZone': this.userProfile.userTimeZone,
+        'tempExprId': job.jobStatus,
+        'statusId': "SERVICE_PENDING",
+        'runTimeEpoch': '',  // when updating a job clearning the epoch time, as job honors epoch time as runTime and the new job created also uses epoch time as runTime
+        'lastModifiedByUserLogin': this.userProfile.userLoginId
+      }
+
+      job?.runTime && (payload['runTime'] = job.runTime)
+      job?.sinceId && (payload['sinceId'] = job.sinceId)
+      job?.jobName && (payload['jobName'] = job.jobName)
+
+      try {
+        resp = await StockService.updateJob(payload)
+        if (!hasError(resp) && resp.data.successMessage) {
+          await this.store.dispatch('stock/fetchJobs')
+          showToast(translate('Service updated successfully'))
+        } else {
+          throw resp.data
+        }
+      } catch (err) {
+        showToast(translate('Failed to update job'))
+        logger.error(err)
+      }
+    },
     mapFields(mapping) {
       const fieldMapping = JSON.parse(JSON.stringify(mapping));
 
@@ -251,29 +317,20 @@ export default defineComponent({
         showToast(translate("Please upload a valid reset inventory csv to continue"));
       }
     },
-    async openScheduledRestockPopover(ev) {
+    async openScheduledRestockPopover(ev, job) {
       const popover = await popoverController.create({
         component: ScheduledRestockPopover,
         event: ev,
         translucent: true,
         showBackdrop: false,
+        componentProps: { job }
       });
       return popover.present();
     },
-    review() {
-      // const areAllFieldsSelected = Object.values(this.fieldMapping).every(field => field !== "");
-      // if (!areAllFieldsSelected) {
-      //   showToast(translate("Select all the fields to continue"));
-      //   return;
-      // } 
-
-      if(!this.selectedProductStoreId) {
-        showToast(translate("Please select product store."));
-        return;
-      }
-
-      if(!this.selectedProductStoreId) {
-        showToast(translate("Please select shopify shop"));
+    async review() {
+      const areAllFieldsSelected = Object.values(this.fieldMapping).every(field => field !== "");
+      if (!areAllFieldsSelected) {
+        showToast(translate("Select all the fields to continue"));
         return;
       }
 
@@ -287,9 +344,8 @@ export default defineComponent({
         }
       })
 
-      console.log('this.schedule', this.schedule)
-      this.store.dispatch('stock/processUpdateRestockItems', restockItems);
-      this.store.dispatch('stock/scheduledStock', {
+      await this.store.dispatch('stock/processUpdateRestockItems', restockItems);
+      await this.store.dispatch('stock/scheduledStock', {
         productStoreId: this.selectedProductStoreId,
         shopId: this.selectedShopifyShopId,
         restockName: this.restockName,
@@ -310,8 +366,10 @@ export default defineComponent({
       this.selectedShopifyShopId = ''
       this.selectedProductStoreId = event.detail.value;
       this.fetchShopifyShops(this.selectedProductStoreId);
-    }
-
+    },
+    getDateTime(time) {
+      return DateTime.fromMillis(time).toISO()
+    },
   },
   setup() {
     const router = useRouter();
diff --git a/src/views/ScheduledRestockReview.vue b/src/views/ScheduledRestockReview.vue
index fb90446a..04f22c2d 100644
--- a/src/views/ScheduledRestockReview.vue
+++ b/src/views/ScheduledRestockReview.vue
@@ -34,7 +34,7 @@
                   show-default-buttons 
                   hour-cycle="h23"
                   presentation="date-time"
-                  :value="schedule.scheduledTime ? getTime(schedule.scheduledTime) : DateTime.now()"
+                  :value="schedule.scheduledTime ? getDateTime(schedule.scheduledTime) : getDateTime(DateTime.now().toMillis())"
                   @ionChange="updateCustomTime($event)"
                 />
               </ion-content>
@@ -100,8 +100,8 @@
           <ion-checkbox :checked="item.isSelected" @ion-change="selectListItem(item)"/>
         </div>
       </div>
-      <ion-fab ion-fab vertical="bottom" horizontal="end" slot="fixed">
-        <ion-fab-button @click="save" :disabled="!selectedProductStoreId">
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button @click="save" :disabled="!Object.keys(parsedItems).length">
           <ion-icon :icon="cloudUploadOutline" />
         </ion-fab-button>
       </ion-fab>
@@ -111,17 +111,18 @@
   
 <script>
 import { defineComponent } from "vue";
-import { IonBackButton, IonButton, IonButtons, IonCheckbox, IonChip, IonContent,IonFab,IonFabButton, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonPage, IonSearchbar, IonSelect, IonSelectOption, IonThumbnail, IonTitle, IonToolbar, alertController} from "@ionic/vue";
-import { translate } from "@hotwax/dxp-components";
-import { DxpShopifyImg } from "@hotwax/dxp-components";
+import { IonBackButton, IonButton, IonButtons, IonCheckbox, IonChip, IonContent, IonDatetime, IonFab, IonFabButton, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonModal, IonPage, IonSearchbar, IonSelect, IonSelectOption, IonThumbnail, IonTitle, IonToolbar, alertController} from "@ionic/vue";
+import { DxpShopifyImg, translate } from "@hotwax/dxp-components";
 import { arrowUndoOutline, checkboxOutline, timerOutline, businessOutline, cloudUploadOutline, globeOutline} from "ionicons/icons"
 import { mapGetters, useStore } from "vuex";
 import { DateTime } from 'luxon';
-import { jsonToCsv, showToast } from '@/utils';
+import { showToast } from '@/utils';
 import { UploadService } from "@/services/UploadService";
 import { hasError } from "@/adapter";
 import logger from "@/logger";
 import { UtilService } from '@/services/UtilService'
+import emitter from "@/event-bus";
+import { useRouter } from "vue-router";
 
 
 export default defineComponent({
@@ -134,6 +135,7 @@ export default defineComponent({
     IonCheckbox,
     IonChip,
     IonContent,
+    IonDatetime,
     IonFab,
     IonFabButton,
     IonHeader,
@@ -142,6 +144,7 @@ export default defineComponent({
     IonItem,
     IonLabel,
     IonList,
+    IonModal,
     IonPage,
     IonSearchbar,
     IonSelect,
@@ -179,9 +182,12 @@ export default defineComponent({
     this.getFilteredRestockItems();
     this.restockName = this.schedule.restockName
     this.selectedProductStoreId = this.schedule.productStoreId;
-    this.selectedShopifyShopId =  this.schedule.shopId,
+    this.selectedShopifyShopId = this.schedule.shopId
     this.scheduledTime = this.schedule.scheduledTime;
-    this.fetchShopifyShops(this.selectedProductStoreId);
+
+    if(this.selectedProductStoreId) {
+      this.fetchShopifyShops(this.selectedProductStoreId);
+    }
   },
   // async beforeRouteLeave(to) { 
   //   if(to.path === "/login" ) return;
@@ -215,7 +221,7 @@ export default defineComponent({
   methods: {
     getFilteredRestockItems() {
       const filteredItems = {};
-      
+
       this.restockItems.map((item) => {
         if(filteredItems[item.externalFacilityId]) filteredItems[item.externalFacilityId].push(item)
         else filteredItems[item.externalFacilityId] = [item];
@@ -243,14 +249,13 @@ export default defineComponent({
       }
       this.schedule.scheduledTime = setTime;
     },
-    async save(){
-
+    async save() {
       if(!this.selectedProductStoreId) {
-        showToast(translate("Please select product store."));
+        showToast(translate("Please select product store"));
         return;
       }
 
-      if(!this.selectedProductStoreId) {
+      if(!this.selectedShopifyShopId) {
         showToast(translate("Please select shopify shop"));
         return;
       }
@@ -291,24 +296,28 @@ export default defineComponent({
             {
               text: translate("Upload"),
               handler: async () => {
-                try{
+                emitter.emit("presentLoader")
+                try {
                   const resp = await UploadService.createIncomingShipment(uploadData)
                   if(!hasError(resp) && resp.data.shipmentId) {
-                    this.store.dispatch("stock/scheduleService", { params: {
-                      shipmentId: resp.data.shipmentId,
-                      shopId: this.selectedShopifyShopId
-                    },
-                    restockName: this.restockName,
-                    scheduledTime: this.scheduledTime,
-                    productStoreId: this.selectedProductStoreId
-                   }) 
+                    await this.store.dispatch("stock/scheduleService", { 
+                      params: {
+                        shipmentId: resp.data.shipmentId,
+                        shopId: this.selectedShopifyShopId
+                      },
+                      restockName: this.restockName,
+                      scheduledTime: this.scheduledTime,
+                      productStoreId: this.selectedProductStoreId
+                    })
                   } else {
                     throw resp.data;
                   }
                 } catch(err) {
-                  showToast(translate("Failed to create shipment"))
-                  console.error(err)
+                  showToast(translate("Failed to schedule job"))
+                  logger.error('Failed to create shipment', err)
                 }
+                emitter.emit("dismissLoader")
+                this.router.push('/scheduled-restock')
               }
             },
           ],
@@ -376,9 +385,13 @@ export default defineComponent({
       }
       this.shopifyShops = shopifyShops
     },
+    getDateTime(time) {
+      return DateTime.fromMillis(time).toISO()
+    },
   },
   setup() {
     const store = useStore();
+    const router = useRouter();
 
     return {
       translate,
@@ -389,7 +402,8 @@ export default defineComponent({
       store,
       cloudUploadOutline,
       DateTime,
-      globeOutline
+      globeOutline,
+      router
     }
   }
 })