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

Added comparators options to numeric filter as well. #886.

This commit is contained in:
mateuswetah 2024-06-03 17:01:53 -03:00
parent 658789e2bb
commit ce1e57c792
5 changed files with 168 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/views/admin/components/filter-types/date/FormDate.vue
View File

@ -14,7 +14,7 @@
v-model="comparators" v-model="comparators"
:native-value="comparatorKey" :native-value="comparatorKey"
:disabled="comparators.indexOf(comparatorKey) >= 0 && comparators.length <= 1" :disabled="comparators.indexOf(comparatorKey) >= 0 && comparators.length <= 1"
name="metadata_type_relationship[display_related_item_metadata]" name="date_filter_options[comparators]"
@update:model-value="emitValues()"> @update:model-value="emitValues()">
<span v-html="comparatorObject.symbol + '&nbsp;' + comparatorObject.label" /> <span v-html="comparatorObject.symbol + '&nbsp;' + comparatorObject.label" />
</b-checkbox> </b-checkbox>
@ -41,41 +41,40 @@
created() { created() {
this.comparators = ( this.modelValue && this.modelValue.comparators ) ? this.modelValue.comparators : [ '=', '!=', '>', '>=', '<', '<=' ]; this.comparators = ( this.modelValue && this.modelValue.comparators ) ? this.modelValue.comparators : [ '=', '!=', '>', '>=', '<', '<=' ];
this.comparatorsObject = { this.comparatorsObject = {
'=': { '=': {
symbol: '&#61;', symbol: '&#61;',
label: this.$i18n.get('is_equal_to'), label: this.$i18n.get('is_equal_to'),
enabled: this.comparators.indexOf('=') < 0 ? 'no' : 'yes' enabled: this.comparators.indexOf('=') < 0 ? 'no' : 'yes'
}, },
'!=': { '!=': {
symbol: '&#8800;', symbol: '&#8800;',
label: this.$i18n.get('is_not_equal_to'), label: this.$i18n.get('is_not_equal_to'),
enabled: this.comparators.indexOf('!=') < 0 ? 'no' : 'yes' enabled: this.comparators.indexOf('!=') < 0 ? 'no' : 'yes'
}, },
'>': { '>': {
symbol: '&#62;', symbol: '&#62;',
label: this.$i18n.get('after'), label: this.$i18n.get('greater_than'),
enabled: this.comparators.indexOf('>') < 0 ? 'no' : 'yes' enabled: this.comparators.indexOf('>') < 0 ? 'no' : 'yes'
}, },
'>=': { '>=': {
symbol: '&#8805;', symbol: '&#8805;',
label: this.$i18n.get('after_or_on_day'), label: this.$i18n.get('greater_than_or_equal_to'),
enabled: this.comparators.indexOf('>=') < 0 ? 'no' : 'yes' enabled: this.comparators.indexOf('>=') < 0 ? 'no' : 'yes'
}, },
'<': { '<': {
symbol: '&#60;', symbol: '&#60;',
label: this.$i18n.get('before'), label: this.$i18n.get('less_than'),
enabled: this.comparators.indexOf('<') < 0 ? 'no' : 'yes' enabled: this.comparators.indexOf('<') < 0 ? 'no' : 'yes'
}, },
'<=': { '<=': {
symbol: '&#8804;', symbol: '&#8804;',
label: this.$i18n.get('before_or_on_day'), label: this.$i18n.get('less_than_or_equal_to'),
enabled: this.comparators.indexOf('<=') < 0 ? 'no' : 'yes' enabled: this.comparators.indexOf('<=') < 0 ? 'no' : 'yes'
} }
}; };
}, },
methods: { methods: {
emitValues() { emitValues() {
console.log(this.comparators)
this.$emit('update:model-value', { comparators: this.comparators }); this.$emit('update:model-value', { comparators: this.comparators });
} }
} }

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

@ -87,6 +87,11 @@ class Date extends Filter_Type {
'comparators' => __('"Comparators" array is required', 'tainacan') '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; return true;
} }

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

@ -13,7 +13,7 @@
<b-select <b-select
v-model="step" v-model="step"
name="step_options" name="step_options"
@update:model-value="onUpdateStep"> @update:model-value="emitValues()">
<option value="0.001"> <option value="0.001">
0.001 0.001
</option> </option>
@ -70,7 +70,7 @@
name="max_options" name="max_options"
type="number" type="number"
step="1" step="1"
@update:model-value="onUpdateStep" /> @update:model-value="emitValues()" />
<button <button
class="button is-white is-pulled-right" class="button is-white is-pulled-right"
@click.prevent="showEditStepOptions = false"> @click.prevent="showEditStepOptions = false">
@ -87,6 +87,26 @@
</button> </button>
</div> </div>
</b-field> </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> </div>
</template> </template>
@ -102,15 +122,50 @@
data() { data() {
return { return {
step: [Number, String], step: [Number, String],
showEditStepOptions: false showEditStepOptions: false,
comparatorsObject: Object,
comparators: Array
} }
}, },
created() { created() {
this.step = this.modelValue && this.modelValue.step ? this.modelValue.step : 1; 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: { methods: {
onUpdateStep(modelValue) { emitValues() {
this.$emit('update:model-value', { step: modelValue }); 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> <template>
<div class="numeric-filter-container"> <div class="numeric-filter-container">
<b-dropdown <b-dropdown
v-if="filterTypeOptions.comparators.length > 1"
:mobile-modal="true" :mobile-modal="true"
aria-role="list" aria-role="list"
trap-focus trap-focus
@ -10,57 +11,25 @@
:aria-label="$i18n.get('label_comparator')" :aria-label="$i18n.get('label_comparator')"
class="button is-white"> class="button is-white">
<span class="icon is-small"> <span class="icon is-small">
<i v-html="comparatorSymbol" /> <i v-html="comparatorsObject[comparator].symbol" />
</span> </span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span> </span>
</button> </button>
</template> </template>
<b-dropdown-item <template
role="button" v-for="(comparatorObject, comparatorKey) in comparatorsObject"
:class="{ 'is-active': comparator == '=' }" :key="comparatorKey">
:value="'='" <b-dropdown-item
aria-role="listitem"> v-if="comparatorObject.enabled == 'yes'"
&#61;&nbsp; {{ $i18n.get('is_equal_to') }} role="button"
</b-dropdown-item> :class="{ 'is-active': comparator == comparatorKey }"
<b-dropdown-item :value="comparatorKey"
role="button" aria-role="listitem"
:class="{ 'is-active': comparator == '!=' }" v-html="comparatorObject.symbol + '&nbsp;' + comparatorObject.label" />
:value="'!='" </template>
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>
</b-dropdown> </b-dropdown>
<b-numberinput <b-numberinput
v-model="value" v-model="value"
:aria-labelledby="'filter-label-id-' + filter.id" :aria-labelledby="'filter-label-id-' + filter.id"
@ -89,19 +58,6 @@
comparator: '=' // =, !=, >, >=, <, <= 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: { watch: {
'query': { 'query': {
handler() { handler() {
@ -110,6 +66,41 @@
deep: true 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() { mounted() {
this.updateSelectedValues(); 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_form_component('tainacan-filter-form-numeric');
$this->set_use_max_options(false); $this->set_use_max_options(false);
$this->set_default_options([ $this->set_default_options([
'step' => 1 'step' => 1,
'comparators' => [ '=', '!=', '>', '>=', '<', '<=' ]
]); ]);
$this->set_preview_template(' $this->set_preview_template('
<div> <div>
@ -77,6 +78,10 @@ class Numeric extends Filter_Type {
'step' => [ 'step' => [
'title' => __( 'Step', 'tainacan' ), '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' ), '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'])) ) if ( !in_array($filter->get_status(), apply_filters('tainacan-status-require-validation', ['publish','future','private'])) )
return true; return true;
if ( empty($this->get_option('step')) ) { $errors = [];
return [
if ( empty($this->get_option('step')) )
$errors[] = [
'step' => __('"Step" value is required','tainacan') '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 '<=': case '<=':
$filter_arguments['label'] = '&#8804; ' . $filter_arguments['label'][0]; $filter_arguments['label'] = '&#8804; ' . $filter_arguments['label'][0];
break; break;
default:
$filter_arguments['label'] = $filter_arguments['label'][0];
} }
} }