rattail/tailbone
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Lance Edgar 2017-11-20 17:01:08 -06:00
parent f541a94351
commit 6ea88808b2
7 changed files with 267 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
tailbone/forms2/__init__.py
View file

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

25
tailbone/forms2/core.py
View file

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

122
tailbone/forms2/widgets.py Normal file
View file

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

77
tailbone/templates/deform/autocomplete_jquery.pt Normal file
View file

@ -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>

23
tailbone/templates/deform/date_jquery.pt Normal file
View file

@ -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>

24
tailbone/templates/deform/time_jquery.pt Normal file
View file

@ -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>

4
tailbone/templates/master/edit.mako
View file

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