Begins moving metadatum maṕping to a separate page in Importers page.
This commit is contained in:
Mateus Machado Luna
parent
6dda87fea7
commit
dc3bbd3ab3
|
|
@ -60,8 +60,7 @@
|
|||
<br>
|
||||
<b-upload
|
||||
v-if="importer.tmp_file == undefined"
|
||||
:value="importerFile"
|
||||
@input="onUploadFile($event)"
|
||||
v-model="importerFile"
|
||||
drag-drop>
|
||||
<section class="drop-inner">
|
||||
<div class="content has-text-centered">
|
||||
|
|
@ -74,7 +73,7 @@
|
|||
</div>
|
||||
</section>
|
||||
</b-upload>
|
||||
<div v-if="importer.tmp_file != undefined">{{ importer.tmp_file }}</div>
|
||||
<div v-if="importerFile != undefined">{{ importerFile[0].name }}</div>
|
||||
</b-field>
|
||||
|
||||
<!-- URL source input -------------------------------- -->
|
||||
|
|
@ -87,114 +86,7 @@
|
|||
:message="$i18n.get('info_url_source_link_helper')"/>
|
||||
<b-input
|
||||
id="tainacan-url-link-source"
|
||||
:value="url"
|
||||
@input="onInputURL($event)"/>
|
||||
</b-field>
|
||||
|
||||
<!-- Metadata Mapping -->
|
||||
<b-field
|
||||
v-if="importer.manual_mapping"
|
||||
:addons="false"
|
||||
:label="$i18n.get('label_metadata_mapping')">
|
||||
<help-button
|
||||
:title="$i18n.get('label_metadata_mapping')"
|
||||
:message="$i18n.get('info_metadata_mapping_helper')"/>
|
||||
|
||||
<div
|
||||
v-if="importerSourceInfo != undefined &&
|
||||
importerSourceInfo != null">
|
||||
<p class="mapping-header-label is-inline">{{ $i18n.get('label_from_source_collection') }}</p>
|
||||
<p class="mapping-header-label is-pulled-right">{{ $i18n.get('label_to_target_collection') }}</p>
|
||||
<div
|
||||
class="source-metadatum"
|
||||
v-for="(source_metadatum, index) of importerSourceInfo.source_metadata"
|
||||
:key="index"><p>{{ source_metadatum }}</p>
|
||||
|
||||
<b-select
|
||||
v-if="collectionMetadata != undefined &&
|
||||
collectionMetadata.length > 0 &&
|
||||
!isFetchingCollectionMetadata"
|
||||
:value="checkCurrentSelectedCollectionMetadatum(source_metadatum)"
|
||||
@input="onSelectCollectionMetadata($event, source_metadatum)"
|
||||
:placeholder="$i18n.get('label_select_metadatum')">
|
||||
<option :value="undefined">
|
||||
{{ $i18n.get('label_select_metadatum') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="(metadatum, index) of collectionMetadata"
|
||||
:key="index"
|
||||
:value="metadatum.id"
|
||||
:disabled="checkIfMetadatumIsAvailable(metadatum.id)">
|
||||
<span class="metadatum-name">
|
||||
{{ metadatum.name }}
|
||||
</span>
|
||||
<span class="label-details">
|
||||
({{ $i18n.get(metadatum.metadata_type_object.component) }}) <em>{{ (metadatum.collection_id != collectionId) ? $i18n.get('label_inherited') : '' }}</em>
|
||||
</span>
|
||||
</option>
|
||||
</b-select>
|
||||
<p v-if="collectionMetadata == undefined || collectionMetadata.length <= 0">{{ $i18n.get('info_select_collection_to_list_metadata') }}</p>
|
||||
</div>
|
||||
<b-modal
|
||||
@close="onMetadatumEditionCanceled()"
|
||||
:active.sync="isNewMetadatumModalActive">
|
||||
<b-loading
|
||||
:is-full-page="isFullPage"
|
||||
:active.sync="isLoadingMetadatumTypes"/>
|
||||
<div
|
||||
v-if="selectedMetadatumType == undefined && !isEditingMetadatum"
|
||||
class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('instruction_select_metadatum_type') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<b-select
|
||||
:value="selectedMetadatumType"
|
||||
@input="onSelectMetadatumType($event)"
|
||||
:placeholder="$i18n.get('label_select_metadatum_type')">
|
||||
<option
|
||||
v-for="(metadatumType, index) of metadatumTypes"
|
||||
:key="index"
|
||||
:value="metadatumType">
|
||||
{{ metadatumType.name }}
|
||||
</option>
|
||||
</b-select>
|
||||
</div>
|
||||
<div
|
||||
v-if="isEditingMetadatum"
|
||||
class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('instruction_configure_new_metadatum') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<metadatum-edition-form
|
||||
:collection-id="collectionId"
|
||||
:is-repository-level="false"
|
||||
@onEditionFinished="onMetadatumEditionFinished()"
|
||||
@onEditionCanceled="onMetadatumEditionCanceled()"
|
||||
:index="0"
|
||||
:original-metadatum="metadatum"
|
||||
:edited-metadatum="editedMetadatum"
|
||||
:is-on-modal="true"/>
|
||||
</div>
|
||||
</b-modal>
|
||||
<a
|
||||
v-if="collectionId != null && collectionId != undefined"
|
||||
class="is-inline is-pulled-right add-link"
|
||||
@click="createNewMetadatum()">
|
||||
<b-icon
|
||||
icon="plus-circle"
|
||||
size="is-small"
|
||||
type="is-secondary"/>
|
||||
{{ $i18n.get('label_add_more_metadata') }}</a>
|
||||
</div>
|
||||
<div
|
||||
v-if="importerSourceInfo == undefined ||
|
||||
importerSourceInfo == null">
|
||||
<p>{{ $i18n.get('info_upload_a_source_to_see_metadata') }}</p>
|
||||
</div>
|
||||
|
||||
|
||||
v-model="url"/>
|
||||
</b-field>
|
||||
|
||||
<!-- Form submit -------------------------------- -->
|
||||
|
|
@ -207,22 +99,34 @@
|
|||
@click="cancelBack">{{ $i18n.get('cancel') }}</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="!hasRunImporter"
|
||||
v-if="!importer.manual_mapping"
|
||||
class="control">
|
||||
<button
|
||||
:disabled="sessionId == undefined || importer == undefined"
|
||||
:disabled="
|
||||
sessionId == undefined ||
|
||||
importer == undefined ||
|
||||
(importer.manual_collection && collectionId == undefined) ||
|
||||
(importer.accepts.file && !importer.accepts.url && !importerFile) ||
|
||||
(!importer.accepts.file && importer.accepts.url && !url) ||
|
||||
(importer.accepts.file && importer.accepts.url && !importerFile && !url)"
|
||||
id="button-submit-collection-creation"
|
||||
@click.prevent="onRunImporter"
|
||||
@click.prevent="onFinishImporter()"
|
||||
class="button is-success">{{ $i18n.get('run') }}</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="hasRunImporter"
|
||||
v-if="importer.manual_mapping"
|
||||
class="control">
|
||||
<button
|
||||
:disabled="sessionId == undefined || importer == undefined"
|
||||
:disabled="
|
||||
sessionId == undefined ||
|
||||
importer == undefined ||
|
||||
(importer.manual_collection && collectionId == undefined) ||
|
||||
(importer.accepts.file && !importer.accepts.url && !importerFile) ||
|
||||
(!importer.accepts.file && importer.accepts.url && !url) ||
|
||||
(importer.accepts.file && importer.accepts.url && !importerFile && !url)"
|
||||
id="button-submit-collection-creation"
|
||||
@click.prevent="onCheckBackgroundProcessStatus"
|
||||
class="button is-success">Check Status</button>
|
||||
@click.prevent="onFinishImporter()"
|
||||
class="button is-success">{{ $i18n.get('label_metadata_mapping') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -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,118 +229,104 @@ export default {
|
|||
cancelBack(){
|
||||
this.$router.go(-1);
|
||||
},
|
||||
onUploadFile(file) {
|
||||
this.updateImporterFile({ sessionId: this.sessionId, file: file[0] })
|
||||
onUploadFile() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.updateImporterFile({ sessionId: this.sessionId, file: this.importerFile[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;
|
||||
resolve();
|
||||
})
|
||||
.catch((errors) => {
|
||||
this.$console.log(errors);
|
||||
reject(errors);
|
||||
});
|
||||
})
|
||||
.catch((errors) => {
|
||||
this.$console.log(errors);
|
||||
});
|
||||
},
|
||||
checkIfMetadatumIsAvailable(metadatumId) {
|
||||
return this.mappedCollection['mapping'][metadatumId] != undefined;
|
||||
},
|
||||
checkCurrentSelectedCollectionMetadatum(sourceMetadatum) {
|
||||
for (let key in this.mappedCollection['mapping']) {
|
||||
if(this.mappedCollection['mapping'][key] == sourceMetadatum)
|
||||
return key;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
onInputURL(event) {
|
||||
this.url = event;
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
},
|
||||
onUpdateOptions() {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
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;
|
||||
resolve();
|
||||
})
|
||||
.catch((errors) => {
|
||||
this.$console.log(errors);
|
||||
reject(errors);
|
||||
});
|
||||
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
},
|
||||
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() {
|
||||
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 = {};
|
||||
|
||||
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();
|
||||
}
|
||||
},
|
||||
finishRunImporter() {
|
||||
this.runImporter(this.sessionId)
|
||||
.then(backgroundProcess => {
|
||||
this.hasRunImporter = true;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,470 @@
|
|||
<template>
|
||||
<div
|
||||
class="primary-page page-container">
|
||||
<div
|
||||
class="tainacan-page-title">
|
||||
<h1>{{ $i18n.get('label_metadata_mapping') }} </h1>
|
||||
<a
|
||||
@click="$router.go(-1)"
|
||||
class="back-link is-secondary">
|
||||
{{ $i18n.get('back') }}
|
||||
</a>
|
||||
<hr>
|
||||
<!-- <nav class="breadcrumbs">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getCollectionsPath()">{{ $i18n.get('repository') }}</router-link> >
|
||||
<span
|
||||
v-for="(pathItem, index) in arrayRealPath"
|
||||
:key="index">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="'/' + arrayRealPath.slice(0, index + 1).join('/')">
|
||||
{{ arrayViewPath[index] }}
|
||||
</router-link>
|
||||
<span v-if="index != arrayRealPath.length - 1"> > </span>
|
||||
</span>
|
||||
</nav> -->
|
||||
|
||||
</div>
|
||||
<form
|
||||
class="tainacan-form"
|
||||
label-width="120px"
|
||||
v-if="importer != undefined && importer != null">
|
||||
|
||||
<!-- Metadata Mapping -->
|
||||
<b-field
|
||||
v-if="importer.manual_mapping"
|
||||
:addons="false"
|
||||
:label="$i18n.get('label_metadata_mapping')">
|
||||
<help-button
|
||||
:title="$i18n.get('label_metadata_mapping')"
|
||||
:message="$i18n.get('info_metadata_mapping_helper')"/>
|
||||
|
||||
<div
|
||||
v-if="importerSourceInfo != undefined &&
|
||||
importerSourceInfo != null">
|
||||
<p class="mapping-header-label is-inline">{{ $i18n.get('label_from_source_collection') }}</p>
|
||||
<p class="mapping-header-label is-pulled-right">{{ $i18n.get('label_to_target_collection') }}</p>
|
||||
<div
|
||||
class="source-metadatum"
|
||||
v-for="(source_metadatum, index) of importerSourceInfo.source_metadata"
|
||||
:key="index"><p>{{ source_metadatum }}</p>
|
||||
|
||||
<b-select
|
||||
v-if="collectionMetadata != undefined &&
|
||||
collectionMetadata.length > 0 &&
|
||||
!isFetchingCollectionMetadata"
|
||||
:value="checkCurrentSelectedCollectionMetadatum(source_metadatum)"
|
||||
@input="onSelectCollectionMetadata($event, source_metadatum)"
|
||||
:placeholder="$i18n.get('label_select_metadatum')">
|
||||
<option :value="undefined">
|
||||
{{ $i18n.get('label_select_metadatum') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="(metadatum, index) of collectionMetadata"
|
||||
:key="index"
|
||||
:value="metadatum.id"
|
||||
:disabled="checkIfMetadatumIsAvailable(metadatum.id)">
|
||||
<span class="metadatum-name">
|
||||
{{ metadatum.name }}
|
||||
</span>
|
||||
<span class="label-details">
|
||||
({{ $i18n.get(metadatum.metadata_type_object.component) }}) <em>{{ (metadatum.collection_id != collectionId) ? $i18n.get('label_inherited') : '' }}</em>
|
||||
</span>
|
||||
</option>
|
||||
</b-select>
|
||||
<p v-if="collectionMetadata == undefined || collectionMetadata.length <= 0">{{ $i18n.get('info_select_collection_to_list_metadata') }}</p>
|
||||
</div>
|
||||
<b-modal
|
||||
@close="onMetadatumEditionCanceled()"
|
||||
:active.sync="isNewMetadatumModalActive">
|
||||
<b-loading
|
||||
:is-full-page="isFullPage"
|
||||
:active.sync="isLoadingMetadatumTypes"/>
|
||||
<div
|
||||
v-if="selectedMetadatumType == undefined && !isEditingMetadatum"
|
||||
class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('instruction_select_metadatum_type') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<b-select
|
||||
:value="selectedMetadatumType"
|
||||
@input="onSelectMetadatumType($event)"
|
||||
:placeholder="$i18n.get('label_select_metadatum_type')">
|
||||
<option
|
||||
v-for="(metadatumType, index) of metadatumTypes"
|
||||
:key="index"
|
||||
:value="metadatumType">
|
||||
{{ metadatumType.name }}
|
||||
</option>
|
||||
</b-select>
|
||||
</div>
|
||||
<div
|
||||
v-if="isEditingMetadatum"
|
||||
class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('instruction_configure_new_metadatum') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<metadatum-edition-form
|
||||
:collection-id="collectionId"
|
||||
:is-repository-level="false"
|
||||
@onEditionFinished="onMetadatumEditionFinished()"
|
||||
@onEditionCanceled="onMetadatumEditionCanceled()"
|
||||
:index="0"
|
||||
:original-metadatum="metadatum"
|
||||
:edited-metadatum="editedMetadatum"
|
||||
:is-on-modal="true"/>
|
||||
</div>
|
||||
</b-modal>
|
||||
<a
|
||||
v-if="collectionId != null && collectionId != undefined"
|
||||
class="is-inline is-pulled-right add-link"
|
||||
@click="createNewMetadatum()">
|
||||
<b-icon
|
||||
icon="plus-circle"
|
||||
size="is-small"
|
||||
type="is-secondary"/>
|
||||
{{ $i18n.get('label_add_more_metadata') }}</a>
|
||||
</div>
|
||||
<div
|
||||
v-if="importerSourceInfo == undefined ||
|
||||
importerSourceInfo == null">
|
||||
<p>{{ $i18n.get('info_upload_a_source_to_see_metadata') }}</p>
|
||||
</div>
|
||||
|
||||
</b-field>
|
||||
|
||||
<!-- Form submit -------------------------------- -->
|
||||
<div class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<button
|
||||
id="button-cancel-collection-creation"
|
||||
class="button is-outlined"
|
||||
type="button"
|
||||
@click="cancelBack">{{ $i18n.get('cancel') }}</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="!hasRunImporter"
|
||||
class="control">
|
||||
<button
|
||||
:disabled="sessionId == undefined || importer == undefined"
|
||||
id="button-submit-collection-creation"
|
||||
@click.prevent="onRunImporter"
|
||||
class="button is-success">{{ $i18n.get('run') }}</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="hasRunImporter"
|
||||
class="control">
|
||||
<button
|
||||
:disabled="sessionId == undefined || importer == undefined"
|
||||
id="button-submit-collection-creation"
|
||||
@click.prevent="onCheckBackgroundProcessStatus"
|
||||
class="button is-success">Check Status</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<b-loading
|
||||
:active.sync="isLoading"
|
||||
:can-cancel="false"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
import MetadatumEditionForm from './../edition/metadatum-edition-form.vue';
|
||||
|
||||
export default {
|
||||
name: 'ImporterEditionForm',
|
||||
data(){
|
||||
return {
|
||||
importerId: Number,
|
||||
importer: null,
|
||||
isLoading: false,
|
||||
isFetchingCollections: false,
|
||||
form: {
|
||||
|
||||
},
|
||||
mappedCollection: {
|
||||
'id': Number,
|
||||
'mapping': {},
|
||||
'total_items': Number
|
||||
},
|
||||
importerTypes: [],
|
||||
importerType: '',
|
||||
importerFile: {},
|
||||
importerSourceInfo: null,
|
||||
collections: [],
|
||||
collectionMetadata: [],
|
||||
collectionId: undefined,
|
||||
url: '',
|
||||
isNewMetadatumModalActive: false,
|
||||
isLoadingMetadatumTypes: false,
|
||||
selectedMetadatumType: undefined,
|
||||
isEditingMetadatum: false,
|
||||
metadatum: {},
|
||||
editedMetadatum: {},
|
||||
hasRunImporter: false,
|
||||
backgroundProcess: undefined
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MetadatumEditionForm
|
||||
},
|
||||
computed: {
|
||||
metadatumTypes() {
|
||||
return this.getMetadatumTypes();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('importer', [
|
||||
'fetchImporterTypes',
|
||||
'fetchImporter',
|
||||
'sendImporter',
|
||||
'updateImporter',
|
||||
'updateImporterFile',
|
||||
'updateImporterURL',
|
||||
'updateImporterOptions',
|
||||
'fetchImporterSourceInfo',
|
||||
'updateImporterCollection',
|
||||
'runImporter'
|
||||
]),
|
||||
...mapActions('collection', [
|
||||
'fetchCollectionsForParent'
|
||||
]),
|
||||
...mapActions('bgprocess', [
|
||||
'fetchProcess'
|
||||
]),
|
||||
...mapActions('metadata', [
|
||||
'fetchMetadata',
|
||||
'fetchMetadatumTypes',
|
||||
'sendMetadatum'
|
||||
]),
|
||||
...mapGetters('metadata', [
|
||||
'getMetadatumTypes'
|
||||
]),
|
||||
...mapGetters('bgprocess', [
|
||||
'getProcess'
|
||||
]),
|
||||
loadImporter() {
|
||||
|
||||
// Puts loading on Draft Importer creation
|
||||
this.isLoading = true;
|
||||
|
||||
// Creates draft Importer
|
||||
this.fetchImporter(this.sessionId)
|
||||
.then(res => {
|
||||
|
||||
this.sessionId = res.id;
|
||||
this.importer = JSON.parse(JSON.stringify(res));
|
||||
|
||||
this.isLoading = false;
|
||||
|
||||
this.fetchImporterSourceInfo(this.sessionId)
|
||||
.then(importerSourceInfo => {
|
||||
this.importerSourceInfo = importerSourceInfo;
|
||||
this.mappedCollection['total_items'] = this.importerSourceInfo.source_total_items;
|
||||
})
|
||||
.catch((errors) => {
|
||||
this.$console.log(errors);
|
||||
});
|
||||
|
||||
})
|
||||
.catch(error => this.$console.error(error));
|
||||
},
|
||||
loadMetadata() {
|
||||
// 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;
|
||||
});
|
||||
},
|
||||
cancelBack(){
|
||||
this.$router.go(-1);
|
||||
},
|
||||
checkIfMetadatumIsAvailable(metadatumId) {
|
||||
return this.mappedCollection['mapping'][metadatumId] != undefined;
|
||||
},
|
||||
checkCurrentSelectedCollectionMetadatum(sourceMetadatum) {
|
||||
for (let key in this.mappedCollection['mapping']) {
|
||||
if(this.mappedCollection['mapping'][key] == sourceMetadatum)
|
||||
return key;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
onRunImporter() {
|
||||
this.updateImporterCollection({ sessionId: this.sessionId, collection: this.mappedCollection })
|
||||
.then(updatedImporter => {
|
||||
this.importer = updatedImporter;
|
||||
this.finishRunImporter();
|
||||
})
|
||||
.catch((errors) => {
|
||||
this.$console.log(errors);
|
||||
});
|
||||
|
||||
},
|
||||
finishRunImporter() {
|
||||
this.runImporter(this.sessionId)
|
||||
.then(backgroundProcess => {
|
||||
this.backgroundProcess = backgroundProcess;
|
||||
})
|
||||
.catch((errors) => {
|
||||
this.$console.log(errors);
|
||||
});
|
||||
},
|
||||
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() {
|
||||
this.sessionId = this.$route.params.sessionId;
|
||||
this.collectionId = this.$route.params.collectionId;
|
||||
this.mappedCollection['id'] = this.collectionId;
|
||||
|
||||
this.loadImporter();
|
||||
this.loadMetadata();
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
|
||||
.field {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 16px !important;
|
||||
font-weight: 500 !important;
|
||||
color: $tertiary !important;
|
||||
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;
|
||||
}
|
||||
.drop-inner{
|
||||
padding: 1rem 3rem;
|
||||
}
|
||||
|
||||
.mapping-header-label {
|
||||
color: $gray-light;
|
||||
margin: 12px 0 6px 0;
|
||||
}
|
||||
|
||||
.modal .animation-content {
|
||||
width: 100%;
|
||||
z-index: 99999;
|
||||
|
||||
#metadatumEditForm {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -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'} },
|
||||
|
|
|
|||
|
|
@ -280,6 +280,9 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
|
|||
getImporterEditionPath(importerType) {
|
||||
return '/importers/' + importerType;
|
||||
},
|
||||
getImporterMappingPath(sessionId, collectionId) {
|
||||
return '/importers/' + sessionId + '/mapping/' + collectionId;
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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' ),
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue