Merge pull request #12 from disha1202/#22xdyng

Implemented logic to update facility(#22xdyng)

changelogs/unreleased/-22xdyng.yml

@@ -0,0 +1,6 @@
+---
+title: Implemented logic to select facility column and option to update it
+ticket_id: "#22xdyng"
+merge_request: 12
+author: Disha Talreja
+type: added

src/locales/en.json

@@ -1,5 +1,4 @@
 {
-  "all items": "all items",
   "Apply": "Apply",
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to?",
   "Arrival date": "Arrival date",
@@ -13,8 +12,11 @@
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Confirm": "Confirm",
   "Dismiss": "Dismiss",
+  "Facility": "Facility",
+  "Facility ID": "Facility ID",
   "Import": "Import",
   "Instance Url": "Instance Url",
+  "Lead time": "Lead time",
   "Login": "Login",
   "Logout": "Logout",
   "No time zone found": "No time zone found",
@@ -32,6 +34,7 @@
   "Ready to create an app?": "Ready to create an app?",
   "REVIEW": "REVIEW",
   "Reset": "Reset",
+  "Safety stock": "Safety stock",
   "Search time zones": "Search time zones",
   "Select": "Select",
   "Select time zone": "Select time zone",

src/services/OrderService.ts

@@ -0,0 +1,12 @@
+import api from '@/api';
+
+const getFacilities= async (payload: any): Promise <any> => {
+    return api({
+      url: "/performFind",
+      method: "POST",
+      data: payload
+    });
+  }
+export const OrderService = {
+    getFacilities
+  }

src/store/modules/order/actions.ts

@@ -28,7 +28,7 @@ const actions: ActionTree<OrderState, RootState> = {
         item.parentProductName = product.parentProductName;
         item.imageUrl = product.mainImageUrl;
         item.isNewProduct = false;
-        item.isSelected = false;
+        item.isSelected = true;
         return item;
     })
     const original = JSON.parse(JSON.stringify(items))

src/views/OrderDetail.vue

@@ -24,21 +24,27 @@
         <div class="filters">
           <ion-item>
             <ion-label>{{ $t("Buffer days") }}</ion-label>
-            <ion-input v-model="numberOfDays" type="text" :placeholder = "$t('all items')" /> 
+            <ion-input v-model="numberOfDays" type="number" :placeholder = "$t('Lead time')" /> 
           </ion-item>
           <ion-item>
             <ion-label>{{ $t("Order buffer") }}</ion-label>
-            <ion-input v-model="numberOfPieces" type="number" />
+            <ion-input v-model="numberOfPieces" type="number" :placeholder = "$t('Safety stock')" />
           </ion-item>
           <ion-item>
             <ion-label>{{ $t("Catalog") }}</ion-label>
-            <ion-select v-model="catalog">
-              <ion-select-option>{{ $t("Backorder") }}</ion-select-option>
-              <ion-select-option>{{ $t("Preorder") }}</ion-select-option>
+            <ion-select selected-text="Backorder" v-model="catalog">
+              <ion-select-option value="N">{{ $t("Backorder") }}</ion-select-option>
+              <ion-select-option value="Y">{{ $t("Preorder") }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-label>{{ $t("Facility") }}</ion-label>
+            <ion-select v-model="facilityId">
+              <ion-select-option v-for="facility in facilities" :key="facility" :value="facility.externalId">{{ facility.facilityName }}</ion-select-option>
             </ion-select>
           </ion-item>
           <ion-button expand="block" fill="outline" @click="apply">{{ $t("Apply") }}</ion-button>
-        </div> 
+        </div>
       </div>  
 
       <div v-for="id in getGroupList(ordersList.items)" :key="id" >
@@ -84,14 +90,16 @@
   </ion-page>
 </template>   
 <script lang="ts">
+import { OrderService } from "@/services/OrderService";
 import Image from '@/components/Image.vue';
-import parentProductPopover from '@/components/ProductPopover.vue'
+import ProductPopover from '@/components/ProductPopover.vue'
 import { defineComponent } from 'vue';
 import { mapGetters, useStore } from "vuex";
 import { useRouter } from 'vue-router';
 import { DateTime } from 'luxon';
 import { IonPage, IonHeader, IonToolbar, IonBackButton, IonTitle, IonContent, IonSearchbar, IonItem, IonThumbnail, IonLabel, IonInput, IonChip, IonIcon, IonButton, IonCheckbox, IonSelect, IonSelectOption, IonButtons, popoverController } from '@ionic/vue'
 import { ellipsisVerticalOutline, sendOutline, checkboxOutline, arrowUndoOutline } from 'ionicons/icons'
+import { hasError } from "@/utils";
 export default defineComponent({
   components: {
     Image,
@@ -127,14 +135,37 @@ export default defineComponent({
     return {
       numberOfDays: 0,
       numberOfPieces: 0,
-      catalog: "",
+      catalog: "N",
+      facilityId: "",
+      facilities: [] as any
     }
   },
+  mounted(){
+   this.fetchFacilities();
+  },
   methods: {
+    async fetchFacilities(){
+      const payload = {
+        "inputFields": {
+          "externalId_fld0_op": "not-empty",
+        },
+        "fieldList": ["externalId", "facilityName"],
+        "entityName": "Facility",
+        "noConditionFind": "Y"
+      }
+      try {
+        const resp = await OrderService.getFacilities(payload);
+        if(resp.status === 200 && !hasError(resp)){
+          this.facilities = resp.data.docs;
+        }
+      } catch(err) {
+        console.error(err)
+      }
+    },
     async UpdateProduct(ev: Event, id: any, isVirtual: boolean, item: any) {
       const popover = await popoverController
         .create({
-          component: parentProductPopover,
+          component: ProductPopover,
           event: ev,
           translucent: true,
           showBackdrop: true,
@@ -160,7 +191,10 @@ export default defineComponent({
         if (item.isSelected) {
           item.quantityOrdered -= this.numberOfPieces;
           item.arrivalDate = DateTime.fromFormat(item.arrivalDate, "D").plus({ days: this.numberOfDays }).toFormat('MM/dd/yyyy');
-          item.isNewProduct = this.catalog == "Preorder"
+          item.isNewProduct = this.catalog == "Preorder";
+          if(this.facilityId) {
+            item.facilityId = this.facilityId;
+          }
         }
       })
       this.store.dispatch('order/updatedOrderListItems', this.ordersList.items);

src/views/PurchaseOrder.vue

@@ -48,6 +48,12 @@
                 <ion-select-option v-bind:key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
               </ion-select>
           </ion-item>
+          <ion-item>
+              <ion-label>{{ $t("Facility ID") }}</ion-label>
+              <ion-select v-if="content.length" :placeholder = "$t('Select')" v-model="facilityField">
+                <ion-select-option v-bind:key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
+              </ion-select>
+          </ion-item>
           <ion-button color="dark" fill="solid" @click="mapFields" expand="block">{{ $t("REVIEW") }}</ion-button>
         </div>
       </div>     
@@ -85,6 +91,7 @@ export default defineComponent({
         productUpcField: "",
         dateField: "",
         quantityField: "",
+        facilityField: "",
         orderItemsList: [],
       }
     },
@@ -105,13 +112,15 @@ export default defineComponent({
           shopifyProductSKU: [],
           shopifyProductUPC: [],
           arrivalDate: [],
-          quantityOrdered: []
+          quantityOrdered: [],
+          facilityId: []
         }
           orderItem.orderId = item[this.orderIdField];
           orderItem.shopifyProductSKU = item[this.productSkuField];
           orderItem.shopifyProductUPC = item[this.productUpcField];
           orderItem.arrivalDate = item[this.dateField];
           orderItem.quantityOrdered = item[this.quantityField];
+          orderItem.facilityId = item[this.facilityField]
           return orderItem
         })
         this.store.dispatch('order/updatedOrderList', this.orderItemsList);
@@ -120,7 +129,7 @@ export default defineComponent({
         })
       },
     }, 
-    setup(){
+    setup() {
     const router = useRouter();
     const store = useStore();
     return {