From dc3bbd3ab3134475613f50965eb12f1e2d3dd4d3 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Tue, 24 Jul 2018 15:34:12 -0300 Subject: [PATCH] =?UTF-8?q?Begins=20moving=20metadatum=20ma=E1=B9=95ping?= =?UTF-8?q?=20to=20a=20separate=20page=20in=20Importers=20page.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../edition/importer-edition-form.vue | 413 ++++----------- .../edition/importer-mapping-form.vue | 470 ++++++++++++++++++ src/admin/js/router.js | 2 + src/admin/js/utilities.js | 3 + src/admin/tainacan-admin-i18n.php | 1 + src/js/store/modules/importer/actions.js | 4 +- 6 files changed, 573 insertions(+), 320 deletions(-) create mode 100644 src/admin/components/edition/importer-mapping-form.vue diff --git a/src/admin/components/edition/importer-edition-form.vue b/src/admin/components/edition/importer-edition-form.vue index c5bd63a8c..6ebdd2ad4 100644 --- a/src/admin/components/edition/importer-edition-form.vue +++ b/src/admin/components/edition/importer-edition-form.vue @@ -60,8 +60,7 @@
@@ -74,7 +73,7 @@
-
{{ importer.tmp_file }}
+
{{ importerFile[0].name }}
@@ -87,116 +86,9 @@ :message="$i18n.get('info_url_source_link_helper')"/> + v-model="url"/> - - - - -
-

{{ $i18n.get('label_from_source_collection') }}

-

{{ $i18n.get('label_to_target_collection') }}

-

{{ source_metadatum }}

- - - - - -

{{ $i18n.get('info_select_collection_to_list_metadata') }}

-
- - -
-
-

{{ $i18n.get('instruction_select_metadatum_type') }}

-
-
- - - -
-
-
-

{{ $i18n.get('instruction_configure_new_metadatum') }}

-
-
- -
- - - - {{ $i18n.get('label_add_more_metadata') }} -
-
-

{{ $i18n.get('info_upload_a_source_to_see_metadata') }}

