Creates a modal for collection creation from presets. #734.
This commit is contained in:
mateuswetah
parent
ff2a4e845b
commit
bfd57dafed
|
|
@ -0,0 +1,208 @@
|
|||
<template>
|
||||
<div
|
||||
aria-labelledby="collection-creation-title"
|
||||
autofocus
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
aria-modal
|
||||
class="tainacan-modal-content"
|
||||
style="width: auto"
|
||||
ref="collectionCreationModal">
|
||||
<header class="tainacan-modal-title">
|
||||
<h2
|
||||
id="collection-creation-title"
|
||||
v-if="selectedEstrategy == 'mappers'">
|
||||
{{ $i18n.get('label_create_collection_from_mapper') }}
|
||||
</h2>
|
||||
<h2
|
||||
id="collection-creation-title"
|
||||
v-else-if="selectedEstrategy == 'presets'">
|
||||
{{ $i18n.get('label_create_collection_from_preset') }}
|
||||
</h2>
|
||||
<h2
|
||||
id="collection-creation-title"
|
||||
v-else>
|
||||
{{ $i18n.get('label_create_collection') }}
|
||||
</h2>
|
||||
<a
|
||||
@click="selectedEstrategy = undefined"
|
||||
v-if="selectedEstrategy != undefined"
|
||||
class="back-link">
|
||||
{{ $i18n.get('back') }}
|
||||
</a>
|
||||
<hr>
|
||||
</header>
|
||||
<section class="tainacan-form">
|
||||
<div
|
||||
v-if="selectedEstrategy == undefined"
|
||||
class="collection-creation-options-container">
|
||||
|
||||
<button
|
||||
class="collection-creation-option"
|
||||
aria-role="listitem"
|
||||
@click="selectedEstrategy = 'mappers'">
|
||||
<h3>{{ $i18n.get('label_from_a_mapper') }}</h3>
|
||||
<p>{{ $i18n.get('info_create_collection_from_mapper') }}</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="collection-creation-option"
|
||||
aria-role="listitem"
|
||||
@click="selectedEstrategy = 'presets'">
|
||||
<h3>{{ $i18n.get('label_using_a_preset') }}</h3>
|
||||
<p>{{ $i18n.get('info_create_collection_from_preset') }}</p>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="selectedEstrategy == 'mappers'"
|
||||
class="collection-creation-options-container"
|
||||
role="list">
|
||||
<button
|
||||
class="collection-creation-option"
|
||||
@click="$router.push($routerHelper.getNewMappedCollectionPath(metadatumMapper.slug)); $parent.close();"
|
||||
:key="metadatumMapper.slug"
|
||||
v-for="metadatumMapper in metadatumMappers"
|
||||
v-if="metadatumMapper.metadata != false"
|
||||
aria-role="listitem">
|
||||
{{ $i18n.get(metadatumMapper.name) }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingMetadatumMappers"
|
||||
:can-cancel="false"/>
|
||||
|
||||
<footer class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-outlined"
|
||||
type="button"
|
||||
@click="$parent.close()">{{ $i18n.get('close') }}</button>
|
||||
</div>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'CollectionCreationModal',
|
||||
directives: {
|
||||
focus: {
|
||||
inserted(el) {
|
||||
el.focus();
|
||||
|
||||
if (el.value != undefined)
|
||||
el.setSelectionRange(0,el.value.length)
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
selectedEstrategy: undefined,
|
||||
isLoadingMetadatumMappers: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
metadatumMappers() {
|
||||
return this.getMetadatumMappers();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isLoadingMetadatumTypes = true;
|
||||
|
||||
this.fetchMetadatumMappers()
|
||||
.then(() => {
|
||||
this.isLoadingMetadatumMappers = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.isLoadingMetadatumMappers = false;
|
||||
});
|
||||
|
||||
if (this.$refs.collectionCreationModal)
|
||||
this.$refs.collectionCreationModal.focus()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('metadata', [
|
||||
'fetchMetadatumMappers'
|
||||
]),
|
||||
...mapGetters('metadata', [
|
||||
'getMetadatumMappers'
|
||||
]),
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tainacan-modal-title {
|
||||
margin-bottom: 24px;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.back-link {
|
||||
color: var(--tainacan-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.collection-creation-options-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
color: var(--tainacan-gray5);
|
||||
padding: 0em 1.25em;
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.collection-creation-option {
|
||||
border: 1px solid var(--tainacan-input-border-color);
|
||||
background-color: var(--tainacan-background-color);
|
||||
text-align: left;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
max-width: 50%;
|
||||
flex-grow: 1;
|
||||
font-size: 1em;
|
||||
transition: border 0.3s ease;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
max-width: 100%;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--tainacan-heading-color);
|
||||
font-size: 1em !important;
|
||||
font-weight: 500;
|
||||
padding: 0em 0.5em;
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 0.75em;
|
||||
color: var(--tainacan-gray5);
|
||||
padding: 0em 0.5em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--tainacan-gray5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
|
@ -31,17 +31,15 @@
|
|||
<small class="is-small">{{ $i18n.get('info_choose_your_metadata') }}</small>
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
:key="metadatum_mapper.slug"
|
||||
v-for="metadatum_mapper in metadatum_mappers"
|
||||
v-if="metadatum_mapper.metadata != false"
|
||||
aria-role="listitem">
|
||||
<router-link
|
||||
:id="'a-create-collection-' + metadatum_mapper.slug"
|
||||
<b-dropdown-item aria-role="listitem">
|
||||
<div
|
||||
id="a-preset-collection"
|
||||
tag="div"
|
||||
:to="{ path: $routerHelper.getNewMappedCollectionPath(metadatum_mapper.slug) }">
|
||||
{{ $i18n.get(metadatum_mapper.name) }}
|
||||
</router-link>
|
||||
@click="onOpenCollectionCreationModal">
|
||||
{{ $i18n.get('label_preset_collections') }}
|
||||
<br>
|
||||
<small class="is-small">{{ $i18n.get('info_preset_collections') }}</small>
|
||||
</div>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item aria-role="listitem">
|
||||
<div
|
||||
|
|
@ -263,7 +261,6 @@
|
|||
|
||||
<div v-if="$userCaps.hasCapability('tnc_rep_edit_collections') && status == undefined || status == ''">
|
||||
<b-dropdown
|
||||
:disabled="isLoadingMetadatumMappers"
|
||||
id="collection-creation-options-dropdown"
|
||||
aria-role="list"
|
||||
trap-focus>
|
||||
|
|
@ -285,18 +282,6 @@
|
|||
<small class="is-small">{{ $i18n.get('info_choose_your_metadata') }}</small>
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
:key="metadatum_mapper.slug"
|
||||
v-for="metadatum_mapper in metadatum_mappers"
|
||||
v-if="metadatum_mapper.metadata != false"
|
||||
aria-role="listitem">
|
||||
<router-link
|
||||
:id="'a-create-collection-' + metadatum_mapper.slug"
|
||||
tag="div"
|
||||
:to="{ path: $routerHelper.getNewMappedCollectionPath(metadatum_mapper.slug) }">
|
||||
{{ $i18n.get(metadatum_mapper.name) }}
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item aria-role="listitem">
|
||||
<div
|
||||
id="a-import-collection"
|
||||
|
|
@ -364,6 +349,7 @@
|
|||
<script>
|
||||
import CollectionsList from '../../components/lists/collections-list.vue';
|
||||
import AvailableImportersModal from '../../components/modals/available-importers-modal.vue';
|
||||
import CollectionCreationModal from '../../components/modals/collection-creation-modal.vue';
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
|
|
@ -391,11 +377,6 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
metadatum_mappers: {
|
||||
get() {
|
||||
return this.getMetadatumMappers();
|
||||
}
|
||||
},
|
||||
collections() {
|
||||
return this.getCollections();
|
||||
},
|
||||
|
|
@ -419,15 +400,6 @@ export default {
|
|||
created() {
|
||||
this.collectionsPerPage = this.$userPrefs.get('collections_per_page');
|
||||
|
||||
this.isLoadingMetadatumTypes = true;
|
||||
this.fetchMetadatumMappers()
|
||||
.then(() => {
|
||||
this.isLoadingMetadatumMappers = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.isLoadingMetadatumMappers = false;
|
||||
});
|
||||
|
||||
this.isLoadingCollectionTaxonomies = true;
|
||||
this.fetchCollectionTaxonomies()
|
||||
.then(() => {
|
||||
|
|
@ -437,7 +409,8 @@ export default {
|
|||
this.isLoadingCollectionTaxonomies= false;
|
||||
});
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
|
||||
if (this.collectionsPerPage != this.$userPrefs.get('collections_per_page'))
|
||||
this.collectionsPerPage = this.$userPrefs.get('collections_per_page');
|
||||
if (!this.collectionsPerPage) {
|
||||
|
|
@ -452,7 +425,6 @@ export default {
|
|||
this.$userPrefs.set('collections_order', 'asc');
|
||||
}
|
||||
|
||||
|
||||
if (this.orderBy != this.$userPrefs.get('collections_order_by'))
|
||||
this.orderBy = this.$userPrefs.get('collections_order_by');
|
||||
if (!this.orderBy) {
|
||||
|
|
@ -476,9 +448,6 @@ export default {
|
|||
'getRepositoryTotalCollections',
|
||||
'getCollectionTaxonomies'
|
||||
]),
|
||||
...mapGetters('metadata', [
|
||||
'getMetadatumMappers'
|
||||
]),
|
||||
onChangeTab(status) {
|
||||
this.page = 1;
|
||||
this.status = status;
|
||||
|
|
@ -569,6 +538,16 @@ export default {
|
|||
closeButtonAriaLabel: this.$i18n.get('close')
|
||||
});
|
||||
},
|
||||
onOpenCollectionCreationModal() {
|
||||
this.$buefy.modal.open({
|
||||
parent: this,
|
||||
component: CollectionCreationModal,
|
||||
hasModalCard: true,
|
||||
trapFocus: true,
|
||||
customClass: 'tainacan-modal',
|
||||
closeButtonAriaLabel: this.$i18n.get('close')
|
||||
});
|
||||
},
|
||||
searchCollections() {
|
||||
this.page = 1;
|
||||
this.loadCollections();
|
||||
|
|
|
|||
|
|
@ -654,6 +654,11 @@ return apply_filters( 'tainacan-i18n', [
|
|||
'label_create_item' => __( 'Create item', 'tainacan' ),
|
||||
'label_ready_to_create_item' => __( 'Ready to create this item?', 'tainacan' ),
|
||||
'label_only_required' => __( 'Only required', 'tainacan' ),
|
||||
'label_create_collection_from_mapper' => __( 'Create a new collection from a mapper', 'tainacan' ),
|
||||
'label_create_collection_from_preset' => __( 'Create a preset collection', 'tainacan' ),
|
||||
'label_preset_collections' => __( 'Preset collections', 'tainacan' ),
|
||||
'label_from_a_mapper' => __( 'From a metadata mapper', 'tainacan' ),
|
||||
'label_using_a_preset' => __( 'Using a preset', 'tainacan' ),
|
||||
|
||||
// Instructions. More complex sentences to guide user and placeholders
|
||||
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
||||
|
|
@ -970,6 +975,9 @@ return apply_filters( 'tainacan-i18n', [
|
|||
'info_metadata_mapper_helper' => __( 'Select the corresponding metadata so they can be exposed according to the mapper', 'tainacan'),
|
||||
'info_default_orderby' => __( 'These settings only affect the initial state of the items sorting. After changed, the value used will be the latest selected by the user.', 'tainacan' ),
|
||||
'info_collection_thumbnail_and_header' => __( 'The thumbnail is a squared image that will represent the collection in listings. The header image is a complementary, decorative image that may or not be displayed by your theme in the items list. Keep in mind that it might be cropped.', 'tainacan'),
|
||||
'info_preset_collections' => __( 'Use mappers or standards as pre configuration', 'tainacan' ),
|
||||
'info_create_collection_from_mapper' => __( 'Have the metadata preset by an installed mapper, such as Dublin core, then set the rest manually.', 'tainacan' ),
|
||||
'info_create_collection_from_preset' => __( 'Have metadata, taxonomies, terms and related collections preset according to a standard.', 'tainacan' ),
|
||||
|
||||
/* Activity actions */
|
||||
'action_update-metadata-value' => __( 'Item Metadata Value Updates', 'tainacan'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue