Add Buefy support for "delete w/ simple confirm" from index grid

tailbone/static/js/tailbone.buefy.grid.js

@@ -147,6 +147,12 @@ let TailboneGrid = {
             this.applyFilters(params)
         },
 
+        deleteObject(event) {
+            // we let parent component/app deal with this, in whatever way makes sense...
+            // TODO: should we ever provide anything besides the URL for this?
+            this.$emit('deleteActionClicked', event.target.href)
+        },
+
         deleteResults(event) {
 
             // submit form if user confirms
@@ -166,3 +172,9 @@ let TailboneGrid = {
         }
     }
 }
+
+
+let GridPage = {
+    template: '#grid-page-template',
+    methods: {}
+}

tailbone/templates/grids/buefy.mako

@@ -145,7 +145,12 @@
         % if grid.main_actions or grid.more_actions:
             <b-table-column field="actions" label="Actions">
               % for action in grid.main_actions:
-                  <a :href="props.row._action_url_${action.key}"><i class="fas fa-${action.icon}"></i>
+                  <a :href="props.row._action_url_${action.key}"
+                     % if action.click_handler:
+                     @click.prevent="${action.click_handler}"
+                     % endif
+                     >
+                    <i class="fas fa-${action.icon}"></i>
                     ${action.label}
                   </a>
                   &nbsp;
@@ -224,7 +229,3 @@
   }
 
 </script>
-
-<div id="tailbone-grid-app">
-  <tailbone-grid></tailbone-grid>
-</div>

tailbone/templates/master/form.mako

@@ -8,7 +8,7 @@
             ## note, the `ref` here is for buefy only
             ${h.form(action_url('delete', instance), ref='deleteObjectForm')}
             ${h.csrf_token(request)}
-            <a href="#"
+            <a href="${action_url('delete', instance)}"
                % if use_buefy:
                @click.prevent="deleteObject"
                % else:

tailbone/templates/master/index.mako

@@ -224,9 +224,24 @@
 
     Vue.component('tailbone-grid', TailboneGrid)
 
+    % if master.deletable and request.has_perm('{}.delete'.format(permission_prefix)) and master.delete_confirm == 'simple':
+
+        GridPage.methods.deleteObject = function(url) {
+
+            if (confirm("Are you sure you wish to delete this ${model_title}?")) {
+                let form = this.$refs.deleteObjectForm
+                form.action = url
+                form.submit()
+            }
+        }
+
+    % endif
+
+    Vue.component('grid-page', GridPage)
+
     new Vue({
-        el: '#tailbone-grid-app'
+        el: '#grid-page-app'
-    });
+    })
 
   </script>
 </%def>
@@ -235,6 +250,27 @@
 % if use_buefy:
     ## TODO: stop using |n filter
     ${grid.render_buefy(tools=capture(self.grid_tools).strip(), context_menu=capture(self.context_menu_items).strip())|n}
+
+    <script type="text/x-template" id="grid-page-template">
+      <div>
+        <tailbone-grid
+           % if master.deletable and request.has_perm('{}.delete'.format(permission_prefix)) and master.delete_confirm == 'simple':
+           @deleteActionClicked="deleteObject"
+           % endif
+           >
+        </tailbone-grid>
+        % if master.deletable and request.has_perm('{}.delete'.format(permission_prefix)) and master.delete_confirm == 'simple':
+              ${h.form('#', ref='deleteObjectForm')}
+              ${h.csrf_token(request)}
+              ${h.end_form()}
+        % endif
+      </div>
+    </script>
+
+    <div id="grid-page-app">
+      <grid-page></grid-page>
+    </div>
+
     ${self.make_tailbone_grid_app()}
 
 % else:

tailbone/templates/master/view.mako

@@ -112,6 +112,11 @@ ${self.render_form_complete()}
         <br /><br />
         ## TODO: stop using |n filter
         ${rows_grid.render_buefy(allow_save_defaults=False, tools=capture(self.render_row_grid_tools))|n}
+
+        <div id="tailbone-grid-app">
+          <tailbone-grid></tailbone-grid>
+        </div>
+
         ${self.make_tailbone_grid_app()}
     % else:
         ## no buefy, so do the traditional thing

tailbone/views/master.py

@@ -2395,11 +2395,19 @@ class MasterView(View):
         actions = []
         prefix = self.get_permission_prefix()
         use_buefy = self.get_use_buefy()
+
+        # Edit
         if self.editable and self.request.has_perm('{}.edit'.format(prefix)):
             icon = 'edit' if use_buefy else 'pencil'
             actions.append(self.make_action('edit', icon=icon, url=self.default_edit_url))
+
+        # Delete
         if self.deletable and self.request.has_perm('{}.delete'.format(prefix)):
-            actions.append(self.make_action('delete', icon='trash', url=self.default_delete_url))
+            kwargs = {}
+            if use_buefy and self.delete_confirm == 'simple':
+                kwargs['click_handler'] = 'deleteObject'
+            actions.append(self.make_action('delete', icon='trash', url=self.default_delete_url, **kwargs))
+
         return actions
 
     def default_edit_url(self, row, i=None):