Updated: added facility in optional, select first value as default in…

… productStore & shopifyShop(hotwax#285)

.env.example

@@ -7,7 +7,7 @@ VUE_APP_PERMISSION_ID="IMPORT_APP_VIEW"
 VUE_APP_ALIAS={}
 VUE_APP_MAPPING_TYPES={"PO": "PO_MAPPING_PREF","RSTINV": "INV_MAPPING_PREF","RSTSTK": "STK_MAPPING_PREF"}
 VUE_APP_MAPPING_PO={"orderId": { "label": "Order ID", "required": true }, "productSku": { "label": "Shopify product SKU", "required": true },"orderDate": { "label": "Arrival date", "required": true }, "quantity": { "label": "Ordered quantity", "required": true }, "facility": { "label": "Facility ID", "required": true }}
-VUE_APP_MAPPING_RSTINV={"productIdentification": { "label": "Product Identification", "required": true }, "quantity": { "label": "Quantity", "required": true }, "facility": { "label": "Facility ID", "required": true }}
+VUE_APP_MAPPING_RSTINV={"productIdentification": { "label": "Product Identification", "required": true }, "quantity": { "label": "Quantity", "required": true }}
 VUE_APP_MAPPING_RSTSTK={"productIdentification": { "label": "Product Identification", "required": true }, "facility": { "label": "Facility", "required": true }, "restockQuantity": { "label": "Restock quantity", "required": true }}
 VUE_APP_DEFAULT_LOG_LEVEL="error"
 VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"

src/store/modules/stock/StockState.ts

@@ -11,7 +11,8 @@ export default interface StockState {
     scheduledTime: any,
     shopId: any,
     restockName: any ,
-    productStoreId: any
+    productStoreId: any,
+    facilityId: any
   }
   shopifyShops: any,
   jobs: any

src/store/modules/stock/actions.ts

@@ -75,15 +75,7 @@ const actions: ActionTree<StockState, RootState> = {
       identificationTypeId: items[0]?.identificationTypeId
     };
 
-    const externalFacilityIds = [...new Set(items.map((item: any) => item.externalFacilityId))];
-    const facilities = await store.dispatch('util/fetchFacilities');
-    const facilityMapping = facilities.reduce((facilityMapping: any, facility: any) => {
-      if (facility.externalId) facilityMapping[facility.externalId] = facility.facilityId;
-      return facilityMapping;
-    }, {});
-    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())
@@ -106,7 +98,7 @@ const actions: ActionTree<StockState, RootState> = {
       return;
     }).filter((item: any) => item);
 
