(dev) Inventory import - Automatic mapping [SCI-10610]

app/javascript/vue/repositories/modals/import/second_step.vue

@@ -86,6 +86,7 @@
                 :stepProps="stepProps"
                 @selection:changed="handleChange"
                 :availableFields="this.availableFields"
+                :autoMapping="this.autoMapping"
               />
             </div>
           </div>
@@ -153,7 +154,7 @@ export default {
   },
   data() {
     return {
-      autoMapping: false,
+      autoMapping: true,
       updateWithEmptyCells: false,
       onlyAddNewItems: false,
       columnLabels: {

app/javascript/vue/repositories/modals/import/second_step_table_row.vue

@@ -23,8 +23,11 @@
         @isOpen="handleIsOpen"
         :clearable="true"
         :size="'sm'"
-        placeholder="Do not import"
+        :placeholder="computeMatchNotFound ?
+        i18n.t('repositories.import_records.steps.step2.table.tableRow.placeholders.matchNotFound') :
+        i18n.t('repositories.import_records.steps.step2.table.tableRow.placeholders.doNotImport')"
         :title="this.selectedColumnType?.value"
+        :value="this.selectedColumnType?.key"
       ></SelectDropdown>
     </div>
 
@@ -48,7 +51,9 @@
       <!-- <i v-else-if=""></i> -->
 
       <!-- match not found -->
-      <!-- <i v-else-if=""></i> -->
+      <i v-else-if="computeMatchNotFound"
+        class="sn-icon sn-icon-close text-sn-alert-brittlebush" :title="i18n.t('repositories.import_records.steps.step2.table.tableRow.matchNotFoundColumnTitle')">
+      </i>
 
       <!-- do not import -->
       <i v-else class="sn-icon sn-icon-close text-sn-sleepy-grey" :title="i18n.t('repositories.import_records.steps.step2.table.tableRow.doNotImportColumnTitle')"></i>
@@ -83,6 +88,10 @@ export default {
     stepProps: {
       type: Object,
       required: true
+    },
+    autoMapping: {
+      type: Boolean,
+      required: true
     }
   },
   data() {
@@ -99,7 +108,31 @@ export default {
         this.i18n.t('repositories.import_records.steps.step2.table.tableRow.systemGeneratedData.updatedOn')]
     };
   },
+  watch: {
+    autoMapping(newVal, oldVal) {
+      if (newVal === true) {
+        this.autoMap();
+      } else {
+        this.clearAutoMap();
+      }
+    }
+  },
+  computed: {
+    computeMatchNotFound() {
+      return this.autoMapping && ((this.selectedColumnType && !this.selectedColumnType.key) || !this.selectedColumnType);
+    }
+  },
   methods: {
+    autoMap() {
+      Object.entries(this.stepProps.availableFields).forEach(([key, value]) => {
+        if (this.item === value) {
+          this.changeSelected(key);
+        }
+      });
+    },
+    clearAutoMap() {
+      this.changeSelected(null);
+    },
     changeSelected(e) {
       const value = this.stepProps.availableFields[e];
       const selectedColumnType = { index: this.index, key: e, value };
@@ -112,6 +145,11 @@ export default {
         tableRows.style.overflow = 'hidden';
       } else tableRows.style.overflow = 'auto';
     }
+  },
+  mounted() {
+    if (this.autoMapping) {
+      this.autoMap();
+    }
   }
 };
 </script>

config/locales/en.yml

@@ -2240,7 +2240,11 @@ en:
             RepositoryStockValue: 'Stock'
           table:
             tableRow:
+              placeholders:
+                matchNotFound: 'Match not found'
+                doNotImport: 'Do not import'
               defaultColumnTitle: 'Default column. Mapped as identifier.'
+              matchNotFoundColumnTitle: 'Match not found.'
               userDefinedColumnTitle: 'Column name does not match. Column will be imported as '
               importedColumnTitle: 'Column will be imported.'
               doNotImportColumnTitle: 'Column will not import.'