show placeholder on clean search ( Custom interval and select ) filter type
This commit is contained in:
eduardohumberto
parent
b5e9c8fcbc
commit
36815880c0
|
|
@ -7,6 +7,7 @@
|
|||
:class="{'has-content': date_init !== undefined && date_init !== ''}"
|
||||
v-model="date_init"
|
||||
size="is-small"
|
||||
@focus="isTouched = true"
|
||||
@input="validate_values()"
|
||||
icon="calendar-today"/>
|
||||
<b-datepicker
|
||||
|
|
@ -20,8 +21,8 @@
|
|||
</div>
|
||||
|
||||
<!-- Numeric -->
|
||||
<div
|
||||
class="columns"
|
||||
<div
|
||||
class="columns"
|
||||
v-else>
|
||||
<b-input
|
||||
:class="{'has-content': value_init !== undefined && value_init !== ''}"
|
||||
|
|
@ -39,11 +40,11 @@
|
|||
class="column"
|
||||
v-model="value_end"/>
|
||||
</div>
|
||||
<ul
|
||||
<ul
|
||||
class="selected-list-box"
|
||||
v-if="isValid && !clear">
|
||||
<li>
|
||||
<b-tag
|
||||
<b-tag
|
||||
attached
|
||||
closable
|
||||
@close="clearSearch()">
|
||||
|
|
@ -100,27 +101,38 @@
|
|||
id: '',
|
||||
query: Object
|
||||
},
|
||||
watch: {
|
||||
isTouched( val ){
|
||||
if ( val && this.date_init === null)
|
||||
this.date_init = new Date();
|
||||
|
||||
if ( val && this.date_end === null)
|
||||
this.date_end = new Date();
|
||||
|
||||
this.isTouched = val;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// only validate if the first value is higher than first
|
||||
validate_values(){
|
||||
if( this.type === 'date' ){
|
||||
if (this.date_init == undefined)
|
||||
if (this.date_init === undefined)
|
||||
this.date_init = new Date();
|
||||
|
||||
if (this.date_end == undefined)
|
||||
if (this.date_end === undefined)
|
||||
this.date_end = new Date();
|
||||
|
||||
if ( this.date_init > this.date_end ) {
|
||||
let result = this.date_init;
|
||||
result.setDate(result.getDate() + 1);
|
||||
this.date_end = result;
|
||||
|
||||
result.setDate(result.getDate() - 1);
|
||||
this.date_init = result;
|
||||
//this.error_message();
|
||||
}
|
||||
|
||||
} else {
|
||||
this.value_end = (this.value_end === null) ? 0 : this.value_end;
|
||||
this.value_init = (this.value_init === null) ? 0 : this.value_init;
|
||||
|
||||
} else {
|
||||
if ( parseFloat( this.value_init ) > parseFloat( this.value_end )) {
|
||||
this.value_end = parseFloat( this.value_init ) + 1;
|
||||
//this.error_message();
|
||||
|
|
@ -163,11 +175,13 @@
|
|||
},
|
||||
showSearch(){
|
||||
if( this.type === 'date' ){
|
||||
let date_init = ('00' + this.date_init.getUTCDate()).slice(-2) + '/' + ('00' + (this.date_init.getUTCMonth() + 1)).slice(-2)
|
||||
+ '/' + this.date_init.getUTCFullYear();
|
||||
let date_end = ('00' + this.date_end.getUTCDate()).slice(-2) + '/' + ('00' + (this.date_end.getUTCMonth() + 1)).slice(-2)
|
||||
+ '/' + this.date_end.getUTCFullYear();
|
||||
return date_init + ' - ' + date_end;
|
||||
|
||||
if( this.date_init === null || this.date_end === null ){
|
||||
this.clear = true;
|
||||
return '';
|
||||
}
|
||||
|
||||
return this.date_init.toLocaleString().split(' ')[0] + ' - ' + this.date_end.toLocaleString().split(' ')[0];
|
||||
} else {
|
||||
return this.value_init + ' - ' +this.value_end;
|
||||
}
|
||||
|
|
@ -183,10 +197,15 @@
|
|||
value: ''
|
||||
});
|
||||
|
||||
// if( this.type === 'date' ){
|
||||
// this.date_init = undefined;
|
||||
// this.date_end = undefined;
|
||||
// }
|
||||
if( this.type === 'date' ){
|
||||
this.date_init = null;
|
||||
this.date_end = null;
|
||||
this.isTouched = false;
|
||||
} else {
|
||||
this.value_end = null;
|
||||
this.value_init = null;
|
||||
this.isTouched = false;
|
||||
}
|
||||
},
|
||||
|
||||
// emit the operation for listeners
|
||||
|
|
@ -195,21 +214,41 @@
|
|||
let type = '';
|
||||
|
||||
if( vm.type === 'date' ){
|
||||
let date_init = vm.date_init.getUTCFullYear() + '-' +
|
||||
('00' + (vm.date_init.getUTCMonth() + 1)).slice(-2) + '-' +
|
||||
('00' + vm.date_init.getUTCDate()).slice(-2);
|
||||
let date_end = vm.date_end.getUTCFullYear() + '-' +
|
||||
('00' + (vm.date_end.getUTCMonth() + 1)).slice(-2) + '-' +
|
||||
('00' + vm.date_end.getUTCDate()).slice(-2);
|
||||
values = [ date_init, date_end ];
|
||||
type = 'DATE';
|
||||
|
||||
if( vm.date_init === null && vm.date_end === null ){
|
||||
values = [];
|
||||
type = 'DATE';
|
||||
vm.isValid = false;
|
||||
vm.clear = true;
|
||||
} else {
|
||||
let date_init = vm.date_init.getUTCFullYear() + '-' +
|
||||
('00' + (vm.date_init.getUTCMonth() + 1)).slice(-2) + '-' +
|
||||
('00' + vm.date_init.getUTCDate()).slice(-2);
|
||||
let date_end = vm.date_end.getUTCFullYear() + '-' +
|
||||
('00' + (vm.date_end.getUTCMonth() + 1)).slice(-2) + '-' +
|
||||
('00' + vm.date_end.getUTCDate()).slice(-2);
|
||||
values = [ date_init, date_end ];
|
||||
type = 'DATE';
|
||||
vm.isValid = true;
|
||||
vm.clear = false;
|
||||
}
|
||||
} else {
|
||||
values = [ vm.value_init, vm.value_end ];
|
||||
type = 'DECIMAL';
|
||||
if( vm.value_init === null || vm.value_end === null
|
||||
|| vm.value_init === '' || vm.value_end === ''){
|
||||
values = [];
|
||||
type = 'DECIMAL';
|
||||
vm.isValid = false;
|
||||
vm.clear = true;
|
||||
return;
|
||||
} else {
|
||||
values = [ vm.value_init, vm.value_end ];
|
||||
type = 'DECIMAL';
|
||||
vm.isValid = true;
|
||||
vm.clear = false;
|
||||
}
|
||||
}
|
||||
|
||||
vm.isValid = true;
|
||||
vm.clear = false;
|
||||
|
||||
vm.$emit('input', {
|
||||
filter: 'range',
|
||||
type: type,
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
:loading = "isLoading"
|
||||
v-model = "selected"
|
||||
@input = "onSelect($event)"
|
||||
:placeholder="$i18n.get('label_selectbox_init')"
|
||||
expanded
|
||||
:class="{'is-empty': selected == undefined || selected == ''}">
|
||||
<option value="">{{ $i18n.get('label_selectbox_init') }}...</option>
|
||||
|
|
@ -59,7 +60,7 @@
|
|||
return metadata.value;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
return undefined;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -82,7 +83,7 @@
|
|||
filter: 'selectbox',
|
||||
field_id: this.field,
|
||||
collection_id: ( this.collection_id ) ? this.collection_id : this.filter.collection_id,
|
||||
value: value
|
||||
value: ( value ) ? value : ''
|
||||
});
|
||||
},
|
||||
selectedValues(){
|
||||
|
|
|
|||
Loading…
Reference in New Issue