Add support for Buefy datepicker in grid filters

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

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):
         """

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)
         }
     }
 

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>

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>