Adjustments to numeric and date filters.

This commit is contained in:
Mateus Machado Luna 2019-06-04 15:22:41 -03:00
parent 339b9f16f3
commit 999cb8bafb
7 changed files with 57 additions and 77 deletions

View File

@ -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%;
}
}
}

View File

@ -59,7 +59,7 @@
}
button,
input {
height: 28px !important;
height: 30px !important;
}
button.is-primary,
button.is-primary:hover,

View File

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

View File

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

View File

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

View File

@ -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>';
}

View File

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