Merge pull request #891 from tainacan/feature/886

Adds options to select comparator in numeric and date default filters #886

src/views/admin/components/edition/filter-edition-form.vue

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

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

@@ -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>

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

@@ -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
+            <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('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>
         </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();
         },

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

@@ -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 {

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

@@ -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) {
+            emitValues() {
-                this.$emit('update:model-value', { step: modelValue });
+                this.$emit('update:model-value', { step: this.step, comparators: this.comparators });
             }
         }
     }

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

@@ -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
+            <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-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();
         },

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

@@ -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')) ) {
+		$errors = [];
-			return [
+
+		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];
 			}
 		}