Refactor all Buefy form submit buttons, per Chrome behavior

ugh, what a pain.  and turns out i'd previously ran into this same issue for
jQuery, per commit e945ebe325

tailbone/templates/master/clone.mako

@@ -27,7 +27,11 @@
   % endif
   <br />
 
-  ${h.form(request.current_route_url(), class_=None if use_buefy else 'autodisable')}
+  % if use_buefy:
+  ${h.form(request.current_route_url(), **{'@submit': 'submitForm'})}
+  % else:
+  ${h.form(request.current_route_url(), class_='autodisable')}
+  % endif
   ${h.csrf_token(request)}
   ${h.hidden('clone', value='clone')}
     <div class="buttons">
@@ -35,10 +39,11 @@
           <once-button tag="a" href="${form.cancel_url}"
                        text="Whoops, nevermind...">
           </once-button>
-          <once-button type="is-primary"
-                       native-type="submit"
-                       text="Yes, please clone away">
-          </once-button>
+          <b-button type="is-primary"
+                    native-type="submit"
+                    :disabled="formSubmitting">
+            {{ submitButtonText }}
+          </b-button>
       % else:
           ${h.link_to("Whoops, nevermind...", form.cancel_url, class_='button autodisable')}
           ${h.submit('submit', "Yes, please clone away")}
@@ -47,5 +52,20 @@
   ${h.end_form()}
 </%def>
 
+<%def name="modify_this_page()">
+  ${parent.modify_this_page()}
+  <script type="text/javascript">
+
+    TailboneFormData.formSubmitting = false
+    TailboneFormData.submitButtonText = "Yes, please clone away"
+
+    TailboneForm.methods.submitForm = function() {
+        this.formSubmitting = true
+        this.submitButtonText = "Working, please wait..."
+    }
+
+  </script>
+</%def>
+
 
 ${parent.body()}

tailbone/templates/master/delete.mako

@@ -44,17 +44,22 @@
   % endif
   <br />
 
-  ${h.form(request.current_route_url(), class_=None if use_buefy else 'autodisable')}
+  % if use_buefy:
+  ${h.form(request.current_route_url(), **{'@submit': 'submitForm'})}
+  % else:
+  ${h.form(request.current_route_url(), class_='autodisable')}
+  % endif
   ${h.csrf_token(request)}
     <div class="buttons">
       % if use_buefy:
           <once-button tag="a" href="${form.cancel_url}"
                        text="Whoops, nevermind...">
           </once-button>
-          <once-button type="is-primary is-danger"
-                       native-type="submit"
-                       text="Yes, please DELETE this data forever!">
-          </once-button>
+          <b-button type="is-primary is-danger"
+                    native-type="submit"
+                    :disabled="formSubmitting">
+            {{ formButtonText }}
+          </b-button>
       % else:
       <a class="button" href="${form.cancel_url}">Whoops, nevermind...</a>
       ${h.submit('submit', "Yes, please DELETE this data forever!", class_='button is-primary')}
@@ -63,5 +68,20 @@
   ${h.end_form()}
 </%def>
 
+<%def name="modify_this_page()">
+  ${parent.modify_this_page()}
+  <script type="text/javascript">
+
+    TailboneFormData.formSubmitting = false
+    TailboneFormData.formButtonText = "Yes, please DELETE this data forever!"
+
+    TailboneForm.methods.submitForm = function() {
+        this.formSubmitting = true
+        this.formButtonText = "Working, please wait..."
+    }
+
+  </script>
+</%def>
+
 
 ${parent.body()}

tailbone/templates/master/edit.mako

@@ -5,6 +5,7 @@
 
 <%def name="extra_javascript()">
   ${parent.extra_javascript()}
+  % if not use_buefy:
   <script type="text/javascript">
 
     $(function() {
@@ -18,6 +19,7 @@
 
     });
   </script>
+  % endif
 </%def>
 
 <%def name="context_menu_items()">

tailbone/templates/master/index.mako

@@ -14,9 +14,7 @@
 
 <%def name="extra_javascript()">
   ${parent.extra_javascript()}
