Adjustments to numeric list interval form and tooltips
This commit is contained in:
parent
19606a1a93
commit
4643a182da
|
@ -54,7 +54,7 @@ export default {
|
|||
display: block;
|
||||
border-radius: 5px;
|
||||
min-width: 250px;
|
||||
min-width: 250px;
|
||||
max-width: 100%;
|
||||
transition: margin-bottom 0.2s ease, opacity 0.3s ease;
|
||||
position: absolute;
|
||||
bottom: calc(100% - 6px);
|
||||
|
@ -76,6 +76,7 @@ export default {
|
|||
padding: 0.8em 1.0em 1.0em 1.0em;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
|
@ -133,7 +133,7 @@ return apply_filters( 'tainacan-admin-i18n', [
|
|||
'title_exporter_page' => __( 'Exporter', 'tainacan'),
|
||||
|
||||
// Labels (used mainly on Aria Labels and Inputs)
|
||||
'label' => __( 'label', 'tainacan' ),
|
||||
'label' => __( 'Label', 'tainacan' ),
|
||||
'label_clean' => __( 'Clear', 'tainacan' ),
|
||||
'label_none' => __( 'None', 'tainacan' ),
|
||||
'label_clear_filters' => __( 'Clear filters', 'tainacan' ),
|
||||
|
@ -665,7 +665,7 @@ return apply_filters( 'tainacan-admin-i18n', [
|
|||
'info_expose_only_displayed_metadata' => __( 'By checking this option, only metatada that are displayed on the current list will be exposed', 'tainacan' ),
|
||||
'info_initial_value' => __( 'Initial value', 'tainacan' ),
|
||||
'info_final_value' => __( 'Final value', 'tainacan' ),
|
||||
'info_show_interval_on_tag' => __( 'Show interval on tag', 'tainacan' ),
|
||||
'info_show_interval_on_tag' => __( 'Show applied interval on tags', 'tainacan' ),
|
||||
|
||||
// Tainacan Metadatum Types
|
||||
'tainacan-text' => __( 'Text', 'tainacan' ),
|
||||
|
|
|
@ -54,11 +54,11 @@
|
|||
},
|
||||
watch: {
|
||||
'query.metaquery'() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
},
|
||||
methods: {
|
||||
onSelect(option){
|
||||
|
@ -74,7 +74,7 @@
|
|||
collection_id: this.collectionId,
|
||||
value: this.selected
|
||||
});
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
},
|
||||
search: _.debounce( function(query) {
|
||||
|
||||
|
@ -111,7 +111,7 @@
|
|||
});
|
||||
}
|
||||
}, 500),
|
||||
selectedValues(){
|
||||
updateSelectedValues(){
|
||||
|
||||
if (!this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ))
|
||||
return false;
|
||||
|
|
|
@ -84,12 +84,12 @@
|
|||
|
||||
promise.request
|
||||
.then(() => {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
})
|
||||
.catch( (error) => {
|
||||
if (isCancel(error)) {
|
||||
this.$console.log('Request canceled: ' + error.message);
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
} else
|
||||
this.$console.error( error );
|
||||
});
|
||||
|
@ -106,7 +106,7 @@
|
|||
value: this.selected
|
||||
});
|
||||
},
|
||||
selectedValues() {
|
||||
updateSelectedValues() {
|
||||
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
|
||||
return false;
|
||||
|
||||
|
|
|
@ -79,7 +79,7 @@
|
|||
filterTypeMixin
|
||||
],
|
||||
mounted() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
@ -102,7 +102,7 @@
|
|||
this.date_end = new Date();
|
||||
},
|
||||
'query.metaquery'() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -157,7 +157,7 @@
|
|||
dateParser(dateString){
|
||||
return moment(dateString, this.dateFormat).toDate();
|
||||
},
|
||||
selectedValues(){
|
||||
updateSelectedValues(){
|
||||
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
|
||||
return false;
|
||||
|
||||
|
|
|
@ -121,7 +121,7 @@
|
|||
filterTypeMixin
|
||||
],
|
||||
mounted() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
@ -131,7 +131,7 @@
|
|||
},
|
||||
watch: {
|
||||
'query.metaquery'() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
@ -151,7 +151,7 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
selectedValues(){
|
||||
updateSelectedValues(){
|
||||
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
|
||||
return false;
|
||||
|
||||
|
|
|
@ -31,11 +31,11 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
},
|
||||
watch: {
|
||||
'query.metaquery'() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -90,7 +90,7 @@
|
|||
if (values[0] != undefined && values[1] != undefined)
|
||||
this.$emit('sendValuesToTags', { label: values[0] + ' - ' + values[1], value: values });
|
||||
},
|
||||
selectedValues(){
|
||||
updateSelectedValues(){
|
||||
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
|
||||
return false;
|
||||
|
||||
|
|
|
@ -1,85 +1,83 @@
|
|||
<template>
|
||||
<b-field :addons="false">
|
||||
<label class="label is-inline">
|
||||
{{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals') }}<span> </span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals')"
|
||||
:message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'intervals')"/>
|
||||
</label>
|
||||
|
||||
<div>
|
||||
<b-field>
|
||||
<b-checkbox v-model="showIntervalOnTag">
|
||||
{{ $i18n.get('info_show_interval_on_tag') }}
|
||||
</b-checkbox>
|
||||
</b-field>
|
||||
</div>
|
||||
|
||||
<div v-if="intervals.length == 0" >
|
||||
<br>
|
||||
<a
|
||||
role="button"
|
||||
@click="addInterval()"
|
||||
class="is-inline add-link">
|
||||
<span class="icon is-small">
|
||||
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
|
||||
</span>
|
||||
{{ $i18n.get('add_value') }}
|
||||
</a>
|
||||
</div>
|
||||
<transition-group name="filter-item">
|
||||
<div
|
||||
class="options-input"
|
||||
v-for="(interval, index) of intervals"
|
||||
:key="index">
|
||||
<b-field>
|
||||
<b-input
|
||||
expanded="true"
|
||||
:placeholder="$i18n.get('label')"
|
||||
@input="onUpdate(interval)"
|
||||
v-model="interval.label" />
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-input
|
||||
type="number"
|
||||
step="0.01"
|
||||
:placeholder="$i18n.get('info_initial_value')"
|
||||
@input="onUpdate(interval)"
|
||||
v-model="interval.from" />
|
||||
<b-input
|
||||
type="number"
|
||||
step="0.01"
|
||||
:placeholder="$i18n.get('info_final_value')"
|
||||
@input="onUpdate(interval)"
|
||||
v-model="interval.to" />
|
||||
</b-field>
|
||||
<p class="control">
|
||||
<a
|
||||
role="button"
|
||||
@click="addInterval(index)"
|
||||
class="is-inline add-link"
|
||||
:title="$i18n.get('add_value')">
|
||||
<span class="icon is-small">
|
||||
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
|
||||
</span>
|
||||
{{ $i18n.get('add_value') }}
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a
|
||||
role="button"
|
||||
@click="removeInterval(index)"
|
||||
class="is-inline add-link"
|
||||
:title="$i18n.get('remove_value')">
|
||||
<span class="icon is-small">
|
||||
<i class="tainacan-icon has-text-secondary tainacan-icon-repprovedcircle"/>
|
||||
</span>
|
||||
{{ $i18n.get('remove_value') }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</transition-group>
|
||||
</b-field>
|
||||
<div>
|
||||
<b-field :addons="false">
|
||||
<label class="label is-inline">
|
||||
{{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'showIntervalOnTag') }}<span> </span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'showIntervalOnTag')"
|
||||
:message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'showIntervalOnTag')"/>
|
||||
</label>
|
||||
<div>
|
||||
<b-field>
|
||||
<b-checkbox v-model="showIntervalOnTag">
|
||||
{{ $i18n.get('info_show_interval_on_tag') }}
|
||||
</b-checkbox>
|
||||
</b-field>
|
||||
</div>
|
||||
</b-field>
|
||||
<b-field :addons="false">
|
||||
<label class="label is-inline">
|
||||
{{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals') }}<span> </span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals')"
|
||||
:message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'intervals')"/>
|
||||
</label>
|
||||
<transition-group name="filter-item">
|
||||
<div
|
||||
class="options-input"
|
||||
v-for="(interval, index) of intervals"
|
||||
:key="index">
|
||||
<b-field>
|
||||
<b-input
|
||||
expanded="true"
|
||||
:placeholder="$i18n.get('label')"
|
||||
@input="onUpdate(interval)"
|
||||
v-model="interval.label" />
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-input
|
||||
type="number"
|
||||
step="0.01"
|
||||
:placeholder="$i18n.get('info_initial_value')"
|
||||
@input="onUpdate(interval, true)"
|
||||
v-model="interval.from" />
|
||||
<b-input
|
||||
type="number"
|
||||
step="0.01"
|
||||
:placeholder="$i18n.get('info_final_value')"
|
||||
@input="onUpdate(interval, true)"
|
||||
v-model="interval.to" />
|
||||
</b-field>
|
||||
<p class="control">
|
||||
<a
|
||||
role="button"
|
||||
@click="addInterval(index)"
|
||||
class="is-inline add-link"
|
||||
:title="$i18n.get('add_value')">
|
||||
<span class="icon is-small">
|
||||
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
|
||||
</span>
|
||||
{{ $i18n.get('add_value') }}
|
||||
</a>
|
||||
</p>
|
||||
<p
|
||||
v-if="intervals.length > 1"
|
||||
class="control">
|
||||
<a
|
||||
role="button"
|
||||
@click="removeInterval(index)"
|
||||
class="is-inline add-link"
|
||||
:title="$i18n.get('remove_value')">
|
||||
<span class="icon is-small">
|
||||
<i class="tainacan-icon has-text-secondary tainacan-icon-repprovedcircle"/>
|
||||
</span>
|
||||
{{ $i18n.get('remove_value') }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</transition-group>
|
||||
</b-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -99,11 +97,13 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
onUpdate(interval) {
|
||||
if (interval.to == null || interval.from == null ||
|
||||
interval.to == "" || interval.from == "" ||
|
||||
Number(interval.to) < Number(interval.from)) {
|
||||
if(this.isValid) {
|
||||
onUpdate: _.debounce( function(interval, validade) {
|
||||
if (validade != undefined && validade == true &&
|
||||
(interval.to == null || interval.from == null ||
|
||||
interval.to == "" || interval.from == "" ||
|
||||
Number(interval.to) < Number(interval.from))
|
||||
) {
|
||||
if (this.isValid) {
|
||||
this.isValid = false;
|
||||
this.error_message()
|
||||
}
|
||||
|
@ -114,7 +114,7 @@
|
|||
showIntervalOnTag: this.showIntervalOnTag
|
||||
});
|
||||
}
|
||||
},
|
||||
}, 600),
|
||||
error_message() {
|
||||
this.$buefy.toast.open({
|
||||
duration: 3000,
|
||||
|
@ -143,7 +143,14 @@
|
|||
}
|
||||
},
|
||||
created() {
|
||||
this.intervals = this.value && this.value.intervals ? this.value.intervals : [];
|
||||
this.intervals =
|
||||
this.value && this.value.intervals ?
|
||||
this.value.intervals :
|
||||
[{
|
||||
label: '',
|
||||
to: null,
|
||||
from: null
|
||||
}];
|
||||
this.showIntervalOnTag = this.value && this.value.showIntervalOnTag != undefined ? this.value.showIntervalOnTag : true;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -31,11 +31,11 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
},
|
||||
watch: {
|
||||
'query.metaquery'() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -74,7 +74,7 @@
|
|||
this.$emit('sendValuesToTags', { label: labelValue, value: values });
|
||||
}
|
||||
},
|
||||
selectedValues(){
|
||||
updateSelectedValues(){
|
||||
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
|
||||
return false;
|
||||
|
||||
|
|
|
@ -47,7 +47,11 @@ class Numeric_List_Interval extends Filter_Type {
|
|||
return [
|
||||
'intervals' => [
|
||||
'title' => __('Predefined intervals','tainacan'),
|
||||
'description' => __('Predefined intervals','tainacan')
|
||||
'description' => __('A list of predefined intervals that the filter will offer on a select box.','tainacan')
|
||||
],
|
||||
'showIntervalOnTag' => [
|
||||
'title' => __('Interval on tags', 'tainacan'),
|
||||
'description' => __('Whether the applyed interval values should appear on filter tags.')
|
||||
]
|
||||
];
|
||||
}
|
||||
|
|
|
@ -79,7 +79,7 @@
|
|||
filterTypeMixin
|
||||
],
|
||||
mounted() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
@ -103,11 +103,11 @@
|
|||
},
|
||||
watch: {
|
||||
'query.metaquery'() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectedValues(){
|
||||
updateSelectedValues(){
|
||||
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
|
||||
return false;
|
||||
|
||||
|
|
|
@ -55,7 +55,7 @@
|
|||
promise = this.getValuesPlainText( this.metadatumId, null, this.isRepositoryLevel );
|
||||
promise.request
|
||||
.then(() => {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
})
|
||||
.catch( error => {
|
||||
if (isCancel(error))
|
||||
|
@ -67,7 +67,7 @@
|
|||
// Search Request Token for cancelling
|
||||
this.getOptionsValuesCancel = promise.source;
|
||||
},
|
||||
selectedValues() {
|
||||
updateSelectedValues() {
|
||||
if ( this.query && this.query.metaquery && Array.isArray( this.query.metaquery ) ) {
|
||||
|
||||
let index = this.query.metaquery.findIndex(newMetadatum => newMetadatum.key == this.metadatumId );
|
||||
|
@ -93,7 +93,7 @@
|
|||
});
|
||||
this.$emit('sendValuesToTags', { label: value, value: value })
|
||||
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -59,11 +59,11 @@
|
|||
},
|
||||
watch: {
|
||||
'query.metaquery'() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
},
|
||||
methods: {
|
||||
search: _.debounce( function(query) {
|
||||
|
@ -95,7 +95,7 @@
|
|||
this.getOptionsValuesCancel = promise.source;
|
||||
|
||||
}, 500),
|
||||
selectedValues() {
|
||||
updateSelectedValues() {
|
||||
|
||||
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
|
||||
return false;
|
||||
|
|
|
@ -150,7 +150,7 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
selectedValues(){
|
||||
updateSelectedValues(){
|
||||
|
||||
if ( !this.query || !this.query.taxquery || !Array.isArray( this.query.taxquery ) )
|
||||
return false;
|
||||
|
@ -286,7 +286,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
},
|
||||
updatesIsLoading(isLoadingOptions) {
|
||||
this.isLoadingOptions = isLoadingOptions;
|
||||
|
|
|
@ -54,13 +54,13 @@
|
|||
.then( res => {
|
||||
let metadatum = res.data;
|
||||
this.taxonomyId = metadatum.metadata_type_options.taxonomy_id
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
'query.taxquery'() {
|
||||
if (this.taxonomyId != '')
|
||||
this.selectedValues();
|
||||
this.updateSelectedValues();
|
||||
}
|
||||
},
|
||||
data(){
|
||||
|
@ -122,7 +122,7 @@
|
|||
this.$console.log(error);
|
||||
});
|
||||
}, 500),
|
||||
selectedValues(){
|
||||
updateSelectedValues(){
|
||||
if ( !this.query || !this.query.taxquery || !Array.isArray( this.query.taxquery ) )
|
||||
return false;
|
||||
|
||||
|
|
|
@ -99,7 +99,7 @@
|
|||
throw error;
|
||||
});
|
||||
}, 500),
|
||||
selectedValues(){
|
||||
updateSelectedValues(){
|
||||
let selected = [];
|
||||
|
||||
for( let term of this.value){
|
||||
|
|
Loading…
Reference in New Issue