Adjustments to numeric list interval form and tooltips

This commit is contained in:
Mateus Machado Luna 2019-10-15 11:43:35 -03:00
parent 19606a1a93
commit 4643a182da
16 changed files with 138 additions and 126 deletions

View File

@ -54,7 +54,7 @@ export default {
display: block; display: block;
border-radius: 5px; border-radius: 5px;
min-width: 250px; min-width: 250px;
min-width: 250px; max-width: 100%;
transition: margin-bottom 0.2s ease, opacity 0.3s ease; transition: margin-bottom 0.2s ease, opacity 0.3s ease;
position: absolute; position: absolute;
bottom: calc(100% - 6px); bottom: calc(100% - 6px);
@ -76,6 +76,7 @@ export default {
padding: 0.8em 1.0em 1.0em 1.0em; padding: 0.8em 1.0em 1.0em 1.0em;
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
white-space: normal;
} }
&:before { &:before {

View File

@ -133,7 +133,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'title_exporter_page' => __( 'Exporter', 'tainacan'), 'title_exporter_page' => __( 'Exporter', 'tainacan'),
// Labels (used mainly on Aria Labels and Inputs) // Labels (used mainly on Aria Labels and Inputs)
'label' => __( 'label', 'tainacan' ), 'label' => __( 'Label', 'tainacan' ),
'label_clean' => __( 'Clear', 'tainacan' ), 'label_clean' => __( 'Clear', 'tainacan' ),
'label_none' => __( 'None', 'tainacan' ), 'label_none' => __( 'None', 'tainacan' ),
'label_clear_filters' => __( 'Clear filters', '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_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_initial_value' => __( 'Initial value', 'tainacan' ),
'info_final_value' => __( 'Final 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 Metadatum Types
'tainacan-text' => __( 'Text', 'tainacan' ), 'tainacan-text' => __( 'Text', 'tainacan' ),

View File

@ -54,11 +54,11 @@
}, },
watch: { watch: {
'query.metaquery'() { 'query.metaquery'() {
this.selectedValues(); this.updateSelectedValues();
}, },
}, },
mounted() { mounted() {
this.selectedValues(); this.updateSelectedValues();
}, },
methods: { methods: {
onSelect(option){ onSelect(option){
@ -74,7 +74,7 @@
collection_id: this.collectionId, collection_id: this.collectionId,
value: this.selected value: this.selected
}); });
this.selectedValues(); this.updateSelectedValues();
}, },
search: _.debounce( function(query) { search: _.debounce( function(query) {
@ -111,7 +111,7 @@
}); });
} }
}, 500), }, 500),
selectedValues(){ updateSelectedValues(){
if (!this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery )) if (!this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ))
return false; return false;

View File

@ -84,12 +84,12 @@
promise.request promise.request
.then(() => { .then(() => {
this.selectedValues(); this.updateSelectedValues();
}) })
.catch( (error) => { .catch( (error) => {
if (isCancel(error)) { if (isCancel(error)) {
this.$console.log('Request canceled: ' + error.message); this.$console.log('Request canceled: ' + error.message);
this.selectedValues(); this.updateSelectedValues();
} else } else
this.$console.error( error ); this.$console.error( error );
}); });
@ -106,7 +106,7 @@
value: this.selected value: this.selected
}); });
}, },
selectedValues() { updateSelectedValues() {
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) ) if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
return false; return false;

View File

@ -79,7 +79,7 @@
filterTypeMixin filterTypeMixin
], ],
mounted() { mounted() {
this.selectedValues(); this.updateSelectedValues();
}, },
data(){ data(){
return { return {
@ -102,7 +102,7 @@
this.date_end = new Date(); this.date_end = new Date();
}, },
'query.metaquery'() { 'query.metaquery'() {
this.selectedValues(); this.updateSelectedValues();
} }
}, },
methods: { methods: {
@ -157,7 +157,7 @@
dateParser(dateString){ dateParser(dateString){
return moment(dateString, this.dateFormat).toDate(); return moment(dateString, this.dateFormat).toDate();
}, },
selectedValues(){ updateSelectedValues(){
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) ) if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
return false; return false;

View File

@ -121,7 +121,7 @@
filterTypeMixin filterTypeMixin
], ],
mounted() { mounted() {
this.selectedValues(); this.updateSelectedValues();
}, },
data(){ data(){
return { return {
@ -131,7 +131,7 @@
}, },
watch: { watch: {
'query.metaquery'() { 'query.metaquery'() {
this.selectedValues(); this.updateSelectedValues();
} }
}, },
computed: { computed: {
@ -151,7 +151,7 @@
} }
}, },
methods: { methods: {
selectedValues(){ updateSelectedValues(){
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) ) if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
return false; return false;

View File

@ -31,11 +31,11 @@
} }
}, },
mounted() { mounted() {
this.selectedValues(); this.updateSelectedValues();
}, },
watch: { watch: {
'query.metaquery'() { 'query.metaquery'() {
this.selectedValues(); this.updateSelectedValues();
} }
}, },
methods: { methods: {
@ -90,7 +90,7 @@
if (values[0] != undefined && values[1] != undefined) 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 });
}, },
selectedValues(){ updateSelectedValues(){
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) ) if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
return false; return false;