-  % if use_buefy:
-      ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.grid.js') + '?ver={}'.format(tailbone.__version__))}
-  % else:
+  % if not use_buefy:
   <script type="text/javascript">
     $(function() {
 
@@ -148,18 +146,23 @@
   ## merge 2 objects
   % if master.mergeable and request.has_perm('{}.merge'.format(permission_prefix)):
 
-      ${h.form(url('{}.merge'.format(route_prefix)), name='merge-things', class_='control')}
+      % if use_buefy:
+      ${h.form(url('{}.merge'.format(route_prefix)), **{'@submit': 'submitMergeForm'})}
+      % else:
+      ${h.form(url('{}.merge'.format(route_prefix)), name='merge-things')}
+      % endif
       ${h.csrf_token(request)}
       % if use_buefy:
           <input type="hidden"
                  name="uuids"
                  :value="checkedRowUUIDs()" />
-          <once-button type="is-primary"
-                       native-type="submit"
-                       icon-left="object-ungroup"
-                       :disabled="checkedRows.length != 2"
-                       text="Merge 2 ${model_title_plural}">
-          </once-button>
+          <b-button type="is-primary"
+                    native-type="submit"
+                    icon-pack="fas"
+                    icon-left="object-ungroup"
+                    :disabled="mergeFormSubmitting || checkedRows.length != 2">
+            {{ mergeFormButtonText }}
+          </b-button>
       % else:
           ${h.hidden('uuids')}
           <button type="submit" class="button">Merge 2 ${model_title_plural}</button>
@@ -213,7 +216,17 @@
 </%def>
 
 <%def name="modify_tailbone_grid()">
-  ## NOTE: if you override this, must use <script> tags
+  <script type="text/javascript">
+
+    % if master.mergeable and request.has_perm('{}.merge'.format(permission_prefix)):
+        TailboneGridData.mergeFormButtonText = "Merge 2 ${model_title_plural}"
+        TailboneGridData.mergeFormSubmitting = false
+        TailboneGrid.methods.submitMergeForm = function() {
+            this.mergeFormSubmitting = true
+            this.mergeFormButtonText = "Working, please wait..."
+        }
+    % endif
+  </script>
 </%def>
 
 <%def name="make_tailbone_grid_app()">

tailbone/templates/master/merge.mako

@@ -1,5 +1,5 @@
 ## -*- coding: utf-8 -*-
-<%inherit file="/base.mako" />
+<%inherit file="/page.mako" />
 
 <%def name="title()">Merge 2 ${model_title_plural}</%def>
 
@@ -91,62 +91,7 @@
   <li>${h.link_to("Back to {}".format(model_title_plural), url(route_prefix))}</li>
 </%def>
 
-
-% if use_buefy:
-
-<script type="text/x-template" id="merge-buttons-template">
-  <div class="level" style="margin-top: 2em;">
-    <div class="level-left">
-
-      <div class="level-item">
-        <a class="button" href="${index_url}">Whoops, nevermind</a>
-      </div>
-
-      <div class="level-item">
-        ${h.form(request.current_route_url())}
-        ${h.csrf_token(request)}
-        ${h.hidden('uuids', value='{},{}'.format(object_to_keep.uuid, object_to_remove.uuid))}
-        <once-button native-type="submit"
-                     text="Swap which ${model_title} is kept/removed"
-                     working="Swapping">
-        </once-button>
-        ${h.end_form()}
-      </div>
-
-      <div class="level-item">
-        ${h.form(request.current_route_url())}
-        ${h.csrf_token(request)}
-        ${h.hidden('uuids', value='{},{}'.format(object_to_remove.uuid, object_to_keep.uuid))}
-        ${h.hidden('commit-merge', value='yes')}
-        <once-button native-type="submit"
-                     type="is-primary"
-                     text="Yes, perform this merge"
-                     working="Merging">
-        </once-button>
-        ${h.end_form()}
-      </div>
-
-    </div>
-  </div>
-</script>
-
-<script type="text/javascript">
-
-  const MergeButtons = {
-      template: '#merge-buttons-template'
-  }
-
-  Vue.component('merge-buttons', MergeButtons)
-
-</script>
-
-## end of buefy
-% endif
-
-
-<ul id="context-menu">
-  ${self.context_menu_items()}
-</ul>
+<%def name="page_content()">
 
 <p>
   You are about to <strong>merge</strong> two ${model_title} records,
@@ -193,16 +138,7 @@
 </table>
 
 % if use_buefy:
-
-    <div id="merge-buttons-app">
-      <merge-buttons></merge-buttons>
-    </div>
-
-    <script type="text/javascript">
-      new Vue({
-          el: '#merge-buttons-app'
-      })
-    </script>
+    <merge-buttons></merge-buttons>
 
 % else:
 ## no buefy; do legacy stuff
@@ -216,3 +152,77 @@ ${h.csrf_token(request)}
 </div>
 ${h.end_form()}
 % endif
+</%def>
+
+
+% if use_buefy:
+<script type="text/x-template" id="merge-buttons-template">
+  <div class="level" style="margin-top: 2em;">
+    <div class="level-left">
+
+      <div class="level-item">
+        <a class="button" href="${index_url}">Whoops, nevermind</a>
+      </div>
+
+      <div class="level-item">
+        ${h.form(request.current_route_url(), **{'@submit': 'submitSwapForm'})}
+        ${h.csrf_token(request)}
+        ${h.hidden('uuids', value='{},{}'.format(object_to_keep.uuid, object_to_remove.uuid))}
+        <b-button native-type="submit"
+                  :disabled="swapFormSubmitting">
+          {{ swapFormButtonText }}
+        </b-button>
+        ${h.end_form()}
+      </div>
+
+      <div class="level-item">
+        % if use_buefy:
+        ${h.form(request.current_route_url(), **{'@submit': 'submitMergeForm'})}
+        % else:
+        ${h.form(request.current_route_url())}
+        % endif
+        ${h.csrf_token(request)}
+        ${h.hidden('uuids', value='{},{}'.format(object_to_remove.uuid, object_to_keep.uuid))}
+        ${h.hidden('commit-merge', value='yes')}
+        <b-button type="is-primary"
+                  native-type="submit"
+                  :disabled="mergeFormSubmitting">
+          {{ mergeFormButtonText }}
+        </b-button>
+        ${h.end_form()}
+      </div>
+
+    </div>
+  </div>
+</script>
+
+<script type="text/javascript">
+
+  const MergeButtons = {
+      template: '#merge-buttons-template',
+      data() {
+          return {
+              swapFormButtonText: "Swap which ${model_title} is kept/removed",
+              swapFormSubmitting: false,
+              mergeFormButtonText: "Yes, perform this merge",
+              mergeFormSubmitting: false,
+          }
+      },
+      methods: {
+          submitSwapForm() {
+              this.swapFormSubmitting = true
+              this.swapFormButtonText = "Swapping, please wait..."
+          },
+          submitMergeForm() {
+              this.mergeFormSubmitting = true
+              this.mergeFormButtonText = "Merging, please wait..."
+          },
+      }
+  }
+
+  Vue.component('merge-buttons', MergeButtons)
+
+</script>
+% endif
+
+${parent.body()}