Implemented: Enable reschedule button, add translate function, locale…

…s and optimize the code(hotwax#285)

src/components/ScheduledRestockPopover.vue

@@ -4,7 +4,7 @@
       <ion-list-header>
         {{ job.jobName || job.jobId }}
       </ion-list-header>
-      <ion-item button @click="changeRunTime(job)"> Reschedule
+      <ion-item button @click="changeRunTime(job)"> {{ translate("Reschedule") }}
         <ion-modal class="date-time-modal" :is-open="isUpdateDateTimeModalOpen" @didDismiss="() => isUpdateDateTimeModalOpen = false">
           <ion-content force-overscroll="false">
             <ion-datetime    
@@ -19,7 +19,7 @@
         </ion-modal>
       </ion-item>
       <ion-item button @click="cancelJob()" lines="none">
-        Cancel
+        {{ translate("Cancel") }}
       </ion-item>
     </ion-list>
   </ion-content>
@@ -96,7 +96,7 @@ export default defineComponent({
       const currentTime = DateTime.now().toMillis();
       const setTime = DateTime.fromISO(event.detail.value).toMillis();
       if (setTime < currentTime) {
-        showToast('Please provide a future date and time');
+        showToast(translate("Please provide a future date and time"));
         return;
       }
       this.updateJob(setTime)

src/locales/en.json

@@ -44,9 +44,13 @@
   "Expected input": "Expected input",
   "Enter product sku to search": "Enter product sku to search",
   "Facility": "Facility",
+  "Facility not found": "Facility not found",
+  "Facilities": "Facilities",
   "Facility ID": "Facility ID",
   "Facility Location": "Facility Location",
   "Failed to save CSV mapping.": "Failed to save CSV mapping.",
+  "Failed to schedule job": "Failed to schedule job",
+  "Failed to cancel job": "Failed to cancel job",
   "Failed to delete CSV mapping.": "Failed to delete CSV mapping.",
   "Failed to update CSV mapping.": "Failed to update CSV mapping.",
   "Fetching TimeZones": "Fetching TimeZones",
@@ -93,12 +97,14 @@
   "New version available, please update the app.": "New version available, please update the app.",
   "There are no saved CSV mappings to show. Create a new mapping from a file upload screen": "There are no saved CSV mappings to show. Create a new mapping from a file upload screen",
   "No new file upload. Please try again": "No new file upload. Please try again",
+  "No product found": "No product found",
   "No results found": "No results found",
   "No time zone found": "No time zone found",
   "of": "of",
   "OMS": "OMS",
   "OMS instance": "OMS instance",
   "Only select": "Only select",
+  "Optional, or select during review": "Optional, or select during review",
   "Order buffer": "Order buffer",
   "Order ID": "Order ID",
   "Ordered": "Ordered",
@@ -107,25 +113,36 @@
   "Password":  "Password",
   "Pending": "Pending",
   "Please ensure that the uploaded file contains accurate product information. If a product does not exist, the corresponding records will not be processed.": "Please ensure that the uploaded file contains accurate product information. If a product does not exist, the corresponding records will not be processed.",
+  "Please provide a future date and time": "Please provide a future date and time",
+  "Please select a schedule time": "Please select a schedule time",
+  "Please select a product store": "Please select a product store",
+  "Please select a shopify shop": "Please select a shopify shop",
   "Please upload a valid purchase order csv to continue": "Please upload a valid purchase order csv to continue",
   "Please upload a valid reset inventory csv to continue": "Please upload a valid reset inventory csv to continue",
   "PO External Order ID": "PO External Order ID",
   "Preorder": "Preorder",
   "Product Identification": "Product Identification",
   "Product SKU": "Product SKU",
+  "Product store": "Product store",
   "Product not found": "Product not found",
   "Purchase order": "Purchase order",
   "Purchase orders": "Purchase orders",
   "Quantity": "Quantity",
   "Ready to create an app?": "Ready to create an app?",
+  "Restock quantity": "Restock quantity",
   "Review": "Review",
   "Review PO details": "Review PO details",
   "Review purchase order": "Review purchase order",
   "Reviewing uploaded file": "Reviewing uploaded file",
   "Reset": "Reset",
   "Reset inventory": "Reset inventory",
   "Reset password": "Reset password",
+  "Restock": "Restock",
+  "Restock name": "Restock name",
+  "Restock details": "Restock details",
   "Results": "Results",
+  "Reschedule": "Reschedule",
+  "Required": "Required",
   "Safety stock": "Safety stock",
   "Save mapping": "Save mapping",
   "Sample": "Sample",
@@ -136,12 +153,18 @@
   "Search products": "Search products",
   "Search time zones": "Search time zones",
   "Seems like uploaded file has missing products, checked with initial records.": "Seems like uploaded file has missing products, checked with initial {initialCount} records.",
+  "Schedule": "Schedule",
   "Select": "Select",
   "Select mapping": "Select mapping",
   "Select SKU": "Select SKU",
   "Select all the fields to continue": "Select all the fields to continue",
   "Select time zone": "Select time zone",
+  "Select time": "Select time",
   "Select the column index for the following information in the uploaded CSV.": "Select the column index for the following information in the uploaded CSV.",
+  "Service updated successfully": "Service updated successfully",
+  "Service has been scheduled": "Service has been scheduled",
+  "Scheduled Restock": "Scheduled Restock",
+  "Shopify store": "Shopify store",
   "Some of the mapping fields are missing in the CSV: ": "Some of the mapping fields are missing in the CSV: {missingFields}",
   "Changes have been successfully applied. Some of the selected items have quantity less than or equal to order buffer. The quantity of those items is set to 1.": "Changes have been successfully applied. {newLine} Some of the selected items have quantity less than or equal to order buffer. The quantity of those items is set to 1.",
   "Something went wrong": "Something went wrong",

src/router/index.ts

@@ -78,13 +78,13 @@ const routes: Array<RouteRecordRaw> = [
     path: '/scheduled-restock',
     name: 'ScheduledRestock',
     component: ScheduledRestock,
-    // beforeEnter: authGuard
+    beforeEnter: authGuard
   },
   {
     path: '/scheduled-restock-review',
     name: 'ScheduledRestockDetail',
     component: ScheduledRestockReview,
-    // beforeEnter: authGuard
+    beforeEnter: authGuard
   },
   {
     path: '/login',

src/store/modules/stock/StockState.ts

@@ -8,10 +8,10 @@ export default interface StockState {
   fileName: string,
   restockItems: [],
   schedule: {
-    scheduledTime: string,
-    shopId: string,
-    restockName: string ,
-    productStoreId: string
+    scheduledTime: any,
+    shopId: any,
+    restockName: any ,
+    productStoreId: any
   }
   shopifyShops: any,
   jobs: any

src/store/modules/stock/actions.ts

@@ -17,7 +17,6 @@ const actions: ActionTree<StockState, RootState> = {
     //Fetching only top 
     const productIds = items.slice(0, process.env['VUE_APP_VIEW_SIZE']).map((item: any) => item.identification);
 
-
     // We are getting external facilityId from CSV, extract facilityId and pass for getting locations
     const externalFacilityIds = [...new Set(items.map((item: any) => item.externalFacilityId))]
     const facilities = await store.dispatch('util/fetchFacilities');
@@ -30,7 +29,6 @@ const actions: ActionTree<StockState, RootState> = {
     }).filter((facilityId: any) => facilityId)
     store.dispatch('util/fetchFacilityLocations', facilityIds);
 
-
     const viewSize = productIds.length;
     const viewIndex = 0;
     const payload = {
@@ -85,6 +83,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);
+
     // creating products object based on identification selected
     const products: any = Object.values(cachedProducts).reduce((updatedProducts: any, product: any) => {
       const identification = product.identifications.find((identification: any) => payload.identificationTypeId.toLowerCase() === identification.productIdTypeEnumId.toLowerCase())
@@ -112,12 +111,14 @@ const actions: ActionTree<StockState, RootState> = {
   async scheduledStock({ commit }, payload) {
     commit(types.STOCK_SCHEDULED_INFORMATION, payload)
   },
-
+  async clearScheduledStock({ commit }) {
+    commit(types.STOCK_SCHEDULED_INFORMATION, {})
+  },
   async shopifyShop({ commit }, payload) {
     commit(types.STOCK_SHOPIFY_SHOPS_UPDATED, payload)
   },
 
-  async scheduleService({ dispatch, state }, { params, restockName, scheduledTime}) {
+  async scheduleService({ dispatch, state }, { params, restockName }) {
     let resp;
 
       const job = await dispatch("fetchDraftJob")
@@ -149,7 +150,7 @@ const actions: ActionTree<StockState, RootState> = {
       }
 
       job?.priority && (payload['SERVICE_PRIORITY'] = job.priority.toString())
-      payload['SERVICE_TIME'] = scheduledTime.toString() || state.schedule.scheduledTime.toString()
+      payload['SERVICE_TIME'] = state.schedule.scheduledTime.toString()
       job?.sinceId && (payload['sinceId'] = job.sinceId)
 
       try {
@@ -199,7 +200,7 @@ const actions: ActionTree<StockState, RootState> = {
         throw resp.data
       }
     } catch(err) {
-      logger.error('Failed to fetcg draft job')
+      logger.error('Failed to fetch draft job')
       job = {}
     }
 

src/store/modules/user/actions.ts

@@ -108,6 +108,7 @@ const actions: ActionTree<UserState, RootState> = {
     resetConfig();
     this.dispatch('order/updatePurchaseOrders', {parsed: {}, original: {}, unidentifiedItems: []});
     this.dispatch('util/clearFacilities');
+    this.dispatch('stock/clearScheduledStock')
     // clearing field mappings and current mapping when the user logout
     commit(types.USER_FIELD_MAPPINGS_UPDATED, {})
     commit(types.USER_CURRENT_FIELD_MAPPING_UPDATED, {id: '', mappingType: '', name: '', value: {}})

src/views/ScheduledRestock.vue

@@ -3,14 +3,14 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button slot="start" />
-        <ion-title>Scheduled Restock</ion-title>
+        <ion-title>{{ translate("Scheduled Restock") }}</ion-title>
       </ion-toolbar>
     </ion-header>
 
     <ion-content>
       <main>
         <ion-item>
-          <ion-label>Restock</ion-label>
+          <ion-label>{{ translate("Restock") }}</ion-label>
           <ion-label class="ion-text-right ion-padding-end">{{ file.name }} </ion-label>
           <input @change="parse" ref="file" class="ion-hide" type="file" id="restockInputFile" placeholder=/>
           <label for="restockInputFile" fill="outline">{{ translate("Upload") }}</label>
@@ -32,7 +32,7 @@
         <ion-list>
           <ion-list-header>{{ translate("Select the column index for the following information in the uploaded CSV.") }}</ion-list-header>
           <ion-item-divider>
-            <ion-label> Required </ion-label>
+            <ion-label>{{ translate("Required") }} </ion-label>
           </ion-item-divider>
           <ion-item :key="field" v-for="(fieldValues, field) in fields">
             <template v-if="field === 'productIdentification'">
@@ -51,11 +51,11 @@
           </ion-item>
 
           <ion-item-divider>
-            <ion-label> Optional, or select during review </ion-label>
+            <ion-label>{{ translate("Optional, or select during review") }}</ion-label>
           </ion-item-divider>
           <ion-item>
-            <ion-label> Schedule </ion-label>   
-            <ion-button slot="end" class="date-time-button" @click="updateTime()">{{ schedule ? getTime(schedule) : 'Select time' }}</ion-button>
+            <ion-label>{{ translate("Schedule") }}</ion-label>   
+            <ion-button slot="end" class="date-time-button" @click="updateTime()">{{ schedule ? getTime(schedule) : translate("Select time") }}</ion-button>
             <ion-modal class="date-time-modal" :is-open="isDateTimeModalOpen" @didDismiss="() => isDateTimeModalOpen = false">
               <ion-content force-overscroll="false">
                 <ion-datetime    
@@ -77,14 +77,14 @@
             </ion-select>
           </ion-item>
           <ion-item>
-            <ion-select :disabled="!selectedProductStoreId" label="Shopify store" interface="popover" :placeholder = "translate('Select')" v-model="selectedShopifyShopId">
+            <ion-select :disabled="!selectedProductStoreId" :label="translate('Shopify store')" interface="popover" :placeholder = "translate('Select')" v-model="selectedShopifyShopId">
               <ion-select-option v-for="shop in shopifyShops" :key="shop.shopId" :value="shop.shopId">
                 {{ shop.name ? shop.name : shop.shopId }}
               </ion-select-option>
             </ion-select>
           </ion-item>
           <ion-item lines="full">
-            <ion-input label="Restock name" :placeholder='getPlaceholder()' v-model="restockName"></ion-input>
+            <ion-input :label="translate('Restock name')" :placeholder='getPlaceholder()' v-model="restockName"></ion-input>
           </ion-item>
         </ion-list>
 
@@ -93,15 +93,15 @@
           <ion-icon slot="end" :icon="arrowForwardOutline" />
         </ion-button>
 
-        <ion-list v-if="jobs.length">
-          <ion-list-header>Scheduled Restock</ion-list-header>
+        <ion-list v-if="jobs.length" class="job-section">
+          <ion-list-header>{{ translate("Scheduled Restock") }}</ion-list-header>
           <ion-item v-for="job in jobs" :key="job.jobId">
             <ion-label>
               <p class="overline">{{ job.jobId }}</p>
                 {{ job.jobName }}
               <p>{{ job?.runtimeData?.shipmentId }}</p>
             </ion-label>
-            <ion-button class="date-time-button" @click="changeRunTime(job)">{{ getTime(job.runTime) ? getTime(job.runTime) : 'Select time' }}</ion-button>
+            <ion-button class="date-time-button" @click="changeRunTime(job)">{{ getTime(job.runTime) ? getTime(job.runTime) : translate("Select time") }}</ion-button>
             <ion-button fill="clear" color="medium" @click="openScheduledRestockPopover($event, job)">
               <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
             </ion-button> 
@@ -193,17 +193,17 @@ export default defineComponent({
   },
   mixins:[ parseFileMixin ],
   async ionViewDidEnter() {
-    this.schedule = ""
-    this.restockName = ""
-    this.selectedProductStoreId = ""
-    this.selectedShopifyShopId = ""
     this.file = {}
     this.content = []
     this.fieldMapping = Object.keys(this.fields)?.reduce((fieldMapping, field) => {
       fieldMapping[field] = ""
       return fieldMapping;
     }, {})
     this.$refs.file.value = null;
+    this.schedule = ""
+    this.restockName = ""
+    this.selectedProductStoreId = ""
+    this.selectedShopifyShopId = ""
     await this.store.dispatch('stock/fetchJobs')
     await this.store.dispatch('util/fetchProductStores')
     await this.store.dispatch('util/fetchGoodIdentificationTypes');
@@ -230,7 +230,7 @@ export default defineComponent({
           throw resp.data
         }
       } catch (error) {
-        logger.error('Failed to fetch shopify shops.', error)
+        logger.error('Failed to fetch shopify shops', error)
       }
       this.shopifyShops = shopifyShops
     },
@@ -248,7 +248,7 @@ export default defineComponent({
       const currentTime = DateTime.now().toMillis();
       const setTime = DateTime.fromISO(event.detail.value).toMillis();
       if (setTime < currentTime) {
-        showToast('Please provide a future date and time');
+        showToast(translate("Please provide a future date and time"));
         return;
       }
       this.schedule = setTime;
@@ -257,7 +257,7 @@ export default defineComponent({
       const currentTime = DateTime.now().toMillis();
       const setTime = DateTime.fromISO(event.detail.value).toMillis();
       if (setTime < currentTime) {
-        showToast('Please provide a future date and time');
+        showToast(translate("Please provide a future date and time"));
         return;
       }
       this.updateJob(setTime)
@@ -414,4 +414,8 @@ main {
 label {
   cursor: pointer;
 }
+
+.job-section {
+  margin-bottom: 16px;
+}
 </style>