Moves filter loading logic from items list to filter-items-list
This commit is contained in:
Mateus Machado Luna
parent
ef58e3da06
commit
6af2221db6
|
|
@ -1,209 +1,259 @@
|
|||
<template>
|
||||
<div class="extra-margin">
|
||||
<div>
|
||||
<h3
|
||||
id="filters-label-landmark"
|
||||
class="has-text-weight-semibold">
|
||||
{{ $i18n.get('filters') }}
|
||||
</h3>
|
||||
|
||||
<!-- TERM ITEMS PAGE FILTERS -->
|
||||
<template v-if="taxonomy && taxonomyFilters">
|
||||
<div
|
||||
v-if="key == 'repository-filters'"
|
||||
:key="index"
|
||||
v-for="(taxonomyFilter, key, index) of taxonomyFilters">
|
||||
<div
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: $i18n.get('label_filters_from') + ' ' + taxonomyFiltersCollectionNames[key] + ': ',
|
||||
autoHide: false,
|
||||
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-if="taxonomyFilter.length > 0 && taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined"
|
||||
class="collection-name">
|
||||
{{ $i18n.get('label_filters_from') + " " + taxonomyFiltersCollectionNames[key] + ": " }}
|
||||
</div>
|
||||
<div
|
||||
v-if="taxonomyFilter.length > 0 && !(taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[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>
|
||||
<template v-if="taxonomyFilter.length > 0">
|
||||
<tainacan-filter-item
|
||||
v-show="!isMenuCompressed"
|
||||
:query="getQuery"
|
||||
v-for="(filter, filterIndex) in taxonomyFilter"
|
||||
:key="filterIndex"
|
||||
:filter="filter"
|
||||
:open="collapsed"
|
||||
:is-repository-level="key == 'repository-filters'"/>
|
||||
</template>
|
||||
<!-- <p
|
||||
class="has-text-gray is-size-7"
|
||||
v-if="taxonomyFilter.length <= 0">
|
||||
{{ $i18n.get('info_there_is_no_filter') }}
|
||||
</p> -->
|
||||
<hr v-if="taxonomyFilter.length > 0">
|
||||
</div>
|
||||
<div
|
||||
v-if="key != 'repository-filters'"
|
||||
:key="index"
|
||||
v-for="(taxonomyFilter, key, index) of taxonomyFilters">
|
||||
<div
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: $i18n.get('label_filters_from') + ' ' + taxonomyFiltersCollectionNames[key] + ': ',
|
||||
autoHide: false,
|
||||
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-if="taxonomyFilter.length > 0 && taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined"
|
||||
class="collection-name">
|
||||
{{ $i18n.get('label_filters_from') + " " + taxonomyFiltersCollectionNames[key] + ": " }}
|
||||
</div>
|
||||
<div
|
||||
v-if="taxonomyFilter.length > 0 && !(taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[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>
|
||||
<template v-if="taxonomyFilter.length > 0">
|
||||
<tainacan-filter-item
|
||||
v-show="!isMenuCompressed"
|
||||
:query="getQuery"
|
||||
v-for="(filter, filterIndex) in taxonomyFilter"
|
||||
:key="filterIndex"
|
||||
:filter="filter"
|
||||
:open="collapsed"
|
||||
:is-repository-level="key == 'repository-filters'"/>
|
||||
</template>
|
||||
<!-- <p
|
||||
class="has-text-gray is-size-7"
|
||||
v-if="taxonomyFilter.length <= 0">
|
||||
{{ $i18n.get('info_there_is_no_filter') }}
|
||||
</p> -->
|
||||
<hr v-if="taxonomyFilter.length > 0">
|
||||
</div>
|
||||
</template>
|
||||
<button
|
||||
aria-controls="filters-items-list"
|
||||
:aria-expanded="!collapseAll"
|
||||
v-if="!isLoadingFilters &&
|
||||
((filters.length >= 0 &&
|
||||
isRepositoryLevel) || filters.length > 0)"
|
||||
class="link-style collapse-all"
|
||||
@click="collapseAll = !collapseAll">
|
||||
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
|
||||
<span class="icon">
|
||||
<i
|
||||
:class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
|
||||
class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- REPOSITORY ITEMS PAGE FILTERS -->
|
||||
<template v-else-if="isRepositoryLevel && !taxonomy">
|
||||
<collections-filter
|
||||
:open="collapsed"
|
||||
:query="getQuery"/>
|
||||
<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,
|
||||
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
|
||||
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>
|
||||
<template v-if="repositoryCollectionFilter.length > 0">
|
||||
<tainacan-filter-item
|
||||
v-show="!isMenuCompressed"
|
||||
:query="getQuery"
|
||||
v-for="(filter, filterIndex) in repositoryCollectionFilter"
|
||||
:key="filterIndex"
|
||||
:filter="filter"
|
||||
:open="collapsed"
|
||||
:is-repository-level="key == 'repository-filters'"/>
|
||||
</template>
|
||||
<!-- <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,
|
||||
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
|
||||
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>
|
||||
<template v-if="repositoryCollectionFilter.length > 0">
|
||||
<tainacan-filter-item
|
||||
v-show="!isMenuCompressed"
|
||||
:query="getQuery"
|
||||
v-for="(filter, filterIndex) in repositoryCollectionFilter"
|
||||
:key="filterIndex"
|
||||
:filter="filter"
|
||||
:open="collapsed"
|
||||
:is-repository-level="key == 'repository-filters'"/>
|
||||
</template>
|
||||
<!-- <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>
|
||||
<br>
|
||||
<br>
|
||||
<div
|
||||
v-if="!isLoadingFilters &&
|
||||
((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
|
||||
class="extra-margin">
|
||||
|
||||
<!-- COLLECTION ITEMS PAGE FILTERS -->
|
||||
<template v-else>
|
||||
<tainacan-filter-item
|
||||
v-show="!isMenuCompressed"
|
||||
:query="getQuery"
|
||||
v-for="(filter, index) in filters"
|
||||
:key="index"
|
||||
:filter="filter"
|
||||
:open="collapsed"
|
||||
:is-repository-level="isRepositoryLevel"/>
|
||||
</template>
|
||||
</div>
|
||||
<!-- TERM ITEMS PAGE FILTERS -->
|
||||
<template v-if="taxonomy && taxonomyFilters">
|
||||
<div
|
||||
v-if="key == 'repository-filters'"
|
||||
:key="index"
|
||||
v-for="(taxonomyFilter, key, index) of taxonomyFilters">
|
||||
<div
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: $i18n.get('label_filters_from') + ' ' + taxonomyFiltersCollectionNames[key] + ': ',
|
||||
autoHide: false,
|
||||
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-if="taxonomyFilter.length > 0 && taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined"
|
||||
class="collection-name">
|
||||
{{ $i18n.get('label_filters_from') + " " + taxonomyFiltersCollectionNames[key] + ": " }}
|
||||
</div>
|
||||
<div
|
||||
v-if="taxonomyFilter.length > 0 && !(taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[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>
|
||||
<template v-if="taxonomyFilter.length > 0">
|
||||
<tainacan-filter-item
|
||||
v-show="!isMenuCompressed"
|
||||
:query="getQuery"
|
||||
v-for="(filter, filterIndex) in taxonomyFilter"
|
||||
:key="filterIndex"
|
||||
:filter="filter"
|
||||
:open="!collapseAll"
|
||||
:is-repository-level="key == 'repository-filters'"/>
|
||||
</template>
|
||||
<!-- <p
|
||||
class="has-text-gray is-size-7"
|
||||
v-if="taxonomyFilter.length <= 0">
|
||||
{{ $i18n.get('info_there_is_no_filter') }}
|
||||
</p> -->
|
||||
<hr v-if="taxonomyFilter.length > 0">
|
||||
</div>
|
||||
<div
|
||||
v-if="key != 'repository-filters'"
|
||||
:key="index"
|
||||
v-for="(taxonomyFilter, key, index) of taxonomyFilters">
|
||||
<div
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: $i18n.get('label_filters_from') + ' ' + taxonomyFiltersCollectionNames[key] + ': ',
|
||||
autoHide: false,
|
||||
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-if="taxonomyFilter.length > 0 && taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined"
|
||||
class="collection-name">
|
||||
{{ $i18n.get('label_filters_from') + " " + taxonomyFiltersCollectionNames[key] + ": " }}
|
||||
</div>
|
||||
<div
|
||||
v-if="taxonomyFilter.length > 0 && !(taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[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>
|
||||
<template v-if="taxonomyFilter.length > 0">
|
||||
<tainacan-filter-item
|
||||
v-show="!isMenuCompressed"
|
||||
:query="getQuery"
|
||||
v-for="(filter, filterIndex) in taxonomyFilter"
|
||||
:key="filterIndex"
|
||||
:filter="filter"
|
||||
:open="!collapseAll"
|
||||
:is-repository-level="key == 'repository-filters'"/>
|
||||
</template>
|
||||
<!-- <p
|
||||
class="has-text-gray is-size-7"
|
||||
v-if="taxonomyFilter.length <= 0">
|
||||
{{ $i18n.get('info_there_is_no_filter') }}
|
||||
</p> -->
|
||||
<hr v-if="taxonomyFilter.length > 0">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- REPOSITORY ITEMS PAGE FILTERS -->
|
||||
<template v-else-if="isRepositoryLevel && !taxonomy">
|
||||
<collections-filter
|
||||
:open="!collapseAll"
|
||||
:query="getQuery"/>
|
||||
<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,
|
||||
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
|
||||
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>
|
||||
<template v-if="repositoryCollectionFilter.length > 0">
|
||||
<tainacan-filter-item
|
||||
v-show="!isMenuCompressed"
|
||||
:query="getQuery"
|
||||
v-for="(filter, filterIndex) in repositoryCollectionFilter"
|
||||
:key="filterIndex"
|
||||
:filter="filter"
|
||||
:open="!collapseAll"
|
||||
:is-repository-level="key == 'repository-filters'"/>
|
||||
</template>
|
||||
<!-- <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,
|
||||
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
|
||||
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>
|
||||
<template v-if="repositoryCollectionFilter.length > 0">
|
||||
<tainacan-filter-item
|
||||
v-show="!isMenuCompressed"
|
||||
:query="getQuery"
|
||||
v-for="(filter, filterIndex) in repositoryCollectionFilter"
|
||||
:key="filterIndex"
|
||||
:filter="filter"
|
||||
:open="!collapseAll"
|
||||
:is-repository-level="key == 'repository-filters'"/>
|
||||
</template>
|
||||
<!-- <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>
|
||||
|
||||
<!-- COLLECTION ITEMS PAGE FILTERS -->
|
||||
<template v-else>
|
||||
<tainacan-filter-item
|
||||
v-show="!isMenuCompressed"
|
||||
:query="getQuery"
|
||||
v-for="(filter, index) in filters"
|
||||
:key="index"
|
||||
:filter="filter"
|
||||
:open="!collapseAll"
|
||||
:is-repository-level="isRepositoryLevel"/>
|
||||
</template>
|
||||
</div>
|
||||
<section
|
||||
v-if="!isLoadingFilters &&
|
||||
!((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
|
||||
class="is-grouped-centered section">
|
||||
<div class="content has-text-gray has-text-centered">
|
||||
<p>
|
||||
<span class="icon is-large">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters" />
|
||||
</span>
|
||||
</p>
|
||||
<p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>
|
||||
<router-link
|
||||
v-if="!$route.query.iframemode && this.$route.name != null"
|
||||
id="button-create-filter"
|
||||
:to="isRepositoryLevel && $routerHelper ? $routerHelper.getNewFilterPath() : $routerHelper.getNewCollectionFilterPath(collectionId)"
|
||||
tag="button"
|
||||
class="button is-secondary is-centered">
|
||||
{{ $i18n.getFrom('filters', 'new_item') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -215,21 +265,31 @@
|
|||
CollectionsFilter
|
||||
},
|
||||
props: {
|
||||
filters: Array,
|
||||
collapsed: Boolean,
|
||||
collectionId: String,
|
||||
isRepositoryLevel: Boolean,
|
||||
taxonomyFilters: Object,
|
||||
taxonomy: String,
|
||||
repositoryCollectionFilters: Object
|
||||
isLoadingFilters: false,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
collapseAll: false,
|
||||
taxonomyFiltersCollectionNames: {},
|
||||
repositoryCollectionNames: {},
|
||||
collectionNameSearchCancel: undefined
|
||||
collectionNameSearchCancel: undefined,
|
||||
filtersSearchCancel: undefined,
|
||||
repositoryFiltersSearchCancel: undefined,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filters() {
|
||||
return this.getFilters();
|
||||
},
|
||||
repositoryCollectionFilters() {
|
||||
return this.getRepositoryCollectionFilters();
|
||||
},
|
||||
taxonomyFilters() {
|
||||
return this.getTaxonomyFilters();
|
||||
},
|
||||
getQuery() {
|
||||
return this.getPostQuery();
|
||||
},
|
||||
|
|
@ -284,10 +344,29 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$eventBusSearch.$on('hasToPrepareMetadataAndFilters', () => {
|
||||
/* This condition is to prevent an incorrect fetch by filter or metadata when we come from items
|
||||
* at collection level to items page at repository level
|
||||
*/
|
||||
this.prepareFilters();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
// Cancels previous collection name Request
|
||||
if (this.collectionNameSearchCancel != undefined)
|
||||
this.collectionNameSearchCancel.cancel('Collection name search Canceled.');
|
||||
|
||||
// Cancels previous Repository Filters Request
|
||||
if (this.repositoryFiltersSearchCancel != undefined)
|
||||
this.repositoryFiltersSearchCancel.cancel('Repository Collection Filters search Canceled.');
|
||||
|
||||
// Cancels previous Filters Request
|
||||
if (this.filtersSearchCancel != undefined)
|
||||
this.filtersSearchCancel.cancel('Filters search Canceled.');
|
||||
|
||||
this.$eventBusSearch.$off('hasToPrepareMetadataAndFilters');
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapGetters('search',[
|
||||
|
|
@ -296,11 +375,74 @@
|
|||
...mapActions('collection',[
|
||||
'fetchAllCollectionNames'
|
||||
]),
|
||||
...mapActions('filter', [
|
||||
'fetchFilters',
|
||||
'fetchTaxonomyFilters',
|
||||
'fetchRepositoryCollectionFilters'
|
||||
]),
|
||||
...mapGetters('filter', [
|
||||
'getFilters',
|
||||
'getTaxonomyFilters',
|
||||
'getRepositoryCollectionFilters'
|
||||
]),
|
||||
prepareFilters() {
|
||||
|
||||
// Cancels previous Request
|
||||
if (this.filtersSearchCancel != undefined)
|
||||
this.filtersSearchCancel.cancel('Filters search Canceled.');
|
||||
|
||||
this.isLoadingFilters = true;
|
||||
|
||||
// Normal filter loading, only collection ones
|
||||
if (!this.taxonomy) {
|
||||
this.fetchFilters({
|
||||
collectionId: this.collectionId,
|
||||
isRepositoryLevel: this.isRepositoryLevel,
|
||||
isContextEdit: false,
|
||||
includeDisabled: false,
|
||||
})
|
||||
.then((resp) => {
|
||||
resp.request
|
||||
.then(() => this.isLoadingFilters = false)
|
||||
.catch(() => this.isLoadingFilters = false);
|
||||
|
||||
// Search Request Token for cancelling
|
||||
this.filtersSearchCancel = resp.source;
|
||||
})
|
||||
.catch(() => this.isLoadingFilters = false);
|
||||
|
||||
// Custom filter loading, get's from collections that have items with that taxonomy
|
||||
} else {
|
||||
let taxonomyId = this.taxonomy.split("_");
|
||||
this.fetchTaxonomyFilters(taxonomyId[taxonomyId.length - 1])
|
||||
.catch(() => this.isLoadingFilters = false);
|
||||
|
||||
}
|
||||
|
||||
// On repository level we also fetch collection filters
|
||||
if (this.isRepositoryLevel) {
|
||||
|
||||
// Cancels previous Request
|
||||
if (this.repositoryFiltersSearchCancel != undefined)
|
||||
this.repositoryFiltersSearchCancel.cancel('Repository Collection Filters search Canceled.');
|
||||
|
||||
this.fetchRepositoryCollectionFilters()
|
||||
.then((source) => {
|
||||
this.repositoryFiltersSearchCancel = source;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.collapse-all {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
.extra-margin {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,58 +108,11 @@
|
|||
class="link-style is-size-7 is-pulled-right is-hidden-mobile">
|
||||
{{ $i18n.get('advanced_search') }}
|
||||
</button>
|
||||
|
||||
<h3
|
||||
id="filters-label-landmark"
|
||||
class="has-text-weight-semibold">
|
||||
{{ $i18n.get('filters') }}
|
||||
</h3>
|
||||
<button
|
||||
v-if="!isLoadingFilters &&
|
||||
((filters.length >= 0 &&
|
||||
isRepositoryLevel) || filters.length > 0)"
|
||||
class="link-style collapse-all"
|
||||
@click="collapseAll = !collapseAll">
|
||||
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
|
||||
<span class="icon">
|
||||
<i
|
||||
:class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
|
||||
class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<filters-items-list
|
||||
v-if="!isLoadingFilters &&
|
||||
((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
|
||||
:filters="filters"
|
||||
:repository-collection-filters="repositoryCollectionFilters"
|
||||
:collapsed="collapseAll"
|
||||
:collection-id="collectionId"
|
||||
:is-repository-level="isRepositoryLevel"/>
|
||||
|
||||
<section
|
||||
v-if="!isLoadingFilters &&
|
||||
!((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
|
||||
class="is-grouped-centered section">
|
||||
<div class="content has-text-gray has-text-centered">
|
||||
<p>
|
||||
<span class="icon is-large">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters" />
|
||||
</span>
|
||||
</p>
|
||||
<p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>
|
||||
<router-link
|
||||
id="button-create-filter"
|
||||
:to="isRepositoryLevel ? $routerHelper.getNewFilterPath() : $routerHelper.getNewCollectionFilterPath(collectionId)"
|
||||
tag="button"
|
||||
class="button is-secondary is-centered">
|
||||
{{ $i18n.getFrom('filters', 'new_item') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- ITEMS LIST AREA (ASIDE THE ASIDE) ------------------------- -->
|
||||
|
|
@ -682,7 +635,7 @@
|
|||
|
||||
<b-modal
|
||||
role="region"
|
||||
aria-labelledby="filters-label-landmark-modal"
|
||||
aria-labelledby="filters-label-landmark"
|
||||
id="filters-mobile-modal"
|
||||
class="tainacan-form is-hidden-tablet"
|
||||
:active.sync="isFilterModalActive"
|
||||
|
|
@ -698,60 +651,12 @@
|
|||
tabindex="-1"
|
||||
aria-modal
|
||||
role="dialog">
|
||||
<h3
|
||||
id="filters-label-landmark-modal"
|
||||
class="has-text-weight-semibold">
|
||||
{{ $i18n.get('filters') }}
|
||||
</h3>
|
||||
<button
|
||||
aria-controls="filters-items-list"
|
||||
:aria-expanded="!collapseAll"
|
||||
v-if="!isLoadingFilters &&
|
||||
((filters.length >= 0 &&
|
||||
isRepositoryLevel) || filters.length > 0)"
|
||||
class="link-style collapse-all"
|
||||
@click="collapseAll = !collapseAll">
|
||||
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
|
||||
<span class="icon">
|
||||
<i
|
||||
:class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
|
||||
class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<filters-items-list
|
||||
:collection-id="collectionId"
|
||||
id="filters-items-list"
|
||||
v-if="!isLoadingFilters &&
|
||||
((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
|
||||
:filters="filters"
|
||||
:collapsed="collapseAll"
|
||||
:repository-collection-filters="repositoryCollectionFilters"
|
||||
:is-repository-level="isRepositoryLevel"/>
|
||||
|
||||
<section
|
||||
v-if="!isLoadingFilters &&
|
||||
!((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
|
||||
class="is-grouped-centered section">
|
||||
<div class="content has-text-gray has-text-centered">
|
||||
<p>
|
||||
<span class="icon is-large">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters" />
|
||||
</span>
|
||||
</p>
|
||||
<p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>
|
||||
<router-link
|
||||
v-if="!$route.query.iframemode"
|
||||
id="button-create-filter"
|
||||
:to="isRepositoryLevel ? $routerHelper.getNewFilterPath() : $routerHelper.getNewCollectionFilterPath(collectionId)"
|
||||
tag="button"
|
||||
class="button is-secondary is-centered">
|
||||
{{ $i18n.getFrom('filters', 'new_item') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
|
|
@ -790,11 +695,9 @@
|
|||
displayedMetadata: [],
|
||||
prefDisplayedMetadata: [],
|
||||
isLoadingItems: false,
|
||||
isLoadingFilters: false,
|
||||
isLoadingMetadata: false,
|
||||
hasFiltered: false,
|
||||
isFiltersMenuCompressed: false,
|
||||
collapseAll: true,
|
||||
futureSearchQuery: '',
|
||||
localDisplayedMetadata: [],
|
||||
registeredViewModes: tainacan_plugin.registered_view_modes,
|
||||
|
|
@ -807,8 +710,6 @@
|
|||
isFilterModalActive: false,
|
||||
hasAnOpenModal: false,
|
||||
hasAnOpenAlert: true,
|
||||
repositoryFiltersSearchCancel: undefined,
|
||||
filtersSearchCancel: undefined,
|
||||
metadataSearchCancel: undefined
|
||||
}
|
||||
},
|
||||
|
|
@ -826,12 +727,6 @@
|
|||
this.updateCollectionInfo();
|
||||
return this.getTotalItems();
|
||||
},
|
||||
filters() {
|
||||
return this.getFilters();
|
||||
},
|
||||
repositoryCollectionFilters() {
|
||||
return this.getRepositoryCollectionFilters();
|
||||
},
|
||||
metadata() {
|
||||
return this.getMetadata();
|
||||
},
|
||||
|
|
@ -929,7 +824,6 @@
|
|||
*/
|
||||
if (this.collectionId == to.params.collectionId || to.query.fromBreadcrumb) {
|
||||
this.prepareMetadata();
|
||||
this.prepareFilters();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -943,7 +837,7 @@
|
|||
|
||||
},
|
||||
mounted() {
|
||||
this.prepareFilters();
|
||||
|
||||
this.prepareMetadata();
|
||||
this.localDisplayedMetadata = JSON.parse(JSON.stringify(this.displayedMetadata));
|
||||
|
||||
|
|
@ -979,19 +873,11 @@
|
|||
// Cancels previous Metadata Request
|
||||
if (this.metadataSearchCancel != undefined)
|
||||
this.metadataSearchCancel.cancel('Metadata search Canceled.');
|
||||
|
||||
// Cancels previous Filters Request
|
||||
if (this.filtersSearchCancel != undefined)
|
||||
this.filtersSearchCancel.cancel('Filters search Canceled.');
|
||||
|
||||
|
||||
// Cancels previous Items Request
|
||||
if (this.$eventBusSearch.searchCancel != undefined)
|
||||
this.$eventBusSearch.searchCancel.cancel('Item search Canceled.');
|
||||
|
||||
// Cancels previous Repository Filters Request
|
||||
if (this.repositoryFiltersSearchCancel != undefined)
|
||||
this.repositoryFiltersSearchCancel.cancel('Repository Collection Filters search Canceled.');
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapGetters('collection', [
|
||||
|
|
@ -1447,12 +1333,6 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.collapse-all {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.advanced-search-criteria-title {
|
||||
margin-bottom: 40px;
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,6 @@
|
|||
|
||||
<!-- Sidebar with search and filters -->
|
||||
<aside
|
||||
:aria-busy="isLoadingFilters"
|
||||
id="filters-desktop-aside"
|
||||
role="region"
|
||||
aria-labelledby="filters-label-landmark"
|
||||
|
|
@ -62,9 +61,6 @@
|
|||
!openAdvancedSearch &&
|
||||
!(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen)"
|
||||
class="filters-menu tainacan-form is-hidden-mobile">
|
||||
<!-- <b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingFilters"/> -->
|
||||
|
||||
<div class="search-area is-hidden-mobile">
|
||||
<div class="control has-icons-right is-small is-clearfix">
|
||||
|
|
@ -91,52 +87,11 @@
|
|||
{{ $i18n.get('advanced_search') }}
|
||||
</button> -->
|
||||
|
||||
<h3
|
||||
id="filters-label-landmark"
|
||||
class="has-text-weight-semibold">
|
||||
{{ $i18n.get('filters') }}
|
||||
</h3>
|
||||
<button
|
||||
v-if="!isLoadingFilters &&
|
||||
((filters.length >= 0 &&
|
||||
isRepositoryLevel) || filters.length > 0)"
|
||||
class="link-style collapse-all"
|
||||
@click="collapseAll = !collapseAll">
|
||||
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
|
||||
<span class="icon">
|
||||
<i
|
||||
:class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
|
||||
class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<filters-items-list
|
||||
v-if="!isLoadingFilters &&
|
||||
((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
|
||||
:filters="filters"
|
||||
:taxonomy-filters="taxonomyFilters"
|
||||
:repository-collection-filters="repositoryCollectionFilters"
|
||||
:taxonomy="taxonomy"
|
||||
:collapsed="collapseAll"
|
||||
:collection-id="collectionId"
|
||||
:is-repository-level="isRepositoryLevel"/>
|
||||
|
||||
<section
|
||||
v-if="!isLoadingFilters &&
|
||||
!((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
|
||||
class="is-grouped-centered section">
|
||||
<div class="content has-text-gray has-text-centered">
|
||||
<p>
|
||||
<span class="icon is-large">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters" />
|
||||
</span>
|
||||
</p>
|
||||
<p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- ITEMS LIST AREA (ASIDE THE ASIDE) ------------------------- -->
|
||||
|
|
@ -551,7 +506,7 @@
|
|||
|
||||
<b-modal
|
||||
role="region"
|
||||
aria-labelledby="filters-label-landmark-modal"
|
||||
aria-labelledby="filters-label-landmark"
|
||||
id="filters-mobile-modal"
|
||||
class="tainacan-form is-hidden-tablet"
|
||||
:active.sync="isFilterModalActive"
|
||||
|
|
@ -567,53 +522,13 @@
|
|||
tabindex="-1"
|
||||
aria-modal
|
||||
role="dialog">
|
||||
<h3
|
||||
id="filters-label-landmark-modal"
|
||||
class="has-text-weight-semibold">
|
||||
{{ $i18n.get('filters') }}
|
||||
</h3>
|
||||
<button
|
||||
aria-controls="filters-items-list"
|
||||
:aria-expanded="!collapseAll"
|
||||
v-if="!isLoadingFilters &&
|
||||
((filters.length >= 0 &&
|
||||
isRepositoryLevel) || filters.length > 0)"
|
||||
class="link-style collapse-all"
|
||||
@click="collapseAll = !collapseAll">
|
||||
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
|
||||
<span class="icon">
|
||||
<i
|
||||
:class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
|
||||
class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<filters-items-list
|
||||
id="filters-items-list"
|
||||
v-if="!isLoadingFilters &&
|
||||
((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
|
||||
:filters="filters"
|
||||
:taxonomy-filters="taxonomyFilters"
|
||||
:taxonomy="taxonomy"
|
||||
:collapsed="collapseAll"
|
||||
:collection-id="collectionId"
|
||||
:is-repository-level="isRepositoryLevel"/>
|
||||
|
||||
<section
|
||||
v-if="!isLoadingFilters &&
|
||||
!((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
|
||||
class="is-grouped-centered section">
|
||||
<div class="content has-text-gray has-text-centered">
|
||||
<p>
|
||||
<span class="icon is-large">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters" />
|
||||
</span>
|
||||
</p>
|
||||
<p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
|
|
@ -650,11 +565,9 @@
|
|||
displayedMetadata: [],
|
||||
prefDisplayedMetadata: [],
|
||||
isLoadingItems: false,
|
||||
isLoadingFilters: false,
|
||||
isLoadingMetadata: false,
|
||||
hasFiltered: false,
|
||||
isFiltersMenuCompressed: false,
|
||||
collapseAll: true,
|
||||
futureSearchQuery: '',
|
||||
localDisplayedMetadata: [],
|
||||
registeredViewModes: tainacan_plugin.registered_view_modes,
|
||||
|
|
@ -667,9 +580,7 @@
|
|||
isFilterModalActive: false,
|
||||
customFilters: [],
|
||||
hasAnOpenModal: false,
|
||||
hasAnOpenAlert: true,
|
||||
repositoryFiltersSearchCancel: undefined,
|
||||
filtersSearchCancel: undefined,
|
||||
hasAnOpenAlert: true,
|
||||
metadataSearchCancel: undefined
|
||||
}
|
||||
},
|
||||
|
|
@ -686,15 +597,6 @@
|
|||
totalItems() {
|
||||
return this.getTotalItems();
|
||||
},
|
||||
filters() {
|
||||
return this.getFilters();
|
||||
},
|
||||
repositoryCollectionFilters() {
|
||||
return this.getRepositoryCollectionFilters();
|
||||
},
|
||||
taxonomyFilters() {
|
||||
return this.getTaxonomyFilters();
|
||||
},
|
||||
metadata() {
|
||||
return this.getMetadata();
|
||||
},
|
||||
|
|
@ -789,7 +691,6 @@
|
|||
* at collection level to items page at repository level
|
||||
*/
|
||||
this.prepareMetadata();
|
||||
this.prepareFilters();
|
||||
});
|
||||
|
||||
if(this.$route.query && this.$route.query.advancedSearch) {
|
||||
|
|
@ -803,7 +704,6 @@
|
|||
},
|
||||
mounted() {
|
||||
|
||||
this.prepareFilters();
|
||||
this.prepareMetadata();
|
||||
this.localDisplayedMetadata = JSON.parse(JSON.stringify(this.displayedMetadata));
|
||||
|
||||
|
|
@ -840,17 +740,10 @@
|
|||
if (this.metadataSearchCancel != undefined)
|
||||
this.metadataSearchCancel.cancel('Metadata search Canceled.');
|
||||
|
||||
// Cancels previous Filters Request
|
||||
if (this.filtersSearchCancel != undefined)
|
||||
this.filtersSearchCancel.cancel('Filters search Canceled.');
|
||||
|
||||
// Cancels previous Items Request
|
||||
if (this.$eventBusSearch.searchCancel != undefined)
|
||||
this.$eventBusSearch.searchCancel.cancel('Item search Canceled.');
|
||||
|
||||
// Cancels previous Repository Filters Request
|
||||
if (this.repositoryFiltersSearchCancel != undefined)
|
||||
this.repositoryFiltersSearchCancel.cancel('Repository Collection Filters search Canceled.');
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -864,16 +757,6 @@
|
|||
...mapGetters('metadata', [
|
||||
'getMetadata'
|
||||
]),
|
||||
...mapActions('filter', [
|
||||
'fetchFilters',
|
||||
'fetchTaxonomyFilters',
|
||||
'fetchRepositoryCollectionFilters'
|
||||
]),
|
||||
...mapGetters('filter', [
|
||||
'getFilters',
|
||||
'getTaxonomyFilters',
|
||||
'getRepositoryCollectionFilters'
|
||||
]),
|
||||
...mapGetters('search', [
|
||||
'getSearchQuery',
|
||||
'getOrderBy',
|
||||
|
|
@ -969,53 +852,6 @@
|
|||
// Closes dropdown
|
||||
this.$refs.displayedMetadataDropdown.toggle();
|
||||
},
|
||||
prepareFilters() {
|
||||
|
||||
// Cancels previous Request
|
||||
if (this.filtersSearchCancel != undefined)
|
||||
this.filtersSearchCancel.cancel('Filters search Canceled.');
|
||||
|
||||
this.isLoadingFilters = true;
|
||||
|
||||
// Normal filter loading, only collection ones
|
||||
if (!this.taxonomy) {
|
||||
this.fetchFilters({
|
||||
collectionId: this.collectionId,
|
||||
isRepositoryLevel: this.isRepositoryLevel,
|
||||
isContextEdit: false,
|
||||
includeDisabled: false,
|
||||
})
|
||||
.then((resp) => {
|
||||
resp.request
|
||||
.then(() => this.isLoadingFilters = false)
|
||||
.catch(() => this.isLoadingFilters = false);
|
||||
|
||||
// Search Request Token for cancelling
|
||||
this.filtersSearchCancel = resp.source;
|
||||
})
|
||||
.catch(() => this.isLoadingFilters = false);
|
||||
|
||||
// Custom filter loading, get's from collections that have items with that taxonomy
|
||||
} else {
|
||||
let taxonomyId = this.taxonomy.split("_");
|
||||
this.fetchTaxonomyFilters(taxonomyId[taxonomyId.length - 1])
|
||||
.catch(() => this.isLoadingFilters = false);
|
||||
|
||||
}
|
||||
|
||||
// On repository level we also fetch collection filters
|
||||
if (this.isRepositoryLevel) {
|
||||
|
||||
// Cancels previous Request
|
||||
if (this.repositoryFiltersSearchCancel != undefined)
|
||||
this.repositoryFiltersSearchCancel.cancel('Repository Collection Filters search Canceled.');
|
||||
|
||||
this.fetchRepositoryCollectionFilters()
|
||||
.then((source) => {
|
||||
this.repositoryFiltersSearchCancel = source;
|
||||
});
|
||||
}
|
||||
},
|
||||
prepareMetadata() {
|
||||
|
||||
// Cancels previous Request
|
||||
|
|
@ -1293,12 +1129,6 @@
|
|||
animation: open-full-screen 0.4s ease;
|
||||
}
|
||||
|
||||
.collapse-all {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.advanced-search-criteria-title {
|
||||
margin-bottom: 40px;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue