Add date/time-picker, autocomplete support for forms2 (deform)

tailbone/forms2/__init__.py

@@ -26,4 +26,5 @@ Forms Library
 
 from __future__ import unicode_literals, absolute_import
 
+from . import widgets
 from .core import Form

tailbone/forms2/core.py

@@ -45,6 +45,7 @@ from pyramid.renderers import render
 from webhelpers2.html import tags, HTML
 
 from tailbone.util import raw_datetime
+from .widgets import ReadonlyWidget, JQueryDateWidget, JQueryTimeWidget
 
 
 log = logging.getLogger(__name__)
@@ -244,10 +245,16 @@ class Form(object):
                         and not f.startswith('_')
                         and f != 'versions']
 
+            # filter list further, to avoid magic for nodes we already have
+            auto_includes = list(includes)
+            for field in self.nodes:
+                if field in auto_includes:
+                    auto_includes.remove(field)
+
             # make schema - only include *property* fields at this point
             schema = CustomSchemaNode(self.model_class,
                                       includes=[p.key for p in mapper.iterate_properties
-                                                if p.key in includes])
+                                                if p.key in auto_includes])
 
             # for now, must manually add any "extra" fields?  this includes all
             # association proxy fields, not sure how other fields will behave
@@ -256,6 +263,8 @@ class Form(object):
                     node = self.nodes.get(field)
                     if not node:
                         node = colander.SchemaNode(colander.String(), name=field, missing='')
+                    if not node.name:
+                        node.name = field
                     schema.add(node)
 
             # apply any label overrides
@@ -311,6 +320,10 @@ class Form(object):
             self.set_renderer(key, self.render_datetime)
         elif type_ == 'datetime_local':
             self.set_renderer(key, self.render_datetime_local)
+        elif type_ == 'date_jquery':
+            self.set_widget(key, JQueryDateWidget())
+        elif type_ == 'time_jquery':
+            self.set_widget(key, JQueryTimeWidget())
         elif type_ == 'duration':
             self.set_renderer(key, self.render_duration)
         elif type_ == 'boolean':
@@ -478,13 +491,3 @@ class Form(object):
     def validate(self, *args, **kwargs):
         form = self.make_deform_form()
         return form.validate(*args, **kwargs)
-
-
-class ReadonlyWidget(dfwidget.HiddenWidget):
-
-    readonly = True
-
-    def serialize(self, field, cstruct, **kw):
-        if cstruct in (colander.null, None):
-            cstruct = ''
-        return HTML.tag('span', cstruct) + tags.hidden(field.name, value=cstruct, id=field.oid)

tailbone/forms2/widgets.py

@@ -0,0 +1,122 @@
+# -*- coding: utf-8; -*-
+################################################################################
+#
+#  Rattail -- Retail Software Framework
+#  Copyright © 2010-2017 Lance Edgar
+#
+#  This file is part of Rattail.
+#
+#  Rattail is free software: you can redistribute it and/or modify it under the
+#  terms of the GNU General Public License as published by the Free Software
+#  Foundation, either version 3 of the License, or (at your option) any later
+#  version.
+#
+#  Rattail is distributed in the hope that it will be useful, but WITHOUT ANY
+#  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+#  FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more
+#  details.
+#
+#  You should have received a copy of the GNU General Public License along with
+#  Rattail.  If not, see <http://www.gnu.org/licenses/>.
+#
+################################################################################
+"""
+Form Widgets
+"""
+
+from __future__ import unicode_literals, absolute_import
+
+import six
+import json
+
+import colander
+from deform import widget as dfwidget
+from webhelpers2.html import tags, HTML
+
+
+class ReadonlyWidget(dfwidget.HiddenWidget):
+
+    readonly = True
+
+    def serialize(self, field, cstruct, **kw):
+        if cstruct in (colander.null, None):
+            cstruct = ''
+        return HTML.tag('span', cstruct) + tags.hidden(field.name, value=cstruct, id=field.oid)
+
+
+class JQueryDateWidget(dfwidget.DateInputWidget):
+    """
+    Uses the jQuery datepicker UI widget, instead of whatever it is deform uses
+    by default.
+    """
+    template = 'date_jquery'
+    type_name = 'text'
+    requirements = None
+
+    default_options = (
+        ('changeYear', False),
+    )
+
+    def serialize(self, field, cstruct, **kw):
+        if cstruct in (colander.null, None):
+            cstruct = ''
+        readonly = kw.get('readonly', self.readonly)
+        template = readonly and self.readonly_template or self.template
+        options = dict(
+            kw.get('options') or self.options or self.default_options
+            )
+        options['dateFormat'] = 'yy-mm-dd'
+        kw.setdefault('options_json', json.dumps(options))
+        values = self.get_template_values(field, cstruct, kw)
+        return field.renderer(template, **values)
+
+
+class JQueryTimeWidget(dfwidget.TimeInputWidget):
+    """
+    Uses the jQuery datepicker UI widget, instead of whatever it is deform uses
+    by default.
+    """
+    template = 'time_jquery'
+    type_name = 'text'
+    requirements = None
+    default_options = (
+        ('showPeriod', True),
+    )
+
+
+class JQueryAutocompleteWidget(dfwidget.AutocompleteInputWidget):
+    """ 
+    Uses the jQuery autocomplete plugin, instead of whatever it is deform uses
+    by default.
+    """
+    template = 'autocomplete_jquery'
+    requirements = None
+    field_display = ""
+    service_url = None
+
+    default_options = (
+        ('autoFocus', True),
+    )
+    options = None
+
+    def serialize(self, field, cstruct, **kw):
+        if 'delay' in kw or getattr(self, 'delay', None):
+            raise ValueError(
+                'AutocompleteWidget does not support *delay* parameter '
+                'any longer.'
+            )
+        if cstruct in (colander.null, None):
+            cstruct = ''
+        self.values = self.values or []
+        readonly = kw.get('readonly', self.readonly)
+
+        options = dict(
+            kw.get('options') or self.options or self.default_options
+        )
+        options['source'] = self.service_url
+
+        kw['options'] = json.dumps(options)
+        kw['field_display'] = self.field_display
+        tmpl_values = self.get_template_values(field, cstruct, kw)
+        template = readonly and self.readonly_template or self.template
+        return field.renderer(template, **tmpl_values)

