Refactory Buefy templates to use WholePage and ThisPage components
plus add `GridFilter.set_choices()` method
This commit is contained in:
Lance Edgar
parent
c64fca852c
commit
1bb0330ab5
36 changed files with 806 additions and 613 deletions
|
|
@ -52,8 +52,8 @@
|
|||
${h.end_form()}
|
||||
</%def>
|
||||
|
||||
<%def name="modify_this_page()">
|
||||
${parent.modify_this_page()}
|
||||
<%def name="modify_this_page_vars()">
|
||||
${parent.modify_this_page_vars()}
|
||||
<script type="text/javascript">
|
||||
|
||||
TailboneFormData.formSubmitting = false
|
||||
|
|
|
|||
|
|
@ -68,8 +68,8 @@
|
|||
${h.end_form()}
|
||||
</%def>
|
||||
|
||||
<%def name="modify_this_page()">
|
||||
${parent.modify_this_page()}
|
||||
<%def name="modify_this_page_vars()">
|
||||
${parent.modify_this_page_vars()}
|
||||
<script type="text/javascript">
|
||||
|
||||
TailboneFormData.formSubmitting = false
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@
|
|||
% endif
|
||||
</%def>
|
||||
|
||||
<%def name="modify_this_page()">
|
||||
${parent.modify_this_page()}
|
||||
<%def name="modify_this_page_vars()">
|
||||
${parent.modify_this_page_vars()}
|
||||
% if master.deletable and instance_deletable and request.has_perm('{}.delete'.format(permission_prefix)) and master.delete_confirm == 'simple':
|
||||
<script type="text/javascript">
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
## include a "tools" section, just above the grid on the right.
|
||||
##
|
||||
## ##############################################################################
|
||||
<%inherit file="/base.mako" />
|
||||
<%inherit file="/page.mako" />
|
||||
|
||||
<%def name="title()">${index_title}</%def>
|
||||
|
||||
|
|
@ -215,9 +215,23 @@
|
|||
|
||||
</%def>
|
||||
|
||||
<%def name="modify_tailbone_grid()">
|
||||
<script type="text/javascript">
|
||||
<%def name="page_content()">
|
||||
<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
|
||||
</%def>
|
||||
|
||||
<%def name="modify_this_page_vars()">
|
||||
${parent.modify_this_page_vars()}
|
||||
<script type="text/javascript">
|
||||
% if master.mergeable and request.has_perm('{}.merge'.format(permission_prefix)):
|
||||
TailboneGridData.mergeFormButtonText = "Merge 2 ${model_title_plural}"
|
||||
TailboneGridData.mergeFormSubmitting = false
|
||||
|
|
@ -226,65 +240,43 @@
|
|||
this.mergeFormButtonText = "Working, please wait..."
|
||||
}
|
||||
% endif
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
<%def name="make_tailbone_grid_app()">
|
||||
${self.modify_tailbone_grid()}
|
||||
<script type="text/javascript">
|
||||
|
||||
TailboneGrid.data = function() { return TailboneGridData }
|
||||
|
||||
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) {
|
||||
|
||||
ThisPage.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
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
Vue.component('grid-page', GridPage)
|
||||
<%def name="make_this_page_component()">
|
||||
${parent.make_this_page_component()}
|
||||
<script type="text/javascript">
|
||||
|
||||
new Vue({
|
||||
el: '#grid-page-app'
|
||||
})
|
||||
TailboneGrid.data = function() { return TailboneGridData }
|
||||
|
||||
Vue.component('tailbone-grid', TailboneGrid)
|
||||
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
<%def name="render_this_page()">
|
||||
${self.page_content()}
|
||||
</%def>
|
||||
|
||||
<%def name="render_this_page_template()">
|
||||
${parent.render_this_page_template()}
|
||||
|
||||
## TODO: stop using |n filter
|
||||
${grid.render_buefy(tools=capture(self.grid_tools).strip(), context_menu=capture(self.context_menu_items).strip())|n}
|
||||
</%def>
|
||||
|
||||
|
||||
% 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()}
|
||||
${parent.body()}
|
||||
|
||||
% else:
|
||||
## no buefy, so do the traditional thing
|
||||
|
|
|
|||
|
|
@ -154,75 +154,80 @@ ${h.end_form()}
|
|||
% endif
|
||||
</%def>
|
||||
|
||||
<%def name="render_this_page_template()">
|
||||
${parent.render_this_page_template()}
|
||||
|
||||
% if use_buefy:
|
||||
<script type="text/x-template" id="merge-buttons-template">
|
||||
<div class="level" style="margin-top: 2em;">
|
||||
<div class="level-left">
|
||||
<script type="text/x-template" id="merge-buttons-template">
|
||||
<div class="level" style="margin-top: 2em;">
|
||||
<div class="level-left">
|
||||
|
||||
<div class="level-item">
|
||||
<a class="button" href="${index_url}">Whoops, nevermind</a>
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
${h.form(request.current_route_url(), **{'@submit': 'submitSwapForm'})}
|
||||
${h.csrf_token(request)}
|
||||
${h.hidden('uuids', value='{},{}'.format(object_to_keep.uuid, object_to_remove.uuid))}
|
||||
<b-button native-type="submit"
|
||||
:disabled="swapFormSubmitting">
|
||||
{{ swapFormButtonText }}
|
||||
</b-button>
|
||||
${h.end_form()}
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
% if use_buefy:
|
||||
${h.form(request.current_route_url(), **{'@submit': 'submitMergeForm'})}
|
||||
% else:
|
||||
${h.form(request.current_route_url())}
|
||||
% endif
|
||||
${h.csrf_token(request)}
|
||||
${h.hidden('uuids', value='{},{}'.format(object_to_remove.uuid, object_to_keep.uuid))}
|
||||
${h.hidden('commit-merge', value='yes')}
|
||||
<b-button type="is-primary"
|
||||
native-type="submit"
|
||||
:disabled="mergeFormSubmitting">
|
||||
{{ mergeFormButtonText }}
|
||||
</b-button>
|
||||
${h.end_form()}
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
<a class="button" href="${index_url}">Whoops, nevermind</a>
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
${h.form(request.current_route_url(), **{'@submit': 'submitSwapForm'})}
|
||||
${h.csrf_token(request)}
|
||||
${h.hidden('uuids', value='{},{}'.format(object_to_keep.uuid, object_to_remove.uuid))}
|
||||
<b-button native-type="submit"
|
||||
:disabled="swapFormSubmitting">
|
||||
{{ swapFormButtonText }}
|
||||
</b-button>
|
||||
${h.end_form()}
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
% if use_buefy:
|
||||
${h.form(request.current_route_url(), **{'@submit': 'submitMergeForm'})}
|
||||
% else:
|
||||
${h.form(request.current_route_url())}
|
||||
% endif
|
||||
${h.csrf_token(request)}
|
||||
${h.hidden('uuids', value='{},{}'.format(object_to_remove.uuid, object_to_keep.uuid))}
|
||||
${h.hidden('commit-merge', value='yes')}
|
||||
<b-button type="is-primary"
|
||||
native-type="submit"
|
||||
:disabled="mergeFormSubmitting">
|
||||
{{ mergeFormButtonText }}
|
||||
</b-button>
|
||||
${h.end_form()}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
<script type="text/javascript">
|
||||
<%def name="make_this_page_component()">
|
||||
${parent.make_this_page_component()}
|
||||
<script type="text/javascript">
|
||||
|
||||
const MergeButtons = {
|
||||
template: '#merge-buttons-template',
|
||||
data() {
|
||||
return {
|
||||
swapFormButtonText: "Swap which ${model_title} is kept/removed",
|
||||
swapFormSubmitting: false,
|
||||
mergeFormButtonText: "Yes, perform this merge",
|
||||
mergeFormSubmitting: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitSwapForm() {
|
||||
this.swapFormSubmitting = true
|
||||
this.swapFormButtonText = "Swapping, please wait..."
|
||||
},
|
||||
submitMergeForm() {
|
||||
this.mergeFormSubmitting = true
|
||||
this.mergeFormButtonText = "Merging, please wait..."
|
||||
},
|
||||
}
|
||||
}
|
||||
const MergeButtons = {
|
||||
template: '#merge-buttons-template',
|
||||
data() {
|
||||
return {
|
||||
swapFormButtonText: "Swap which ${model_title} is kept/removed",
|
||||
swapFormSubmitting: false,
|
||||
mergeFormButtonText: "Yes, perform this merge",
|
||||
mergeFormSubmitting: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitSwapForm() {
|
||||
this.swapFormSubmitting = true
|
||||
this.swapFormButtonText = "Swapping, please wait..."
|
||||
},
|
||||
submitMergeForm() {
|
||||
this.mergeFormSubmitting = true
|
||||
this.mergeFormButtonText = "Merging, please wait..."
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
Vue.component('merge-buttons', MergeButtons)
|
||||
Vue.component('merge-buttons', MergeButtons)
|
||||
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
</script>
|
||||
% endif
|
||||
|
||||
${parent.body()}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
## Default master 'versions' template, for showing an object's version history.
|
||||
##
|
||||
## ##############################################################################
|
||||
<%inherit file="/base.mako" />
|
||||
<%inherit file="/page.mako" />
|
||||
|
||||
## TODO: this page still uses old-style grid but should use Buefy grid
|
||||
|
||||
<%def name="title()">${model_title_plural} » ${instance_title} » history</%def>
|
||||
|
||||
|
|
@ -21,4 +23,9 @@
|
|||
History for ${instance_title}
|
||||
</%def>
|
||||
|
||||
${grid.render_complete()|n}
|
||||
<%def name="page_content()">
|
||||
${grid.render_complete()|n}
|
||||
</%def>
|
||||
|
||||
|
||||
${parent.body()}
|
||||
|
|
|
|||
|
|
@ -93,15 +93,15 @@
|
|||
% endif
|
||||
</%def>
|
||||
|
||||
<%def name="render_this_page_buefy()">
|
||||
<%def name="render_this_page_template()">
|
||||
% if master.has_rows:
|
||||
## TODO: stop using |n filter
|
||||
${rows_grid.render_buefy(allow_save_defaults=False, tools=capture(self.render_row_grid_tools))|n}
|
||||
% endif
|
||||
${parent.render_this_page_buefy()}
|
||||
${parent.render_this_page_template()}
|
||||
</%def>
|
||||
|
||||
<%def name="make_this_page_app()">
|
||||
<%def name="make_this_page_component()">
|
||||
<script type="text/javascript">
|
||||
|
||||
TailboneGrid.data = function() { return TailboneGridData }
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
Vue.component('tailbone-grid', TailboneGrid)
|
||||
|
||||
</script>
|
||||
${parent.make_this_page_app()}
|
||||
${parent.make_this_page_component()}
|
||||
</%def>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
## -*- coding: utf-8; -*-
|
||||
<%inherit file="/base.mako" />
|
||||
<%inherit file="/page.mako" />
|
||||
|
||||
<%def name="title()">${instance_title_normal} @ ver ${transaction.id}</%def>
|
||||
|
||||
<%def name="page_content()">
|
||||
## TODO: this was basically copied from Revel diff template..need to abstract
|
||||
|
||||
<div class="form-wrapper">
|
||||
|
|
@ -97,3 +98,7 @@
|
|||
% endif
|
||||
|
||||
% endfor
|
||||
</%def>
|
||||
|
||||
|
||||
${parent.body()}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue