tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/576' into develop

This commit is contained in:
mateuswetah 2021-09-10 17:22:07 -03:00
parent 90b8a7e3db 637aa2427e
commit 5ca7afffd9
16 changed files with 252 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/admin/components/filter-types/autocomplete/Autocomplete.vue
View File

@ -181,7 +181,7 @@
this.label = item.title;
this.selected = item.title;
this.$emit( 'sendValuesToTags', { label: this.label, value: this.selected });
this.$emit( 'sendValuesToTags', { label: this.label, value: this.selected, metadatumName: this.metadatumName });
})
.catch(error => {
this.$console.log(error);
@ -189,7 +189,7 @@
} else {
this.label = metadata.value;
this.selected = metadata.value;
this.$emit( 'sendValuesToTags', { label: this.label, value: this.selected });
this.$emit( 'sendValuesToTags', { label: this.label, value: this.selected, metadatumName: this.metadatumName });
}
} else {
this.label = '';

2
src/views/admin/components/filter-types/checkbox/Checkbox.vue
View File

@ -182,7 +182,7 @@
}
}
this.$emit( 'sendValuesToTags', { label: onlyLabels.length ? onlyLabels : this.selected, value: this.selected });
this.$emit( 'sendValuesToTags', { label: onlyLabels.length ? onlyLabels : this.selected, value: this.selected, metadatumName: this.metadatumName });
},
openCheckboxModal() {
this.$buefy.modal.open({

6
src/views/admin/components/filter-types/date-interval/DateInterval.vue
View File

@ -135,7 +135,8 @@
if (metadata.value[0] != undefined && metadata.value[1] != undefined)
this.$emit('sendValuesToTags', {
label: this.parseDateToNavigatorLanguage(metadata.value[0]) + ' - ' + this.parseDateToNavigatorLanguage(metadata.value[1]),
value: [metadata.value[0], metadata.value[1]]
value: [metadata.value[0], metadata.value[1]],
metadatumName: this.metadatumName
});
} else {
this.dateInit = null;
@ -170,7 +171,8 @@
if (values[0] != undefined && values[1] != undefined)
this.$emit( 'sendValuesToTags', {
label: this.parseDateToNavigatorLanguage(values[0]) + ' - ' + this.parseDateToNavigatorLanguage(values[1]),
value: [ values[0], values[1] ]
value: [ values[0], values[1] ],
metadatumName: this.metadatumName
});
}
}

6
src/views/admin/components/filter-types/date/Date.vue
View File

@ -177,7 +177,8 @@
this.$emit('sendValuesToTags', {
label: this.comparator + ' ' + this.parseDateToNavigatorLanguage(textValue),
value: textValue
value: textValue,
metadatumName: this.metadatumName
});
}
@ -222,7 +223,8 @@
});
this.$emit('sendValuesToTags', {
label: this.comparator + ' ' + moment(this.value, moment.ISO_8601).format(this.dateFormat),
value: valueQuery
value: valueQuery,
metadatumName: this.metadatumName
});
},
onChangeComparator(newComparator) {

4
src/views/admin/components/filter-types/numeric-interval/NumericInterval.vue
View File

@ -92,7 +92,7 @@
});
if (values[0] != undefined && values[1] != undefined)
this.$emit('sendValuesToTags', { label: values[0] + ' - ' + values[1], value: values });
this.$emit('sendValuesToTags', { label: values[0] + ' - ' + values[1], value: values, metadatumName: this.metadatumName });
},
updateSelectedValues(){
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
@ -107,7 +107,7 @@
}
if (metaquery.value[0] != undefined && metaquery.value[1] != undefined)
this.$emit('sendValuesToTags', { label: this.valueInit + ' - ' + this.valueEnd, value: metaquery.value });
this.$emit('sendValuesToTags', { label: this.valueInit + ' - ' + this.valueEnd, value: metaquery.value, metadatumName: this.metadatumName });
} else {
this.valueInit = null;

6
src/views/admin/components/filter-types/numeric-list-interval/NumericListInterval.vue
View File

@ -53,7 +53,7 @@
});
this.valueEnd = null;
this.valueInit = null;
this.$emit('sendValuesToTags', { label: '', value: null });
this.$emit('sendValuesToTags', { label: '', value: null, metadatumName: this.metadatumName });
}
},
// emit the operation for listeners
@ -70,7 +70,7 @@
if (values[0] != undefined && values[1] != undefined && this.selectedInterval !== '') {
let labelValue = this.filterTypeOptions.intervals[this.selectedInterval].label + (this.filterTypeOptions.showIntervalOnTag ? ` (${values[0]}-${values[1]})` : '');
this.$emit('sendValuesToTags', { label: labelValue, value: values });
this.$emit('sendValuesToTags', { label: labelValue, value: values, metadatumName: this.metadatumName });
}
},
updateSelectedValues(){
@ -97,7 +97,7 @@
if (this.selectedInterval !== '') {
let labelValue = this.filterTypeOptions.intervals[this.selectedInterval].label + (this.filterTypeOptions.showIntervalOnTag ? ` (${this.valueInit}-${this.valueEnd})` : '');
this.$emit('sendValuesToTags', { label: labelValue, value: [ this.valueInit, this.valueEnd ] });
this.$emit('sendValuesToTags', { label: labelValue, value: [ this.valueInit, this.valueEnd ], metadatumName: this.metadatumName });
}
} else {
this.valueInit = null;

4
src/views/admin/components/filter-types/numeric/Numeric.vue
View File

@ -123,7 +123,7 @@
this.comparator = metadata.compare;
if (this.value != undefined)
this.$emit('sendValuesToTags', { label: this.comparator + ' ' + this.value, value: this.value });
this.$emit('sendValuesToTags', { label: this.comparator + ' ' + this.value, value: this.value, metadatumName: this.metadatumName });
} else {
this.value = null;
@ -145,7 +145,7 @@
type: 'NUMERIC'
});
this.$emit('sendValuesToTags', { label: this.comparator + ' ' + this.value, value: this.value });
this.$emit('sendValuesToTags', { label: this.comparator + ' ' + this.value, value: this.value, metadatumName: this.metadatumName });
},
onChangeComparator(newComparator) {

2
src/views/admin/components/filter-types/selectbox/Selectbox.vue
View File

@ -104,7 +104,7 @@
this.selected = '';
}
this.$emit('sendValuesToTags', { label: this.selected, value: this.selected })
this.$emit('sendValuesToTags', { label: this.selected, value: this.selected, metadatumName: this.metadatumName })
},
onSelect(value) {
this.$emit('input', {

9
src/views/admin/components/filter-types/taginput/Taginput.vue
View File

@ -192,7 +192,8 @@
}
this.$emit( 'sendValuesToTags', {
label: this.selected.map((option) => option.label),
value: this.selected.map((option) => option.value)
value: this.selected.map((option) => option.value),
metadatumName: this.metadatumName
});
}
})
@ -219,7 +220,8 @@
}
this.$emit( 'sendValuesToTags', {
label: this.selected.map((option) => option.label),
value: this.selected.map((option) => option.value)
value: this.selected.map((option) => option.value),
metadatumName: this.metadatumName
});
}
})
@ -233,7 +235,8 @@
this.$emit( 'sendValuesToTags', {
label: this.selected.map((option) => option.label),
value: this.selected.map((option) => option.value)
value: this.selected.map((option) => option.value),
metadatumName: this.metadatumName
});
}
} else {

3
src/views/admin/components/filter-types/tainacan-filter-item.vue
View File

@ -76,7 +76,8 @@
label: $event.label,
value: $event.value,
taxonomy: $event.taxonomy,
metadatumId: this.filter.metadatum_id
metadatumId: this.filter.metadatum_id,
metadatumName: this.filter.metadatum && this.filter.metadatum.metadatum_name ? this.filter.metadatum.metadatum_name : ''
});
},
onFilterUpdateParentCollapse(open) {

2
src/views/admin/components/filter-types/taxonomy/Checkbox.vue
View File

@ -285,7 +285,7 @@
// });
}
}
this.$emit('sendValuesToTags', { label: onlyLabels, taxonomy: this.taxonomy, value: this.selected });
this.$emit('sendValuesToTags', { label: onlyLabels, taxonomy: this.taxonomy, value: this.selected, metadatumName: this.metadatumName });
},
onSelect() {

3
src/views/admin/components/filter-types/taxonomy/Taginput.vue
View File

@ -184,7 +184,8 @@
this.$emit( 'sendValuesToTags', {
label: this.selected.map((option) => option.label),
value: this.selected.map((option) => option.value),
taxonomy: this.taxonomy
taxonomy: this.taxonomy,
metadatumName: this.metadatumName
});
});
}

251
src/views/admin/components/search/filters-tags-list.vue
View File

@ -1,38 +1,105 @@
<template>
<transition name="filter-item">
<div
class="is-inline-flex"
v-if="filterTags != undefined && filterTags.length > 0">
<p style="margin-bottom: 0;">
<strong>{{ totalItems }}</strong>
{{ ' ' + ( totalItems == 1 ? $i18n.get('info_item_found') : $i18n.get('info_items_found') ) + ', ' }}
<strong>{{ filterTags.length }}</strong>
{{ ' ' + ( filterTags.length == 1 ? $i18n.get('info_applied_filter') : $i18n.get('info_applied_filters') ) + ': ' }}
&nbsp;&nbsp;
<div v-if="filterTags != undefined && filterTags.length > 0">
<p class="filter-tags-info">
<span style="margin-right: 1em">
<strong>{{ totalItems }}</strong>
{{ ' ' + ( totalItems == 1 ? $i18n.get('info_item_found') : $i18n.get('info_items_found') ) }}
</span>
<span>
<strong>{{ filterTags.length }}</strong>
{{ ' ' + ( filterTags.length == 1 ? $i18n.get('info_applied_filter') : $i18n.get('info_applied_filters') ) }}
&nbsp;
<a
@click="clearAllFilters()"
id="button-clear-all">
{{ $i18n.get('label_clear_filters') }}
</a>
</span>
</p>
<b-tag
v-for="(filterTag, index) of filterTags"
:key="index"
attached
closable
@close="removeMetaQuery(filterTag)">
{{ filterTag.singleLabel != undefined ? filterTag.singleLabel : filterTag.label }}
</b-tag>
<button
@click="clearAllFilters()"
id="button-clear-all"
class="button is-outlined">
{{ $i18n.get('label_clear_filters') }}
</button>
<swiper
role="list"
ref="tainacanFilterTagsSwiper"
:options="swiperOptions">
<swiper-slide
v-for="(filterTag, index) of filterTags"
:key="index"
class="filter-tag">
<span class="">
<div class="filter-tag-metadatum-name">
{{ filterTag.metadatumName }}
</div>
<div class="filter-tag-metadatum-value">
{{ filterTag.singleLabel != undefined ? filterTag.singleLabel : filterTag.label }}
</div>
</span>
<a
role="button"
tabindex="0"
class="tag is-delete"
@click="removeMetaQuery(filterTag)" />
</swiper-slide>
<button
class="swiper-button-prev"
id="tainacan-filter-tags-prev"
slot="button-prev">
<svg
width="24"
height="24"
viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
<button
class="swiper-button-next"
id="tainacan-filter-tags-next"
slot="button-next">
<svg
width="24"
height="24"
viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
</swiper>
</div>
</transition>
</template>
<script>
import { mapGetters } from 'vuex';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
export default {
name: 'FiltersTagsList',
components: {
Swiper,
SwiperSlide
},
data() {
return {
swiperOptions: {
watchOverflow: true,
mousewheel: true,
observer: true,
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slideToClickedSlide: true,
slidesPerView: 'auto',
navigation: {
nextEl: '#tainacan-filter-tags-next',
prevEl: '#tainacan-filter-tags-prev',
}
},
}
},
computed: {
filterTags() {
let tags = this.getFilterTags();
@ -41,7 +108,15 @@
for (let tag of tags) {
if (Array.isArray(tag.label)) {
for (let i = 0; i < tag.label.length; i++)
flattenTags.push({filterId: tag.filterId, label: tag.label, singleLabel: tag.label[i], value: tag.value[i], taxonomy: tag.taxonomy, metadatumId: tag.metadatumId});
flattenTags.push({
filterId: tag.filterId,
label: tag.label,
singleLabel: tag.label[i],
value: tag.value[i],
taxonomy: tag.taxonomy,
metadatumName: tag.metadatumName,
metadatumId: tag.metadatumId
});
} else {
flattenTags.push(tag);
}
@ -57,7 +132,7 @@
'getFilterTags',
'getTotalItems'
]),
removeMetaQuery({ filterId, value, singleLabel, label, taxonomy, metadatumId }) {
removeMetaQuery({ filterId, value, singleLabel, label, taxonomy, metadatumId, metadatumName }) {
this.$eventBusSearch.resetPageOnStore();
this.$eventBusSearch.removeMetaFromFilterTag({
filterId: filterId,
@ -65,7 +140,8 @@
label: label,
value: value,
taxonomy: taxonomy,
metadatumId: metadatumId
metadatumId: metadatumId,
metadatumName
});
},
clearAllFilters() {
@ -84,20 +160,125 @@
width: 100%;
padding: 1em var(--tainacan-one-column) 1em var(--tainacan-one-column);
font-size: 0.75em;
display: flex;
justify-content: flex-start;
align-items: baseline;
@media only screen and (max-width: 768px) {
padding-top: 1em;
}
.filter-tags-info {
margin: 0 1.25em 4px 0;
white-space: nowrap;
display: flex;
flex-direction: column;
}
.filter-tag {
border-radius: 3px;
padding: 4px 8px;
position: relative;
background-color: var(--tainacan-input-background-color);
border: solid 1px var(--tainacan-input-border-color);
margin-bottom: 0 !important;
margin-right: 4px !important;
max-width: calc(100% - 21px);
animation-name: appear;
animation-duration: 0.3s;
.filter-tag-metadatum-name {
font-size: 0.9375em;
white-space: nowrap;
padding-right: 20px;
}
.filter-tag-metadatum-value {
font-size: 1.0625em;
font-weight: 500;
white-space: nowrap;
}
.tag.is-delete {
position: absolute;
right: 2px;
top: 2px;
border-radius: 50px;
&:not(:hover) {
background-color: transparent;
}
}
}
.swiper-container {
width: 100%;
position: relative;
margin: 0;
--swiper-navigation-size: 2em;
--swiper-navigation-color: var(--tainacan-secondary);
.swiper-slide {
width: auto;
}
.swiper-button-next,
.swiper-button-prev {
padding: 34px 26px;
border: none;
background-color: transparent;
position: absolute;
top: 0;
bottom: 0;
}
.swiper-button-prev::after,
.swiper-container-rtl .swiper-button-next::after {
content: 'previous';
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: 0;
background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--tainacan-background-color) 40%);
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: 0;
background-image: linear-gradient(90deg, var(--tainacan-background-color) 0%, rgba(255,255,255,0) 60%);
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
display: none;
visibility: hidden;
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-family: "TainacanIcons";
opacity: 0.7;
transition: opacity ease 0.2s;
}
}
&.is-inline-flex {
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
}
#button-clear-all {
margin-left: auto;
font-size: 1em !important;
white-space: nowrap;
}
@media only screen and (max-width: 768px) {
padding-top: 1em;
flex-wrap: wrap;
.filter-tags-info {
margin: 0 0 4px 0;
flex-direction: row;
justify-content: space-between;
}
.swiper-container {
margin-top: 1em;
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
padding-right: 8px;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
padding-left: 8px;
}
}
}
}

2
src/views/admin/js/filter-types-mixin.js
View File

@ -8,6 +8,7 @@ export const filterTypeMixin = {
collectionId: '',
metadatumId: '',
metadatumType: '',
metadatumName: '',
filterTypeOptions: [],
shouldAddOptions: false
}
@ -23,6 +24,7 @@ export const filterTypeMixin = {
created() {
this.collectionId = this.filter.collection_id ? this.filter.collection_id : this.collectionId;
this.metadatumId = this.filter.metadatum.metadatum_id ? this.filter.metadatum.metadatum_id : this.metadatumId;
this.metadatumName = this.filter.metadatum && this.filter.metadatum.metadatum_name ? this.filter.metadatum.metadatum_name : this.metadatumName;
this.filterTypeOptions = this.filter.filter_type_options ? this.filter.filter_type_options : this.filterTypeOptions;
this.metadatumType = this.filter.metadatum.metadata_type_object && this.filter.metadatum.metadata_type_object.className ? this.filter.metadatum.metadata_type_object.className : this.metadatumType;
},

4
src/views/admin/scss/_filters-menu-modal.scss
View File

@ -7,8 +7,8 @@
.modal-content {
background-color: var(--tainacan-background-color);
padding: 24px 18px var(--tainacan-one-column);
padding: 24px 18px 24px 4.1666667vw;
padding: 20px 18px var(--tainacan-one-column);
padding: 20px 18px 24px 4.1666667vw;
margin: 0;
height: 100%;
max-height: 100%;

4
src/views/theme-search/pages/theme-items-page.vue
View File

@ -1542,8 +1542,8 @@
}
.filter-tags-list {
padding-top: 1.5em;
padding-bottom: 1.5em;
padding-top: 0.5em;
padding-bottom: 1.0em;
}
.metadata-alert {