Shows every collection filter on items list repository level.

This commit is contained in:
Mateus Machado Luna 2019-04-09 13:13:26 -03:00
parent 25e23f2bdd
commit db527775bf
6 changed files with 199 additions and 10 deletions

View File

@ -88,11 +88,98 @@
<hr v-if="taxonomyFilter.length > 0"> <hr v-if="taxonomyFilter.length > 0">
</div> </div>
</template> </template>
<template v-else> <template v-else-if="isRepositoryLevel && taxonomyFilters == undefined">
<collections-filter <collections-filter
:open="collapsed" :open="collapsed"
:query="getQuery" :query="getQuery"/>
v-if="isRepositoryLevel"/> <div
v-if="key == 'repository-filters'"
:key="index"
v-for="(repositoryCollectionFilter, key, index) of repositoryCollectionFilters">
<div
v-tooltip="{
delay: {
show: 500,
hide: 300,
},
content: $i18n.get('label_filters_from') + ' ' + repositoryCollectionNames[key] + ': ',
autoHide: false,
placement: 'auto-start'
}"
v-if="repositoryCollectionFilter.length > 0 && repositoryCollectionNames != undefined && repositoryCollectionNames[key] != undefined"
class="collection-name">
{{ $i18n.get('label_filters_from') + " " + repositoryCollectionNames[key] + ": " }}
</div>
<div
v-if="repositoryCollectionFilter.length > 0 && !(repositoryCollectionNames != undefined && repositoryCollectionNames[key] != undefined)"
class="collection-name">
<span
style="width: 100%; height: 54px;"
class="icon has-text-centered loading-icon">
<div class="control has-icons-right is-loading is-clearfix" />
</span>
</div>
<tainacan-filter-item
v-show="!isMenuCompressed"
:query="getQuery"
v-for="(filter, filterIndex) in repositoryCollectionFilter"
:key="filterIndex"
:filter="filter"
:open="collapsed"
v-if="repositoryCollectionFilter.length > 0"
:is-repository-level="key == 'repository-filters'"/>
<!-- <p
class="has-text-gray is-size-7"
v-if="taxonomyFilter.length <= 0">
{{ $i18n.get('info_there_is_no_filter') }}
</p> -->
<hr v-if="repositoryCollectionFilters.length > 0">
</div>
<div
v-if="key != 'repository-filters'"
:key="index"
v-for="(repositoryCollectionFilter, key, index) of repositoryCollectionFilters">
<div
v-tooltip="{
delay: {
show: 500,
hide: 300,
},
content: $i18n.get('label_filters_from') + ' ' + repositoryCollectionNames[key] + ': ',
autoHide: false,
placement: 'auto-start'
}"
v-if="repositoryCollectionFilter.length > 0 && repositoryCollectionNames != undefined && repositoryCollectionNames[key] != undefined"
class="collection-name">
{{ $i18n.get('label_filters_from') + " " + repositoryCollectionNames[key] + ": " }}
</div>
<div
v-if="repositoryCollectionFilter.length > 0 && !(repositoryCollectionNames != undefined && repositoryCollectionNames[key] != undefined)"
class="collection-name">
<span
style="width: 100%; height: 54px;"
class="icon has-text-centered loading-icon">
<div class="control has-icons-right is-loading is-clearfix" />
</span>
</div>
<tainacan-filter-item
v-show="!isMenuCompressed"
:query="getQuery"
v-for="(filter, filterIndex) in repositoryCollectionFilter"
:key="filterIndex"
:filter="filter"
:open="collapsed"
v-if="repositoryCollectionFilter.length > 0"
:is-repository-level="key == 'repository-filters'"/>
<!-- <p
class="has-text-gray is-size-7"
v-if="taxonomyFilter.length <= 0">
{{ $i18n.get('info_there_is_no_filter') }}
</p> -->
<hr v-if="repositoryCollectionFilters.length > 0">
</div>
</template>
<template v-else>
<tainacan-filter-item <tainacan-filter-item
v-show="!isMenuCompressed" v-show="!isMenuCompressed"
:query="getQuery" :query="getQuery"
@ -113,7 +200,8 @@
export default { export default {
data() { data() {
return { return {
taxonomyFiltersCollectionNames: Object taxonomyFiltersCollectionNames: {},
repositoryCollectionNames: {}
} }
}, },
props: { props: {
@ -121,7 +209,8 @@
collapsed: Boolean, collapsed: Boolean,
isRepositoryLevel: Boolean, isRepositoryLevel: Boolean,
taxonomyFilters: Object, taxonomyFilters: Object,
taxonomy: String taxonomy: String,
repositoryCollectionFilters: Object
}, },
watch: { watch: {
taxonomyFilters() { taxonomyFilters() {
@ -131,7 +220,24 @@
if (taxonomyFilter != 'repository-filters') { if (taxonomyFilter != 'repository-filters') {
this.fetchCollectionName(taxonomyFilter) this.fetchCollectionName(taxonomyFilter)
.then((collectionName) => { .then((collectionName) => {
this.$set(this.taxonomyFiltersCollectionNames, taxonomyFilter, collectionName); this.$nextTick(() => {
this.$set(this.taxonomyFiltersCollectionNames, taxonomyFilter, collectionName);
});
});
}
}
}
},
repositoryCollectionFilters() {
if (this.repositoryCollectionFilters != undefined) {
this.$set(this.repositoryCollectionNames, 'repository-filters', this.$i18n.get('repository'));
for (let repositoryCollectionFilter of Object.keys(this.repositoryCollectionFilters)) {
if (repositoryCollectionFilter != 'repository-filters') {
this.fetchCollectionName(repositoryCollectionFilter)
.then((collectionName) => {
this.$nextTick(() => {
this.$set(this.repositoryCollectionNames, '' + repositoryCollectionFilter, collectionName);
});
}); });
} }
} }
@ -170,6 +276,7 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
margin-bottom: 0.875rem; margin-bottom: 0.875rem;
margin-top: 1rem;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

View File

@ -121,6 +121,7 @@
v-if="!isLoadingFilters && v-if="!isLoadingFilters &&
((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)" ((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
:filters="filters" :filters="filters"
:repository-collection-filters="repositoryCollectionFilters"
:collapsed="collapseAll" :collapsed="collapseAll"
:is-repository-level="isRepositoryLevel"/> :is-repository-level="isRepositoryLevel"/>
@ -772,6 +773,7 @@
((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)" ((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
:filters="filters" :filters="filters"
:collapsed="collapseAll" :collapsed="collapseAll"
:repository-collection-filters="repositoryCollectionFilters"
:is-repository-level="isRepositoryLevel"/> :is-repository-level="isRepositoryLevel"/>
<section <section
@ -882,6 +884,9 @@
filters() { filters() {
return this.getFilters(); return this.getFilters();
}, },
repositoryCollectionFilters() {
return this.getRepositoryCollectionFilters();
},
metadata() { metadata() {
return this.getMetadata(); return this.getMetadata();
}, },
@ -964,10 +969,12 @@
'getMetadata' 'getMetadata'
]), ]),
...mapActions('filter', [ ...mapActions('filter', [
'fetchFilters' 'fetchFilters',
'fetchRepositoryCollectionFilters'
]), ]),
...mapGetters('filter', [ ...mapGetters('filter', [
'getFilters' 'getFilters',
'getRepositoryCollectionFilters'
]), ]),
...mapGetters('search', [ ...mapGetters('search', [
'getSearchQuery', 'getSearchQuery',
@ -1111,6 +1118,13 @@
}) })
.then(() => this.isLoadingFilters = false) .then(() => this.isLoadingFilters = false)
.catch(() => this.isLoadingFilters = false); .catch(() => this.isLoadingFilters = false);
// On repository level we also fetch collection filters
if (this.isRepositoryLevel) {
this.fetchRepositoryCollectionFilters()
.catch(() => this.isLoadingFilters = false);
}
}, },
prepareMetadata() { prepareMetadata() {

View File

@ -145,6 +145,54 @@ export const updateFilteTypes = ( { commit }, filterTypes) => {
commit('setFilterTypes', filterTypes); commit('setFilterTypes', filterTypes);
}; };
// REPOSITORY COLLECTION FILTERS - MULTIPLE COLLECTIONS ------------------------
export const fetchRepositoryCollectionFilters = ({ dispatch, commit } ) => {
commit('clearRepositoryCollectionFilters');
return new Promise((resolve, reject) => {
dispatch('collection/fetchCollectionsForParent', { } ,{ root: true })
.then((res) => {
let collections = res;
if (collections != undefined && collections.length != undefined) {
let amountOfCollectionsLoaded = 0;
for (let collection of collections ) {
let endpoint = '';
endpoint = '/collection/' + collection.id + '/filters/?nopaging=1&include_disabled=no';
axios.tainacan.get(endpoint)
.then((resp) => {
let repositoryFilters = resp.data.filter((filter) => {
return (filter.collection_id == 'default' || filter.collection_id == 'filter_in_repository')
});
let collectionFilters = resp.data.filter((filter) => {
return (filter.collection_id != 'default' && filter.collection_id != 'filter_in_repository')
});
commit('setRepositoryCollectionFilters', { collectionName: collection.id, repositoryCollectionFilters: collectionFilters });
commit('setRepositoryCollectionFilters', { collectionName: undefined, repositoryCollectionFilters: repositoryFilters });
amountOfCollectionsLoaded++;
if (amountOfCollectionsLoaded == collections.length) {
resolve();
}
})
.catch((error) => {
console.log(error);
reject(error);
});
}
}
})
.error(() => {
reject();
});
});
};
// TAXONOMY FILTERS - MULTIPLE COLLECTIONS ------------------------ // TAXONOMY FILTERS - MULTIPLE COLLECTIONS ------------------------
export const fetchTaxonomyFilters = ({ dispatch, commit }, taxonomyId ) => { export const fetchTaxonomyFilters = ({ dispatch, commit }, taxonomyId ) => {

View File

@ -19,6 +19,10 @@ export const getFilterTypes = state => {
return state.filterTypes; return state.filterTypes;
} }
export const getRepositoryCollectionFilters = state => {
return state.repositoryCollectionFilters;
}
export const getTaxonomyFilters = state => { export const getTaxonomyFilters = state => {
return state.taxonomyFilters; return state.taxonomyFilters;
} }

View File

@ -10,7 +10,8 @@ const state = {
}, },
filters: [], filters: [],
filterTypes: [], filterTypes: [],
taxonomyFilters: {} taxonomyFilters: {},
repositoryCollectionFilters: {}
}; };
export default { export default {

View File

@ -36,6 +36,21 @@ export const setFilterTypes = (state, filterTypes) => {
state.filterTypes = filterTypes; state.filterTypes = filterTypes;
} }
// export const setRepositoryCollectionFilters = (state, repositoryCollectionFilters) => {
// state.repositoryCollectionFilters = repositoryCollectionFilters;
// }
export const setRepositoryCollectionFilters = (state, { collectionName, repositoryCollectionFilters }) => {
if (collectionName != undefined)
Vue.set(state.repositoryCollectionFilters, collectionName, repositoryCollectionFilters);
else
Vue.set(state.repositoryCollectionFilters, 'repository-filters', repositoryCollectionFilters);
}
export const clearRepositoryCollectionFilters = (state) => {
state.repositoryCollectionFilters = {};
}
export const setTaxonomyFilters = (state, taxonomyFilters) => { export const setTaxonomyFilters = (state, taxonomyFilters) => {
state.taxonomyFilters = taxonomyFilters; state.taxonomyFilters = taxonomyFilters;
} }