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

Merge pull request #891 from tainacan/feature/886 

Adds options to select comparator in numeric and date default filters #886
This commit is contained in:
Mateus Machado Luna 2024-06-07 16:23:09 -03:00 committed by GitHub
parent eb7dae2c66 ce1e57c792
commit 1b18647dac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 303 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/admin/components/edition/filter-edition-form.vue
View File

@ -249,6 +249,7 @@ import { nextTick } from 'vue';
import { mapActions } from 'vuex';
import { formHooks } from "../../js/mixins";
import FormFilterDate from '../filter-types/date/FormDate.vue';
import FormFilterNumeric from '../filter-types/numeric/FormNumeric.vue';
import FormFilterNumericInterval from '../filter-types/numeric-interval/FormNumericInterval.vue';
import FormFilterNumericListInterval from '../filter-types/numeric-list-interval/FormNumericListInterval.vue';
@ -258,6 +259,7 @@ import FormFilterDatesIntersection from '../filter-types/dates-intersection/Form
export default {
name: 'FilterEditionForm',
components: {
'tainacan-filter-form-date': FormFilterDate,
'tainacan-filter-form-numeric': FormFilterNumeric,
'tainacan-filter-form-numeric-interval': FormFilterNumericInterval,
'tainacan-filter-form-numeric-list-interval': FormFilterNumericListInterval,

82
src/views/admin/components/filter-types/date/FormDate.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<div>
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-filter-date', 'comparators') }}<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-filter-date', 'comparators')"
:message="$i18n.getHelperMessage('tainacan-filter-date', 'comparators')" />
</label>
<div>
<b-checkbox
v-for="(comparatorObject, comparatorKey) in comparatorsObject"
:key="comparatorKey"
v-model="comparators"
:native-value="comparatorKey"
:disabled="comparators.indexOf(comparatorKey) >= 0 && comparators.length <= 1"
name="date_filter_options[comparators]"
@update:model-value="emitValues()">
<span v-html="comparatorObject.symbol + '&nbsp;' + comparatorObject.label" />
</b-checkbox>
</div>
</b-field>
</div>
</template>
<script>
export default {
props: {
modelValue: Object
},
emits: [
'update:model-value',
],
data() {
return {
comparatorsObject: Object,
comparators: Array
}
},
created() {
this.comparators = ( this.modelValue && this.modelValue.comparators ) ? this.modelValue.comparators : [ '=', '!=', '>', '>=', '<', '<=' ];
this.comparatorsObject = {
'=': {
symbol: '&#61;',
label: this.$i18n.get('is_equal_to'),
enabled: this.comparators.indexOf('=') < 0 ? 'no' : 'yes'
},
'!=': {
symbol: '&#8800;',
label: this.$i18n.get('is_not_equal_to'),
enabled: this.comparators.indexOf('!=') < 0 ? 'no' : 'yes'
},
'>': {
symbol: '&#62;',
label: this.$i18n.get('greater_than'),
enabled: this.comparators.indexOf('>') < 0 ? 'no' : 'yes'
},
'>=': {
symbol: '&#8805;',
label: this.$i18n.get('greater_than_or_equal_to'),
enabled: this.comparators.indexOf('>=') < 0 ? 'no' : 'yes'
},
'<': {
symbol: '&#60;',
label: this.$i18n.get('less_than'),
enabled: this.comparators.indexOf('<') < 0 ? 'no' : 'yes'
},
'<=': {
symbol: '&#8804;',
label: this.$i18n.get('less_than_or_equal_to'),
enabled: this.comparators.indexOf('<=') < 0 ? 'no' : 'yes'
}
};
},
methods: {
emitValues() {
this.$emit('update:model-value', { comparators: this.comparators });
}
}
}
</script>

105
src/views/admin/components/filter-types/date/TainacanFilterDate.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="date-filter-container">
<b-dropdown
v-if="filterTypeOptions.comparators.length > 1"
:mobile-modal="true"
aria-role="list"
trap-focus
@ -10,55 +11,24 @@
:aria-label="$i18n.get('label_comparator')"
class="button is-white">
<span class="icon is-small">
<i v-html="comparatorSymbol" />
<i v-html="comparatorsObject[comparator].symbol" />
</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span>
</button>
</template>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '=' }"
:value="'='"
aria-role="listitem">
&#61;&nbsp; {{ $i18n.get('is_equal_to') }}
</b-dropdown-item>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '!=' }"
:value="'!='"
aria-role="listitem">
&#8800;&nbsp; {{ $i18n.get('is_not_equal_to') }}
</b-dropdown-item>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '>' }"
:value="'>'"
aria-role="listitem">
&#62;&nbsp; {{ $i18n.get('after') }}
</b-dropdown-item>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '>=' }"
:value="'>='"
aria-role="listitem">
&#8805;&nbsp; {{ $i18n.get('after_or_on_day') }}
</b-dropdown-item>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '<' }"
:value="'<'"
aria-role="listitem">
&#60;&nbsp; {{ $i18n.get('before') }}
</b-dropdown-item>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '<=' }"
:value="'<='"
aria-role="listitem">
&#8804;&nbsp; {{ $i18n.get('before_or_on_day') }}
</b-dropdown-item>
<template
v-for="(comparatorObject, comparatorKey) in comparatorsObject"
:key="comparatorKey">
<b-dropdown-item
v-if="comparatorObject.enabled == 'yes'"
role="button"
:class="{ 'is-active': comparator == comparatorKey }"
:value="comparatorKey"
aria-role="listitem"
v-html="comparatorObject.symbol + '&nbsp;' + comparatorObject.label" />
</template>
</b-dropdown>
<b-datepicker
v-model="value"
@ -111,26 +81,16 @@
emits: [
'input',
],
data(){
data() {
return {
value: null,
comparatorsObject: [],
comparator: '=', // =, !=, >, >=, <, <=
}
},
computed: {
yearsOnlyValue() {
return this.value && typeof this.value.getUTCFullYear === 'function' ? this.value.getUTCFullYear() : null
},
comparatorSymbol() {
switch(this.comparator) {
case '=': return '&#61;';
case '!=': return '&#8800;';
case '>': return '&#62;';
case '>=': return '&#8805;';
case '<': return '&#60;';
case '<=': return '&#8804;';
default: return '';
}
}
},
watch: {
@ -141,6 +101,41 @@
deep: true,
},
},
created() {
this.comparatorsObject = {
'=': {
symbol: '&#61;',
label: this.$i18n.get('is_equal_to'),
enabled: this.filterTypeOptions.comparators.indexOf('=') < 0 ? 'no' : 'yes'
},
'!=': {
symbol: '&#8800;',
label: this.$i18n.get('is_not_equal_to'),
enabled: this.filterTypeOptions.comparators.indexOf('!=') < 0 ? 'no' : 'yes'
},
'>': {
symbol: '&#62;',
label: this.$i18n.get('after'),
enabled: this.filterTypeOptions.comparators.indexOf('>') < 0 ? 'no' : 'yes'
},
'>=': {
symbol: '&#8805;',
label: this.$i18n.get('after_or_on_day'),
enabled: this.filterTypeOptions.comparators.indexOf('>=') < 0 ? 'no' : 'yes'
},
'<': {
symbol: '&#60;',
label: this.$i18n.get('before'),
enabled: this.filterTypeOptions.comparators.indexOf('<') < 0 ? 'no' : 'yes'
},
'<=': {
symbol: '&#8804;',
label: this.$i18n.get('before_or_on_day'),
enabled: this.filterTypeOptions.comparators.indexOf('<=') < 0 ? 'no' : 'yes'
},
};
this.comparator = this.filterTypeOptions.comparators[0];
},
mounted() {
this.updateSelectedValues();
},

38
src/views/admin/components/filter-types/date/class-tainacan-date.php
View File

@ -13,7 +13,11 @@ class Date extends Filter_Type {
$this->set_name( __('Date', 'tainacan') );
$this->set_supported_types(['date']);
$this->set_component('tainacan-filter-date');
$this->set_form_component('tainacan-filter-form-date');
$this->set_use_max_options(false);
$this->set_default_options([
'comparators' => [ '=', '!=', '>', '>=', '<', '<=' ]
]);
$this->set_preview_template('
<div>
<div>
@ -57,6 +61,40 @@ class Date extends Filter_Type {
');
}
/**
* @inheritdoc
*/
public function get_form_labels(){
return [
'comparators' => [
'title' => __( 'Enabled comparators', 'tainacan' ),
'description' => __( 'A list of comparators to be available in the filter, such as equal, greater than, smaller than, etc.', 'tainacan' ),
]
];
}
/**
* @param \Tainacan\Entities\Filter $filter
* @return array|bool true if is validate or array if has error
*/
public function validate_options(\Tainacan\Entities\Filter $filter) {
if ( !in_array($filter->get_status(), apply_filters('tainacan-status-require-validation', ['publish','future','private'])) )
return true;
if ( empty( $this->get_option('comparators') ) )
return [
'comparators' => __('"Comparators" array is required', 'tainacan')
];
if ( count( $this->get_option('comparators') ) < 1 )
return [
'comparators' => __('At least one comparator should be provided', 'tainacan')
];
return true;
}
}
class Date_Helper {

65
src/views/admin/components/filter-types/numeric/FormNumeric.vue
View File

@ -13,7 +13,7 @@
<b-select
v-model="step"
name="step_options"
@update:model-value="onUpdateStep">
@update:model-value="emitValues()">
<option value="0.001">
0.001
</option>
@ -70,7 +70,7 @@
name="max_options"
type="number"
step="1"
@update:model-value="onUpdateStep" />
@update:model-value="emitValues()" />
<button
class="button is-white is-pulled-right"
@click.prevent="showEditStepOptions = false">
@ -87,6 +87,26 @@
</button>
</div>
</b-field>
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-filter-numeric', 'comparators') }}<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-filter-numeric', 'comparators')"
:message="$i18n.getHelperMessage('tainacan-filter-numeric', 'comparators')" />
</label>
<div>
<b-checkbox
v-for="(comparatorObject, comparatorKey) in comparatorsObject"
:key="comparatorKey"
v-model="comparators"
:native-value="comparatorKey"
:disabled="comparators.indexOf(comparatorKey) >= 0 && comparators.length <= 1"
name="numeric_filter_options[comparators]"
@update:model-value="emitValues()">
<span v-html="comparatorObject.symbol + '&nbsp;' + comparatorObject.label" />
</b-checkbox>
</div>
</b-field>
</div>
</template>
@ -102,15 +122,50 @@
data() {
return {
step: [Number, String],
showEditStepOptions: false
showEditStepOptions: false,
comparatorsObject: Object,
comparators: Array
}
},
created() {
this.step = this.modelValue && this.modelValue.step ? this.modelValue.step : 1;
this.comparators = ( this.modelValue && this.modelValue.comparators ) ? this.modelValue.comparators : [ '=', '!=', '>', '>=', '<', '<=' ];
this.comparatorsObject = {
'=': {
symbol: '&#61;',
label: this.$i18n.get('is_equal_to'),
enabled: this.comparators.indexOf('=') < 0 ? 'no' : 'yes'
},
'!=': {
symbol: '&#8800;',
label: this.$i18n.get('is_not_equal_to'),
enabled: this.comparators.indexOf('!=') < 0 ? 'no' : 'yes'
},
'>': {
symbol: '&#62;',
label: this.$i18n.get('after'),
enabled: this.comparators.indexOf('>') < 0 ? 'no' : 'yes'
},
'>=': {
symbol: '&#8805;',
label: this.$i18n.get('after_or_on_day'),
enabled: this.comparators.indexOf('>=') < 0 ? 'no' : 'yes'
},
'<': {
symbol: '&#60;',
label: this.$i18n.get('before'),
enabled: this.comparators.indexOf('<') < 0 ? 'no' : 'yes'
},
'<=': {
symbol: '&#8804;',
label: this.$i18n.get('before_or_on_day'),
enabled: this.comparators.indexOf('<=') < 0 ? 'no' : 'yes'
}
};
},
methods: {
onUpdateStep(modelValue) {
this.$emit('update:model-value', { step: modelValue });
emitValues() {
this.$emit('update:model-value', { step: this.step, comparators: this.comparators });
}
}
}

105
src/views/admin/components/filter-types/numeric/TainacanFilterNumeric.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="numeric-filter-container">
<b-dropdown
v-if="filterTypeOptions.comparators.length > 1"
:mobile-modal="true"
aria-role="list"
trap-focus
@ -10,57 +11,25 @@
:aria-label="$i18n.get('label_comparator')"
class="button is-white">
<span class="icon is-small">
<i v-html="comparatorSymbol" />
<i v-html="comparatorsObject[comparator].symbol" />
</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span>
</button>
</template>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '=' }"
:value="'='"
aria-role="listitem">
&#61;&nbsp; {{ $i18n.get('is_equal_to') }}
</b-dropdown-item>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '!=' }"
:value="'!='"
aria-role="listitem">
&#8800;&nbsp; {{ $i18n.get('is_not_equal_to') }}
</b-dropdown-item>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '>' }"
:value="'>'"
aria-role="listitem">
&#62;&nbsp; {{ $i18n.get('greater_than') }}
</b-dropdown-item>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '>=' }"
:value="'>='"
aria-role="listitem">
&#8805;&nbsp; {{ $i18n.get('greater_than_or_equal_to') }}
</b-dropdown-item>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '<' }"
:value="'<'"
aria-role="listitem">
&#60;&nbsp; {{ $i18n.get('less_than') }}
</b-dropdown-item>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '<=' }"
:value="'<='"
aria-role="listitem">
&#8804;&nbsp; {{ $i18n.get('less_than_or_equal_to') }}
</b-dropdown-item>
<template
v-for="(comparatorObject, comparatorKey) in comparatorsObject"
:key="comparatorKey">
<b-dropdown-item
v-if="comparatorObject.enabled == 'yes'"
role="button"
:class="{ 'is-active': comparator == comparatorKey }"
:value="comparatorKey"
aria-role="listitem"
v-html="comparatorObject.symbol + '&nbsp;' + comparatorObject.label" />
</template>
</b-dropdown>
<b-numberinput
v-model="value"
:aria-labelledby="'filter-label-id-' + filter.id"
@ -89,19 +58,6 @@
comparator: '=' // =, !=, >, >=, <, <=
}
},
computed: {
comparatorSymbol() {
switch(this.comparator) {
case '=': return '&#61;';
case '!=': return '&#8800;';
case '>': return '&#62;';
case '>=': return '&#8805;';
case '<': return '&#60;';
case '<=': return '&#8804;';
default: return '';
}
}
},
watch: {
'query': {
handler() {
@ -110,6 +66,41 @@
deep: true
}
},
created() {
this.comparatorsObject = {
'=': {
symbol: '&#61;',
label: this.$i18n.get('is_equal_to'),
enabled: this.filterTypeOptions.comparators.indexOf('=') < 0 ? 'no' : 'yes'
},
'!=': {
symbol: '&#8800;',
label: this.$i18n.get('is_not_equal_to'),
enabled: this.filterTypeOptions.comparators.indexOf('!=') < 0 ? 'no' : 'yes'
},
'>': {
symbol: '&#62;',
label: this.$i18n.get('greater_than'),
enabled: this.filterTypeOptions.comparators.indexOf('>') < 0 ? 'no' : 'yes'
},
'>=': {
symbol: '&#8805;',
label: this.$i18n.get('greater_than_or_equal_to'),
enabled: this.filterTypeOptions.comparators.indexOf('>=') < 0 ? 'no' : 'yes'
},
'<': {
symbol: '&#60;',
label: this.$i18n.get('less_than'),
enabled: this.filterTypeOptions.comparators.indexOf('<') < 0 ? 'no' : 'yes'
},
'<=': {
symbol: '&#8804;',
label: this.$i18n.get('less_than_or_equal_to'),
enabled: this.filterTypeOptions.comparators.indexOf('<=') < 0 ? 'no' : 'yes'
},
};
this.comparator = this.filterTypeOptions.comparators[0];
},
mounted() {
this.updateSelectedValues();
},

28
src/views/admin/components/filter-types/numeric/class-tainacan-numeric.php
View File

@ -16,7 +16,8 @@ class Numeric extends Filter_Type {
$this->set_form_component('tainacan-filter-form-numeric');
$this->set_use_max_options(false);
$this->set_default_options([
'step' => 1
'step' => 1,
'comparators' => [ '=', '!=', '>', '>=', '<', '<=' ]
]);
$this->set_preview_template('
<div>
@ -77,6 +78,10 @@ class Numeric extends Filter_Type {
'step' => [
'title' => __( 'Step', 'tainacan' ),
'description' => __( 'The amount to be increased or decreased when clicking on the filter control buttons. This also defines whether the input accepts decimal numbers.', 'tainacan' ),
],
'comparators' => [
'title' => __( 'Enabled comparators', 'tainacan' ),
'description' => __( 'A list of comparators to be available in the filter, such as equal, greater than, smaller than, etc.', 'tainacan' ),
]
];
}
@ -89,13 +94,24 @@ class Numeric extends Filter_Type {
if ( !in_array($filter->get_status(), apply_filters('tainacan-status-require-validation', ['publish','future','private'])) )
return true;
if ( empty($this->get_option('step')) ) {
return [
$errors = [];
if ( empty($this->get_option('step')) )
$errors[] = [
'step' => __('"Step" value is required','tainacan')
];
}
return true;
if ( empty($this->get_option('comparators')) )
$errors[] = [
'comparators' => __('"Comparators" array is required', 'tainacan')
];
if ( count( $this->get_option('comparators') ) < 1 )
$errors[] = [
'comparators' => __('At least one comparator should be provided', 'tainacan')
];
return count($errors) ? $errors : true;
}
}
@ -134,6 +150,8 @@ class Numeric_Helper {
case '<=':
$filter_arguments['label'] = '&#8804; ' . $filter_arguments['label'][0];
break;
default:
$filter_arguments['label'] = $filter_arguments['label'][0];
}
}