Add Vue.js support for "enable / disable selected" grid feature

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

@@ -93,6 +93,13 @@ Vue.component('grid-filter', GridFilter)
 let TailboneGrid = {
     template: '#tailbone-grid-template',
 
+    computed: {
+        // note, can use this with v-model for hidden 'uuids' fields
+        selected_uuids: function() {
+            return this.checkedRowUUIDs().join(',')
+        },
+    },
+
     methods: {
 
         getRowClass(row, index) {
@@ -232,8 +239,8 @@ let TailboneGrid = {
         },
 
         checkedRowUUIDs() {
-            var uuids = [];
+            let uuids = []
-            for (var row of this.$data.checkedRows) {
+            for (let row of this.$data.checkedRows) {
                 uuids.push(row.uuid)
             }
             return uuids

tailbone/templates/master/index.mako

@@ -171,18 +171,41 @@
   % endif
 
   ## enable / disable selected objects
-  % if master.supports_set_enabled_toggle and request.has_perm('{}.enable_disable_set'.format(permission_prefix)):
+  % if master.supports_set_enabled_toggle and master.has_perm('enable_disable_set'):
-      ${h.form(url('{}.enable_set'.format(route_prefix)), name='enable-set', class_='control')}
-      ${h.csrf_token(request)}
-      ${h.hidden('uuids')}
-      <button type="button" class="button">Enable Selected</button>
-      ${h.end_form()}
 
-      ${h.form(url('{}.disable_set'.format(route_prefix)), name='disable-set', class_='control')}
+      % if use_buefy:
-      ${h.csrf_token(request)}
+          ${h.form(url('{}.enable_set'.format(route_prefix)), class_='control', ref='enable_selected_form')}
-      ${h.hidden('uuids')}
+          ${h.csrf_token(request)}
-      <button type="button" class="button">Disable Selected</button>
+          ${h.hidden('uuids', v_model='selected_uuids')}
-      ${h.end_form()}
+          <b-button :disabled="enableSelectedDisabled"
+                    @click="enableSelectedSubmit()">
+            {{ enableSelectedText }}
+          </b-button>
+          ${h.end_form()}
+      % else:
+          ${h.form(url('{}.enable_set'.format(route_prefix)), name='enable-set', class_='control')}
+          ${h.csrf_token(request)}
+          ${h.hidden('uuids')}
+          <button type="button" class="button">Enable Selected</button>
+          ${h.end_form()}
+      % endif
+
+      % if use_buefy:
+          ${h.form(url('{}.disable_set'.format(route_prefix)), class_='control', ref='disable_selected_form')}
+          ${h.csrf_token(request)}
+          ${h.hidden('uuids', v_model='selected_uuids')}
+          <b-button :disabled="disableSelectedDisabled"
+                    @click="disableSelectedSubmit()">
+            {{ disableSelectedText }}
+          </b-button>
+          ${h.end_form()}
+      % else:
+          ${h.form(url('{}.disable_set'.format(route_prefix)), name='disable-set', class_='control')}
+          ${h.csrf_token(request)}
+          ${h.hidden('uuids')}
+          <button type="button" class="button">Disable Selected</button>
+          ${h.end_form()}
+      % endif
   % endif
 
   ## delete selected objects
@@ -274,6 +297,72 @@
   ${grid.render_buefy(tools=capture(self.grid_tools).strip(), context_menu=capture(self.context_menu_items).strip())|n}
 </%def>
 
+<%def name="modify_this_page_vars()">
+  ${parent.modify_this_page_vars()}
+  <script type="text/javascript">
+
+    % if master.supports_set_enabled_toggle and master.has_perm('enable_disable_set'):
+
+        TailboneGridData.enableSelectedSubmitting = false
+        TailboneGridData.enableSelectedText = "Enable Selected"
+
+        TailboneGrid.computed.enableSelectedDisabled = function() {
+            if (this.enableSelectedSubmitting) {
+                return true
+            }
+            if (!this.checkedRowUUIDs().length) {
+                return true
+            }
+            return false
+        }
+
+        TailboneGrid.methods.enableSelectedSubmit = 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 ENABLE the " + uuids.length + " selected objects?")) {
+                return
+            }
+
+            this.enableSelectedSubmitting = true
+            this.enableSelectedText = "Working, please wait..."
+            this.$refs.enable_selected_form.submit()
+        }
+
+        TailboneGridData.disableSelectedSubmitting = false
+        TailboneGridData.disableSelectedText = "Disable Selected"
+
+        TailboneGrid.computed.disableSelectedDisabled = function() {
+            if (this.disableSelectedSubmitting) {
+                return true
+            }
+            if (!this.checkedRowUUIDs().length) {
+                return true
+            }
+            return false
+        }
+
+        TailboneGrid.methods.disableSelectedSubmit = 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 DISABLE the " + uuids.length + " selected objects?")) {
+                return
+            }
+
+            this.disableSelectedSubmitting = true
+            this.disableSelectedText = "Working, please wait..."
+            this.$refs.disable_selected_form.submit()
+        }
+
+    % endif
+  </script>
+</%def>
+
 
 % if use_buefy:
     ${parent.body()}