-
- - - -
@@ -207,22 +99,34 @@ @click="cancelBack">{{ $i18n.get('cancel') }}
+ @click.prevent="onFinishImporter()" + class="button is-success">{{ $i18n.get('label_metadata_mapping') }}
@@ -255,7 +159,7 @@ export default { }, importerTypes: [], importerType: '', - importerFile: {}, + importerFile: null, importerSourceInfo: null, collections: [], collectionMetadata: [], @@ -267,7 +171,6 @@ export default { isEditingMetadatum: false, metadatum: {}, editedMetadatum: {}, - hasRunImporter: false, backgroundProcess: undefined } }, @@ -295,9 +198,6 @@ export default { ...mapActions('collection', [ 'fetchCollectionsForParent' ]), - ...mapActions('bgprocess', [ - 'fetchProcess' - ]), ...mapActions('metadata', [ 'fetchMetadata', 'fetchMetadatumTypes', @@ -306,9 +206,6 @@ export default { ...mapGetters('metadata', [ 'getMetadatumTypes' ]), - ...mapGetters('bgprocess', [ - 'getProcess' - ]), createImporter() { // Puts loading on Draft Importer creation this.isLoading = true; @@ -332,79 +229,36 @@ export default { cancelBack(){ this.$router.go(-1); }, - onUploadFile(file) { - this.updateImporterFile({ sessionId: this.sessionId, file: file[0] }) - .then(updatedImporter => { - this.importer = updatedImporter; - this.importerFile = this.importer.tmp_file; - - this.fetchImporterSourceInfo(this.sessionId) - .then(importerSourceInfo => { - this.importerSourceInfo = importerSourceInfo; - this.mappedCollection['total_items'] = this.importerSourceInfo.source_total_items; + onUploadFile() { + return new Promise((resolve, reject) => { + this.updateImporterFile({ sessionId: this.sessionId, file: this.importerFile[0] }) + .then(updatedImporter => { + this.importer = updatedImporter; + resolve(); }) .catch((errors) => { this.$console.log(errors); + reject(errors); }); - }) - .catch((errors) => { - this.$console.log(errors); }); }, - checkIfMetadatumIsAvailable(metadatumId) { - return this.mappedCollection['mapping'][metadatumId] != undefined; + onInputURL() { + return new Promise((resolve, reject) => { + this.updateImporterURL({ sessionId: this.sessionId, url: this.url }) + .then(updatedImporter => { + this.importer = updatedImporter; + resolve(); + }) + .catch((errors) => { + this.$console.log(errors); + reject(errors); + }); + }); }, - checkCurrentSelectedCollectionMetadatum(sourceMetadatum) { - for (let key in this.mappedCollection['mapping']) { - if(this.mappedCollection['mapping'][key] == sourceMetadatum) - return key; - } - return undefined; - }, - onInputURL(event) { - this.url = event; + onUpdateOptions() { + return new Promise((resolve, reject) => { - this.updateImporterURL({ sessionId: this.sessionId, url: this.url }) - .then(updatedImporter => { - this.importer = updatedImporter; - }) - .catch((errors) => { - this.$console.log(errors); - }); - }, - onRunImporter() { - if (this.importer.manual_collection) { - this.updateImporterCollection({ sessionId: this.sessionId, collection: this.mappedCollection }) - .then(updatedImporter => { - this.importer = updatedImporter; - - if (this.importer.options_form != undefined && this.importer.options != null && this.importer.options_form != '') { - - let formElement = document.getElementById('importerOptionsForm'); - let formData = new FormData(formElement); - let formObj = {}; - - for (let [key, value] of formData.entries()) - formObj[key] = value; - - this.updateImporterOptions({ sessionId: this.sessionId, options: formObj }) - .then(updatedImporter => { - this.importer = updatedImporter; - this.finishRunImporter(); - }) - .catch((errors) => { - this.$console.log(errors); - }); - - } else - this.finishRunImporter(); - }) - .catch((errors) => { - this.$console.log(errors); - }); - } else { if (this.importer.options_form != undefined && this.importer.options != null && this.importer.options_form != '') { - let formElement = document.getElementById('importerOptionsForm'); let formData = new FormData(formElement); let formObj = {}; @@ -413,37 +267,66 @@ export default { formObj[key] = value; this.updateImporterOptions({ sessionId: this.sessionId, options: formObj }) - .then(updatedImporter => { - this.importer = updatedImporter; - - this.finishRunImporter(); + .then(updatedImporter => { + this.importer = updatedImporter; + resolve(); }) - .catch((errors) => { - this.$console.log(errors); - }); - - } else - this.finishRunImporter(); - } + .catch((errors) => { + this.$console.log(errors); + reject(errors); + }); + + } else { + resolve(); + } + }); }, - finishRunImporter() { + uploadSource() { + return new Promise((resolve, reject) => { + if (this.importer.accepts.file && !this.importer.accepts.url) + this.onUploadFile().then(() => { resolve() }).catch((errors) => this.$console.log(errors)); + else if (!this.importer.accepts.file && !this.mporter.accepts.url) + this.onInputURL().then(() => { resolve() }).catch((errors) => this.$console.log(errors)); + else if (this.importer.accepts.file && this.importer.accepts.url) { + if (this.importerFile) + this.onUploadFile().then(() => { resolve() }).catch((errors) => this.$console.log(errors)); + else if (this.url) + this.onInputURL().then(() => { resolve() }).catch((errors) => this.$console.log(errors)); + else + reject('No source file given'); + } else + resolve(); + }); + }, + onFinishImporter() { + + this.onUpdateOptions().then(() => { + this.uploadSource() + .then(() => { + if (this.importer.manual_mapping) + this.goToMappingPage(); + else + this.onRunImporter(); + }).catch((errors) => { + this.$console.log(errors); + }); + }) + .catch((errors) => { + this.$console.log(errors); + }); + + }, + onRunImporter() { this.runImporter(this.sessionId) - .then(backgroundProcess => { - this.hasRunImporter = true; + .then(backgroundProcess => { this.backgroundProcess = backgroundProcess; }) .catch((errors) => { this.$console.log(errors); }); }, - onCheckBackgroundProcessStatus() { - this.fetchProcess(this.backgroundProcess.bg_process_id) - .then((backgroundProcess) => { - this.$console.log(JSON.stringify(backgroundProcess)); - }) - .catch((error) => { - this.$console.error(error); - }); + goToMappingPage() { + this.$router.push(this.$routerHelper.getImporterMappingPath(this.sessionId, this.collectionId)); }, loadCollections() { // Generates options for target collection @@ -457,102 +340,6 @@ export default { this.$console.error(error); this.isFetchingCollections = false; }); - }, - onSelectCollection(collectionId) { - this.collectionId = collectionId; - this.mappedCollection['id'] = collectionId; - - // Generates options for metadata listing - this.isFetchingCollectionMetadata = true; - this.fetchMetadata({collectionId: this.collectionId, isRepositoryLevel: false, isContextEdit: false }) - .then((metadata) => { - this.collectionMetadata = JSON.parse(JSON.stringify(metadata)); - this.isFetchingCollectionMetadata = false; - }) - .catch((error) => { - this.$console.error(error); - this.isFetchingCollectionMetadata = false; - }); - - }, - onSelectCollectionMetadata(selectedMetadatum, sourceMetadatum) { - - if (selectedMetadatum) - this.mappedCollection['mapping'][selectedMetadatum] = sourceMetadatum; - else { - let removedKey = ''; - for (let key in this.mappedCollection['mapping']) { - if(this.mappedCollection['mapping'][key] == sourceMetadatum) - removedKey = key; - } - - if (removedKey != '') - delete this.mappedCollection['mapping'][removedKey]; - } - - // Necessary for causing reactivity to re-check if metadata remains available - this.collectionMetadata.push(""); - this.collectionMetadata.pop(); - }, - onSelectMetadatumType(newMetadatum) { - this.sendMetadatum({ - collectionId: this.collectionId, - name: newMetadatum.name, metadatumType: - newMetadatum.className, - status: 'auto-draft', - isRepositoryLevel: false, - newIndex: 0 - }) - .then((metadatum) => { - this.metadatum = metadatum; - this.editedMetadatum = JSON.parse(JSON.stringify(metadatum)); - this.editedMetadatum.saved = false; - this.editedMetadatum.status = 'publish'; - this.isEditingMetadatum = true; - }) - .catch((error) => { - this.$console.error(error); - }); - }, - createNewMetadatum() { - this.fetchMetadatumTypes() - .then(() => { - this.isLoadingMetadatumTypes = false; - this.isNewMetadatumModalActive = true; - }) - .catch(() => { - this.isLoadingMetadatumTypes = false; - }); - }, - onMetadatumEditionFinished() { - // Reset variables for metadatum creation - delete this.metadatum; - delete this.editedMetadatum; - this.isEditingMetadatum = false; - this.isNewMetadatumModalActive = false; - this.selectedMetadatumType = undefined; - - // Generates options for metadata listing - this.isFetchingCollectionMetadata = true; - this.fetchMetadata({collectionId: this.collectionId, isRepositoryLevel: false, isContextEdit: false }) - .then((metadata) => { - this.collectionMetadata = JSON.parse(JSON.stringify(metadata)); - this.isFetchingCollectionMetadata = false; - }) - .catch((error) => { - this.$console.error(error); - this.isFetchingCollectionMetadata = false; - }); - }, - onMetadatumEditionCanceled() { - // Reset variables for metadatum creation - if (this.metadatum) - delete this.metadatum; - if (this.editedMetadatum) - delete this.editedMetadatum; - this.isEditingMetadatum = false; - this.isNewMetadatumModalActive = false; - this.selectedMetadatumType = undefined; } }, created() { @@ -589,16 +376,6 @@ export default { line-height: 1.2em; } - .source-metadatum { - padding: 2px 0; - border-bottom: 1px solid $tainacan-input-background; - width: 100%; - margin-bottom: 6px; - display: flex; - justify-content: space-between; - align-items: center; - } - .is-inline .control{ display: inline; } diff --git a/src/admin/components/edition/importer-mapping-form.vue b/src/admin/components/edition/importer-mapping-form.vue new file mode 100644 index 000000000..16f1e49de --- /dev/null +++ b/src/admin/components/edition/importer-mapping-form.vue @@ -0,0 +1,470 @@ + + + + + + + diff --git a/src/admin/js/router.js b/src/admin/js/router.js index 2d5727d13..d955a4a6e 100644 --- a/src/admin/js/router.js +++ b/src/admin/js/router.js @@ -18,6 +18,7 @@ import ExportPage from '../pages/singles/export-page.vue' // Edition Form Components import CollectionEditionForm from '../components/edition/collection-edition-form.vue' import ImporterEditionForm from '../components/edition/importer-edition-form.vue' +import ImporterMappingForm from '../components/edition/importer-mapping-form.vue' import ItemEditionForm from '../components/edition/item-edition-form.vue' import TaxonomyEditionForm from '../components/edition/taxonomy-edition-form.vue' import AvailableImportersPage from '../pages/lists/available-importers-page.vue'; @@ -71,6 +72,7 @@ const routes = [ { path: '/importers/', name: 'AvailableImportersPage', component: AvailableImportersPage, meta: {title: i18nGet('title_importers_page'), icon: 'file-multiple'} }, { path: '/importers/:importerSlug', name: 'ImporterEditionForm', component: ImporterEditionForm, meta: {title: i18nGet('title_importer_page'), icon: 'file-multiple'} }, + { path: '/importers/:sessionId/mapping/:collectionId', name: 'ImporterMappingForm', component: ImporterMappingForm, meta: {title: i18nGet('title_importer_mapping_page'), icon: 'file-multiple'} }, { path: '/export/collection/:collectionId', name: 'ExportCollection', component: ExportPage, meta: {title: i18nGet('title_export_collection_page'), icon: 'export'} }, { path: '/export/item/:itemId', name: 'ExportItem', component: ExportPage, meta: {title: i18nGet('title_export_item_page'), icon: 'export'} }, diff --git a/src/admin/js/utilities.js b/src/admin/js/utilities.js index becc8a172..6156d52b1 100644 --- a/src/admin/js/utilities.js +++ b/src/admin/js/utilities.js @@ -280,6 +280,9 @@ RouterHelperPlugin.install = function (Vue, options = {}) { getImporterEditionPath(importerType) { return '/importers/' + importerType; }, + getImporterMappingPath(sessionId, collectionId) { + return '/importers/' + sessionId + '/mapping/' + collectionId; + }, } } diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php index 4fa9cc786..382b53530 100644 --- a/src/admin/tainacan-admin-i18n.php +++ b/src/admin/tainacan-admin-i18n.php @@ -100,6 +100,7 @@ return apply_filters( 'tainacan-admin-i18n', [ 'title_collection_metadata_edition' => __( 'Edit Metadata of', 'tainacan' ), 'title_collection_filters_edition' => __( 'Edit Filters of', 'tainacan' ), 'title_importer_page' => __( 'Importer', 'tainacan' ), + 'title_importer_mapping_page' => __( "Metadata Mapping", 'tainacan' ), 'title_importers_page' => __( 'Importers', 'tainacan' ), 'title_export_collection_page' => __( 'Export Collection Page', 'tainacan' ), 'title_export_item_page' => __( 'Export Item', 'tainacan' ), diff --git a/src/js/store/modules/importer/actions.js b/src/js/store/modules/importer/actions.js index c7e39ae18..cc437fb95 100644 --- a/src/js/store/modules/importer/actions.js +++ b/src/js/store/modules/importer/actions.js @@ -16,10 +16,10 @@ export const fetchAvailableImporters = ({ commit }) => { }); }; -export const fetchImporter = ( { commit } , { importerId }) => { +export const fetchImporter = ( { commit }, importerId ) => { return new Promise(( resolve, reject ) => { - axios.tainacan.post('importers/session/' + importerId) + axios.tainacan.get('importers/session/' + importerId) .then( res => { let importer = res.data; commit('setImporter', importer);