From f4f435c68276a3c344fe933492025fb69b5b62dc Mon Sep 17 00:00:00 2001
From: Lance Edgar <ledgar@techsupport.coop>
Date: Tue, 21 May 2019 20:11:57 -0500
Subject: [PATCH] Add `<once-button>` component for Buefy templates

i.e. just a button, which allows only one click and then auto-disables
---
 .../static/js/tailbone.buefy.oncebutton.js    | 45 ++++++++++
 tailbone/templates/master/merge.mako          | 87 +++++++++++++------
 tailbone/templates/themes/falafel/base.mako   |  1 +
 3 files changed, 108 insertions(+), 25 deletions(-)
 create mode 100644 tailbone/static/js/tailbone.buefy.oncebutton.js

diff --git a/tailbone/static/js/tailbone.buefy.oncebutton.js b/tailbone/static/js/tailbone.buefy.oncebutton.js
new file mode 100644
index 00000000..aa1b5440
--- /dev/null
+++ b/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)
diff --git a/tailbone/templates/master/merge.mako b/tailbone/templates/master/merge.mako
index a2ba8e4c..470e28e2 100644
--- a/tailbone/templates/master/merge.mako
+++ b/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 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))}
-          ${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 id="merge-buttons-app">
+      <merge-buttons></merge-buttons>
     </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">
diff --git a/tailbone/templates/themes/falafel/base.mako b/tailbone/templates/themes/falafel/base.mako
index 46a0e501..0785cf90 100644
--- a/tailbone/templates/themes/falafel/base.mako
+++ b/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'};