From d5d04b7daca5212a399cb09d7dc1a706afa1fb5a Mon Sep 17 00:00:00 2001
From: Lance Edgar <ledgar@techsupport.coop>
Date: Tue, 21 May 2019 13:44:02 -0500
Subject: [PATCH] Add support for Buefy datepicker in grid filters

---
 tailbone/grids/core.py                          |  1 +
 tailbone/grids/filters.py                       |  6 ++++++
 tailbone/static/js/tailbone.buefy.datepicker.js | 10 ++++++++--
 tailbone/templates/deform/date_jquery.pt        |  2 +-
 tailbone/templates/grids/buefy.mako             | 11 ++++++++++-
 5 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/tailbone/grids/core.py b/tailbone/grids/core.py
index 0775f5ce..ce4a4cd8 100644
--- a/tailbone/grids/core.py
+++ b/tailbone/grids/core.py
@@ -973,6 +973,7 @@ class Grid(object):
                 'verb_labels': filtr.verb_labels,
                 'verb': filtr.verb or filtr.default_verb or filtr.verbs[0],
                 'value': six.text_type(filtr.value) if filtr.value is not None else "",
+                'data_type': filtr.data_type,
             }
 
         return data
diff --git a/tailbone/grids/filters.py b/tailbone/grids/filters.py
index 5f418c87..623c4793 100644
--- a/tailbone/grids/filters.py
+++ b/tailbone/grids/filters.py
@@ -52,6 +52,7 @@ class FilterValueRenderer(object):
     """
     Base class for all filter renderers.
     """
+    data_type = 'string'
 
     @property
     def name(self):
@@ -75,6 +76,8 @@ class NumericValueRenderer(FilterValueRenderer):
     """
     Input renderer for numeric values.
     """
+    # TODO
+    # data_type = 'number'
 
     def render(self, value=None, **kwargs):
         kwargs.setdefault('step', '0.001')
@@ -85,6 +88,7 @@ class DateValueRenderer(FilterValueRenderer):
     """
     Input renderer for date values.
     """
+    data_type = 'date'
 
     def render(self, value=None, **kwargs):
         kwargs['data-datepicker'] = 'true'
@@ -143,6 +147,7 @@ class GridFilter(object):
                        'is_me', 'is_not_me']
 
     value_renderer_factory = DefaultValueRenderer
+    data_type = 'string'        # default, but will be set from value renderer
 
     def __init__(self, key, label=None, verbs=None, value_enum=None, value_renderer=None,
                  default_active=False, default_verb=None, default_value=None,
@@ -189,6 +194,7 @@ class GridFilter(object):
             renderer = renderer()
         renderer.filter = self
         self.value_renderer = renderer
+        self.data_type = renderer.data_type
 
     def filter(self, data, verb=None, value=UNSPECIFIED):
         """
diff --git a/tailbone/static/js/tailbone.buefy.datepicker.js b/tailbone/static/js/tailbone.buefy.datepicker.js
index d327f50e..59b86c74 100644
--- a/tailbone/static/js/tailbone.buefy.datepicker.js
+++ b/tailbone/static/js/tailbone.buefy.datepicker.js
@@ -11,7 +11,8 @@ const TailboneDatepicker = {
         'icon="calendar-alt"',
         ':date-formatter="formatDate"',
         ':date-parser="parseDate"',
-        ':value="rawValue ? parseDate(rawValue) : null"',
+        ':value="value ? parseDate(value) : null"',
+        '@input="dateChanged"',
         '>',
         '</b-datepicker>'
     ].join(' '),
@@ -19,7 +20,7 @@ const TailboneDatepicker = {
     props: {
         name: String,
         id: String,
-        rawValue: String
+        value: String
     },
 
     methods: {
@@ -39,6 +40,11 @@ const TailboneDatepicker = {
             // note, this assumes classic YYYY-MM-DD (i.e. ISO?) format
             var parts = date.split('-')
             return new Date(parts[0], parseInt(parts[1]) - 1, parts[2])
+        },
+
+        dateChanged(date) {
+            this.value = this.formatDate(date)
+            this.$emit('input', this.value)
         }
     }
 
diff --git a/tailbone/templates/deform/date_jquery.pt b/tailbone/templates/deform/date_jquery.pt
index 90de0f86..303e56b0 100644
--- a/tailbone/templates/deform/date_jquery.pt
+++ b/tailbone/templates/deform/date_jquery.pt
@@ -39,7 +39,7 @@
     ${field.start_mapping()}
     <tailbone-datepicker name="date"
                          id="${oid}"
-                         raw-value="${cstruct}">
+                         value="${cstruct}">
     </tailbone-datepicker>
     ${field.end_mapping()}
   </div>
diff --git a/tailbone/templates/grids/buefy.mako b/tailbone/templates/grids/buefy.mako
index 220bb020..6b7743b9 100644
--- a/tailbone/templates/grids/buefy.mako
+++ b/tailbone/templates/grids/buefy.mako
@@ -28,7 +28,16 @@
           </option>
         </b-select>
 
-        <b-input v-model="filter.value"
+        ## only one of the following "value input" elements will be rendered
+
+        <tailbone-datepicker v-if="filter.data_type == 'date'"
+                             v-model="filter.value"
+                             v-show="! (filter.valueless_verbs && filter.valueless_verbs.includes(filter.verb))"
+                             ref="valueInput">
+        </tailbone-datepicker>
+
+        <b-input v-if="filter.data_type == 'string'"
+                 v-model="filter.value"
                  v-show="! (filter.valueless_verbs && filter.valueless_verbs.includes(filter.verb))"
                  ref="valueInput">
         </b-input>