diff --git a/app/javascript/vue/repositories/modals/import/container.vue b/app/javascript/vue/repositories/modals/import/container.vue index 7828a9147..642e46ed4 100644 --- a/app/javascript/vue/repositories/modals/import/container.vue +++ b/app/javascript/vue/repositories/modals/import/container.vue @@ -10,7 +10,7 @@ @generatePreview="generatePreview" @changeStep="changeStep" @importRows="importRecords" - + @updateAutoMapping="updateAutoMapping" /> { - 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, diff --git a/app/javascript/vue/repositories/modals/import/mapping_step.vue b/app/javascript/vue/repositories/modals/import/mapping_step.vue index 044f8f06c..f2e0795d6 100644 --- a/app/javascript/vue/repositories/modals/import/mapping_step.vue +++ b/app/javascript/vue/repositories/modals/import/mapping_step.vue @@ -19,7 +19,7 @@
- +
{{ 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" />
@@ -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(); } }; diff --git a/app/javascript/vue/repositories/modals/import/mapping_step_table_row.vue b/app/javascript/vue/repositories/modals/import/mapping_step_table_row.vue index e35254242..872b45dbb 100644 --- a/app/javascript/vue/repositories/modals/import/mapping_step_table_row.vue +++ b/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; } } };