From 999cb8bafb48e59544827ef79eb7d4ad5ddb1e7b Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Tue, 4 Jun 2019 15:22:41 -0300
Subject: [PATCH] Adjustments to numeric and date filters.

---
 src/admin/components/lists/filters-list.vue   | 12 +++-
 src/admin/scss/_tainacan-form.scss            |  2 +-
 src/classes/filter-types/date/Date.vue        | 61 ++++++++++---------
 .../filter-types/date/class-tainacan-date.php | 51 ++++------------
 src/classes/filter-types/numeric/Numeric.vue  |  4 +-
 .../numeric/class-tainacan-numeric.php        |  2 +-
 tests/test-filters.php                        |  2 +-
 7 files changed, 57 insertions(+), 77 deletions(-)

diff --git a/src/admin/components/lists/filters-list.vue b/src/admin/components/lists/filters-list.vue
index 3b8250071..6de15030e 100644
--- a/src/admin/components/lists/filters-list.vue
+++ b/src/admin/components/lists/filters-list.vue
@@ -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%;
+                    }
                 }
 
             }
diff --git a/src/admin/scss/_tainacan-form.scss b/src/admin/scss/_tainacan-form.scss
index 1a8af31cb..9f89ed790 100644
--- a/src/admin/scss/_tainacan-form.scss
+++ b/src/admin/scss/_tainacan-form.scss
@@ -59,7 +59,7 @@
         }
         button, 
         input {
-            height: 28px !important;
+            height: 30px !important;
         }
         button.is-primary,
         button.is-primary:hover,
diff --git a/src/classes/filter-types/date/Date.vue b/src/classes/filter-types/date/Date.vue
index c7ab74dc4..7e97249e9 100644
--- a/src/classes/filter-types/date/Date.vue
+++ b/src/classes/filter-types/date/Date.vue
@@ -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>
\ No newline at end of file
diff --git a/src/classes/filter-types/date/class-tainacan-date.php b/src/classes/filter-types/date/class-tainacan-date.php
index fabb16db1..8464ecdfa 100644
--- a/src/classes/filter-types/date/class-tainacan-date.php
+++ b/src/classes/filter-types/date/class-tainacan-date.php
@@ -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;
     }
 }
\ No newline at end of file
diff --git a/src/classes/filter-types/numeric/Numeric.vue b/src/classes/filter-types/numeric/Numeric.vue
index 51f911604..8c02c344d 100644
--- a/src/classes/filter-types/numeric/Numeric.vue
+++ b/src/classes/filter-types/numeric/Numeric.vue
@@ -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;
diff --git a/src/classes/filter-types/numeric/class-tainacan-numeric.php b/src/classes/filter-types/numeric/class-tainacan-numeric.php
index abd2ae8a8..bb84fe783 100644
--- a/src/classes/filter-types/numeric/class-tainacan-numeric.php
+++ b/src/classes/filter-types/numeric/class-tainacan-numeric.php
@@ -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>';
     }
 
 
diff --git a/tests/test-filters.php b/tests/test-filters.php
index 395c4ecb0..af820f3e8 100644
--- a/tests/test-filters.php
+++ b/tests/test-filters.php
@@ -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 );