Implemented logic to support multiple PO(#85zrh07mb)

src/components/BulkAdjustmentModal.vue

@@ -11,38 +11,36 @@
   </ion-header>
 
   <ion-content>
-
     <ion-item lines="full">
       <ion-label>{{ $t("Buffer days") }}</ion-label>
-      <ion-input type="number" :placeholder = "$t('Lead time')" /> 
+      <ion-input v-model="numberOfDays" type="number" :placeholder = "$t('Lead time')" /> 
     </ion-item>
 
     <ion-item lines="full">
       <ion-label>{{ $t("Order buffer") }}</ion-label>
-      <ion-input type="number" :placeholder = "$t('Safety stock')" />
+      <ion-input v-model="numberOfPieces" type="number" :placeholder = "$t('Safety stock')" />
     </ion-item>
 
     <ion-item>
       <ion-label>{{ $t("Catalog") }}</ion-label>
-      <ion-select interface="popover" value="N">
+      <ion-select interface="popover" value="N" 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 interface="popover" value="facility">
-        <ion-select-option value="facility">NJ Warehouse</ion-select-option>
+      <ion-select interface="popover" value="facility" v-model="facilityId">
+        <ion-select-option v-for="facility in facilities" :key="facility" :value="facility.facilityId">{{ facility.facilityName }}</ion-select-option>
       </ion-select>
     </ion-item>
 
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button>
+      <ion-fab-button @click="saveChanges">
         <ion-icon :icon="saveOutline" />
       </ion-fab-button>
     </ion-fab>
-
   </ion-content>
 </template>
 <script lang="ts">
@@ -66,6 +64,10 @@ import {
 import { defineComponent } from "vue";
 import { close, saveOutline } from "ionicons/icons";
 import { useStore } from "@/store";
+import { mapGetters } from "vuex";
+import { DateTime } from "luxon";
+import { showToast } from "@/utils";
+import { translate } from "@/i18n";
 export default defineComponent({
   name: "BulkAdjustment",
   components: {
@@ -84,15 +86,41 @@ export default defineComponent({
     IonTitle,
     IonToolbar 
   },
-  props: [""],
   data() {
-    return { }
+    return {
+      numberOfDays: 0,
+      numberOfPieces: 0,
+      catalog: "N",
+      facilityId: "",
+    }
+  },
+  computed: {
+    ...mapGetters({
+      facilities: 'util/getFacilities',
+      ordersList: 'order/getOrder',
+      dateTimeFormat : 'user/getDateTimeFormat',
+    })
   },
-  computed: { },
   methods: {
     closeModal() {
       modalController.dismiss({ dismissed: true });
-    }
+    },
+    saveChanges() {
+      Object.values(this.ordersList).map((orderItems: any) => orderItems).flat().map((item: any) => {
+        if (item.isSelected) {
+          item.quantityOrdered -= this.numberOfPieces;
+          if(this.numberOfDays) item.arrivalDate = DateTime.fromFormat(item.arrivalDate, this.dateTimeFormat).plus({ days: this.numberOfDays }).toFormat(this.dateTimeFormat);
+          item.isNewProduct = this.catalog;
+          if(this.facilityId) {
+            item.facilityId = this.facilityId;
+            item.externalFacilityId = "";
+          }
+        }
+      })
+      this.store.dispatch('order/updatedOrderListItems', this.ordersList);
+      modalController.dismiss({ dismissed: true });
+      showToast(translate("Changes have been successfully applied"));
+    },
   },
   setup() {
     const store = useStore();

src/components/DateTimeParseErrorModal.vue

@@ -12,43 +12,32 @@
 
   <ion-content>
     <ion-item lines="none">
-      <p>
-        <ion-note class="overline">{{ $t("File upload") }}</ion-note>
-        <ion-label>{{ $t("Date format") }}</ion-label> 
-      </p>
+      <ion-label>
+        <p class="overline">{{ $t("File upload") }}</p>
+        <h1>{{ $t("Date format") }}</h1> 
+        <p class="ion-text-wrap">{{ $t("Enter a custom date time format that you want to use when uploading documents to HotWax Commerce.") }}</p>
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-input clear-input='true' v-model="dateTimeFormat" :value="dateTimeFormat" :placeholder="defaultDateTimeFormat" />
+    </ion-item>
+
+    <ion-item>
+      <ion-label>{{ sampleDateTime }}</ion-label>
+      <ion-badge color="warning">{{ $t("Sample") }}</ion-badge>
     </ion-item>
 
-    <ion-list>
-
-      <ion-item lines="none">
-        <ion-label class="ion-text-wrap">
-          <p>{{ $t("Enter a custom date time format that you want to use when uploading documents to HotWax Commerce.") }}</p>
-        </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-input clear-input='true' value="DD/MM/YYYY" />
-      </ion-item>
-
-      <ion-item >
-        <ion-label>02/02/2022</ion-label>
-        <ion-badge color="warning">{{ $t("Sample") }}</ion-badge>
-      </ion-item>
-
-    </ion-list>
-
-    <div>
-      <ion-button class="ion-padding-start" fill="outline">
-        {{ $t("Check sample") }}
-      </ion-button>
-    </div>
+    <ion-button class="ion-margin-top ion-margin-start" fill="outline" @click="parse">
+      {{ $t("Check sample") }}
+    </ion-button>
 
     <ion-item lines="none">
-      <ion-label color="medium">{{ $t("This will update 50 products across 3 POs") }}</ion-label>
+      <ion-label color="medium">{{ $t("This will update products across POs", {numberOfProducts, numberOfPos}) }}</ion-label>
     </ion-item>
 
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button>
+      <ion-fab-button @click="updateDateTimeFormat">
         <ion-icon :icon="saveOutline" />
       </ion-fab-button>
     </ion-fab>
@@ -74,6 +63,10 @@ import {
 import { defineComponent } from "vue";
 import { close, saveOutline } from "ionicons/icons";
 import { useStore } from "@/store";
+import { mapGetters } from "vuex";
+import { DateTime } from "luxon";
+import { showToast } from "@/utils";
+import { translate } from "@/i18n";
 export default defineComponent({
   name: "DateTimeParseErrorModal",
   components: {
@@ -91,15 +84,38 @@ export default defineComponent({
     IonTitle,
     IonToolbar 
   },
-  props: [""],
   data() {
-    return { }
+    return { 
+      sampleDateTime: '',
+      dateTimeFormat: '',
+      defaultDateTimeFormat: process.env.VUE_APP_DATE_FORMAT ? process.env.VUE_APP_DATE_FORMAT : 'MM/dd/yyyy'
+    }
+  },
+  props: ["numberOfProducts", "numberOfPos"],
+  computed: {
+    ...mapGetters({
+      currentDateTimeFormat: 'user/getDateTimeFormat'
+    })
+  },
+  mounted(){
+    this.dateTimeFormat = this.currentDateTimeFormat
+    this.parse();
   },
-  computed: { },
   methods: {
     closeModal() {
       modalController.dismiss({ dismissed: true });
-    }
+    },
+    updateDateTimeFormat(){
+      this.dateTimeFormat = this.dateTimeFormat ? this.dateTimeFormat : this.defaultDateTimeFormat
+      this.store.dispatch('user/setDateTimeFormat', this.dateTimeFormat);
+      this.parse();
+      modalController.dismiss({ dismissed: true });
+      showToast(translate("Date time format has been updated successfully"));
+
+    },
+    parse(){
+      this.sampleDateTime = DateTime.now().toFormat(this.dateTimeFormat);
+    },
   },
   setup() {
     const store = useStore();

src/components/MissingFacilitiesModal.vue

@@ -12,19 +12,18 @@
 
   <ion-content>
 
-    <ion-item lines="full">
-      <p>
-        <ion-label>input facility value</ion-label>
-        <ion-note>5 {{ $t("line items") }}</ion-note> 
-      </p>
-
-      <ion-select interface="popover" slot="end" value="facility">
-        <ion-select-option value="facility">Map facility</ion-select-option>
+    <ion-item v-for="(products, facilityId) in items" :key="facilityId" lines="full">
+      <ion-label>
+        {{ facilityId }}
+        <p>{{ products?.length }} {{ $t("line items") }}</p>
+      </ion-label>
+      <ion-select interface="popover" slot="end" placeholder="Map facility" @ionChange="updateFacility($event, facilityId)">
+        <ion-select-option v-for="facility in facilities" :key="facility.facilityId" :value="facility.facilityId">{{ facility.facilityName }}</ion-select-option>
       </ion-select>
     </ion-item>
 
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button>
+      <ion-fab-button @click="save">
         <ion-icon :icon="saveOutline" />
       </ion-fab-button>
     </ion-fab>
@@ -51,6 +50,9 @@ import {
 import { defineComponent } from "vue";
 import { close, saveOutline } from "ionicons/icons";
 import { useStore } from "@/store";
+import { mapGetters } from "vuex";
+import { showToast } from "@/utils";
+import { translate } from "@/i18n";
 export default defineComponent({
   name: "MissingFacilityModal",
   components: {
@@ -68,14 +70,46 @@ export default defineComponent({
     IonTitle,
     IonToolbar 
   },
-  props: [""],
+  props: ["ItemsWithMissingFacility", "facilities"],
   data() {
-    return { }
+    return {
+      items: {},
+      mapFacility: {} as any
+    }
+  },
+  computed: {
+    ...mapGetters({
+      ordersList: 'order/getOrder'
+    })
+  },
+  mounted(){
+    this.itemsByFacilityId();
   },
-  computed: { },
   methods: {
+    save(){
+      Object.keys(this.mapFacility).map((missingFacility: any) => {
+        Object.values(this.ordersList).map((orderItems: any) => orderItems).flat().map((item: any) => {
+          if(item.externalFacilityId === missingFacility){
+            item.externalFacilityId = "";
+            item.facilityId = this.mapFacility[missingFacility];
+          }
+        })
+      })
+      this.store.dispatch('order/updatedOrderListItems', this.ordersList);
+      modalController.dismiss({ dismissed: true });
+      showToast(translate("Changes have been successfully applied"));
+    },
+    updateFacility(ev: any, missingFacility: any){
+      this.mapFacility[missingFacility] = ev.target.value
+    },
     closeModal() {
       modalController.dismiss({ dismissed: true });
+    },
+    itemsByFacilityId(){
+      this.items = this.ItemsWithMissingFacility.reduce((itemsByFacilityId: any, item: any) => {
+        itemsByFacilityId[item.externalFacilityId] ? itemsByFacilityId[item.externalFacilityId].push(item) : itemsByFacilityId[item.externalFacilityId] = [item];
+        return itemsByFacilityId;
+      }, {});
     }
   },
   setup() {