Merge pull request #623 from tainacan/feature/619

Feature/619
This commit is contained in:
Vinícius Nunes Medeiros 2021-10-29 11:30:14 -03:00 committed by GitHub
commit 9b33aefabd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 193 additions and 7 deletions

View File

@ -140,7 +140,7 @@ export const deleteItem = ({ commit }, { itemId, isPermanently }) => {
});
};
export const fetchCollections = ({commit} , { page, collectionsPerPage, status, contextEdit, order, orderby, search }) => {
export const fetchCollections = ({commit} , { page, collectionsPerPage, status, contextEdit, order, orderby, search, collectionTaxonomies }) => {
return new Promise((resolve, reject) => {
let endpoint = '/collections?paged='+page+'&perpage='+collectionsPerPage;
@ -156,6 +156,30 @@ export const fetchCollections = ({commit} , { page, collectionsPerPage, status,
if (search != undefined && search != '')
endpoint = endpoint + '&search=' + search;
if (collectionTaxonomies != undefined && collectionTaxonomies != '' && Object.keys(collectionTaxonomies).length) {
let taxQuery = { 'taxquery': [] };
Object.keys(collectionTaxonomies).forEach((taxonomyValue) => {
const enabledTerms = (
collectionTaxonomies[taxonomyValue] &&
collectionTaxonomies[taxonomyValue]['terms'] &&
collectionTaxonomies[taxonomyValue]['terms'].length
) ? collectionTaxonomies[taxonomyValue]['terms'].filter(term => term.enabled == true) : [];
if (enabledTerms.length ) {
taxQuery['taxquery'].push({
taxonomy: taxonomyValue,
operator: 'IN',
terms: enabledTerms.map(term => term.id)
});
}
});
if (taxQuery['taxquery'].length)
endpoint = endpoint + '&' + qs.stringify(taxQuery);
}
axios.tainacan.get(endpoint)
.then(res => {
@ -222,6 +246,45 @@ export const fetchCollectionBasics = ({ commit }, {collectionId, isContextEdit }
});
};
export const fetchCollectionTaxonomies = ({ commit }) => {
return new Promise((resolve, reject) => {
axios.wp.get('/taxonomies/?type=tainacan-collection')
.then(res => {
let taxonomies = res.data;
commit('setCollectionTaxonomies', taxonomies);
if (Object.keys(taxonomies).length) {
let termsRequests = [];
Object.keys(taxonomies).forEach(taxonomySlug => {
if ( taxonomies[taxonomySlug]['rest_base'] ) {
termsRequests.push(
axios.wp.get(taxonomies[taxonomySlug]['rest_base'])
.then(resp => {
return { taxonomy: taxonomySlug, terms: resp.data };
})
.catch(error => {
reject(error);
})
);
}
});
axios.all(termsRequests)
.then(result => {
result.forEach(taxonomyTerms => commit('setCollectionTaxonomiesTerms', taxonomyTerms) );
resolve(result.data);
})
.catch(error => {
reject(error);
})
}
})
.catch(error => {
reject(error);
});
});
};
export const fetchCollectionForExposer = ({ commit }, collectionId) => {
return new Promise((resolve, reject) => {
let endpoint = '/collections/' + collectionId + '?fetch_only=name,url';

View File

@ -10,6 +10,10 @@ export const getCollections = state => {
return state.collections;
}
export const getCollectionTaxonomies = state => {
return state.collectionTaxonomies;
}
export const getCollection = state => {
return state.collection;
}

View File

@ -11,6 +11,7 @@ const state = {
attachments: [],
files: [],
repositoryTotalCollections: '',
collectionTaxonomies: {}
};
export default {

View File

@ -33,6 +33,14 @@ export const setCollections = (state, collections) => {
state.collections = collections;
}
export const setCollectionTaxonomies = (state, collectionTaxonomies) => {
state.collectionTaxonomies = collectionTaxonomies;
}
export const setCollectionTaxonomiesTerms = (state, { taxonomy, terms }) => {
Vue.set(state.collectionTaxonomies[taxonomy], 'terms', terms);
}
export const cleanCollections = (state) => {
state.collections = [];
}

View File

@ -9,7 +9,7 @@
<div
v-if="$userCaps.hasCapability('tnc_rep_edit_collections')"
class="header-item">
<b-dropdown
<b-dropdown
aria-role="list"
id="collection-creation-options-dropdown"
trap-focus>
@ -56,6 +56,54 @@
</b-dropdown>
</div>
<!-- Collection Taxonomies, if available -->
<template v-if="!isLoadingCollectionTaxonomies && Object.values(collectionTaxonomies) && Object.values(collectionTaxonomies).length >= 0">
<b-field
v-for="(collectionTaxonomy, taxonomyValue) in collectionTaxonomies"
:key="taxonomyValue"
class="header-item">
<b-dropdown
:ref="'collectionTaxonomyFilterDropdown-' + taxonomyValue"
:mobile-modal="true"
:disabled="(totalCollections && totalCollections.length && totalCollections.length <= 0) || isLoading"
class="show metadata-options-dropdown"
aria-role="list"
trap-focus>
<button
:aria-label="collectionTaxonomy['name']"
class="button is-white"
slot="trigger">
<span>{{ collectionTaxonomy['name'] }}</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span>
</button>
<div class="metadata-options-container">
<b-dropdown-item
v-for="(collectionTaxonomyTerm, index) in collectionTaxonomy['terms']"
:key="index"
class="control"
custom
aria-role="listitem">
<b-checkbox
v-model="collectionTaxonomyTerm.enabled"
:native-value="collectionTaxonomyTerm.enabled">
{{ collectionTaxonomyTerm.name }}
</b-checkbox>
</b-dropdown-item>
</div>
<div class="dropdown-item-apply">
<button
aria-controls="items-list-results"
@click="onChangeCollectionTaxonomyTerms(taxonomyValue)"
class="button is-success">
{{ $i18n.get('label_apply_changes') }}
</button>
</div>
</b-dropdown>
</b-field>
</template>
<!-- Sorting options ---- -->
<b-field class="header-item">
<label class="label">{{ $i18n.get('label_sort') }}</label>
@ -328,6 +376,7 @@ export default {
page: 1,
collectionsPerPage: 12,
isLoadingMetadatumMappers: true,
isLoadingCollectionTaxonomies: false,
status: '',
order: 'desc',
ordeBy: 'date',
@ -349,10 +398,24 @@ export default {
},
repositoryTotalCollections(){
return this.getRepositoryTotalCollections();
},
collectionTaxonomies() {
let collectionTaxonomies = this.getCollectionTaxonomies();
// Adds the 'enable' property to our local version of terms
if ( Object.values(collectionTaxonomies).length ) {
Object.values(collectionTaxonomies).forEach(collectionTaxonomy => {
collectionTaxonomy.terms.forEach(aTerm => aTerm.enabled = false);
});
return collectionTaxonomies;
}
return {};
}
},
created() {
this.collectionsPerPage = this.$userPrefs.get('collections_per_page');
this.isLoadingMetadatumTypes = true;
this.fetchMetadatumMappers()
.then(() => {
@ -361,6 +424,15 @@ export default {
.catch(() => {
this.isLoadingMetadatumMappers = false;
});
this.isLoadingCollectionTaxonomies = true;
this.fetchCollectionTaxonomies()
.then(() => {
this.isLoadingCollectionTaxonomies = false;
})
.catch(() => {
this.isLoadingCollectionTaxonomies= false;
});
},
mounted(){
if (this.collectionsPerPage != this.$userPrefs.get('collections_per_page'))
@ -390,14 +462,16 @@ export default {
methods: {
...mapActions('collection', [
'fetchCollections',
'cleanCollections'
'cleanCollections',
'fetchCollectionTaxonomies'
]),
...mapActions('metadata', [
'fetchMetadatumMappers'
]),
...mapGetters('collection', [
'getCollections',
'getRepositoryTotalCollections'
'getRepositoryTotalCollections',
'getCollectionTaxonomies'
]),
...mapGetters('metadata', [
'getMetadatumMappers'
@ -448,6 +522,14 @@ export default {
this.page = page;
this.loadCollections();
},
onChangeCollectionTaxonomyTerms(taxonomyValue) {
this.loadCollections();
// Closes dropdown
if (this.$refs['collectionTaxonomyFilterDropdown-' + taxonomyValue] && this.$refs['collectionTaxonomyFilterDropdown-' + taxonomyValue][0])
this.$refs['collectionTaxonomyFilterDropdown-' + taxonomyValue][0].toggle();
},
loadCollections() {
this.cleanCollections();
this.isLoading = true;
@ -458,7 +540,8 @@ export default {
contextEdit: true,
order: this.order,
orderby: this.orderBy,
search: this.searchQuery
search: this.searchQuery,
collectionTaxonomies: this.collectionTaxonomies,
})
.then((res) => {
this.isLoading = false;
@ -514,7 +597,7 @@ export default {
margin-right: auto;
}
&:not(:last-child) {
padding-right: 0.5em;
padding-right: 0.875em;
}
.label {
@ -529,7 +612,6 @@ export default {
.button {
display: flex;
align-items: center;
border-radius: 0 !important;
height: 1.95em !important;
}
}
@ -557,6 +639,34 @@ export default {
font-size: 1.125em !important;
height: 1.75em
}
.dropdown-menu {
display: block;
div.dropdown-content {
padding: 0;
.metadata-options-container {
max-height: 288px;
overflow: auto;
}
.dropdown-item {
padding: 0.25em 1.0em 0.25em 0.75em;
}
.dropdown-item span{
vertical-align: middle;
}
.dropdown-item-apply {
width: 100%;
border-top: 1px solid var(--tainacan-skeleton-color);
padding: 8px 12px;
text-align: right;
}
.dropdown-item-apply .button {
width: 100%;
}
}
}
}
@media screen and (max-width: 769px) {