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:
parent
4cadeb8e5d
commit
cc79fe76fd
12 changed files with 270 additions and 275 deletions
|
@ -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()
|
||||
}
|
||||
|
|
|
@ -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()}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue