Refactor form/page component structure for Buefy/Vue.js

this also moves Execute Batch from the form buttons area, to object helper
This commit is contained in:
Lance Edgar 2019-06-17 15:07:19 -05:00
parent 4cadeb8e5d
commit cc79fe76fd
12 changed files with 270 additions and 275 deletions

View file

@ -26,12 +26,12 @@
% endif
</%def>
<%def name="modify_tailbone_form()">
${parent.modify_tailbone_form()}
<%def name="modify_this_page()">
${parent.modify_this_page()}
% if master.deletable and instance_deletable and request.has_perm('{}.delete'.format(permission_prefix)) and master.delete_confirm == 'simple':
<script type="text/javascript">
FormPage.methods.deleteObject = function() {
ThisPage.methods.deleteObject = function() {
if (confirm("Are you sure you wish to delete this ${model_title}?")) {
this.$refs.deleteObjectForm.submit()
}

View file

@ -5,8 +5,8 @@
<%def name="extra_javascript()">
${parent.extra_javascript()}
% if master.deletable and instance_deletable and request.has_perm('{}.delete'.format(permission_prefix)) and master.delete_confirm == 'simple':
% if not use_buefy:
% if not use_buefy:
% if master.deletable and instance_deletable and request.has_perm('{}.delete'.format(permission_prefix)) and master.delete_confirm == 'simple':
<script type="text/javascript">
$(function () {
@ -22,16 +22,12 @@
</script>
% endif
% endif
% if master.has_rows:
% if use_buefy:
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.grid.js') + '?ver={}'.format(tailbone.__version__))}
% else:
<script type="text/javascript">
$(function() {
$('.grid-wrapper').gridwrapper();
});
</script>
% if master.has_rows:
<script type="text/javascript">
$(function() {
$('.grid-wrapper').gridwrapper();
});
</script>
% endif
% endif
</%def>
@ -85,45 +81,36 @@
${rows_grid_tools}
</%def>
<%def name="modify_tailbone_grid()">
## NOTE: if you override this, must use <script> tags
<%def name="render_this_page()">
${parent.render_this_page()}
% if master.has_rows:
% if use_buefy:
<br />
<tailbone-grid></tailbone-grid>
% else:
${rows_grid|n}
% endif
% endif
</%def>
<%def name="make_tailbone_grid_app()">
${self.modify_tailbone_grid()}
<%def name="render_this_page_buefy()">
% 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()}
</%def>
<%def name="make_this_page_app()">
<script type="text/javascript">
TailboneGrid.data = function() { return TailboneGridData }
Vue.component('tailbone-grid', TailboneGrid)
new Vue({
el: '#tailbone-grid-app'
});
</script>
${parent.make_this_page_app()}
</%def>
${self.render_form_complete()}
% if master.has_rows:
% if use_buefy:
<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
${rows_grid|n}
% endif
% endif
% if use_buefy:
${self.make_tailbone_form_app()}
% endif
${parent.body()}