Adds modal to offer title selection before mapping #309.
This commit is contained in:
Mateus Machado Luna
parent
88ca241401
commit
a39703b46b
|
|
@ -49,15 +49,15 @@
|
|||
</template>
|
||||
<div
|
||||
class="source-metadatum"
|
||||
v-for="(source_metadatum, index) of importerSourceInfo.source_metadata"
|
||||
v-for="(sourceMetadatum, index) of importerSourceInfo.source_metadata"
|
||||
:key="index">
|
||||
<p>{{ source_metadatum }}</p>
|
||||
<p>{{ sourceMetadatum }}</p>
|
||||
<b-select
|
||||
v-if="collectionMetadata != undefined &&
|
||||
collectionMetadata.length > 0 &&
|
||||
!isFetchingCollectionMetadata"
|
||||
:value="checkCurrentSelectedCollectionMetadatum(source_metadatum)"
|
||||
@input="onSelectCollectionMetadata($event, source_metadatum)"
|
||||
:value="checkCurrentSelectedCollectionMetadatum(sourceMetadatum)"
|
||||
@input="onSelectCollectionMetadata($event, sourceMetadatum)"
|
||||
:placeholder="$i18n.get('label_select_metadatum')">
|
||||
<option :value="undefined">
|
||||
{{ $i18n.get('label_select_metadatum') }}
|
||||
|
|
@ -191,6 +191,78 @@
|
|||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Prompt to show title -->
|
||||
<b-modal
|
||||
v-if="importerSourceInfo"
|
||||
:active.sync="showTitlePromptModal"
|
||||
:can-cancel="false"
|
||||
:width="680"
|
||||
scroll="keep"
|
||||
trap-focus
|
||||
autofocus
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
aria-modal>
|
||||
<form class="tainacan-modal-content tainacan-form">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('instruction_select_title_mapping') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p style="margin: 12px 0px 24px 0px">{{ $i18n.get('info_title_mapping') }}</p>
|
||||
<b-field>
|
||||
<b-select
|
||||
expanded
|
||||
v-model="selectedTitle"
|
||||
:placeholder="$i18n.get('label_select_metadatum')">
|
||||
<option
|
||||
v-for="(sourceMetadatum, index) of importerSourceInfo.source_metadata"
|
||||
:key="index"
|
||||
:value="index">
|
||||
<span class="metadatum-name">
|
||||
{{ sourceMetadatum }}
|
||||
</span>
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
</div>
|
||||
<div
|
||||
style="text-align: right"
|
||||
class="column">
|
||||
<div
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
class="item-demo">
|
||||
<p>{{ selectedTitle == '' || selectedTitle == undefined ? $i18n.get('label_title') : importerSourceInfo.source_metadata[selectedTitle] }}</p>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="margin-top: -24px"
|
||||
class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-outlined"
|
||||
type="button"
|
||||
@click="selectedTitle = ''; showTitlePromptModal = false">
|
||||
{{ $i18n.get('skip') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
type="submit"
|
||||
class="button is-success"
|
||||
@click="onConfirmTitleSelection"
|
||||
:disabled="selectedTitle === '' || selectedTitle == undefined">
|
||||
{{ $i18n.get('apply') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</b-modal>
|
||||
|
||||
<b-loading
|
||||
:active.sync="isLoading"
|
||||
:can-cancel="false"/>
|
||||
|
|
@ -227,7 +299,9 @@ export default {
|
|||
metadatum: {},
|
||||
editedMetadatum: {},
|
||||
backgroundProcess: undefined,
|
||||
metadataSearchCancel: undefined
|
||||
metadataSearchCancel: undefined,
|
||||
showTitlePromptModal: false,
|
||||
selectedTitle: undefined
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -284,6 +358,8 @@ export default {
|
|||
.then(importerSourceInfo => {
|
||||
this.importerSourceInfo = importerSourceInfo;
|
||||
this.mappedCollection['total_items'] = this.importerSourceInfo.source_total_items;
|
||||
|
||||
this.loadMetadata();
|
||||
})
|
||||
.catch((errors) => {
|
||||
this.$console.log(errors);
|
||||
|
|
@ -310,12 +386,15 @@ export default {
|
|||
this.collectionMetadata = JSON.parse(JSON.stringify(metadata));
|
||||
this.isFetchingCollectionMetadata = false;
|
||||
|
||||
let coreTitleIndex = this.collectionMetadata.findIndex((metadatum) => metadatum.metadata_type == 'Tainacan\\Metadata_Types\\Core_Title');
|
||||
if (coreTitleIndex >= 0)
|
||||
this.showTitlePromptModal = true;
|
||||
|
||||
this.fetchMappingImporter({ collection: this.collectionId, sessionId: this.sessionId })
|
||||
.then(res => {
|
||||
if( res ) {
|
||||
if (res)
|
||||
this.mappedCollection['mapping'] = res;
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.error(error);
|
||||
|
|
@ -337,10 +416,9 @@ export default {
|
|||
let val = this.mappedCollection['mapping'][metadatumId];
|
||||
const { source_metadata } = this.importerSourceInfo;
|
||||
|
||||
if(source_metadata && source_metadata.indexOf(val) >= 0) {
|
||||
if (source_metadata && source_metadata.indexOf(val) >= 0)
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
|
@ -452,6 +530,14 @@ export default {
|
|||
this.isEditingMetadatum = false;
|
||||
this.isNewMetadatumModalActive = false;
|
||||
this.selectedMetadatumType = undefined;
|
||||
},
|
||||
onConfirmTitleSelection(event) {
|
||||
event.preventDefault();
|
||||
let coreTitleIndex = this.collectionMetadata.findIndex((metadatum) => metadatum.metadata_type == 'Tainacan\\Metadata_Types\\Core_Title');
|
||||
if (coreTitleIndex >= 0)
|
||||
this.onSelectCollectionMetadata(this.collectionMetadata[coreTitleIndex].id, this.importerSourceInfo.source_metadata[this.selectedTitle])
|
||||
|
||||
this.showTitlePromptModal = false;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -467,7 +553,6 @@ export default {
|
|||
});
|
||||
|
||||
this.loadImporter();
|
||||
this.loadMetadata();
|
||||
},
|
||||
beforeDestroy() {
|
||||
// Cancels previous Request
|
||||
|
|
@ -598,8 +683,27 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.item-demo {
|
||||
display: inline-block;
|
||||
margin: 8px 12px;
|
||||
|
||||
|
||||
p {
|
||||
max-width: 74px;
|
||||
font-size: 0.875rem;
|
||||
color: $gray5;
|
||||
margin: 4px 8px;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div {
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
background-color: $gray2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ return apply_filters( 'tainacan-admin-i18n', [
|
|||
'clear_radio' => __( 'Clear selected radio', 'tainacan' ),
|
||||
'undo' => __( 'Undo', 'tainacan' ),
|
||||
'delete' => __( 'Delete', 'tainacan' ),
|
||||
'skip' => __( 'Skip', 'tainacan' ),
|
||||
|
||||
// Wordpress Status
|
||||
'status_publish' => __( 'Publish', 'tainacan' ),
|
||||
|
|
@ -487,7 +488,7 @@ return apply_filters( 'tainacan-admin-i18n', [
|
|||
'instruction_type_value_year' => __( 'Type year value', 'tainacan' ),
|
||||
'instruction_select_the_amount_of_copies' => __( 'Select the amount of copies of the item that you want to create', 'tainacan'),
|
||||
'instruction_select_a_interval' => __( 'Select an interval', 'tainacan'),
|
||||
|
||||
'instruction_select_title_mapping' => __( 'First, select the title source metadata', 'tainacan'),
|
||||
|
||||
// Info. Other feedback to user.
|
||||
'info_items_tab_all' => __( 'Every published item, including those visible only to editors.', 'tainacan' ),
|
||||
|
|
@ -666,6 +667,7 @@ return apply_filters( 'tainacan-admin-i18n', [
|
|||
'info_initial_value' => __( 'Initial value', 'tainacan' ),
|
||||
'info_final_value' => __( 'Final value', 'tainacan' ),
|
||||
'info_show_interval_on_tag' => __( 'Show applied interval on tags', 'tainacan' ),
|
||||
'info_title_mapping' => __( 'The title is the most relevant metadata, that shall identify your item on lists for different view modes. Select the title source metadata first, or skip to continue manual mapping.', 'taincan'),
|
||||
|
||||
// Tainacan Metadatum Types
|
||||
'tainacan-text' => __( 'Text', 'tainacan' ),
|
||||
|
|
|
|||
Loading…
Reference in New Issue