From a857d3177650e981a72cfbe72781552e3890537d Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Thu, 31 Oct 2019 15:02:03 -0500
Subject: [PATCH] Add Vue.js support for "delete selected" grid feature

---
 tailbone/templates/master/index.mako | 61 ++++++++++++++++++++++++----
 1 file changed, 54 insertions(+), 7 deletions(-)

diff --git a/tailbone/templates/master/index.mako b/tailbone/templates/master/index.mako
index dd0015eb..c5f56423 100644
--- a/tailbone/templates/master/index.mako
+++ b/tailbone/templates/master/index.mako
@@ -191,7 +191,7 @@
       % endif
 
       % if use_buefy:
-          ${h.form(url('{}.disable_set'.format(route_prefix)), class_='control', ref='disable_selected_form')}
+          ${h.form(url('{}.disable_set'.format(route_prefix)), ref='disable_selected_form', class_='control')}
           ${h.csrf_token(request)}
           ${h.hidden('uuids', v_model='selected_uuids')}
           <b-button :disabled="disableSelectedDisabled"
@@ -209,12 +209,26 @@
   % endif
 
   ## delete selected objects
-  % if master.set_deletable and request.has_perm('{}.delete_set'.format(permission_prefix)):
-      ${h.form(url('{}.delete_set'.format(route_prefix)), name='delete-set', class_='control')}
-      ${h.csrf_token(request)}
-      ${h.hidden('uuids')}
-      <button type="button" class="button">Delete Selected</button>
-      ${h.end_form()}
+  % if master.set_deletable and master.has_perm('delete_set'):
+      % if use_buefy:
+          ${h.form(url('{}.delete_set'.format(route_prefix)), ref='delete_selected_form', class_='control')}
+          ${h.csrf_token(request)}
+          ${h.hidden('uuids', v_model='selected_uuids')}
+          <b-button type="is-danger"
+                    :disabled="deleteSelectedDisabled"
+                    @click="deleteSelectedSubmit()"
+                    icon-pack="fas"
+                    icon-left="trash">
+            {{ deleteSelectedText }}
+          </b-button>
+          ${h.end_form()}
+      % else:
+          ${h.form(url('{}.delete_set'.format(route_prefix)), name='delete-set', class_='control')}
+          ${h.csrf_token(request)}
+          ${h.hidden('uuids')}
+          <button type="button" class="button">Delete Selected</button>
+          ${h.end_form()}
+      % endif
   % endif
 
   ## delete search results
@@ -301,6 +315,7 @@
   ${parent.modify_this_page_vars()}
   <script type="text/javascript">
 
+    ## enable / disable selected objects
     % if master.supports_set_enabled_toggle and master.has_perm('enable_disable_set'):
 
         TailboneGridData.enableSelectedSubmitting = false
@@ -360,6 +375,38 @@
         }
 
     % endif
+
+    ## delete selected objects
+    % if master.set_deletable and master.has_perm('delete_set'):
+
+        TailboneGridData.deleteSelectedSubmitting = false
+        TailboneGridData.deleteSelectedText = "Delete Selected"
+
+        TailboneGrid.computed.deleteSelectedDisabled = function() {
+            if (this.deleteSelectedSubmitting) {
+                return true
+            }
+            if (!this.checkedRowUUIDs().length) {
+                return true
+            }
+            return false
+        }
+
+        TailboneGrid.methods.deleteSelectedSubmit = function() {
+            let uuids = this.checkedRowUUIDs()
+            if (!uuids.length) {
+                alert("You must first select one or more objects to disable.")
+                return
+            }
+            if (! confirm("Are you sure you wish to DELETE the " + uuids.length + " selected objects?")) {
+                return
+            }
+
+            this.deleteSelectedSubmitting = true
+            this.deleteSelectedText = "Working, please wait..."
+            this.$refs.delete_selected_form.submit()
+        }
+    % endif
   </script>
 </%def>