Fix various templates for generating reports, per Buefy

also various other tweaks which came up along the way...
This commit is contained in:
Lance Edgar 2019-09-06 17:45:59 -05:00
parent cb4e9e9eda
commit 4c42ccc7d7
7 changed files with 102 additions and 26 deletions

View file

@ -55,8 +55,13 @@ header .level .theme-picker {
display: inline-flex;
}
#content-title {
padding: 0.3rem;
}
#content-title h1 {
font-size: 2em;
font-size: 2rem;
margin-left: 1rem;
}
/******************************

View file

@ -66,7 +66,6 @@
placeholder '(please choose)';
class string: form-control ${css_class or ''};
:multiple str(multiple).lower();
size size;
style style;
v-model vmodel;
@input input_handler;">

View file

@ -17,7 +17,8 @@
class string: form-control ${css_class or ''};
multiple multiple;
size size;
style style;">
style style;
attributes|field.widget.attributes|{};">
<tal:loop tal:repeat="item values">
<optgroup tal:condition="isinstance(item, optgroup_class)"
tal:attributes="label item.label">

View file

@ -1,11 +1,13 @@
## -*- coding: utf-8; -*-
<%inherit file="/page.mako" />
<%inherit file="/form.mako" />
<%def name="title()">${index_title}</%def>
<%def name="content_title()"></%def>
<%def name="extra_javascript()">
${parent.extra_javascript()}
% if not use_buefy:
<script type="text/javascript">
var report_descriptions = ${json.dumps(report_descriptions)|n};
@ -26,16 +28,24 @@
});
</script>
% endif
</%def>
<%def name="extra_styles()">
${parent.extra_styles()}
<style type="text/css">
% if use_form:
#report-description {
margin-top: 2em;
margin-left: 2em;
}
% if use_buefy:
#report-description {
margin-left: 2em;
}
% else:
#report-description {
margin-top: 2em;
margin-left: 2em;
}
% endif
% else:
.report-selection {
margin-left: 10em;
@ -56,8 +66,22 @@
% endif
</%def>
<%def name="render_buefy_form()">
<div class="form">
<p>Please select the type of report you wish to generate.</p>
<br />
<div style="display: flex;">
<tailbone-form v-on:report-change="reportChanged"></tailbone-form>
<div id="report-description">{{ reportDescription }}</div>
</div>
</div>
</%def>
<%def name="page_content()">
% if use_form:
% if use_buefy:
${parent.page_content()}
% else:
<div class="form-wrapper">
<p>Please select the type of report you wish to generate.</p>
@ -67,6 +91,7 @@
</div>
</div><!-- form-wrapper -->
% endif
% else:
<div>
<p>Please select the type of report you wish to generate.</p>
@ -81,5 +106,24 @@
% endif
</%def>
<%def name="finalize_this_page_vars()">
${parent.finalize_this_page_vars()}
<script type="text/javascript">
TailboneFormData.reportDescriptions = ${json.dumps(report_descriptions)|n}
TailboneForm.methods.reportTypeChanged = function(reportType) {
this.$emit('report-change', this.reportDescriptions[reportType])
}
ThisPageData.reportDescription = null
ThisPage.methods.reportChanged = function(description) {
this.reportDescription = description
}
</script>
</%def>
${parent.body()}

View file

@ -11,8 +11,18 @@
% endif
</%def>
<%def name="render_buefy_form()">
<div class="form">
<p style="padding: 1em;">${report.__doc__}</p>
<br />
<tailbone-form></tailbone-form>
</div>
</%def>
<%def name="render_form()">
% if not use_buefy:
<p style="padding: 1em;">${report.__doc__}</p>
% endif
${parent.render_form()}
</%def>

View file

@ -338,29 +338,39 @@
</header>
## Page Title
<section id="content-title" class="hero is-primary">
<div class="container">
% if capture(self.content_title):
% if capture(self.content_title):
<section id="content-title" class="hero is-primary">
<div class="level">
<div class="level-left">
<div class="level-item">
<h1 class="title" v-html="contentTitleHTML"></h1>
</div>
</div>
% if show_prev_next is not Undefined and show_prev_next:
<div style="float: right;">
<div class="level-right">
% if prev_url:
${h.link_to(u"« Older", prev_url, class_='button autodisable')}
<div class="level-item">
${h.link_to(u"« Older", prev_url, class_='button autodisable')}
</div>
% else:
${h.link_to(u"« Older", '#', class_='button', disabled='disabled')}
<div class="level-item">
${h.link_to(u"« Older", '#', class_='button', disabled='disabled')}
</div>
% endif
% if next_url:
${h.link_to(u"Newer »", next_url, class_='button autodisable')}
<div class="level-item">
${h.link_to(u"Newer »", next_url, class_='button autodisable')}
</div>
% else:
${h.link_to(u"Newer »", '#', class_='button', disabled='disabled')}
<div class="level-item">
${h.link_to(u"Newer »", '#', class_='button', disabled='disabled')}
</div>
% endif
</div>
% endif
<h1 class="title" v-html="contentTitleHTML"></h1>
% endif
</div>
</section>
</div>
</section>
% endif
<div class="content-wrapper">

View file

@ -291,20 +291,25 @@ class GenerateReport(View):
View which allows user to choose which type of report they wish to
generate.
"""
use_buefy = self.get_use_buefy()
# handler is responsible for determining which report types are valid
reports = self.handler.get_reports()
# make form to accept user choice of report type
schema = NewReport().bind(valid_report_types=list(reports))
form = forms.Form(schema=schema, request=self.request)
form = forms.Form(schema=schema, request=self.request, use_buefy=use_buefy)
form.submit_label = "Continue"
form.cancel_url = self.request.route_url('report_output')
# TODO: should probably "group" certain reports together somehow?
# e.g. some for customers/membership, others for product movement etc.
values = [(r.type_key, r.name) for r in reports.values()]
form.set_widget('report_type', forms.widgets.PlainSelectWidget(values=values,
size=10))
if use_buefy:
form.set_widget('report_type', forms.widgets.CustomSelectWidget(values=values, size=10))
form.widgets['report_type'].set_template_values(input_handler='reportTypeChanged')
else:
form.set_widget('report_type', forms.widgets.PlainSelectWidget(values=values, size=10))
# if form validates, that means user has chosen a report type, so we
# just redirect to the appropriate "new report" page
@ -321,6 +326,7 @@ class GenerateReport(View):
for r in reports.values()]),
'use_form': self.rattail_config.getbool('tailbone', 'reporting.choosing_uses_form',
default=True),
'use_buefy': use_buefy,
}
def generate(self):
@ -329,6 +335,7 @@ class GenerateReport(View):
input parameters specific to the report type, then creates a new report
and redirects user to view the output.
"""
use_buefy = self.get_use_buefy()
type_key = self.request.matchdict['type_key']
report = self.handler.get_report(type_key)
report_params = report.make_params(Session())
@ -351,7 +358,7 @@ class GenerateReport(View):
schema.add(node)
form = forms.Form(schema=schema, request=self.request,
use_buefy=self.get_use_buefy())
use_buefy=use_buefy)
form.submit_label = "Generate this Report"
form.cancel_url = self.request.route_url('generate_report')