From 36815880c0d7726601895eaa869d4c8890bbd045 Mon Sep 17 00:00:00 2001
From: eduardohumberto <eduardo.humberto1992@gmail.com>
Date: Thu, 10 May 2018 22:46:26 -0300
Subject: [PATCH] show placeholder on clean search ( Custom interval and select
 ) filter type

---
 .../custom-interval/CustomInterval.vue        | 101 ++++++++++++------
 .../filter-types/selectbox/Selectbox.vue      |   5 +-
 2 files changed, 73 insertions(+), 33 deletions(-)

diff --git a/src/classes/filter-types/custom-interval/CustomInterval.vue b/src/classes/filter-types/custom-interval/CustomInterval.vue
index c74eef872..006c4a4ae 100644
--- a/src/classes/filter-types/custom-interval/CustomInterval.vue
+++ b/src/classes/filter-types/custom-interval/CustomInterval.vue
@@ -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,
diff --git a/src/classes/filter-types/selectbox/Selectbox.vue b/src/classes/filter-types/selectbox/Selectbox.vue
index 1d45064e5..5cfbe345e 100644
--- a/src/classes/filter-types/selectbox/Selectbox.vue
+++ b/src/classes/filter-types/selectbox/Selectbox.vue
@@ -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(){