Fix various templates for generating reports, per Buefy

also various other tweaks which came up along the way...

tailbone/static/themes/falafel/css/layout.css

@@ -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;
 }
 
 /******************************

tailbone/templates/deform/select.pt

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

tailbone/templates/deform/select_plain.pt

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

tailbone/templates/reports/choose.mako

@@ -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 {
+        % if use_buefy:
-      margin-top: 2em;
+            #report-description {
-      margin-left: 2em;
+              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()}

tailbone/templates/reports/generate.mako

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

tailbone/templates/themes/falafel/base.mako

@@ -338,29 +338,39 @@
       </header>
 
       ## Page Title
-      <section id="content-title" class="hero is-primary">
+      % if capture(self.content_title):
-        <div class="container">
+          <section id="content-title" class="hero is-primary">
-          % if capture(self.content_title):
+            <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
-
+            </div>
-              <h1 class="title" v-html="contentTitleHTML"></h1>
+          </section>
-          % endif
+      % endif
-        </div>
-      </section>
 
       <div class="content-wrapper">
 

tailbone/views/reports.py

@@ -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,
+        if use_buefy:
-                                                                       size=10))
+            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')