tailbone/templates/deform/autocomplete_jquery.pt

@@ -0,0 +1,77 @@
+<div tal:define="name name|field.name;
+                 css_class css_class|field.widget.css_class;
+                 oid oid|field.oid;
+                 field_display field_display;
+                 style style|field.widget.style"
+     id="${oid}-container"
+     class="autocomplete-container">
+
+  <input type="hidden"
+         name="${name}"
+         id="${oid}"
+         value="${cstruct}" />
+
+  <input type="text"
+         name="${oid}-textbox"
+         id="${oid}-textbox"
+         value="${field_display}"
+         class="autocomplete-textbox"
+         style="display: none;" />
+
+  <div id="${oid}-display"
+       class="autocomplete-display"
+       style="display: none;">
+
+    <span>${field_display or ''}</span>
+    <button type="button" id="${oid}-change" class="autocomplete-change">Change</button>
+
+  </div>
+
+  <script type="text/javascript">
+      deform.addCallback(
+        '${oid}',
+        function (oid) {
+
+            $('#' + oid + '-textbox').autocomplete(${options});
+
+            $('#' + oid + '-textbox').on('autocompleteselect', function (event, ui) {
+                $('#' + oid).val(ui.item.value);
+                $('#' + oid + '-display span:first').text(ui.item.label);
+                $('#' + oid + '-textbox').hide();
+                $('#' + oid + '-display').show();
+                return false;
+            });
+
+            $('#' + oid + '-change').click(function() {
+                $('#' + oid).val('');
+                $('#' + oid + '-display').hide();
+                with ($('#' + oid + '-textbox')) {
+                    val('');
+                    show();
+                    focus();
+                }
+            });
+
+        }
+      );
+  </script>
+
+  <script tal:condition="cstruct" type="text/javascript">
+      deform.addCallback(
+        '${oid}',
+        function (oid) {
+            $('#' + oid + '-display').show();
+        }
+      );
+  </script>
+
+  <script tal:condition="not cstruct" type="text/javascript">
+      deform.addCallback(
+        '${oid}',
+        function (oid) {
+            $('#' + oid + '-textbox').show();
+        }
+      );
+  </script>
+
+</div>

tailbone/templates/deform/date_jquery.pt

@@ -0,0 +1,23 @@
+<div tal:define="css_class css_class|field.widget.css_class;
+                 oid oid|field.oid;
+                 style style|field.widget.style;
+                 type_name type_name|field.widget.type_name;"
+      tal:omit-tag="">
+  ${field.start_mapping()}
+  <input type="${type_name}"
+         name="date"
+         value="${cstruct}"
+
+         tal:attributes="class string: ${css_class or ''} form-control;
+                         style style"
+         id="${oid}"/>
+  ${field.end_mapping()}
+  <script type="text/javascript">
+   deform.addCallback(
+    '${oid}',
+     function deform_cb(oid) {
+         $('#' + oid).datepicker(${options_json});
+     }
+   );
+  </script>
+</div>

tailbone/templates/deform/time_jquery.pt

@@ -0,0 +1,24 @@
+<span tal:define="size size|field.widget.size;
+                  css_class css_class|field.widget.css_class;
+                  oid oid|field.oid;
+                  style style|field.widget.style|None;
+                  type_name type_name|field.widget.type_name;"
+      tal:omit-tag="">
+  ${field.start_mapping()}
+  <input type="${type_name}"
+         name="time"
+         value="${cstruct}"
+         tal:attributes="size size;
+                         class string: ${css_class or ''} form-control;
+                         style style"
+         id="${oid}"/>
+  ${field.end_mapping()}
+  <script type="text/javascript">
+    deform.addCallback(
+      '${oid}',
+      function(oid) {
+          $('#' + oid).timepicker(${options_json});
+      }
+    );
+  </script>
+</span>

tailbone/templates/master/edit.mako

@@ -19,14 +19,12 @@
     });
   </script>
   % if dform is not Undefined:
-      % for field in dform:
+      <% resources = dform.get_widget_resources() %>
-          <% resources = field.get_widget_resources() %>
+      % for path in resources['js']:
-          % for path in resources['js']:
+          ${h.javascript_link(request.static_url(path))}
-              ${h.javascript_link(request.static_url(path))}
+      % endfor
-          % endfor
+      % for path in resources['css']:
-          % for path in resources['css']:
+          ${h.stylesheet_link(request.static_url(path))}
-              ${h.stylesheet_link(request.static_url(path))}
-          % endfor
       % endfor
   % endif
 </%def>