Refactor form/page component structure for Buefy/Vue.js

this also moves Execute Batch from the form buttons area, to object helper

tailbone/templates/batch/view.mako

@@ -32,6 +32,7 @@
 
 <%def name="extra_styles()">
   ${parent.extra_styles()}
+  % if not use_buefy:
   <style type="text/css">
 
     .grid-wrapper {
@@ -43,13 +44,13 @@
     }
     
   </style>
+  % endif
 </%def>
 
 <%def name="buttons()">
     <div class="buttons">
       ${self.leading_buttons()}
       ${refresh_button()}
-      ${execute_button()}
     </div>
 </%def>
 
@@ -86,38 +87,9 @@
   </once-button>
 </%def>
 
-<%def name="execute_button()">
-  % if not batch.executed and request.has_perm('{}.execute'.format(permission_prefix)):
-
-      % if use_buefy:
-          % if master.has_execution_options(batch):
-              ## TODO: this doesn't work yet
-              ${execute_submit_button()}
-          % else:
-              ${execute_form.render_deform(buttons=capture(execute_submit_button))|n}
-          % endif
-
-      % else:
-          ## no buefy, do legacy thing
-          <button type="button"
-                  class="button is-primary"
-                  id="execute-batch"
-                  % if not execute_enabled:
-                  disabled="disabled"
-                  % endif
-                  % if why_not_execute:
-                  title="${why_not_execute}"
-                  % endif
-                  >
-            ${execute_title}
-          </button>
-      % endif
-  % endif
-
-</%def>
-
 <%def name="object_helpers()">
   ${self.render_status_breakdown()}
+  ${self.render_execute_helper()}
 </%def>
 
 <%def name="render_status_breakdown()">
@@ -144,31 +116,101 @@
   % endif
 </%def>
 
+<%def name="render_execute_helper()">
+  <div class="object-helper">
+    <h3>Batch Execution</h3>
+    <div class="object-helper-content">
+      % if batch.executed:
+          <p>
+            Batch was executed
+            ${h.pretty_datetime(request.rattail_config, batch.executed)}
+            by ${batch.executed_by}
+          </p>
+      % elif master.handler.executable(batch):
+          % if request.has_perm('{}.execute'.format(permission_prefix)):
+              <p>Batch has not yet been executed.</p>
+              % if use_buefy:
+                  % if master.has_execution_options(batch):
+                      ## TODO: this doesn't work yet
+                      ${self.execute_submit_button()}
+                  % else:
+                      <execute-form></execute-form>
+                  % endif
+              % else:
+                  ## no buefy, do legacy thing
+                  <button type="button"
+                          % if not execute_enabled:
+                          disabled="disabled"
+                          % endif
+                          % if why_not_execute:
+                          title="${why_not_execute}"
+                          % endif
+                          class="button is-primary"
+                          id="execute-batch">
+                    ${execute_title}
+                  </button>
+              % endif
+          % else:
+              <p>TODO: batch *may* be executed, but not by *you*</p>
+          % endif
+      % else:
+          <p>TODO: batch cannot be executed..?</p>
+      % endif
+    </div>
+  </div>
+</%def>
+
 <%def name="render_form()">
   ## TODO: should use self.render_form_buttons()
   ## ${form.render(form_id='batch-form', buttons=capture(self.render_form_buttons))|n}
   ${form.render(form_id='batch-form', buttons=capture(buttons))|n}
 </%def>
 
+<%def name="render_this_page()">
+  ${parent.render_this_page()}
+  % if not use_buefy:
+      % if master.handler.executable(batch) and request.has_perm('{}.execute'.format(permission_prefix)):
+          <div id="execution-options-dialog" style="display: none;">
+            ${execute_form.render_deform(form_kwargs={'name': 'batch-execution'}, buttons=False)|n}
+          </div>
+      % endif
+  % endif
+</%def>
 
-${self.render_form_complete()}
+<%def name="render_this_page_buefy()">
+  % if use_buefy and master.handler.executable(batch) and request.has_perm('{}.execute'.format(permission_prefix)):
+      ## TODO: stop using |n filter
+      ${execute_form.render_deform(buttons=capture(execute_submit_button))|n}
+  % endif
+  ${parent.render_this_page_buefy()}
+</%def>
 
-% if use_buefy:
-    <br /><br />
-    ## TODO: stop using |n filter
-    ${rows_grid.render_buefy(allow_save_defaults=False, tools=rows_grid_tools)|n}
-    <div id="tailbone-grid-app">
-      <tailbone-grid></tailbone-grid>
-    </div>
-    ${self.make_tailbone_form_app()}
-    ${self.make_tailbone_grid_app()}
-% else:
-    ## no buefy, so do the traditional thing
-    ${rows_grid|n}
-% endif
+<%def name="declare_page_vars()">
+  ${parent.declare_page_vars()}
+  % if not batch.executed and request.has_perm('{}.execute'.format(permission_prefix)):
+      <script type="text/javascript">
 
-% if not use_buefy and master.handler.executable(batch) and not batch.executed:
-    <div id="execution-options-dialog" style="display: none;">
-      ${execute_form.render_deform(form_kwargs={'name': 'batch-execution'}, buttons=False)|n}
-    </div>
-% endif
+        let ${execute_form.component_studly} = {
+            template: '#${execute_form.component}-template',
+            methods: {}
+        }
+
+      </script>
+  % endif
+</%def>
+
+<%def name="finalize_page_components()">
+  ${parent.finalize_page_components()}
+  % if not batch.executed and request.has_perm('{}.execute'.format(permission_prefix)):
+      <script type="text/javascript">
+
+        ${execute_form.component_studly}.data = function() { return ${execute_form.component_studly}Data }
+
+        Vue.component('${execute_form.component}', ${execute_form.component_studly})
+
+      </script>
+  % endif
+</%def>
+
+
+${parent.body()}