Mapping creation/selection fixes

src/components/CreateMappingModal.vue

@@ -14,10 +14,21 @@
       <ion-input :label="translate('Mapping name')" :placeholder="translate('Field mapping name')" v-model="mappingName" />
     </ion-item>
 
-    <ion-content class="ion-padding">
+    <ion-content>
       <div>
         <ion-list>
-          <ion-item :key="field" v-for="(fieldValues, field) in getFields()">
+          <ion-item-divider>
+            <ion-label>{{ translate("Required") }} </ion-label>
+          </ion-item-divider>
+          <ion-item :key="field" v-for="(fieldValues, field) in getFields(fields, true)">
+            <ion-select :label="translate(fieldValues.label)" interface="popover" :placeholder = "translate('Select')" v-model="fieldMapping[field]">
+              <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item-divider>
+            <ion-label>{{ translate("Optional") }} </ion-label>
+          </ion-item-divider>
+          <ion-item :key="field" v-for="(fieldValues, field) in getFields(fields, false)">
             <ion-select :label="translate(fieldValues.label)" interface="popover" :placeholder = "translate('Select')" v-model="fieldMapping[field]">
               <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
             </ion-select>
@@ -42,17 +53,18 @@
   IonHeader,
   IonIcon,
   IonInput,
+  IonItem,
+  IonItemDivider,
+  IonLabel,
   IonSelect,
   IonSelectOption,
   IonTitle,
   IonToolbar,
-  IonItem,
   IonList,
-  onIonViewDidEnter,
   modalController
 } from '@ionic/vue';
 
 import { close, save, saveOutline } from "ionicons/icons";
 import { computed, defineProps, onMounted, ref } from "vue";
 import { useStore } from "vuex";
 import { showToast } from '@/utils';
@@ -66,35 +78,44 @@
 let mappingName = ref(null)
 let fieldMapping = ref ({})
 let fileColumns = ref([])
 let identificationTypeId = ref('SKU')
+const fields = process.env["VUE_APP_MAPPING_INVCOUNT"] ? JSON.parse(process.env["VUE_APP_MAPPING_INVCOUNT"]) : {}
 
 onMounted(() => {
   fieldMapping.value = { ...props.seletedFieldMapping }
   fileColumns.value = Object.keys(props.content[0]);
 })
 
-function getFields() {
-  const fields = process.env["VUE_APP_MAPPING_" + props.mappingType];
-  return fields ? JSON.parse(fields) : {};
+function getFields(fields, required = true) {
+  return Object.keys(fields).reduce((result, key) => {
+    if (fields[key].required === required) {
+      result[key] = fields[key];
+    }
+    return result;
+  }, {});
 }
 function closeModal() {
   modalController.dismiss({ dismissed: true });
 }
 async function saveMapping() {
-  if(!mappingName.value) {
+  if(!mappingName.value || !mappingName.value.trim()) {
     showToast(translate("Enter mapping name"));
     return
   }
   if (!areAllFieldsSelected()) {
-    showToast(translate("Map all fields"));
+    showToast(translate("Map all required fields"));
     return
   }
   const id = generateUniqueMappingPrefId();
   await store.dispatch("user/createFieldMapping", { id, name: mappingName.value, value: fieldMapping.value, mappingType: props.mappingType })
   closeModal();
 }
+
 function areAllFieldsSelected() {
-  return Object.values(fieldMapping.value).every(field => field !== "");
+  const requiredFields = Object.keys(getFields(fields, true));
+  const selectedFields = Object.keys(fieldMapping.value).filter(key => fieldMapping.value[key] !== '')
+
+  return requiredFields.every(field => selectedFields.includes(field));
 }
 
 //Todo: Generating unique identifiers as we are currently storing in local storage. Need to remove it as we will be storing data on server.
@@ -103,4 +124,9 @@
   return !fieldMappings.value[id] ? id : this.generateUniqueMappingPrefId();
 }
 
-</script>
+</script>
+<style scoped>
+  ion-content {
+    --padding-bottom: 80px;
+  }
+</style>

src/locales/en.json

@@ -145,6 +145,7 @@
   "Line status": "Line status",
   "Make sure all the columns are mapped correctly.": "Make sure all the columns are mapped correctly.",
   "Make sure you've reviewed the products and their counts before uploading them for review": "Make sure you've reviewed the products and their counts before uploading them for review",
+  "Map all required fields": "Map all required fields",
   "Mapping name": "Mapping name",
   "New mapping": "New mapping",
   "No cycle counts found": "No cycle counts found",

src/store/modules/count/actions.ts

@@ -179,14 +179,14 @@
   async clearCycleCountItems ({ commit }) {
     commit(types.COUNT_ITEMS_UPDATED, [])
   },
   async fetchCycleCountImportSystemMessages({commit} ,payload) {
     let systemMessages;
     try {
       const fifteenMinutesEarlier = DateTime.now().minus({ minutes: 15 });
       const resp = await CountService.fetchCycleCountImportSystemMessages({
         systemMessageTypeId: "ImportInventoryCounts",
         initDate_from: fifteenMinutesEarlier.toMillis(),
-        orderByField: 'processedDate desc,initDate desc',
+        orderByField: 'initDate desc, processedDate desc',
         pageSize: 10
       })
       if (!hasError(resp)) {

src/views/BulkUpload.vue

@@ -23,7 +23,7 @@
               <ion-icon :icon="addOutline" />
               <ion-label>{{ translate("New mapping") }}</ion-label>
             </ion-chip>
-            <ion-chip :disabled="!content.length" v-for="(mapping, index) in fieldMappings('INVCOUNT') ?? []" :key="index" @click="mapFields(mapping)" outline="true">
+            <ion-chip :disabled="!content.length" v-for="(mapping, index) in fieldMappings('INVCOUNT') ?? []" :key="index" @click="mapFields(mapping, index)" :outline="selectedMappingId != index">
               {{ mapping.name }}
             </ion-chip>
           </div>
@@ -129,6 +129,7 @@ let fileName = ref(null)
 let content = ref([])
 let fieldMapping = ref({})
 let fileColumns = ref([])
+let selectedMappingId = ref(null)
 const fileUploaded = ref(false);
 const fields = process.env["VUE_APP_MAPPING_INVCOUNT"] ? JSON.parse(process.env["VUE_APP_MAPPING_INVCOUNT"]) : {}
 
@@ -154,6 +155,8 @@ function resetDefaults() {
   uploadedFile.value = {}
   content.value = []
   fileName.value = null
+  file.value.value = ''
+  selectedMappingId.value = null
 }
 function extractFilename(filePath) {
   if (!filePath) {
@@ -265,7 +268,6 @@ async function save(){
                 throw resp.data
               }
               resetDefaults()
-              file.value.value = ''
               await store.dispatch('count/fetchCycleCountImportSystemMessages')
               showToast(translate("The cycle counts file uploaded successfully."))
             }).catch(() => {
@@ -277,7 +279,7 @@ async function save(){
     });
   return alert.present();  
 }
-function mapFields(mapping) {
+function mapFields(mapping, mappingId) {
   const fieldMappingData = JSON.parse(JSON.stringify(mapping));
 
   // TODO: Store an object in this.content variable, so everytime when accessing it, we don't need to use 0th index
@@ -295,6 +297,7 @@ function mapFields(mapping) {
     }
   })
   fieldMapping.value = fieldMappingData.value;
+  selectedMappingId.value = mappingId
 }
 function areAllFieldsSelected() {
   const requiredFields = Object.keys(getFilteredFields(fields, true));