Implemented logic for storing and applying multiple field mappings(#2hran7u)

src/locales/en.json

@@ -15,6 +15,7 @@
   "Confirm": "Confirm",
   "Date Format": "Date Format",
   "Dismiss": "Dismiss",
+  "Enter mapping name": "Enter mapping name",
   "Enter a custom date time format that you want to use when uploading documents to HotWax Commerce.": "Enter a custom date time format that you want to use when uploading documents to HotWax Commerce.",
   "Facility": "Facility",
   "Facility ID": "Facility ID",
@@ -29,6 +30,7 @@
   "Leave page": "Leave page",
   "Login": "Login",
   "Logout": "Logout",
+  "Mapping name": "Mapping name",
   "Luxon date time formats can be found": "Luxon date time formats can be found",
   "Missing SKUs": "Missing SKUs",
   "No time zone found": "No time zone found",
@@ -49,11 +51,13 @@
   "Reset": "Reset",
   "Reset password": "Reset password",
   "Safety stock": "Safety stock",
+  "Save mapping": "Save mapping",
   "Sample": "Sample",
   "Save": "Save",
   "Search products": "Search products",
   "Search time zones": "Search time zones",
   "Select": "Select",
+  "Select mapping": "Select mapping",
   "Select time zone": "Select time zone",
   "Select the column index for the following information in the uploaded CSV.": "Select the column index for the following information in the uploaded CSV.",
   "Something went wrong": "Something went wrong",

src/store/modules/user/UserState.ts

@@ -3,5 +3,6 @@ export default interface UserState {
     current: object | null;
     currentFacility: object;
     instanceUrl: string;
+    fieldMappings: any;
     preferredDateTimeFormat: string;
 }

src/store/modules/user/actions.ts

@@ -116,6 +116,10 @@ const actions: ActionTree<UserState, RootState> = {
    */
   setUserInstanceUrl ({ commit }, payload){
     commit(types.USER_INSTANCE_URL_UPDATED, payload)
+  },
+
+  updateFieldMappings({ commit }, payload){
+    commit(types.USER_FIELD_MAPPINGS_UPDATED, payload);
   }
 }
 

src/store/modules/user/getters.ts

@@ -20,7 +20,10 @@ const getters: GetterTree <UserState, RootState> = {
     },
     getInstanceUrl (state) {
         const baseUrl = process.env.VUE_APP_BASE_URL;
-        return baseUrl ? baseUrl : state.instanceUrl; 
+        return baseUrl ? baseUrl : state.instanceUrl;
+    },
+    getFieldMappings(state) {
+        return state.fieldMappings;
     },
     getDateTimeFormat (state) {
         return state.preferredDateTimeFormat;  

src/store/modules/user/index.ts

@@ -12,6 +12,7 @@ const userModule: Module<UserState, RootState> = {
       current: null,
       currentFacility: {},
       instanceUrl: '',
+      fieldMappings: {},
       preferredDateTimeFormat: ''
     },
     getters,

src/store/modules/user/mutation-types.ts

@@ -4,4 +4,5 @@ export const USER_END_SESSION = SN_USER + '/END_SESSION'
 export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
 export const USER_CURRENT_FACILITY_UPDATED = SN_USER + '/CURRENT_FACILITY_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED'
-export const USER_DATETIME_FORMAT_UPDATED = SN_USER + '/DATETIME_FORMAT_UPDATED'
+export const USER_FIELD_MAPPINGS_UPDATED = SN_USER + '/FIELD_MAPPINGS_UPDATED'
+export const USER_DATETIME_FORMAT_UPDATED = SN_USER + '/DATETIME_FORMAT_UPDATED'

src/store/modules/user/mutations.ts

@@ -20,6 +20,9 @@ const mutations: MutationTree <UserState> = {
     [types.USER_INSTANCE_URL_UPDATED] (state, payload) {
         state.instanceUrl = payload;
     },
+    [types.USER_FIELD_MAPPINGS_UPDATED] (state, payload) {
+        state.fieldMappings[payload.mappingPrefId] = payload;
+    },    
     [types.USER_DATETIME_FORMAT_UPDATED] (state, payload) {
         state.preferredDateTimeFormat = payload;
     }

src/views/PurchaseOrder.vue

@@ -13,56 +13,70 @@
           <ion-label>{{ file.name ? $t("Purchase order ") +  file.name : $t('Purchase order') }}</ion-label>
           <input @change="getFile" ref="file" class="ion-hide" type="file" id="inputFile"/>
           <label for="inputFile">{{ $t("Upload") }}</label>
-        </ion-item>      
+        </ion-item> 
+        <ion-item lines="none">
+          <ion-label>{{ $t("Select mapping") }}</ion-label>
+          <ion-select :disabled="!Object.keys(fieldMappings).length" interface="popover" @ionChange="mapFields">
+            <ion-select-option v-for="mapping in fieldMappings" :value="mapping" :key="mapping?.mappingPrefId">{{ mapping?.mappingPrefName }}</ion-select-option>
+          </ion-select>
+        </ion-item>     
 
         <ion-list>
           <ion-list-header>{{ $t("Select the column index for the following information in the uploaded CSV.") }}</ion-list-header>
+
           <ion-item>
             <ion-label>{{ $t("Order ID") }}</ion-label>
-            <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="orderIdField">
-                <ion-select-option :key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
+            <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="fieldMapping.orderId">
+              <ion-select-option :key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
             </ion-select>
           </ion-item>
 
           <ion-item>
             <ion-label>{{ $t("Shopify product SKU") }}</ion-label>
-            <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="productSkuField">
+            <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="fieldMapping.productSku">
               <ion-select-option :key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
             </ion-select>
           </ion-item>
 
           <ion-item>
             <ion-label>{{ $t("Arrival date") }}</ion-label>
-            <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="dateField">
+            <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="fieldMapping.orderDate">
               <ion-select-option :key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
             </ion-select>
           </ion-item>
 
           <ion-item>
             <ion-label>{{ $t("Ordered quantity") }}</ion-label>
-            <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="quantityField">
+            <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="fieldMapping.quantity">
               <ion-select-option :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 interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="facilityField">
+            <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="fieldMapping.facility">
               <ion-select-option :key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
             </ion-select>
           </ion-item>
         </ion-list>
 
-        <ion-button color="medium" @click="mapFields" expand="block">
+        <ion-button color="medium" @click="review" expand="block">
           {{ $t("Review") }}
           <ion-icon slot="end" :icon="arrowForwardOutline" />
         </ion-button>
+
+        <ion-item>
+          <ion-label>{{ $t("Mapping name") }}</ion-label>
+          <ion-input v-model="mappingName" />
+        </ion-item>
+        <ion-button @click="saveMapping">{{ $t("Save mapping") }}</ion-button>
+
       </main>
     </ion-content>
   </ion-page>
 </template>
 <script>
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonLabel, IonList, IonListHeader, IonMenuButton, IonButton, IonSelect, IonSelectOption, IonIcon } from "@ionic/vue";
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonInput, IonLabel, IonList, IonListHeader, IonMenuButton, IonButton, IonSelect, IonSelectOption, IonIcon } from "@ionic/vue";
 import { defineComponent } from "vue";
 import { useRouter } from 'vue-router';
 import { useStore, mapGetters } from "vuex";
@@ -80,6 +94,7 @@ export default defineComponent({
       IonTitle,
       IonContent,
       IonItem,
+      IonInput,
       IonLabel,
       IonButton,
       IonMenuButton,
@@ -92,21 +107,42 @@ export default defineComponent({
     computed: {
       ...mapGetters({
         dateTimeFormat : 'user/getDateTimeFormat',
+        fieldMappings: 'user/getFieldMappings'
       })
     },
+    mounted(){
+      console.log(this.fieldMappings, "abc");
+    },
     data() {
       return {
         file: "",
         content: [],
-        orderIdField: "",
-        productSkuField: "",
-        dateField: "",
-        quantityField: "",
-        facilityField: "",
+        fieldMapping: {
+          orderId: "",
+          productSku: "",
+          orderDate: "",
+          quantity: "",
+          facility: "",
+        },
+        mappingName: "",
         orderItemsList: [],
       }
     },
     methods: {
+      generateUniqueId(id) {
+        if (!this.fieldMappings[id]) {
+          return id;
+        }
+        return this.generateUniqueId(Math.floor(Math.random() * 1000));
+      },
+      saveMapping() {
+        if (this.mappingName) {
+          const mappingPrefId = this.generateUniqueId(Math.floor(Math.random() * 1000));
+          this.store.dispatch('user/updateFieldMappings', { mappingPrefId, mappingPrefName: this.mappingName, mappingPrefValue: JSON.parse(JSON.stringify(this.fieldMapping)) })
+        } else {
+          showToast(translate("Enter mapping name"));
+        }
+      },
       getFile(event) {
         this.file = event.target.files[0];
         if(this.file){
@@ -118,29 +154,34 @@ export default defineComponent({
           showToast(translate("Something went wrong, Please try again"));
         }
       },
-
       async parseFile(){
         await parseCsv(this.file).then(res => {
           this.content = res;
         })
       },
-      mapFields() {
+      review() {
         this.orderItemsList = this.content.map(item => {
           return {
-            orderId: item[this.orderIdField],
-            shopifyProductSKU: item[this.productSkuField],
-            shopifyProductUPC: item[this.productUpcField],
-            arrivalDate: DateTime.fromFormat(item[this.dateField], this.dateTimeFormat).toFormat(this.dateTimeFormat), //This is to verify whether the date format is correct.
-            quantityOrdered: item[this.quantityField],
+            orderId: item[this.fieldMapping.orderId],
+            shopifyProductSKU: item[this.fieldMapping.productSku],
+            arrivalDate: DateTime.fromFormat(item[this.fieldMapping.orderDate], this.dateTimeFormat).toFormat(this.dateTimeFormat), //This is to verify whether the date format is correct.
+            quantityOrdered: item[this.fieldMapping.quantity],
             facilityId: '',
-            externalFacilityId: item[this.facilityField]
+            externalFacilityId: item[this.fieldMapping.facility]
           }
         })
         this.store.dispatch('order/updatedOrderList', this.orderItemsList);
         this.router.push({
           name:'PurchaseOrderDetail'
         })
       },
+      mapFields(event) {
+        if(event && event.detail.value) {
+          const fieldMapping = JSON.parse(JSON.stringify(event.detail.value));
+          this.fieldMapping = fieldMapping.mappingPrefValue;
+          this.mappingName = fieldMapping.mappingPrefName;
+        }
+      },
     },
     setup() {
     const router = useRouter();