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-taginput' => __( 'Taxonomy Tag Input', 'tainacan' ),
'tainacan-filter-taxonomy-checkbox' => __( 'Taxonomy Check Box', 'tainacan' ), 'tainacan-filter-taxonomy-checkbox' => __( 'Taxonomy Check Box', 'tainacan' ),
'tainacan-filter-taxonomy-selectbox' => __( 'Taxonomy Select Box', 'tainacan' ), 'tainacan-filter-taxonomy-selectbox' => __( 'Taxonomy Select Box', 'tainacan' ),
'tainacan-filter-numeric-interval' => __( 'Numeric Interval', 'tainacan' ),
// Datepicker months // Datepicker months
'datepicker_month_january' => __( 'January', 'tainacan' ), 'datepicker_month_january' => __( 'January', 'tainacan' ),

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

@ -1,29 +1,5 @@
<template> <template>
<div> <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"> <b-field :addons="false">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step') }}<span>&nbsp;*&nbsp;</span> {{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step') }}<span>&nbsp;*&nbsp;</span>
@ -91,67 +67,7 @@
</button> </button>
</div> </div>
</b-field> </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> </div>
</template> </template>
@ -169,43 +85,19 @@
data() { data() {
return { return {
step: [Number, String], step: [Number, String],
inputMode: 'custom', showEditStepOptions: false
showEditStepOptions: false,
intervals: [],
} }
}, },
methods: { methods: {
onUpdate() { onUpdate() {
this.$emit('input', { this.$emit('input', {
step: this.step, step: this.step
intervals: this.intervals,
inputMode: this.inputMode
}); });
}, },
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() { created() {
this.step = this.value && this.value.step ? this.value.step : 1; 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> </script>

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

@ -1,6 +1,5 @@
<template> <template>
<div> <div>
<template v-if="options.inputMode == 'custom'">
<b-numberinput <b-numberinput
:aria-labelledby="labelId" :aria-labelledby="labelId"
size="is-small" size="is-small"
@ -14,20 +13,7 @@
@input="validate_values()" @input="validate_values()"
:step="options.step" :step="options.step"
v-model="valueEnd"/> 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> </div>
</template> </template>
@ -49,7 +35,6 @@
collectionId: '', collectionId: '',
metadatum: '', metadatum: '',
options: [], options: [],
selectedInterval: ''
} }
}, },
props: { props: {
@ -85,16 +70,6 @@
if (filterTag.filterId == this.filter.id) if (filterTag.filterId == this.filter.id)
this.clearSearch(); 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(){ clearSearch(){
this.$emit('input', { this.$emit('input', {
@ -111,7 +86,7 @@
// emit the operation for listeners // emit the operation for listeners
emit() { emit() {
let values = [ this.valueInit, this.valueEnd ]; 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', { this.$emit('input', {
type: type, 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 { } else {
return false; 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_use_max_options(false);
$this->set_default_options([ $this->set_default_options([
'step' => 1, 'step' => 1,
'input-mode' => 'custom', 'input-mode' => 'custom'
'intervals' => []
]); ]);
$this->set_preview_template(' $this->set_preview_template('
<div> <div>
@ -68,14 +67,9 @@ class Numeric_Interval extends Filter_Type {
return [ return [
'step' => [ 'step' => [
'title' => __( 'Step', 'tainacan' ), 'title' => __( 'Step', 'tainacan' ),
'description' => __( 'The amount to be increased or decreased when clicking on filter control buttons.', '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' ),
],
'input-mode' => [
'title' => __( 'Input mode', 'tainacan' ),
'description' => __( 'Input mode', 'tainacan' ),
], ],
'custom' => ['title' => __('Custom interval','tainacan')], 'custom' => ['title' => __('Custom interval','tainacan')],
'list' => ['title' => __('Predefined intervals','tainacan')],
]; ];
} }