Adjustments to numeric and date filters.
This commit is contained in:
parent
339b9f16f3
commit
999cb8bafb
|
@ -1032,6 +1032,7 @@ export default {
|
|||
|
||||
.column {
|
||||
overflow: visible;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-types-container {
|
||||
|
@ -1110,7 +1111,7 @@ export default {
|
|||
}
|
||||
.field {
|
||||
width: 100%;
|
||||
margin: 16px;
|
||||
margin: 6px;
|
||||
.label {
|
||||
color: $gray5;
|
||||
font-weight: normal;
|
||||
|
@ -1122,7 +1123,8 @@ export default {
|
|||
margin: 0.875rem 1.5rem;
|
||||
}
|
||||
|
||||
.numeric-filter-container {
|
||||
.numeric-filter-container,
|
||||
.date-filter-container {
|
||||
display: flex;
|
||||
.field { margin: 0; }
|
||||
.dropdown {
|
||||
|
@ -1130,7 +1132,7 @@ export default {
|
|||
|
||||
.dropdown-trigger button {
|
||||
padding: 0 0.5rem !important;
|
||||
height: 28px !important;
|
||||
height: 30px !important;
|
||||
|
||||
i:not(.tainacan-icon-arrowdown) {
|
||||
margin-top: -3px;
|
||||
|
@ -1143,6 +1145,10 @@ export default {
|
|||
display: block !important;
|
||||
}
|
||||
}
|
||||
.datepicker {
|
||||
flex-shrink: 0;
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -59,7 +59,7 @@
|
|||
}
|
||||
button,
|
||||
input {
|
||||
height: 28px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
button.is-primary,
|
||||
button.is-primary:hover,
|
||||
|
|
|
@ -64,8 +64,7 @@
|
|||
:aria-labelledby="labelId"
|
||||
:placeholder="$i18n.get('instruction_select_a_date')"
|
||||
v-model="value"
|
||||
@input="validate_values()"
|
||||
@focus="isTouched = true"
|
||||
@input="emit()"
|
||||
size="is-small"
|
||||
icon="calendar-today"/>
|
||||
</div>
|
||||
|
@ -73,14 +72,23 @@
|
|||
|
||||
<script>
|
||||
import { tainacan as axios } from '../../../js/axios/axios';
|
||||
import { wpAjax } from "../../../admin/js/mixins";
|
||||
import { wpAjax, dateInter } from "../../../admin/js/mixins";
|
||||
import moment from 'moment';
|
||||
|
||||
export default {
|
||||
mixins: [ wpAjax ],
|
||||
mixins: [ wpAjax, dateInter ],
|
||||
created() {
|
||||
let locale = navigator.language;
|
||||
|
||||
moment.locale(locale);
|
||||
|
||||
let localeData = moment.localeData();
|
||||
|
||||
this.dateFormat = localeData.longDateFormat('L');
|
||||
|
||||
this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id;
|
||||
this.metadatum = ( this.metadatum_id ) ? this.metadatum_id : (typeof this.filter.metadatum.metadatum_id == 'object' ? this.filter.metadatum.metadatum_id.metadatum_id : this.filter.metadatum.metadatum_id);
|
||||
this.options = this.filter.filter_type_options;
|
||||
// this.options = this.filter.filter_type_options;
|
||||
|
||||
let in_route = '/collection/' + this.collection + '/metadata/' + this.metadatum;
|
||||
|
||||
|
@ -111,7 +119,8 @@
|
|||
collection: '',
|
||||
metadatum: '',
|
||||
metadatum_object: {},
|
||||
comparator: '=' // =, !=, >, >=, <, <=
|
||||
comparator: '=', // =, !=, >, >=, <, <=
|
||||
dateFormat: '',
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
@ -138,16 +147,6 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
validate_values: _.debounce( function (){
|
||||
|
||||
if (this.value == undefined)
|
||||
this.value = new Date();
|
||||
else
|
||||
return;
|
||||
|
||||
this.emit();
|
||||
|
||||
}, 1000),
|
||||
selectedValues(){
|
||||
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
|
||||
return false;
|
||||
|
@ -158,7 +157,7 @@
|
|||
let metadata = this.query.metaquery[ index ];
|
||||
|
||||
if ( metadata.value && metadata.value.length > 0)
|
||||
this.value = Array.isArray(metadata.value) ? Number(metadata.value[0]) : Number(metadata.value);
|
||||
this.value = Array.isArray(metadata.value) ? new Date(metadata.value[0]) : new Date(metadata.value);
|
||||
|
||||
if ( metadata.compare)
|
||||
this.comparator = metadata.compare;
|
||||
|
@ -166,7 +165,7 @@
|
|||
if (this.value != undefined) {
|
||||
this.$eventBusSearch.$emit( 'sendValuesToTags', {
|
||||
filterId: this.filter.id,
|
||||
value: this.comparator + ' ' + this.value
|
||||
value: this.comparator + ' ' + this.parseDateToNavigatorLanguage(Array.isArray(metadata.value) ? metadata.value[0] : metadata.value)
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -197,8 +196,12 @@
|
|||
// emit the operation for listeners
|
||||
emit() {
|
||||
|
||||
if ( this.value === null || this.value === '')
|
||||
return;
|
||||
if ( this.value == undefined || this.value == null || this.value === '')
|
||||
this.value = new Date();
|
||||
|
||||
let valueQuery = this.value.getUTCFullYear() + '-' +
|
||||
('00' + (this.value.getUTCMonth() + 1)).slice(-2) + '-' +
|
||||
('00' + this.value.getUTCDate()).slice(-2);
|
||||
|
||||
this.$emit('input', {
|
||||
filter: 'date',
|
||||
|
@ -206,19 +209,23 @@
|
|||
compare: this.comparator,
|
||||
metadatum_id: this.metadatum,
|
||||
collection_id: ( this.collection_id ) ? this.collection_id : this.filter.collection_id,
|
||||
value: this.value
|
||||
value: valueQuery
|
||||
});
|
||||
|
||||
this.$eventBusSearch.$emit( 'sendValuesToTags', {
|
||||
filterId: this.filter.id,
|
||||
value: this.comparator + ' ' + this.value
|
||||
value: this.comparator + ' ' + this.parseDateToNavigatorLanguage(valueQuery)
|
||||
});
|
||||
|
||||
},
|
||||
onChangeComparator(newComparator) {
|
||||
this.comparator = newComparator;
|
||||
this.emit();
|
||||
}
|
||||
},
|
||||
parseDateToNavigatorLanguage(date) {
|
||||
date = new Date(date.replace(/-/g, '/'));
|
||||
return moment(date, moment.ISO_8601).format(this.dateFormat);
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$eventBusSearch.$off('removeFromFilterTag', this.cleanSearchFromTags);
|
||||
|
@ -230,14 +237,14 @@
|
|||
|
||||
.date-filter-container {
|
||||
display: flex;
|
||||
height: 28px;
|
||||
height: 30px;
|
||||
|
||||
.dropdown {
|
||||
width: auto;
|
||||
|
||||
.dropdown-trigger button {
|
||||
padding: 0 0.5rem !important;
|
||||
height: 28px !important;
|
||||
height: 30px !important;
|
||||
|
||||
i:not(.tainacan-icon-arrowdown) {
|
||||
margin-top: -3px;
|
||||
|
@ -247,10 +254,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-numberinput.is-grouped {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
|
@ -14,9 +14,6 @@ class Date extends Filter_Type {
|
|||
$this->set_component('tainacan-filter-date');
|
||||
$this->set_form_component('tainacan-filter-form-date');
|
||||
$this->set_use_max_options(false);
|
||||
$this->set_default_options([
|
||||
'step' => 1
|
||||
]);
|
||||
$this->set_preview_template('
|
||||
<div>
|
||||
<div>
|
||||
|
@ -44,41 +41,22 @@ class Date extends Filter_Type {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-numberinput field is-grouped">
|
||||
<p class="control">
|
||||
<button type="button" class="button is-primary is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-minus"></i>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
<div class="control is-small is-clearfix">
|
||||
<input type="number" step="0.01" class="input is-small" value="1.5">
|
||||
<div class="datepicker control is-small">
|
||||
<div class="dropdown is-bottom-left is-mobile-modal">
|
||||
<div role="button" class="dropdown-trigger">
|
||||
<div class="control has-icons-left is-small is-clearfix">
|
||||
<input type="text" autocomplete="off" placeholder="Select a date" class="input is-small">
|
||||
<span class="icon is-left is-small"><i class="mdi mdi-calendar-today"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="control">
|
||||
<button type="button" class="button is-primary is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
');
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
public function get_form_labels(){
|
||||
return [
|
||||
'step' => [
|
||||
'title' => __( 'Step', 'tainacan' ),
|
||||
'description' => __( 'The amount to be increased or decreased when clicking on filter control buttons.', 'tainacan' ),
|
||||
]
|
||||
];
|
||||
}
|
||||
/**
|
||||
* @param $filter
|
||||
* @return string
|
||||
|
@ -86,10 +64,9 @@ class Date extends Filter_Type {
|
|||
*/
|
||||
public function render( $filter ){
|
||||
return '<tainacan-filter-date
|
||||
step="' . $this->get_option('step') . '"
|
||||
name="'.$filter->get_name().'"
|
||||
collection_id="'.$filter->get_collection_id().'"
|
||||
metadatum_id="'.$filter->get_metadatum_id().'"></tainacan-filter-custom-interval>';
|
||||
metadatum_id="'.$filter->get_metadatum_id().'"></tainacan-filter-date>';
|
||||
}
|
||||
|
||||
|
||||
|
@ -101,12 +78,6 @@ class Date 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 [
|
||||
'step' => __('"Step" value is required','tainacan')
|
||||
];
|
||||
}
|
||||
|
||||
return true;
|
||||
return false;
|
||||
}
|
||||
}
|
|
@ -215,14 +215,14 @@
|
|||
|
||||
.numeric-filter-container {
|
||||
display: flex;
|
||||
height: 28px;
|
||||
height: 30px;
|
||||
|
||||
.dropdown {
|
||||
width: auto;
|
||||
|
||||
.dropdown-trigger button {
|
||||
padding: 0 0.5rem !important;
|
||||
height: 28px !important;
|
||||
height: 30px !important;
|
||||
|
||||
i:not(.tainacan-icon-arrowdown) {
|
||||
margin-top: -3px;
|
||||
|
|
|
@ -89,7 +89,7 @@ class Numeric extends Filter_Type {
|
|||
step="' . $this->get_option('step') . '"
|
||||
name="'.$filter->get_name().'"
|
||||
collection_id="'.$filter->get_collection_id().'"
|
||||
metadatum_id="'.$filter->get_metadatum_id().'"></tainacan-filter-custom-interval>';
|
||||
metadatum_id="'.$filter->get_metadatum_id().'"></tainacan-filter-numeric>';
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -97,7 +97,7 @@ class Filters extends TAINACAN_UnitTestCase {
|
|||
$Tainacan_Filters = \Tainacan\Repositories\Filters::get_instance();
|
||||
|
||||
$all_filter_types = $Tainacan_Filters->fetch_filter_types();
|
||||
$this->assertEquals( 8, count( $all_filter_types ) );
|
||||
$this->assertEquals( 9, count( $all_filter_types ) );
|
||||
|
||||
$float_filters = $Tainacan_Filters->fetch_supported_filter_types('float');
|
||||
$this->assertTrue( count( $float_filters ) > 0 );
|
||||
|
|
Loading…
Reference in New Issue