Add <once-button> component for Buefy templates

i.e. just a button, which allows only one click and then auto-disables

tailbone/static/js/tailbone.buefy.oncebutton.js

@@ -0,0 +1,45 @@
+
+const OnceButton = {
+
+    template: [
+        '<b-button',
+        ':type="type"',
+        ':native-type="nativeType"',
+        ':disabled="disabled"',
+        '@click="clicked"',
+        '>',
+        '{{ text }}',
+        '</b-button>'
+    ].join(' '),
+
+    props: {
+        type: String,
+        nativeType: String,
+        text: String,
+        working: String,
+        workingText: String
+    },
+
+    data() {
+        return {
+            disabled: false
+        }
+    },
+
+    methods: {
+
+        clicked(event) {
+            this.disabled = true
+            if (this.workingText) {
+                this.text = this.workingText
+            } else if (this.working) {
+                this.text = this.working + ", please wait..."
+            } else {
+                this.text = "Working, please wait..."
+            }
+        }
+    }
+
+}
+
+Vue.component('once-button', OnceButton)

tailbone/templates/master/merge.mako

@@ -91,6 +91,59 @@
   <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>
@@ -141,34 +194,18 @@
 
 % if use_buefy:
 
-    <div class="level" style="margin-top: 2em;">
+    <div id="merge-buttons-app">
-      <div class="level-left">
+      <merge-buttons></merge-buttons>
-
-        <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))}
-          ${h.submit('submit', "Swap which {} is kept/removed".format(model_title), class_='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')}
-          ${h.submit('merge', "Yes, perform this merge", class_='button is-primary')}
-          ${h.end_form()}
-        </div>
-
-      </div>
     </div>
 
+    <script type="text/javascript">
+      new Vue({
+          el: '#merge-buttons-app'
+      })
+    </script>
+
 % else:
+## no buefy; do legacy stuff
 ${h.form(request.current_route_url(), class_='merge')}
 ${h.csrf_token(request)}
 <div class="buttons">

tailbone/templates/themes/falafel/base.mako

@@ -289,6 +289,7 @@
 
   ## Tailbone / Buefy stuff
   ${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__))}
 
   <script type="text/javascript">
     var session_timeout = ${request.get_session_timeout() or 'null'};