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> </template>
<div <div
class="source-metadatum" class="source-metadatum"
v-for="(source_metadatum, index) of importerSourceInfo.source_metadata" v-for="(sourceMetadatum, index) of importerSourceInfo.source_metadata"
:key="index"> :key="index">
<p>{{ source_metadatum }}</p> <p>{{ sourceMetadatum }}</p>
<b-select <b-select
v-if="collectionMetadata != undefined && v-if="collectionMetadata != undefined &&
collectionMetadata.length > 0 && collectionMetadata.length > 0 &&
!isFetchingCollectionMetadata" !isFetchingCollectionMetadata"
:value="checkCurrentSelectedCollectionMetadatum(source_metadatum)" :value="checkCurrentSelectedCollectionMetadatum(sourceMetadatum)"
@input="onSelectCollectionMetadata($event, source_metadatum)" @input="onSelectCollectionMetadata($event, sourceMetadatum)"
:placeholder="$i18n.get('label_select_metadatum')"> :placeholder="$i18n.get('label_select_metadatum')">
<option :value="undefined"> <option :value="undefined">
{{ $i18n.get('label_select_metadatum') }} {{ $i18n.get('label_select_metadatum') }}
@ -191,6 +191,78 @@
</div> </div>
</form> </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 <b-loading
:active.sync="isLoading" :active.sync="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
@ -227,7 +299,9 @@ export default {
metadatum: {}, metadatum: {},
editedMetadatum: {}, editedMetadatum: {},
backgroundProcess: undefined, backgroundProcess: undefined,
metadataSearchCancel: undefined metadataSearchCancel: undefined,
showTitlePromptModal: false,
selectedTitle: undefined
} }
}, },
components: { components: {
@ -284,6 +358,8 @@ export default {
.then(importerSourceInfo => { .then(importerSourceInfo => {
this.importerSourceInfo = importerSourceInfo; this.importerSourceInfo = importerSourceInfo;
this.mappedCollection['total_items'] = this.importerSourceInfo.source_total_items; this.mappedCollection['total_items'] = this.importerSourceInfo.source_total_items;
this.loadMetadata();
}) })
.catch((errors) => { .catch((errors) => {
this.$console.log(errors); this.$console.log(errors);
@ -305,25 +381,28 @@ export default {
isRepositoryLevel: false, isRepositoryLevel: false,
isContextEdit: false isContextEdit: false
}).then((resp) => { }).then((resp) => {
resp.request resp.request
.then((metadata) => { .then((metadata) => {
this.collectionMetadata = JSON.parse(JSON.stringify(metadata)); this.collectionMetadata = JSON.parse(JSON.stringify(metadata));
this.isFetchingCollectionMetadata = false; this.isFetchingCollectionMetadata = false;
this.fetchMappingImporter({ collection: this.collectionId, sessionId: this.sessionId }) let coreTitleIndex = this.collectionMetadata.findIndex((metadatum) => metadatum.metadata_type == 'Tainacan\\Metadata_Types\\Core_Title');
.then(res => { if (coreTitleIndex >= 0)
if( res ) { this.showTitlePromptModal = true;
this.mappedCollection['mapping'] = res;
}
})
})
.catch((error) => {
this.$console.error(error);
this.isFetchingCollectionMetadata = false;
});
// Search Request Token for cancelling this.fetchMappingImporter({ collection: this.collectionId, sessionId: this.sessionId })
this.metadataSearchCancel = resp.source; .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); .catch(() => this.isFetchingCollectionMetadata = false);
}, },
@ -337,16 +416,15 @@ export default {
let val = this.mappedCollection['mapping'][metadatumId]; let val = this.mappedCollection['mapping'][metadatumId];
const { source_metadata } = this.importerSourceInfo; const { source_metadata } = this.importerSourceInfo;
if(source_metadata && source_metadata.indexOf(val) >= 0) { if (source_metadata && source_metadata.indexOf(val) >= 0)
return true; return true;
}
} }
return false; return false;
}, },
checkCurrentSelectedCollectionMetadatum(sourceMetadatum) { checkCurrentSelectedCollectionMetadatum(sourceMetadatum) {
for (let key in this.mappedCollection['mapping']) { for (let key in this.mappedCollection['mapping']) {
if(this.mappedCollection['mapping'][key] == sourceMetadatum) if (this.mappedCollection['mapping'][key] == sourceMetadatum)
return key; return key;
} }
return undefined; return undefined;
@ -452,6 +530,14 @@ export default {
this.isEditingMetadatum = false; this.isEditingMetadatum = false;
this.isNewMetadatumModalActive = false; this.isNewMetadatumModalActive = false;
this.selectedMetadatumType = undefined; 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() { created() {
@ -467,7 +553,6 @@ export default {
}); });
this.loadImporter(); this.loadImporter();
this.loadMetadata();
}, },
beforeDestroy() { beforeDestroy() {
// Cancels previous Request // 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> </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' ), 'clear_radio' => __( 'Clear selected radio', 'tainacan' ),
'undo' => __( 'Undo', 'tainacan' ), 'undo' => __( 'Undo', 'tainacan' ),
'delete' => __( 'Delete', 'tainacan' ), 'delete' => __( 'Delete', 'tainacan' ),
'skip' => __( 'Skip', 'tainacan' ),
// Wordpress Status // Wordpress Status
'status_publish' => __( 'Publish', 'tainacan' ), 'status_publish' => __( 'Publish', 'tainacan' ),
@ -487,7 +488,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'instruction_type_value_year' => __( 'Type year value', 'tainacan' ), '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_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_a_interval' => __( 'Select an interval', 'tainacan'),
'instruction_select_title_mapping' => __( 'First, select the title source metadata', 'tainacan'),
// Info. Other feedback to user. // Info. Other feedback to user.
'info_items_tab_all' => __( 'Every published item, including those visible only to editors.', 'tainacan' ), '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_initial_value' => __( 'Initial value', 'tainacan' ),
'info_final_value' => __( 'Final value', 'tainacan' ), 'info_final_value' => __( 'Final value', 'tainacan' ),
'info_show_interval_on_tag' => __( 'Show applied interval on tags', '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 Metadatum Types
'tainacan-text' => __( 'Text', 'tainacan' ), 'tainacan-text' => __( 'Text', 'tainacan' ),