Add basic Buefy form support when generating reports

apparently we have a lot of work to do yet for Buefy forms elsewhere...

tailbone/templates/deform/date_jquery.pt

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

tailbone/templates/forms/deform_buefy.mako

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

tailbone/templates/forms/form_buefy.mako

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

tailbone/templates/reports/generate.mako

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