Custom numeric interval filter #306
This commit is contained in:
Leo Germani
parent
8083ba45d2
commit
c8c6b7113c
|
|
@ -679,6 +679,7 @@ 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' ),
|
||||
|
||||
// Datepicker months
|
||||
'datepicker_month_january' => __( 'January', 'tainacan' ),
|
||||
|
|
|
|||
|
|
@ -2,156 +2,72 @@
|
|||
<div>
|
||||
<b-field :addons="false">
|
||||
<label class="label is-inline">
|
||||
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'input-mode') }}<span> * </span>
|
||||
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step') }}<span> * </span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('tainacan-filter-numeric-interval', 'input-mode')"
|
||||
:message="$i18n.getHelperMessage('tainacan-filter-numeric-interval', 'input-mode')"/>
|
||||
:title="$i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step')"
|
||||
:message="$i18n.getHelperMessage('tainacan-filter-numeric-interval', 'step')"/>
|
||||
</label>
|
||||
<b-radio
|
||||
v-model="inputMode"
|
||||
name="inputMode"
|
||||
native-value="custom"
|
||||
@input="onUpdate">
|
||||
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'custom') }}
|
||||
</b-radio>
|
||||
<b-radio
|
||||
v-model="inputMode"
|
||||
name="inputMode"
|
||||
native-value="list"
|
||||
@input="onUpdate">
|
||||
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'list') }}
|
||||
</b-radio>
|
||||
</b-field>
|
||||
|
||||
<template v-if="inputMode == 'custom'">
|
||||
<b-field :addons="false">
|
||||
<label class="label is-inline">
|
||||
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step') }}<span> * </span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step')"
|
||||
:message="$i18n.getHelperMessage('tainacan-filter-numeric-interval', 'step')"/>
|
||||
</label>
|
||||
<div
|
||||
v-if="!showEditStepOptions"
|
||||
class="is-flex">
|
||||
<b-select
|
||||
name="step_options"
|
||||
v-model="step"
|
||||
@input="onUpdate">
|
||||
<option value="0.001">0.001</option>
|
||||
<option value="0.01">0.01</option>
|
||||
<option value="0.1">0.1</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
<option value="100">100</option>
|
||||
<option value="1000">1000</option>
|
||||
<option
|
||||
v-if="step && ![0.001,0.01,0.1,1,2,5,10,100,1000].find( (element) => element == step )"
|
||||
:value="step">
|
||||
{{ step }}</option>
|
||||
</b-select>
|
||||
<button
|
||||
class="button is-white is-pulled-right"
|
||||
:aria-label="$i18n.get('edit')"
|
||||
@click.prevent="showEditStepOptions = true">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-edit has-text-secondary"/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="showEditStepOptions"
|
||||
class="is-flex">
|
||||
<b-input
|
||||
name="max_options"
|
||||
v-model="step"
|
||||
@input="onUpdate"
|
||||
type="number"
|
||||
step="1" />
|
||||
<button
|
||||
@click.prevent="showEditStepOptions = false"
|
||||
class="button is-white is-pulled-right">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('close'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-close has-text-secondary"/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</b-field>
|
||||
</template>
|
||||
<template v-if="inputMode == 'list'">
|
||||
<b-field :addons="false">
|
||||
<label class="label is-inline">
|
||||
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', '') }}<span> * </span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step')"
|
||||
:message="$i18n.getHelperMessage('tainacan-filter-numeric-interval', 'step')"/>
|
||||
</label>
|
||||
<a
|
||||
role="button"
|
||||
v-if="intervals.length == 0"
|
||||
@click="addInterval()"
|
||||
class="is-inline add-link">
|
||||
<span class="icon is-small">
|
||||
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
|
||||
<div
|
||||
v-if="!showEditStepOptions"
|
||||
class="is-flex">
|
||||
<b-select
|
||||
name="step_options"
|
||||
v-model="step"
|
||||
@input="onUpdate">
|
||||
<option value="0.001">0.001</option>
|
||||
<option value="0.01">0.01</option>
|
||||
<option value="0.1">0.1</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
<option value="100">100</option>
|
||||
<option value="1000">1000</option>
|
||||
<option
|
||||
v-if="step && ![0.001,0.01,0.1,1,2,5,10,100,1000].find( (element) => element == step )"
|
||||
:value="step">
|
||||
{{ step }}</option>
|
||||
</b-select>
|
||||
<button
|
||||
class="button is-white is-pulled-right"
|
||||
:aria-label="$i18n.get('edit')"
|
||||
@click.prevent="showEditStepOptions = true">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-edit has-text-secondary"/>
|
||||
</span>
|
||||
add new
|
||||
</a>
|
||||
<div
|
||||
v-for="(interval, index) of intervals"
|
||||
:key="index">
|
||||
<b-field label="c1">
|
||||
<b-input
|
||||
@input="onUpdate"
|
||||
v-model="interval.label" />
|
||||
</b-field>
|
||||
<b-field label="c2">
|
||||
<b-numberinput
|
||||
@input="onUpdate"
|
||||
v-model="interval.from" />
|
||||
</b-field>
|
||||
<b-field label="c3">
|
||||
<b-numberinput
|
||||
@input="onUpdate"
|
||||
v-model="interval.to" />
|
||||
</b-field>
|
||||
|
||||
<a
|
||||
role="button"
|
||||
@click="addInterval(index)"
|
||||
class="is-inline add-link">
|
||||
<span class="icon is-small">
|
||||
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
|
||||
</span>
|
||||
add new
|
||||
</a>
|
||||
|
||||
<a
|
||||
role="button"
|
||||
@click="removeInterval(index)"
|
||||
class="is-inline add-link">
|
||||
<span class="icon is-small">
|
||||
<i class="tainacan-icon has-text-secondary tainacan-icon-remove"/>
|
||||
</span>
|
||||
remove
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</b-field>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="showEditStepOptions"
|
||||
class="is-flex">
|
||||
<b-input
|
||||
name="max_options"
|
||||
v-model="step"
|
||||
@input="onUpdate"
|
||||
type="number"
|
||||
step="1" />
|
||||
<button
|
||||
@click.prevent="showEditStepOptions = false"
|
||||
class="button is-white is-pulled-right">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('close'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-close has-text-secondary"/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</b-field>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -169,43 +85,19 @@
|
|||
data() {
|
||||
return {
|
||||
step: [Number, String],
|
||||
inputMode: 'custom',
|
||||
showEditStepOptions: false,
|
||||
intervals: [],
|
||||
showEditStepOptions: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onUpdate() {
|
||||
this.$emit('input', {
|
||||
step: this.step,
|
||||
intervals: this.intervals,
|
||||
inputMode: this.inputMode
|
||||
step: this.step
|
||||
});
|
||||
},
|
||||
|
||||
removeInterval(index) {
|
||||
this.intervals.splice(index, 1);
|
||||
},
|
||||
addInterval(index) {
|
||||
if (index) {
|
||||
this.intervals.splice(index + 1, 0, {
|
||||
label: '',
|
||||
to: 0,
|
||||
from: 0
|
||||
})
|
||||
} else {
|
||||
this.intervals.push({
|
||||
label: '',
|
||||
to: 0,
|
||||
from: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.step = this.value && this.value.step ? this.value.step : 1;
|
||||
this.inputMode = this.value && this.value.inputMode ? this.value.inputMode : 'custom';
|
||||
this.intervals = this.value && this.value.intervals ? this.value.intervals : [];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,33 +1,19 @@
|
|||
<template>
|
||||
<div>
|
||||
<template v-if="options.inputMode == 'custom'">
|
||||
<b-numberinput
|
||||
:aria-labelledby="labelId"
|
||||
size="is-small"
|
||||
@input="validate_values()"
|
||||
:step="options.step"
|
||||
v-model="valueInit"/>
|
||||
<p class="is-size-7 has-text-centered is-marginless">{{ $i18n.get('label_until') }}</p>
|
||||
<b-numberinput
|
||||
:aria-labelledby="labelId"
|
||||
size="is-small"
|
||||
@input="validate_values()"
|
||||
:step="options.step"
|
||||
v-model="valueEnd"/>
|
||||
</template>
|
||||
<template v-if="options.inputMode == 'list'">
|
||||
<b-select
|
||||
placeholder="Select a name"
|
||||
@input="changeInterval"
|
||||
v-model="selectedInterval">
|
||||
<option
|
||||
v-for="(interval, index) in options.intervals"
|
||||
:value="index"
|
||||
:key="index">
|
||||
{{ interval.label }}
|
||||
</option>
|
||||
</b-select>
|
||||
</template>
|
||||
<b-numberinput
|
||||
:aria-labelledby="labelId"
|
||||
size="is-small"
|
||||
@input="validate_values()"
|
||||
:step="options.step"
|
||||
v-model="valueInit"/>
|
||||
<p class="is-size-7 has-text-centered is-marginless">{{ $i18n.get('label_until') }}</p>
|
||||
<b-numberinput
|
||||
:aria-labelledby="labelId"
|
||||
size="is-small"
|
||||
@input="validate_values()"
|
||||
:step="options.step"
|
||||
v-model="valueEnd"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -49,7 +35,6 @@
|
|||
collectionId: '',
|
||||
metadatum: '',
|
||||
options: [],
|
||||
selectedInterval: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -85,16 +70,6 @@
|
|||
if (filterTag.filterId == this.filter.id)
|
||||
this.clearSearch();
|
||||
},
|
||||
changeInterval() {
|
||||
if (this.selectedInterval !== '') {
|
||||
this.valueInit = this.options.intervals[this.selectedInterval].from;
|
||||
this.valueEnd = this.options.intervals[this.selectedInterval].to;
|
||||
this.emit();
|
||||
} else {
|
||||
this.clearSearch();
|
||||
}
|
||||
|
||||
},
|
||||
clearSearch(){
|
||||
|
||||
this.$emit('input', {
|
||||
|
|
@ -111,7 +86,7 @@
|
|||
// emit the operation for listeners
|
||||
emit() {
|
||||
let values = [ this.valueInit, this.valueEnd ];
|
||||
let type = ! Number.isInteger( this.valueInit ) || ! Number.isInteger( this.valueEnd ) ? 'DECIMAL' : 'NUMERIC';
|
||||
let type = ! Number.isInteger( this.valueInit ) || ! Number.isInteger( this.valueEnd ) ? 'DECIMAL(20,3)' : 'NUMERIC';
|
||||
|
||||
this.$emit('input', {
|
||||
type: type,
|
||||
|
|
@ -147,12 +122,6 @@
|
|||
value: this.valueInit + ' - ' + this.valueEnd
|
||||
});
|
||||
}
|
||||
|
||||
if (this.options.inputMode == 'list') {
|
||||
this.selectedInterval = this.options.intervals.findIndex(
|
||||
anInterval => anInterval.from == this.valueInit && anInterval.to == this.valueEnd
|
||||
);
|
||||
}
|
||||
|
||||
} else {
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -16,8 +16,7 @@ class Numeric_Interval extends Filter_Type {
|
|||
$this->set_use_max_options(false);
|
||||
$this->set_default_options([
|
||||
'step' => 1,
|
||||
'input-mode' => 'custom',
|
||||
'intervals' => []
|
||||
'input-mode' => 'custom'
|
||||
]);
|
||||
$this->set_preview_template('
|
||||
<div>
|
||||
|
|
@ -68,14 +67,9 @@ class Numeric_Interval extends Filter_Type {
|
|||
return [
|
||||
'step' => [
|
||||
'title' => __( 'Step', 'tainacan' ),
|
||||
'description' => __( 'The amount to be increased or decreased when clicking on filter control buttons.', 'tainacan' ),
|
||||
],
|
||||
'input-mode' => [
|
||||
'title' => __( 'Input mode', 'tainacan' ),
|
||||
'description' => __( 'Input mode', 'tainacan' ),
|
||||
'description' => __( 'The amount to be increased or decreased when clicking on filter control buttons. This alo defines whether the input accepts decimal numbers.', 'tainacan' ),
|
||||
],
|
||||
'custom' => ['title' => __('Custom interval','tainacan')],
|
||||
'list' => ['title' => __('Predefined intervals','tainacan')],
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue