Let each grid component have a custom name, if needed

This commit is contained in:
Lance Edgar 2020-05-20 19:19:06 -05:00
parent 8683e2a4c2
commit a8a79ee326
5 changed files with 213 additions and 202 deletions

View file

@ -256,12 +256,12 @@
</%def>
<%def name="page_content()">
<tailbone-grid :csrftoken="csrftoken"
<${grid.component} :csrftoken="csrftoken"
% if master.deletable and request.has_perm('{}.delete'.format(permission_prefix)) and master.delete_confirm == 'simple':
@deleteActionClicked="deleteObject"
% endif
>
</tailbone-grid>
</${grid.component}>
% if master.deletable and request.has_perm('{}.delete'.format(permission_prefix)) and master.delete_confirm == 'simple':
${h.form('#', ref='deleteObjectForm')}
${h.csrf_token(request)}
@ -273,9 +273,9 @@
${parent.make_this_page_component()}
<script type="text/javascript">
TailboneGrid.data = function() { return TailboneGridData }
${grid.component_studly}.data = function() { return ${grid.component_studly}Data }
Vue.component('tailbone-grid', TailboneGrid)
Vue.component('${grid.component}', ${grid.component_studly})
</script>
</%def>
@ -309,10 +309,10 @@
## enable / disable selected objects
% if master.supports_set_enabled_toggle and master.has_perm('enable_disable_set'):
TailboneGridData.enableSelectedSubmitting = false
TailboneGridData.enableSelectedText = "Enable Selected"
${grid.component_studly}Data.enableSelectedSubmitting = false
${grid.component_studly}Data.enableSelectedText = "Enable Selected"
TailboneGrid.computed.enableSelectedDisabled = function() {
${grid.component_studly}.computed.enableSelectedDisabled = function() {
if (this.enableSelectedSubmitting) {
return true
}
@ -322,7 +322,7 @@
return false
}
TailboneGrid.methods.enableSelectedSubmit = function() {
${grid.component_studly}.methods.enableSelectedSubmit = function() {
let uuids = this.checkedRowUUIDs()
if (!uuids.length) {
alert("You must first select one or more objects to disable.")
@ -337,10 +337,10 @@
this.$refs.enable_selected_form.submit()
}
TailboneGridData.disableSelectedSubmitting = false
TailboneGridData.disableSelectedText = "Disable Selected"
${grid.component_studly}Data.disableSelectedSubmitting = false
${grid.component_studly}Data.disableSelectedText = "Disable Selected"
TailboneGrid.computed.disableSelectedDisabled = function() {
${grid.component_studly}.computed.disableSelectedDisabled = function() {
if (this.disableSelectedSubmitting) {
return true
}
@ -350,7 +350,7 @@
return false
}
TailboneGrid.methods.disableSelectedSubmit = function() {
${grid.component_studly}.methods.disableSelectedSubmit = function() {
let uuids = this.checkedRowUUIDs()
if (!uuids.length) {
alert("You must first select one or more objects to disable.")
@ -370,10 +370,10 @@
## delete selected objects
% if master.set_deletable and master.has_perm('delete_set'):
TailboneGridData.deleteSelectedSubmitting = false
TailboneGridData.deleteSelectedText = "Delete Selected"
${grid.component_studly}Data.deleteSelectedSubmitting = false
${grid.component_studly}Data.deleteSelectedText = "Delete Selected"
TailboneGrid.computed.deleteSelectedDisabled = function() {
${grid.component_studly}.computed.deleteSelectedDisabled = function() {
if (this.deleteSelectedSubmitting) {
return true
}
@ -383,7 +383,7 @@
return false
}
TailboneGrid.methods.deleteSelectedSubmit = function() {
${grid.component_studly}.methods.deleteSelectedSubmit = function() {
let uuids = this.checkedRowUUIDs()
if (!uuids.length) {
alert("You must first select one or more objects to disable.")
@ -401,10 +401,10 @@
% if master.bulk_deletable and master.has_perm('bulk_delete'):
TailboneGridData.deleteResultsSubmitting = false
TailboneGridData.deleteResultsText = "Delete Results"
${grid.component_studly}Data.deleteResultsSubmitting = false
${grid.component_studly}Data.deleteResultsText = "Delete Results"
TailboneGrid.computed.deleteResultsDisabled = function() {
${grid.component_studly}.computed.deleteResultsDisabled = function() {
if (this.deleteResultsSubmitting) {
return true
}
@ -414,7 +414,7 @@
return false
}
TailboneGrid.methods.deleteResultsSubmit = function() {
${grid.component_studly}.methods.deleteResultsSubmit = function() {
// TODO: show "plural model title" here?
if (!confirm("You are about to delete " + this.total.toLocaleString('en') + " objects.\n\nAre you sure?")) {
return
@ -429,10 +429,10 @@
% if master.mergeable and master.has_perm('merge'):
TailboneGridData.mergeFormButtonText = "Merge 2 ${model_title_plural}"
TailboneGridData.mergeFormSubmitting = false
${grid.component_studly}Data.mergeFormButtonText = "Merge 2 ${model_title_plural}"
${grid.component_studly}Data.mergeFormSubmitting = false
TailboneGrid.methods.submitMergeForm = function() {
${grid.component_studly}.methods.submitMergeForm = function() {
this.mergeFormSubmitting = true
this.mergeFormButtonText = "Working, please wait..."
}

View file

@ -102,6 +102,7 @@
</%def>
<%def name="make_this_page_component()">
% if master.has_rows:
<script type="text/javascript">
TailboneGrid.data = function() { return TailboneGridData }
@ -109,6 +110,7 @@
Vue.component('tailbone-grid', TailboneGrid)
</script>
% endif
${parent.make_this_page_component()}
</%def>