Add <once-button>
component for Buefy templates
i.e. just a button, which allows only one click and then auto-disables
This commit is contained in:
parent
b16a81cf6e
commit
f4f435c682
3 changed files with 108 additions and 25 deletions
|
@ -91,6 +91,59 @@
|
|||
<li>${h.link_to("Back to {}".format(model_title_plural), url(route_prefix))}</li>
|
||||
</%def>
|
||||
|
||||
|
||||
% if use_buefy:
|
||||
|
||||
<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())}
|
||||
${h.csrf_token(request)}
|
||||
${h.hidden('uuids', value='{},{}'.format(object_to_keep.uuid, object_to_remove.uuid))}
|
||||
<once-button native-type="submit"
|
||||
text="Swap which ${model_title} is kept/removed"
|
||||
working="Swapping">
|
||||
</once-button>
|
||||
${h.end_form()}
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
${h.form(request.current_route_url())}
|
||||
${h.csrf_token(request)}
|
||||
${h.hidden('uuids', value='{},{}'.format(object_to_remove.uuid, object_to_keep.uuid))}
|
||||
${h.hidden('commit-merge', value='yes')}
|
||||
<once-button native-type="submit"
|
||||
type="is-primary"
|
||||
text="Yes, perform this merge"
|
||||
working="Merging">
|
||||
</once-button>
|
||||
${h.end_form()}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
const MergeButtons = {
|
||||
template: '#merge-buttons-template'
|
||||
}
|
||||
|
||||
Vue.component('merge-buttons', MergeButtons)
|
||||
|
||||
</script>
|
||||
|
||||
## end of buefy
|
||||
% endif
|
||||
|
||||
|
||||
<ul id="context-menu">
|
||||
${self.context_menu_items()}
|
||||
</ul>
|
||||
|
@ -141,34 +194,18 @@
|
|||
|
||||
% if use_buefy:
|
||||
|
||||
<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())}
|
||||
${h.csrf_token(request)}
|
||||
${h.hidden('uuids', value='{},{}'.format(object_to_keep.uuid, object_to_remove.uuid))}
|
||||
${h.submit('submit', "Swap which {} is kept/removed".format(model_title), class_='button')}
|
||||
${h.end_form()}
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
${h.form(request.current_route_url())}
|
||||
${h.csrf_token(request)}
|
||||
${h.hidden('uuids', value='{},{}'.format(object_to_remove.uuid, object_to_keep.uuid))}
|
||||
${h.hidden('commit-merge', value='yes')}
|
||||
${h.submit('merge', "Yes, perform this merge", class_='button is-primary')}
|
||||
${h.end_form()}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="merge-buttons-app">
|
||||
<merge-buttons></merge-buttons>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
new Vue({
|
||||
el: '#merge-buttons-app'
|
||||
})
|
||||
</script>
|
||||
|
||||
% else:
|
||||
## no buefy; do legacy stuff
|
||||
${h.form(request.current_route_url(), class_='merge')}
|
||||
${h.csrf_token(request)}
|
||||
<div class="buttons">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue