rattail/tailbone
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Lance Edgar 2019-10-31 13:28:00 -05:00
parent 847136b69c
commit ebc22d845a
2 changed files with 109 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
tailbone/static/js/tailbone.buefy.grid.js
View file

@ -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 = [];
for (var row of this.$data.checkedRows) {
let uuids = []
for (let row of this.$data.checkedRows) {
uuids.push(row.uuid)
}
return uuids

111
tailbone/templates/master/index.mako
View file

@ -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)):
${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()}
% if master.supports_set_enabled_toggle and master.has_perm('enable_disable_set'):
${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()}
% if use_buefy:
${h.form(url('{}.enable_set'.format(route_prefix)), class_='control', ref='enable_selected_form')}
${h.csrf_token(request)}
${h.hidden('uuids', v_model='selected_uuids')}
<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()}