tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds modal to offer title selection before mapping #309.

This commit is contained in:
Mateus Machado Luna 2019-10-18 12:26:09 -03:00
parent 88ca241401
commit a39703b46b
2 changed files with 136 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
src/admin/components/edition/importer-mapping-form.vue
View File

@ -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);
@ -305,25 +381,28 @@ export default {
isRepositoryLevel: false,
isContextEdit: false
}).then((resp) => {
resp.request
.then((metadata) => {
this.collectionMetadata = JSON.parse(JSON.stringify(metadata));
this.isFetchingCollectionMetadata = false;
resp.request
.then((metadata) => {
this.collectionMetadata = JSON.parse(JSON.stringify(metadata));
this.isFetchingCollectionMetadata = false;
this.fetchMappingImporter({ collection: this.collectionId, sessionId: this.sessionId })
.then(res => {
if( res ) {
this.mappedCollection['mapping'] = res;
}
})
})
.catch((error) => {
this.$console.error(error);
this.isFetchingCollectionMetadata = false;
});
let coreTitleIndex = this.collectionMetadata.findIndex((metadatum) => metadatum.metadata_type == 'Tainacan\\Metadata_Types\\Core_Title');
if (coreTitleIndex >= 0)
this.showTitlePromptModal = true;
// Search Request Token for cancelling
this.metadataSearchCancel = resp.source;
this.fetchMappingImporter({ collection: this.collectionId, sessionId: this.sessionId })
.then(res => {
if (res)
this.mappedCollection['mapping'] = res;
});
})
.catch((error) => {
this.$console.error(error);
this.isFetchingCollectionMetadata = false;
});
// Search Request Token for cancelling
this.metadataSearchCancel = resp.source;
})
.catch(() => this.isFetchingCollectionMetadata = false);
},
@ -337,16 +416,15 @@ 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;
},
checkCurrentSelectedCollectionMetadatum(sourceMetadatum) {
for (let key in this.mappedCollection['mapping']) {
if(this.mappedCollection['mapping'][key] == sourceMetadatum)
if (this.mappedCollection['mapping'][key] == sourceMetadatum)
return key;
}
return undefined;
@ -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>

4
src/admin/tainacan-admin-i18n.php
View File

@ -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' ),