add a option show interval on tag and validation #306
This commit is contained in:
vnmedeiros
parent
eddd56c403
commit
f007c34b80
|
|
@ -662,6 +662,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' ),
|
||||
|
||||
// Tainacan Metadatum Types
|
||||
'tainacan-text' => __( 'Text', 'tainacan' ),
|
||||
|
|
@ -684,7 +685,8 @@ return apply_filters( 'tainacan-admin-i18n', [
|
|||
'tainacan-filter-taxonomy-taginput' => __( 'Taxonomy Tag Input', 'tainacan' ),
|
||||
'tainacan-filter-taxonomy-checkbox' => __( 'Taxonomy Check Box', 'tainacan' ),
|
||||
'tainacan-filter-taxonomy-selectbox' => __( 'Taxonomy Select Box', 'tainacan' ),
|
||||
'tainacan-filter-numeric-interval' => __( 'Numeric Interval', 'tainacan' ),
|
||||
'tainacan-filter-numeric-interval' => __( 'Numeric Interval', 'tainacan' ),
|
||||
'tainacan-filter-numeric-list-interval' => __( 'Numeric Interval List', 'tainacan' ),
|
||||
|
||||
// Datepicker months
|
||||
'datepicker_month_january' => __( 'January', 'tainacan' ),
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
<template>
|
||||
<b-field :addons="false">
|
||||
<label class="label is-inline">
|
||||
{{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'predefined_intervals') }}<span> </span>
|
||||
{{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals') }}<span> </span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'predefined_intervals')"
|
||||
:message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'predefined_intervals')"/>
|
||||
: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
|
||||
|
|
@ -27,19 +36,21 @@
|
|||
<b-input
|
||||
expanded="true"
|
||||
:placeholder="$i18n.get('label')"
|
||||
@input="onUpdate"
|
||||
@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"
|
||||
@input="onUpdate(interval)"
|
||||
v-model="interval.from" />
|
||||
<b-input
|
||||
type="number"
|
||||
step="0.01"
|
||||
:placeholder="$i18n.get('info_final_value')"
|
||||
@input="onUpdate"
|
||||
@input="onUpdate(interval)"
|
||||
v-model="interval.to" />
|
||||
</b-field>
|
||||
<p class="control">
|
||||
|
|
@ -84,14 +95,35 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
showIntervalOnTag: true,
|
||||
intervals: [],
|
||||
isValid: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onUpdate() {
|
||||
this.$emit('input', {
|
||||
intervals: this.intervals,
|
||||
});
|
||||
onUpdate(interval) {
|
||||
if (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()
|
||||
}
|
||||
} else {
|
||||
this.isValid = true;
|
||||
this.$emit('input', {
|
||||
intervals: this.intervals,
|
||||
showIntervalOnTag: this.showIntervalOnTag
|
||||
});
|
||||
}
|
||||
},
|
||||
error_message() {
|
||||
this.$buefy.toast.open({
|
||||
duration: 3000,
|
||||
message: this.$i18n.get('info_error_first_value_greater'),
|
||||
position: 'is-bottom',
|
||||
type: 'is-danger'
|
||||
})
|
||||
},
|
||||
removeInterval(index) {
|
||||
this.intervals.splice(index, 1);
|
||||
|
|
@ -114,6 +146,7 @@
|
|||
},
|
||||
created() {
|
||||
this.intervals = this.value && this.value.intervals ? this.value.intervals : [];
|
||||
this.showIntervalOnTag = this.value && this.value.showIntervalOnTag != undefined ? this.value.showIntervalOnTag : true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
:placeholder="$i18n.get('instruction_select_a_interval')"
|
||||
@input="changeInterval"
|
||||
v-model="selectedInterval">
|
||||
<option value="">
|
||||
{{ $i18n.get('label_clean') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="(interval, index) in options.intervals"
|
||||
:value="index"
|
||||
|
|
@ -29,7 +32,7 @@
|
|||
valueEnd: 10,
|
||||
isValid: false,
|
||||
collectionId: '',
|
||||
metadatum: '',
|
||||
metadatumId: '',
|
||||
options: [],
|
||||
selectedInterval: ''
|
||||
}
|
||||
|
|
@ -81,10 +84,10 @@
|
|||
});
|
||||
|
||||
if (values[0] != undefined && values[1] != undefined) {
|
||||
let labelValue = this.options.intervals[this.selectedInterval].label + (this.options.showIntervalOnTag ? `(${values[0]}-${values[1]})` : '');
|
||||
this.$eventBusSearch.$emit( 'sendValuesToTags', {
|
||||
filterId: this.filter.id,
|
||||
value: this.options.intervals[this.selectedInterval].label + `(${values[0]}-${values[1]})`
|
||||
//value: values[0] + ' - ' + values[1]
|
||||
value: labelValue
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -109,9 +112,10 @@
|
|||
anInterval => anInterval.from == this.valueInit && anInterval.to == this.valueEnd
|
||||
);
|
||||
|
||||
let labelValue = this.options.intervals[this.selectedInterval].label + (this.options.showIntervalOnTag ? `(${this.valueInit}-${this.valueEnd})` : '');
|
||||
this.$eventBusSearch.$emit( 'sendValuesToTags', {
|
||||
filterId: this.filter.id,
|
||||
value: this.options.intervals[this.selectedInterval].label + `(${this.valueInit}-${this.valueEnd})`
|
||||
value: labelValue
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -15,48 +15,28 @@ class Numeric_List_Interval extends Filter_Type {
|
|||
$this->set_form_component('tainacan-filter-form-numeric-list-interval');
|
||||
$this->set_use_max_options(false);
|
||||
$this->set_default_options([
|
||||
'intervals' => []
|
||||
'intervals' => [],
|
||||
'showIntervalOnTag' => false
|
||||
]);
|
||||
$this->set_preview_template('
|
||||
<div>
|
||||
<div class="b-numberinput field is-grouped">
|
||||
<p class="control">
|
||||
<button type="button" class="button is-primary is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-minus"></i>
|
||||
<div class="collapse show">
|
||||
<div class="dropdown is-active">
|
||||
<div role="button" class="dropdown-trigger">
|
||||
<button class="button is-white">
|
||||
List
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"></i>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
<div class="control is-small is-clearfix">
|
||||
<input type="number" step="0.01" class="input is-small" value="6">
|
||||
</div>
|
||||
<p class="control">
|
||||
<button type="button" class="button is-primary is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<p class="is-size-7 has-text-centered is-marginless">until</p>
|
||||
<div class="b-numberinput field is-grouped">
|
||||
<p class="control">
|
||||
<button type="button" class="button is-primary is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-minus"></i>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
<div class="control is-small is-clearfix">
|
||||
<input type="number" step="0.01" class="input is-small" value="10">
|
||||
<div class="background"></div>
|
||||
<div class="dropdown-menu">
|
||||
<div role="list" class="dropdown-content">
|
||||
<a class="dropdown-item is-active">Top 10</a>
|
||||
<a class="dropdown-item">Top 20</a>
|
||||
<a class="dropdown-item">Top 30</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="control">
|
||||
<button type="button" class="button is-primary is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
');
|
||||
|
|
@ -64,10 +44,10 @@ class Numeric_List_Interval extends Filter_Type {
|
|||
|
||||
public function get_form_labels() {
|
||||
return [
|
||||
'predefined_intervals' => [
|
||||
'intervals' => [
|
||||
'title' => __('Predefined intervals','tainacan'),
|
||||
'description' => __('Predefined intervals','tainacan')
|
||||
],
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
|
|
@ -80,6 +60,6 @@ class Numeric_List_Interval extends Filter_Type {
|
|||
return '<tainacan-filter-numeric-list-interval
|
||||
name="'.$filter->get_name().'"
|
||||
collection_id="'.$filter->get_collection_id().'"
|
||||
metadatum_id="'.$filter->get_metadatum()->get_id().'"></tainacan-filter-numeric-interval>';
|
||||
metadatum_id="'.$filter->get_metadatum()->get_id().'"></tainacan-filter-form-numeric-list-interval>';
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue