Add cleared/selected callbacks for jquery autocomplete in forms2

tailbone/forms2/core.py

@@ -35,7 +35,7 @@ from sqlalchemy import orm
 from sqlalchemy.ext.associationproxy import AssociationProxy, ASSOCIATION_PROXY
 
 from rattail.time import localtime
-from rattail.util import prettify, pretty_boolean, pretty_hours
+from rattail.util import prettify, pretty_boolean, pretty_hours, pretty_quantity
 
 import colander
 import deform
@@ -472,6 +472,8 @@ class Form(object):
             self.set_widget(key, dfwidget.CheckboxWidget())
         elif type_ == 'currency':
             self.set_renderer(key, self.render_currency)
+        elif type_ == 'quantity':
+            self.set_renderer(key, self.render_quantity)
         elif type_ == 'enum':
             self.set_renderer(key, self.render_enum)
         elif type_ == 'codeblock':
@@ -552,6 +554,7 @@ class Form(object):
 
             # create form
             form = deform.Form(schema, **kwargs)
+            form.tailbone_form = self
 
             # set readonly widget where applicable
             for field in self.readonly_fields:
@@ -627,6 +630,12 @@ class Form(object):
             return "(${:0,.2f})".format(0 - value)
         return "${:0,.2f}".format(value)
 
+    def render_quantity(self, obj, field):
+        value = self.obtain_value(obj, field)
+        if value is None:
+            return ""
+        return pretty_quantity(value)
+
     def render_enum(self, record, field_name):
         value = self.obtain_value(record, field_name)
         if value is None:

tailbone/forms2/widgets.py

@@ -41,7 +41,9 @@ class ReadonlyWidget(dfwidget.HiddenWidget):
     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)
+        # TODO: is this hacky?
+        text = field.parent.tailbone_form.render_field_value(field.name)
+        return HTML.tag('span', text) + tags.hidden(field.name, value=cstruct, id=field.oid)
 
 
 class JQueryDateWidget(dfwidget.DateInputWidget):
@@ -93,6 +95,8 @@ class JQueryAutocompleteWidget(dfwidget.AutocompleteInputWidget):
     requirements = None
     field_display = ""
     service_url = None
+    cleared_callback = None
+    selected_callback = None
 
     default_options = (
         ('autoFocus', True),
@@ -117,6 +121,8 @@ class JQueryAutocompleteWidget(dfwidget.AutocompleteInputWidget):
 
         kw['options'] = json.dumps(options)
         kw['field_display'] = self.field_display
+        kw['cleared_callback'] = self.cleared_callback
+        kw['selected_callback'] = self.selected_callback
         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

@@ -39,6 +39,8 @@
                 $('#' + oid + '-display span:first').text(ui.item.label);
                 $('#' + oid + '-textbox').hide();
                 $('#' + oid + '-display').show();
+                $('#' + oid + '-textbox').trigger('autocompletevalueselected',
+                                                  [ui.item.value, ui.item.label]);
                 return false;
             });
 
@@ -50,12 +52,35 @@
                     show();
                     focus();
                 }
+                $('#' + oid + '-textbox').trigger('autocompletevaluecleared');
             });
 
         }
       );
   </script>
 
+  <script tal:condition="cleared_callback" type="text/javascript">
+      deform.addCallback(
+        '${oid}',
+        function (oid) {
+            $('#' + oid + '-textbox').on('autocompletevaluecleared', function() {
+                ${cleared_callback}();
+            });
+        }
+      );
+  </script>
+
+  <script tal:condition="selected_callback" type="text/javascript">
+      deform.addCallback(
+        '${oid}',
+        function (oid) {
+            $('#' + oid + '-textbox').on('autocompletevalueselected', function(event, uuid, label) {
+                ${selected_callback}(uuid, label);
+            });
+        }
+      );
+  </script>
+
   <script tal:condition="cstruct" type="text/javascript">
       deform.addCallback(
         '${oid}',