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

Add basic Buefy form support when generating reports

Browse source 
apparently we have a lot of work to do yet for Buefy forms elsewhere...
This commit is contained in:
Lance Edgar 2019-05-08 20:24:19 -05:00
parent 4a198ce473
commit a8db5db308
6 changed files with 147 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
tailbone/forms/core.py
View file

@ -2,7 +2,7 @@
################################################################################
#
# Rattail -- Retail Software Framework
# Copyright © 2010-2018 Lance Edgar
# Copyright © 2010-2019 Lance Edgar
#
# This file is part of Rattail.
#
@ -26,6 +26,7 @@ Forms Core
from __future__ import unicode_literals, absolute_import
import json
import datetime
import logging
@ -743,7 +744,12 @@ class Form(object):
context['request'] = self.request
context['readonly_fields'] = self.readonly_fields
context['render_field_readonly'] = self.render_field_readonly
return render('/forms/deform.mako', context)
return render(template, context)
def messages_json(self, messages):
dump = json.dumps(messages)
dump = dump.replace("'", ''')
return dump
def field_visible(self, field):
if self.hidden and self.hidden.get(field):

70
tailbone/templates/deform/date_jquery.pt
View file

@ -1,33 +1,53 @@
<!-- -*- mode: html; -*- -->
<div tal:define="css_class css_class|field.widget.css_class;
oid oid|field.oid;
field_name field_name|field.name;
style style|field.widget.style;
type_name type_name|field.widget.type_name;"
type_name type_name|field.widget.type_name;
use_buefy use_buefy|0;"
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 tal:condition="not use_buefy" tal:omit-tag="">
${field.start_mapping()}
<input type="${type_name}"
name="date"
value="${cstruct}"
<script tal:condition="selected_callback" type="text/javascript">
deform.addCallback(
'${oid}',
function (oid) {
$('#' + oid).datepicker('option', 'onSelect', ${selected_callback});
}
);
</script>
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>
<script tal:condition="selected_callback" type="text/javascript">
deform.addCallback(
'${oid}',
function (oid) {
$('#' + oid).datepicker('option', 'onSelect', ${selected_callback});
}
);
</script>
</div>
<div tal:condition="use_buefy">
${field.start_mapping()}
<b-datepicker placeholder="Click to select..."
name="date"
id="${oid}"
editable
icon-pack="fas"
icon="calendar-alt"
tal:attributes=":date-formatter 'formatDate';
:date-parser 'parseDate';
:value ('parseDate(\'' + cstruct + '\')') if cstruct else 'null'">
</b-datepicker>
${field.end_mapping()}
</div>
</div>

87
tailbone/templates/forms/deform_buefy.mako Normal file
View file

@ -0,0 +1,87 @@
## -*- coding: utf-8; -*-
<script type="text/x-template" id="buefy-form-template">
% if not readonly:
${h.form(form.action_url, id=dform.formid, method='post', enctype='multipart/form-data', **form_kwargs)}
${h.csrf_token(request)}
% endif
<section>
% for field in form.fields:
<% field = dform[field] %>
<b-field label="${form.get_label(field.name)}"
% if field.error:
type="is-danger"
:message='${form.messages_json(field.error.messages())|n}'
% endif
>
${field.serialize(use_buefy=True)|n}
</b-field>
% endfor
</section>
% if buttons:
<br />
${buttons|n}
% elif not readonly and (buttons is Undefined or (buttons is not None and buttons is not False)):
<br />
<div class="buttons">
${h.submit('save', getattr(form, 'submit_label', getattr(form, 'save_label', "Submit")), class_='button is-primary')}
% if getattr(form, 'show_reset', False):
<input type="reset" value="Reset" class="button" />
% endif
% if getattr(form, 'show_cancel', True):
% if form.mobile:
${h.link_to("Cancel", form.cancel_url, class_='ui-btn ui-corner-all')}
% else:
${h.link_to("Cancel", form.cancel_url, class_='cancel button{}'.format(' autodisable' if form.auto_disable_cancel else ''))}
% endif
% endif
</div>
% endif
% if not readonly:
${h.end_form()}
% endif
</script>
<div id="buefy-form-app">
<buefy-form></buefy-form>
</div>
<script type="text/javascript">
const BuefyForm = {
template: '#buefy-form-template',
methods: {
formatDate(date) {
// just need to convert to simple ISO date format here, seems
// like there should be a more obvious way to do that?
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
month = month < 10 ? '0' + month : month
day = day < 10 ? '0' + day : day
return year + '-' + month + '-' + day
},
parseDate(date) {
// 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])
}
}
}
Vue.component('buefy-form', BuefyForm)
new Vue({
el: '#buefy-form-app'
})
</script>

5
tailbone/templates/forms/form_buefy.mako Normal file
View file

@ -0,0 +1,5 @@
## -*- coding: utf-8; -*-
<div class="form">
${form.render_deform(template='/forms/deform_buefy.mako')|n}
</div>

2
tailbone/templates/reports/generate.mako
View file

@ -16,7 +16,7 @@
<div class="form-wrapper">
<p style="padding: 1em;">${report.__doc__}</p>
${form.render()|n}
${form.render(template='/forms/form{}.mako'.format('_buefy' if use_buefy else ''))|n}
</div><!-- form-wrapper -->
<ul id="context-menu">

1
tailbone/views/reports.py
View file

@ -380,6 +380,7 @@ class GenerateReport(View):
'report': report,
'form': form,
'dform': form.make_deform_form(),
'use_buefy': self.get_use_buefy(),
}
def generate_thread(self, report, params, user_uuid, progress=None):