View File

@ -1,85 +1,83 @@
<template> <template>
<b-field :addons="false"> <div>
<label class="label is-inline"> <b-field :addons="false">
{{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals') }}<span>&nbsp;</span> <label class="label is-inline">
<help-button {{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'showIntervalOnTag') }}<span>&nbsp;</span>
:title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals')" <help-button
:message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'intervals')"/> :title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'showIntervalOnTag')"
</label> :message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'showIntervalOnTag')"/>
</label>
<div> <div>
<b-field> <b-field>
<b-checkbox v-model="showIntervalOnTag"> <b-checkbox v-model="showIntervalOnTag">
{{ $i18n.get('info_show_interval_on_tag') }} {{ $i18n.get('info_show_interval_on_tag') }}
</b-checkbox> </b-checkbox>
</b-field> </b-field>
</div> </div>
</b-field>
<div v-if="intervals.length == 0" > <b-field :addons="false">
<br> <label class="label is-inline">
<a {{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals') }}<span>&nbsp;</span>
role="button" <help-button
@click="addInterval()" :title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals')"
class="is-inline add-link"> :message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'intervals')"/>
<span class="icon is-small"> </label>
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <transition-group name="filter-item">
</span> <div
&nbsp;{{ $i18n.get('add_value') }} class="options-input"
</a> v-for="(interval, index) of intervals"
</div> :key="index">
<transition-group name="filter-item"> <b-field>
<div <b-input
class="options-input" expanded="true"
v-for="(interval, index) of intervals" :placeholder="$i18n.get('label')"
:key="index"> @input="onUpdate(interval)"
<b-field> v-model="interval.label" />
<b-input </b-field>
expanded="true" <b-field>
:placeholder="$i18n.get('label')" <b-input
@input="onUpdate(interval)" type="number"
v-model="interval.label" /> step="0.01"
</b-field> :placeholder="$i18n.get('info_initial_value')"
<b-field> @input="onUpdate(interval, true)"
<b-input v-model="interval.from" />
type="number" <b-input
step="0.01" type="number"
:placeholder="$i18n.get('info_initial_value')" step="0.01"
@input="onUpdate(interval)" :placeholder="$i18n.get('info_final_value')"
v-model="interval.from" /> @input="onUpdate(interval, true)"
<b-input v-model="interval.to" />
type="number" </b-field>
step="0.01" <p class="control">
:placeholder="$i18n.get('info_final_value')" <a
@input="onUpdate(interval)" role="button"
v-model="interval.to" /> @click="addInterval(index)"
</b-field> class="is-inline add-link"
<p class="control"> :title="$i18n.get('add_value')">
<a <span class="icon is-small">
role="button" <i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
@click="addInterval(index)" </span>
class="is-inline add-link" &nbsp;{{ $i18n.get('add_value') }}
:title="$i18n.get('add_value')"> </a>
<span class="icon is-small"> </p>
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <p
</span> v-if="intervals.length > 1"
&nbsp;{{ $i18n.get('add_value') }} class="control">
</a> <a
</p> role="button"
<p class="control"> @click="removeInterval(index)"
<a class="is-inline add-link"
role="button" :title="$i18n.get('remove_value')">
@click="removeInterval(index)" <span class="icon is-small">
class="is-inline add-link" <i class="tainacan-icon has-text-secondary tainacan-icon-repprovedcircle"/>
:title="$i18n.get('remove_value')"> </span>
<span class="icon is-small"> &nbsp;{{ $i18n.get('remove_value') }}
<i class="tainacan-icon has-text-secondary tainacan-icon-repprovedcircle"/> </a>
</span> </p>
&nbsp;{{ $i18n.get('remove_value') }} </div>
</a> </transition-group>
</p> </b-field>
</div> </div>
</transition-group>
</b-field>
</template> </template>
<script> <script>
@ -99,11 +97,13 @@
} }
}, },
methods: { methods: {
onUpdate(interval) { onUpdate: _.debounce( function(interval, validade) {
if (interval.to == null || interval.from == null || if (validade != undefined && validade == true &&
interval.to == "" || interval.from == "" || (interval.to == null || interval.from == null ||
Number(interval.to) < Number(interval.from)) { interval.to == "" || interval.from == "" ||
if(this.isValid) { Number(interval.to) < Number(interval.from))
) {
if (this.isValid) {
this.isValid = false; this.isValid = false;
this.error_message() this.error_message()
} }
@ -114,7 +114,7 @@
showIntervalOnTag: this.showIntervalOnTag showIntervalOnTag: this.showIntervalOnTag
}); });
} }
}, }, 600),
error_message() { error_message() {
this.$buefy.toast.open({ this.$buefy.toast.open({
duration: 3000, duration: 3000,
@ -143,7 +143,14 @@
} }
}, },
created() { 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; this.showIntervalOnTag = this.value && this.value.showIntervalOnTag != undefined ? this.value.showIntervalOnTag : true;
} }
} }

View File

