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

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

@ -2,156 +2,72 @@
<div> <div>
<b-field :addons="false"> <b-field :addons="false">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'input-mode') }}<span>&nbsp;*&nbsp;</span> {{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step') }}<span>&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-filter-numeric-interval', 'input-mode')" :title="$i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step')"
:message="$i18n.getHelperMessage('tainacan-filter-numeric-interval', 'input-mode')"/> :message="$i18n.getHelperMessage('tainacan-filter-numeric-interval', 'step')"/>
</label> </label>
<b-radio <div
v-model="inputMode" v-if="!showEditStepOptions"
name="inputMode" class="is-flex">
native-value="custom" <b-select
@input="onUpdate"> name="step_options"
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'custom') }} v-model="step"
</b-radio> @input="onUpdate">
<b-radio <option value="0.001">0.001</option>
v-model="inputMode" <option value="0.01">0.01</option>
name="inputMode" <option value="0.1">0.1</option>
native-value="list" <option value="1">1</option>
@input="onUpdate"> <option value="2">2</option>
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'list') }} <option value="5">5</option>
</b-radio> <option value="10">10</option>
</b-field> <option value="100">100</option>
<option value="1000">1000</option>
<template v-if="inputMode == 'custom'"> <option
<b-field :addons="false"> v-if="step && ![0.001,0.01,0.1,1,2,5,10,100,1000].find( (element) => element == step )"
<label class="label is-inline"> :value="step">
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step') }}<span>&nbsp;*&nbsp;</span> {{ step }}</option>
<help-button </b-select>
:title="$i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step')" <button
:message="$i18n.getHelperMessage('tainacan-filter-numeric-interval', 'step')"/> class="button is-white is-pulled-right"
</label> :aria-label="$i18n.get('edit')"
<div @click.prevent="showEditStepOptions = true">
v-if="!showEditStepOptions" <span
class="is-flex"> v-tooltip="{
<b-select content: $i18n.get('edit'),
name="step_options" autoHide: true,
v-model="step" placement: 'bottom'
@input="onUpdate"> }"
<option value="0.001">0.001</option> class="icon">
<option value="0.01">0.01</option> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-edit has-text-secondary"/>
<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>&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> </span>
&nbsp;add new </button>
</a> </div>
<div <div
v-for="(interval, index) of intervals" v-if="showEditStepOptions"
:key="index"> class="is-flex">
<b-field label="c1"> <b-input
<b-input name="max_options"
@input="onUpdate" v-model="step"
v-model="interval.label" /> @input="onUpdate"
</b-field> type="number"
<b-field label="c2"> step="1" />
<b-numberinput <button
@input="onUpdate" @click.prevent="showEditStepOptions = false"
v-model="interval.from" /> class="button is-white is-pulled-right">
</b-field> <span
<b-field label="c3"> v-tooltip="{
<b-numberinput content: $i18n.get('close'),
@input="onUpdate" autoHide: true,
v-model="interval.to" /> placement: 'bottom'
</b-field> }"
class="icon">
<a <i class="tainacan-icon tainacan-icon-18px tainacan-icon-close has-text-secondary"/>
role="button" </span>
@click="addInterval(index)" </button>
class="is-inline add-link"> </div>
<span class="icon is-small"> </b-field>
<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>

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

@ -1,33 +1,19 @@
<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" @input="validate_values()"
@input="validate_values()" :step="options.step"
:step="options.step" v-model="valueInit"/>
v-model="valueInit"/> <p class="is-size-7 has-text-centered is-marginless">{{ $i18n.get('label_until') }}</p>
<p class="is-size-7 has-text-centered is-marginless">{{ $i18n.get('label_until') }}</p> <b-numberinput
<b-numberinput :aria-labelledby="labelId"
:aria-labelledby="labelId" size="is-small"
size="is-small" @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,
@ -147,12 +122,6 @@
value: this.valueInit + ' - ' + this.valueEnd 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 { } 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')],
]; ];
} }