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:
Lance Edgar 2019-05-21 20:11:57 -05:00
parent b16a81cf6e
commit f4f435c682
3 changed files with 108 additions and 25 deletions

View file

@ -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">