-    commit(types.STOCK_SCHEDULE_ITEMS_UPDATED, initial );
+    commit(types.STOCK_SCHEDULE_ITEMS_UPDATED, initial);
   },
   async scheduledStock({ commit }, payload) {
     commit(types.STOCK_SCHEDULED_INFORMATION, payload)

src/store/modules/stock/index.ts

@@ -20,7 +20,8 @@ const orderModule: Module<StockState, RootState> = {
       scheduledTime: "",
       shopId: "",
       restockName: "",
-      productStoreId: ""
+      productStoreId: "",
+      facilityId: ""
     },
     shopifyShops: [],
     jobs: {}

src/store/modules/stock/mutations.ts

@@ -17,6 +17,7 @@ const mutations: MutationTree <StockState> = {
     state.schedule.shopId = payload.shopId;
     state.schedule.restockName = payload.restockName;
     state.schedule.productStoreId = payload.productStoreId
+    state.schedule.facilityId = payload.facilityId
   },
   [types.STOCK_SHOPIFY_SHOPS_UPDATED] (state, payload) {
     state.shopifyShops = payload

src/views/ScheduledRestock.vue

@@ -69,10 +69,17 @@
               </ion-content>
             </ion-modal>
           </ion-item>
+          <ion-item>
+            <ion-select :label="translate('Facility')" interface="popover" :placeholder = "translate('Select')" v-model="selectedFacility">
+              <ion-select-option v-for="facility in facilities" :key="facility.facilityId" :value="facility.externalId">
+                {{ facility.facilityName || facility.facilityId }}
+              </ion-select-option>
+            </ion-select>
+          </ion-item>
           <ion-item>
             <ion-select :label="translate('Product store')" interface="popover" :value="selectedProductStoreId" @ionChange="updateProductStore($event)">
               <ion-select-option v-for="productStore in productStores" :key="productStore.productStoreId" :value="productStore.productStoreId">
-                {{ productStore.storeName || productStore.productStoreId}}
+                {{ productStore.storeName || productStore.productStoreId }}
               </ion-select-option>
             </ion-select>
           </ion-item>
@@ -177,6 +184,7 @@ export default defineComponent({
       restockName: '',
       selectedProductStoreId: '',
       selectedShopifyShopId: '',
+      selectedFacility: '',
       isUpdateDateTimeModalOpen: false,
       shopId: '',
       currentJob: {},
@@ -188,7 +196,8 @@ export default defineComponent({
       goodIdentificationTypes: 'util/getGoodIdentificationTypes',
       jobs: 'stock/getScheduledJobs',
       productStores: 'util/getProductStores',
-      userProfile: 'user/getUserProfile'
+      userProfile: 'user/getUserProfile',
+      facilities: 'util/getFacilities',
     })
   },
   mixins:[ parseFileMixin ],
@@ -204,6 +213,8 @@ export default defineComponent({
     this.restockName = ""
     this.selectedProductStoreId = ""
     this.selectedShopifyShopId = ""
+    this.selectedFacility = ""
+    await this.store.dispatch('util/fetchFacilities');
     await this.store.dispatch('stock/fetchJobs')
     await this.store.dispatch('util/fetchProductStores')
     await this.store.dispatch('util/fetchGoodIdentificationTypes');
@@ -233,6 +244,7 @@ export default defineComponent({
         logger.error('Failed to fetch shopify shops', error)
       }
       this.shopifyShops = shopifyShops
+      this.selectedShopifyShopId = this.shopifyShops[0].shopId ? this.shopifyShops[0].shopId : '';
     },
     updateTime() {
       this.isDateTimeModalOpen = true
@@ -323,6 +335,8 @@ export default defineComponent({
           this.content = await this.parseCsv(this.file);
           this.fileColumns = Object.keys(this.content[0]);
           showToast(translate("File uploaded successfully"));
+          this.selectedProductStoreId = this.productStores[0].productStoreId ? this.productStores[5].productStoreId : ''
+          this.updateProductStore(this.selectedProductStoreId)
         } else {
           showToast(translate("No new file upload. Please try again"));
         }
@@ -351,10 +365,8 @@ export default defineComponent({
       const restockItems = this.content.map(item => {
         return {
           quantity: item[this.fieldMapping.restockQuantity],
-          facilityId: '',
           identification: item[this.fieldMapping.productIdentification],
           identificationTypeId: this.identificationTypeId,
-          externalFacilityId: item[this.fieldMapping.facility]
         }
       })
 
@@ -363,7 +375,8 @@ export default defineComponent({
         productStoreId: this.selectedProductStoreId,
         shopId: this.selectedShopifyShopId,
         restockName: this.restockName,
-        scheduledTime: this.schedule
+        scheduledTime: this.schedule,
+        facilityId: this.selectedFacility
       }) 
       this.router.push({
         name:'ScheduledRestockDetail'
@@ -376,10 +389,13 @@ export default defineComponent({
       });
       return createMappingModal.present();
     },
-    updateProductStore(event) {
+    async updateProductStore(event) {
       this.selectedShopifyShopId = ''
-      this.selectedProductStoreId = event.detail.value;
-      this.fetchShopifyShops(this.selectedProductStoreId);
+      let productStoreId = event
+      if (event?.detail?.value) {
+        productStoreId = event.detail.value;
+      }
+      this.fetchShopifyShops(productStoreId);
     },
     getDateTime(time) {
       return DateTime.fromMillis(time).toISO()