From 5998941741b48722e7e845a037dc71ac44410336 Mon Sep 17 00:00:00 2001
From: Lance Edgar <ledgar@techsupport.coop>
Date: Thu, 23 May 2019 14:45:23 -0500
Subject: [PATCH] Refactor Buefy forms a bit more, to copy grid pattern

i.e. each page can modify the component dynamically before it's registered
---
 tailbone/static/js/tailbone.buefy.form.js   |  7 +++++++
 tailbone/templates/form.mako                | 17 ++++++++++-------
 tailbone/templates/forms/deform_buefy.mako  |  8 ++++----
 tailbone/templates/master/view.mako         |  2 +-
 tailbone/templates/themes/falafel/base.mako |  1 +
 5 files changed, 23 insertions(+), 12 deletions(-)
 create mode 100644 tailbone/static/js/tailbone.buefy.form.js

diff --git a/tailbone/static/js/tailbone.buefy.form.js b/tailbone/static/js/tailbone.buefy.form.js
new file mode 100644
index 00000000..e6aa7fa8
--- /dev/null
+++ b/tailbone/static/js/tailbone.buefy.form.js
@@ -0,0 +1,7 @@
+
+let TailboneForm = {
+    template: '#tailbone-form-template',
+    methods: {}
+}
+
+let TailboneFormData = {}
diff --git a/tailbone/templates/form.mako b/tailbone/templates/form.mako
index 290c989a..52a5e297 100644
--- a/tailbone/templates/form.mako
+++ b/tailbone/templates/form.mako
@@ -31,17 +31,20 @@
   </div>
 </%def>
 
-<%def name="make_buefy_form_app()">
+<%def name="modify_tailbone_form()">
+  ## NOTE: if you override this, must use <script> tags
+</%def>
+
+<%def name="make_tailbone_form_app()">
+  ${self.modify_tailbone_form()}
   <script type="text/javascript">
 
-    const BuefyForm = {
-        template: '#buefy-form-template'
-    }
+    TailboneForm.data = function() { return TailboneFormData }
 
-    Vue.component('buefy-form', BuefyForm)
+    Vue.component('tailbone-form', TailboneForm)
 
     new Vue({
-        el: '#buefy-form-app'
+        el: '#tailbone-form-app'
     })
 
   </script>
@@ -51,5 +54,5 @@
 ${self.render_form_complete()}
 
 % if form.use_buefy:
-    ${self.make_buefy_form_app()}
+    ${self.make_tailbone_form_app()}
 % endif
diff --git a/tailbone/templates/forms/deform_buefy.mako b/tailbone/templates/forms/deform_buefy.mako
index 56be0a31..69767de9 100644
--- a/tailbone/templates/forms/deform_buefy.mako
+++ b/tailbone/templates/forms/deform_buefy.mako
@@ -1,6 +1,6 @@
 ## -*- coding: utf-8; -*-
 
-<script type="text/x-template" id="buefy-form-template">
+<script type="text/x-template" id="tailbone-form-template">
   <div>
   % if not form.readonly:
   ${h.form(form.action_url, id=dform.formid, method='post', enctype='multipart/form-data', **form_kwargs)}
@@ -12,7 +12,7 @@
         % if form.readonly or (field not in dform and field in form.readonly_fields):
             <b-field horizontal
                      label="${form.get_label(field)}">
-              ${form.render_field_value(field)}
+              ${form.render_field_value(field) or h.HTML.tag('span')}
             </b-field>
 
         % elif field in dform:
@@ -59,6 +59,6 @@
 </script>
 
 
-<div id="buefy-form-app">
-  <buefy-form></buefy-form>
+<div id="tailbone-form-app">
+  <tailbone-form></tailbone-form>
 </div>
diff --git a/tailbone/templates/master/view.mako b/tailbone/templates/master/view.mako
index a47a121d..38af7862 100644
--- a/tailbone/templates/master/view.mako
+++ b/tailbone/templates/master/view.mako
@@ -84,5 +84,5 @@ ${self.render_form_complete()}
 % endif
 
 % if form.use_buefy:
-    ${self.make_buefy_form_app()}
+    ${self.make_tailbone_form_app()}
 % endif
diff --git a/tailbone/templates/themes/falafel/base.mako b/tailbone/templates/themes/falafel/base.mako
index cf92c242..0cac1e11 100644
--- a/tailbone/templates/themes/falafel/base.mako
+++ b/tailbone/templates/themes/falafel/base.mako
@@ -291,6 +291,7 @@
   ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.datepicker.js') + '?ver={}'.format(tailbone.__version__))}
   ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.oncebutton.js') + '?ver={}'.format(tailbone.__version__))}
   ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.timepicker.js') + '?ver={}'.format(tailbone.__version__))}
+  ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.form.js') + '?ver={}'.format(tailbone.__version__))}
 
   <script type="text/javascript">
     var session_timeout = ${request.get_session_timeout() or 'null'};