@ -31,11 +31,11 @@
} }
}, },
mounted() { mounted() {
this.selectedValues(); this.updateSelectedValues();
}, },
watch: { watch: {
'query.metaquery'() { 'query.metaquery'() {
this.selectedValues(); this.updateSelectedValues();
} }
}, },
methods: { methods: {
@ -74,7 +74,7 @@
this.$emit('sendValuesToTags', { label: labelValue, value: values }); this.$emit('sendValuesToTags', { label: labelValue, value: values });
} }
}, },
selectedValues(){ updateSelectedValues(){
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) ) if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
return false; return false;

View File

@ -47,7 +47,11 @@ class Numeric_List_Interval extends Filter_Type {
return [ return [
'intervals' => [ 'intervals' => [
'title' => __('Predefined intervals','tainacan'), '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.')
] ]
]; ];
} }

View File

@ -79,7 +79,7 @@
filterTypeMixin filterTypeMixin
], ],
mounted() { mounted() {
this.selectedValues(); this.updateSelectedValues();
}, },
data(){ data(){
return { return {
@ -103,11 +103,11 @@
}, },
watch: { watch: {
'query.metaquery'() { 'query.metaquery'() {
this.selectedValues(); this.updateSelectedValues();
} }
}, },
methods: { methods: {
selectedValues(){ updateSelectedValues(){
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) ) if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
return false; return false;

View File

@ -55,7 +55,7 @@
promise = this.getValuesPlainText( this.metadatumId, null, this.isRepositoryLevel ); promise = this.getValuesPlainText( this.metadatumId, null, this.isRepositoryLevel );
promise.request promise.request
.then(() => { .then(() => {
this.selectedValues(); this.updateSelectedValues();
}) })
.catch( error => { .catch( error => {
if (isCancel(error)) if (isCancel(error))
@ -67,7 +67,7 @@
// Search Request Token for cancelling // Search Request Token for cancelling
this.getOptionsValuesCancel = promise.source; this.getOptionsValuesCancel = promise.source;
}, },
selectedValues() { updateSelectedValues() {
if ( this.query && this.query.metaquery && Array.isArray( this.query.metaquery ) ) { if ( this.query && this.query.metaquery && Array.isArray( this.query.metaquery ) ) {
let index = this.query.metaquery.findIndex(newMetadatum => newMetadatum.key == this.metadatumId ); let index = this.query.metaquery.findIndex(newMetadatum => newMetadatum.key == this.metadatumId );
@ -93,7 +93,7 @@
}); });
this.$emit('sendValuesToTags', { label: value, value: value }) this.$emit('sendValuesToTags', { label: value, value: value })
this.selectedValues(); this.updateSelectedValues();
} }
} }
} }

View File

@ -59,11 +59,11 @@
}, },
watch: { watch: {
'query.metaquery'() { 'query.metaquery'() {
this.selectedValues(); this.updateSelectedValues();
} }
}, },
mounted() { mounted() {
this.selectedValues(); this.updateSelectedValues();
}, },
methods: { methods: {
search: _.debounce( function(query) { search: _.debounce( function(query) {
@ -95,7 +95,7 @@
this.getOptionsValuesCancel = promise.source; this.getOptionsValuesCancel = promise.source;
}, 500), }, 500),
selectedValues() { updateSelectedValues() {
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) ) if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
return false; return false;

View File

@ -150,7 +150,7 @@
} }
} }
}, },
selectedValues(){ updateSelectedValues(){
if ( !this.query || !this.query.taxquery || !Array.isArray( this.query.taxquery ) ) if ( !this.query || !this.query.taxquery || !Array.isArray( this.query.taxquery ) )
return false; return false;
@ -286,7 +286,7 @@
} }
} }
} }
this.selectedValues(); this.updateSelectedValues();
}, },
updatesIsLoading(isLoadingOptions) { updatesIsLoading(isLoadingOptions) {
this.isLoadingOptions = isLoadingOptions; this.isLoadingOptions = isLoadingOptions;

View File

@ -54,13 +54,13 @@
.then( res => { .then( res => {
let metadatum = res.data; let metadatum = res.data;
this.taxonomyId = metadatum.metadata_type_options.taxonomy_id this.taxonomyId = metadatum.metadata_type_options.taxonomy_id
this.selectedValues(); this.updateSelectedValues();
}); });
}, },
watch: { watch: {
'query.taxquery'() { 'query.taxquery'() {
if (this.taxonomyId != '') if (this.taxonomyId != '')
this.selectedValues(); this.updateSelectedValues();
} }
}, },
data(){ data(){
@ -122,7 +122,7 @@
this.$console.log(error); this.$console.log(error);
}); });
}, 500), }, 500),
selectedValues(){ updateSelectedValues(){
if ( !this.query || !this.query.taxquery || !Array.isArray( this.query.taxquery ) ) if ( !this.query || !this.query.taxquery || !Array.isArray( this.query.taxquery ) )
return false; return false;

View File

@ -99,7 +99,7 @@
throw error; throw error;
}); });
}, 500), }, 500),
selectedValues(){ updateSelectedValues(){
let selected = []; let selected = [];
for( let term of this.value){ for( let term of this.value){