Preserve mapping state between inventory import steps [SCI-10848]

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

@@ -10,7 +10,7 @@
       @generatePreview="generatePreview"
       @changeStep="changeStep"
       @importRows="importRecords"
-
+      @updateAutoMapping="updateAutoMapping"
     />
     <ExportModal
       v-else
@@ -49,7 +49,7 @@ export default {
     return {
       modalOpened: false,
       activeStep: 'UploadStep',
-      params: {},
+      params: { autoMapping: true },
       modalId: null,
       loading: false
     };
@@ -65,18 +65,20 @@ export default {
     fetchRepository() {
       axios.get(this.repositoryUrl)
         .then((response) => {
-          this.params = response.data.data;
+          this.params = { ...this.params, ...response.data.data };
           this.modalId = Math.random().toString(36);
           this.modalOpened = true;
         });
     },
     uploadFile(params) {
-      this.params = params;
+      this.params = { ...this.params, ...params };
       this.activeStep = 'MappingStep';
     },
-
-    generatePreview(mappings, updateWithEmptyCells, onlyAddNewItems) {
-      this.params.mapping = mappings;
+    updateAutoMapping(value) {
+      this.params.autoMapping = value;
+    },
+    generatePreview(selectedItems, updateWithEmptyCells, onlyAddNewItems) {
+      this.params.selectedItems = selectedItems;
       this.params.updateWithEmptyCells = updateWithEmptyCells;
       this.params.onlyAddNewItems = onlyAddNewItems;
       this.importRecords(true);
@@ -84,6 +86,12 @@ export default {
     changeStep(step) {
       this.activeStep = step;
     },
+    generateMapping() {
+      return this.params.selectedItems.reduce((obj, item) => {
+        obj[item.index] = item.key || '';
+        return obj;
+      }, {});
+    },
     importRecords(preview) {
       if (this.loading) {
         return;
@@ -91,7 +99,7 @@ export default {
 
       const jsonData = {
         file_id: this.params.temp_file.id,
-        mappings: this.params.mapping,
+        mappings: this.generateMapping(),
         id: this.params.id,
         preview: preview,
         should_overwrite_with_empty_cells: this.params.updateWithEmptyCells,

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

@@ -19,7 +19,7 @@
           <div class="flex gap-6 items-center my-6">
             <div class="flex items-center gap-2" :title="i18n.t('repositories.import_records.steps.step2.autoMappingTooltip')">
               <div class="sci-checkbox-container">
-                <input type="checkbox" class="sci-checkbox"  v-model="autoMapping" />
+                <input type="checkbox" class="sci-checkbox" @change="$emit('update-auto-mapping', $event.target.checked)" :checked="params.autoMapping" />
                 <span class="sci-checkbox-label"></span>
               </div>
               {{ i18n.t('repositories.import_records.steps.step2.autoMappingText') }}
@@ -56,7 +56,7 @@
                 :params="params"
                 :value="this.selectedItems.find((item) => item.index === index)"
                 @selection:changed="handleChange"
-                :autoMapping="this.autoMapping"
+                :autoMapping="params.autoMapping"
               />
             </template>
           </div>
@@ -98,7 +98,7 @@ import Loading from '../../../shared/loading.vue';
 
 export default {
   name: 'MappingStep',
-  emits: ['close', 'generatePreview'],
+  emits: ['close', 'generatePreview', 'updateAutoMapping'],
   mixins: [modalMixin],
   components: {
     SelectDropdown,
@@ -117,7 +117,6 @@ export default {
   },
   data() {
     return {
-      autoMapping: false,
       updateWithEmptyCells: false,
       onlyAddNewItems: false,
       columnLabels: {
@@ -154,11 +153,32 @@ export default {
       item.key = key;
       item.value = value;
     },
-    generateMapping() {
-      return this.selectedItems.reduce((obj, item) => {
-        obj[item.index] = item.key || '';
-        return obj;
-      }, {});
+    loadAvailableFields() {
+      // Adding alreadySelected attribute for tracking
+      this.availableFields = [];
+
+      Object.entries(this.params.import_data.available_fields).forEach(([key, value]) => {
+        let columnTypeName = '';
+        if (key === '-1') {
+          columnTypeName = this.i18n.t('repositories.import_records.steps.step2.computedDropdownOptions.name');
+        } else if (key === '0') {
+          columnTypeName = this.i18n.t('repositories.import_records.steps.step2.computedDropdownOptions.id');
+        } else {
+          const column = this.repositoryColumns.find((el) => el[0] === parseInt(key, 10));
+          columnTypeName = this.i18n.t(`repositories.import_records.steps.step2.computedDropdownOptions.${column[2]}`);
+        }
+        const field = {
+          key, value, alreadySelected: false, typeName: columnTypeName
+        };
+        this.availableFields.push(field);
+      });
+    },
+    loadSelectedItems() {
+      if (this.params.selectedItems) {
+        this.selectedItems = this.params.selectedItems;
+      } else {
+        this.selectedItems = this.params.import_data.header.map((item, index) => ({ index, key: null, value: null }));
+      }
     },
     importRecords() {
       if (!this.selectedItems.find((item) => item.key === '-1')) {
@@ -168,7 +188,7 @@ export default {
 
       this.$emit(
         'generatePreview',
-        this.generateMapping()
+        this.selectedItems
       );
       return true;
     }
@@ -187,29 +207,8 @@ export default {
   },
   created() {
     this.repositoryColumns = this.params.attributes.repository_columns;
-    // Adding alreadySelected attribute for tracking
-    this.availableFields = [];
-
-    this.selectedItems = this.params.import_data.header.map((item, index) => { return { index, key: null, value: null }; });
-
-    Object.entries(this.params.import_data.available_fields).forEach(([key, value]) => {
-      let columnTypeName = '';
-      if (key === '-1') {
-        columnTypeName = this.i18n.t('repositories.import_records.steps.step2.computedDropdownOptions.name');
-      } else if (key === '0') {
-        columnTypeName = this.i18n.t('repositories.import_records.steps.step2.computedDropdownOptions.id');
-      } else {
-        const column = this.repositoryColumns.find((el) => el[0] === parseInt(key, 10));
-        columnTypeName = this.i18n.t(`repositories.import_records.steps.step2.computedDropdownOptions.${column[2]}`);
-      }
-      const field = {
-        key, value, alreadySelected: false, typeName: columnTypeName
-      };
-      this.availableFields.push(field);
-    });
-  },
-  mounted() {
-    this.autoMapping = true;
+    this.loadAvailableFields();
+    this.loadSelectedItems();
   }
 };
 </script>

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

@@ -171,6 +171,8 @@ export default {
   mounted() {
     if (this.autoMapping) {
       this.autoMap();
+    } else {
+      this.selectedColumnType = this.value;
     }
   }
 };