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

Custom numeric interval filter #306

This commit is contained in:
Leo Germani 2019-10-02 16:47:12 -03:00
parent 8083ba45d2
commit c8c6b7113c
4 changed files with 83 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/admin/tainacan-admin-i18n.php
View File

@ -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' ),

112
src/classes/filter-types/numeric-interval/FormNumericInterval.vue
View File

@ -1,29 +1,5 @@
<template>
<div>
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'input-mode') }}<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-filter-numeric-interval', 'input-mode')"
:message="$i18n.getHelperMessage('tainacan-filter-numeric-interval', 'input-mode')"/>
</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>&nbsp;*&nbsp;</span>
@ -91,67 +67,7 @@
</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>&nbsp;*&nbsp;</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"/>
</span>
&nbsp;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>
&nbsp;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>
&nbsp;remove
</a>
</div>
</b-field>
</template>
</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>

35
src/classes/filter-types/numeric-interval/NumericInterval.vue
View File

@ -1,6 +1,5 @@
<template>
<div>
<template v-if="options.inputMode == 'custom'">
<b-numberinput
:aria-labelledby="labelId"
size="is-small"
@ -14,20 +13,7 @@
@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>
</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,
@ -148,12 +123,6 @@
});
}
if (this.options.inputMode == 'list') {
this.selectedInterval = this.options.intervals.findIndex(
anInterval => anInterval.from == this.valueInit && anInterval.to == this.valueEnd
);
}
} else {
return false;
}

10
src/classes/filter-types/numeric-interval/class-tainacan-numeric-interval.php
View File

@ -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')],
];
}