Use modal dialogs for confirmations

This commit is contained in:
Yingtong Li 2020-01-04 21:41:36 +11:00
parent 2936433689
commit 77102d7203
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
3 changed files with 132 additions and 24 deletions

View File

@ -28,20 +28,20 @@
{% if is_latest %}
{% if revision.can_submit(request.user) %}
<button class="ui mini labeled primary icon button" type="submit" name="action" value="Submit" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to submit this budget for Treasury approval? You will not be able to make any additional changes without withdrawing the budget.');"><i class="paper plane icon"></i> Submit</button>
<button class="ui mini labeled primary icon button" data-action="Submit" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="paper plane icon"></i> Submit</button>
{% endif %}
{% if revision.can_endorse(request.user) %}
<button class="ui mini labeled positive icon button" type="submit" name="action" value="Endorse" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to give this budget Treasury endorsement?');"><i class="check icon"></i> Endorse</button>
<button class="ui mini labeled positive icon button" data-action="Endorse" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="check icon"></i> Endorse</button>
<button class="ui mini labeled basic negative icon button" type="submit" name="action" value="Return" onclick="return confirm('Are you sure you want to refuse this budget Treasury endorsement and return it for re-drafting?');"><i class="undo icon"></i> Return for re-drafting</button>
<button class="ui mini labeled basic negative icon button" data-action="Return" onclick="return uiConfirm(this);"><i class="undo icon"></i> Return for re-drafting</button>
{% endif %}
{% if revision.can_approve(request.user) %}
<button class="ui mini labeled positive icon button" type="submit" name="action" value="Approve" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to mark this budget as committee-approved?');"><i class="check icon"></i> Approve</button>
<button class="ui mini labeled positive icon button" data-action="Approve" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="check icon"></i> Approve</button>
<button class="ui mini labeled basic negative icon button" type="submit" name="action" value="CmteReturn" onclick="return confirm('Are you sure you want to refuse this budget committee approval and return it for re-drafting?');"><i class="undo icon"></i> Return for re-drafting</button>
<button class="ui mini labeled basic negative icon button" data-action="CmteReturn" onclick="return uiConfirm(this);"><i class="undo icon"></i> Return for re-drafting</button>
{% endif %}
{% if revision.can_withdraw(request.user) %}
<button class="ui mini labeled basic negative icon button" type="submit" name="action" value="Withdraw" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to withdraw this budget from being considered for approval? The budget will be reverted to a draft.');"><i class="undo icon"></i> Withdraw</button>
<button class="ui mini labeled basic negative icon button" data-action="Withdraw" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="undo icon"></i> Withdraw</button>
{% endif %}
{% if revision.can_edit(request.user) %}
@ -56,6 +56,7 @@
</div>
{% endif %}
<input type="hidden" name="action" value="">
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
{% else %}
<a class="ui mini labeled right floated icon button" href="{{ url('budget_print', kwargs={'id': revision.budget.id}) }}?revision={{ revision.id }}" target="_blank"><i class="print icon"></i> Print</a>
@ -148,17 +149,18 @@
<div class="required field">
<textarea rows="4" name="comment"></textarea>
</div>
<input type="hidden" name="action">
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
<input class="ui primary button" type="submit" name="action" value="Comment">
<button class="ui primary button" data-action="Comment" onclick="return uiSubmit(this);">Comment</button>
{% if revision.state == import('sstreasury.models').BudgetState.AWAIT_REVIEW.value and request.user.groups.filter(name='Treasury').exists() %}
<button class="ui right floated labeled basic negative icon button" type="submit" name="action" value="Comment,Return" onclick="return confirm('Are you sure you want to refuse this budget Treasury endorsement and return it for re-drafting?');"><i class="undo icon"></i> Comment and return for re-drafting</button>
<button class="ui right floated labeled basic negative icon button" data-action="Comment,Return" onclick="return uiConfirm(this);"><i class="undo icon"></i> Comment and return for re-drafting</button>
<button class="ui right floated labeled positive icon button" type="submit" name="action" value="Comment,Endorse" onclick="return confirm('Are you sure you want to give this budget Treasury endorsement?');"><i class="check icon"></i> Comment and endorse</button>
<button class="ui right floated labeled positive icon button" data-action="Comment,Endorse" onclick="return uiConfirm(this);"><i class="check icon"></i> Comment and endorse</button>
{% elif revision.state != import('sstreasury.models').BudgetState.APPROVED.value and request.user.groups.filter(name='Secretary').exists() %}
<button class="ui right floated labeled basic negative icon button" type="submit" name="action" value="Comment,CmteReturn" onclick="return confirm('Are you sure you want to refuse this budget committee approval and return it for re-drafting?');"><i class="undo icon"></i> Comment and return for re-drafting</button>
<button class="ui right floated labeled basic negative icon button" data-action="Comment,CmteReturn" onclick="return uiConfirm(this);"><i class="undo icon"></i> Comment and return for re-drafting</button>
<button class="ui right floated labeled positive icon button" type="submit" name="action" value="Comment,Approve" onclick="return confirm('Are you sure you want to mark this budget as committee-approved?');"><i class="check icon"></i> Comment and approve</button>
<button class="ui right floated labeled positive icon button" data-action="Comment,Approve" onclick="return uiConfirm(this);"><i class="check icon"></i> Comment and approve</button>
{% endif %}
</form>
@ -209,6 +211,43 @@
{% endfor %}
</div>
{% endif %}
<div class="ui modal">
<div class="content" data-action="Submit">
<p>Are you sure you want to submit this budget for Treasury review? You will not be able to make any additional changes without withdrawing the budget.</p>
</div>
<div class="content" data-action="Endorse">
<p>Are you sure you want to give this budget Treasury endorsement?</p>
</div>
<div class="content" data-action="Comment,Endorse">
<p>Are you sure you want to give this budget Treasury endorsement?</p>
</div>
<div class="content" data-action="Return">
<p>Are you sure you want to refuse this budget Treasury endorsement and return it for re-drafting?</p>
</div>
<div class="content" data-action="Comment,Return">
<p>Are you sure you want to refuse this budget Treasury endorsement and return it for re-drafting?</p>
</div>
<div class="content" data-action="Approve">
<p>Are you sure you want to mark this budget as committee-approved?</p>
</div>
<div class="content" data-action="Comment,Approve">
<p>Are you sure you want to mark this budget as committee-approved?</p>
</div>
<div class="content" data-action="CmteReturn">
<p>Are you sure you want to refuse this budget committee approval and return it for re-drafting?</p>
</div>
<div class="content" data-action="Comment,CmteReturn">
<p>Are you sure you want to refuse this budget committee approval and return it for re-drafting?</p>
</div>
<div class="content" data-action="Withdraw">
<p>Are you sure you want to withdraw this budget from being considered for approval? The budget will be reverted to a draft.</p>
</div>
<div class="actions">
<div class="ui primary approve button">Continue</div>
<div class="ui cancel button">Cancel</div>
</div>
</div>
{% endblock %}
{% block head %}
@ -241,6 +280,27 @@
{% block script %}
{{ super() }}
<script>
function uiSubmit(button) {
button.form.elements['action'].value = button.dataset['action'];
button.form.submit();
return false;
}
function uiConfirm(button) {
$('.ui.modal .content').hide();
$('.ui.modal .content').filter('[data-action="' + button.dataset['action'] + '"]').show();
$('.ui.modal').modal({
closable: false,
onApprove: function() {
uiSubmit(button);
}
}).modal('show');
return false;
}
</script>
<script src="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid.min.js" integrity="sha256-lzjMTpg04xOdI+MJdjBst98bVI6qHToLyVodu3EywFU=" crossorigin="anonymous"></script>
<script src="{{ static('sstreasury/budget.js') }}"></script>

View File

@ -105,12 +105,6 @@
<input type="hidden" name="items" id="items_input">
<div class="ui divider"></div>
<div class="ui error message"></div>
<div>
<h2 class="ui header">Declaration</h2>
<p>By submitting this form for processing with my MUMUS account, I agree that MUMUS Inc. will accept this communication as containing my signature for the purposes of the Electronic Transactions Acts. I certify that the information on this form is true and accurate. I acknowledge that incorrect information may result in the forfeiture of this reimbursement.</p>
<p>Under the Pay As You Go legislation and guidelines produced by the Australian Taxation Office, I state that the supply to MUMUS Inc. described on this form is wholly of a private or domestic nature for me, I have no reasonable expectation of profit or gain from the activity undertaken, and I consider that I do not meet the definition of enterprise for tax purposes. Therefore, I do not need to quote an Australian Business Number and MUMUS Inc. is not required to withhold tax from my payment.</p>
</div>
<div class="ui divider"></div>
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
<input class="ui primary button" type="submit" name='submit' value="Save">
<input class="ui button" type="submit" name='submit' value="Save and continue editing">

View File

@ -27,15 +27,15 @@
<span class="ui header">Status: {{ claim.get_state_display() }}</span>
{% if claim.can_submit(request.user) %}
<button class="ui mini labeled primary icon button" type="submit" name="action" value="Submit" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to submit this claim for Treasury approval? You will not be able to make any additional changes without withdrawing the claim.');"><i class="paper plane icon"></i> Submit</button>
<button class="ui mini labeled primary icon button" data-action="Submit" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="paper plane icon"></i> Submit</button>
{% endif %}
{% if claim.can_approve(request.user) %}
<button class="ui mini labeled positive icon button" type="submit" name="action" value="Approve" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to approve this claim?');"><i class="check icon"></i> Approve</button>
<button class="ui mini labeled positive icon button" data-action="Approve" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="check icon"></i> Approve</button>
<button class="ui mini labeled basic negative icon button" type="submit" name="action" value="Return" onclick="return confirm('Are you sure you want to refuse this claim and return it for re-drafting?');"><i class="undo icon"></i> Return for re-drafting</button>
<button class="ui mini labeled basic negative icon button" data-action="Return" onclick="return uiConfirm(this);"><i class="undo icon"></i> Return for re-drafting</button>
{% endif %}
{% if claim.can_withdraw(request.user) %}
<button class="ui mini labeled basic negative icon button" type="submit" name="action" value="Withdraw" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to withdraw this budget from being considered for approval? The budget will be reverted to a draft.');"><i class="undo icon"></i> Withdraw</button>
<button class="ui mini labeled basic negative icon button" data-action="Withdraw" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="undo icon"></i> Withdraw</button>
{% endif %}
{% if claim.can_edit(request.user) %}
@ -50,6 +50,7 @@
</div>
{% endif %}
<input type="hidden" name="action" value="">
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
</form>
@ -147,13 +148,14 @@
<div class="required field">
<textarea rows="4" name="comment"></textarea>
</div>
<input type="hidden" name="action" value="">
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
<input class="ui primary button" type="submit" name="action" value="Comment">
<button class="ui primary button" data-action="Comment" onclick="return uiSubmit(this);">Comment</button>
{% if claim.can_approve(request.user) %}
<button class="ui right floated labeled basic negative icon button" type="submit" name="action" value="Comment,Return" onclick="return confirm('Are you sure you want to refuse this claim and return it for re-drafting?');"><i class="undo icon"></i> Comment and return for re-drafting</button>
<button class="ui right floated labeled basic negative icon button" data-action="Comment,Return" onclick="return uiConfirm(this);"><i class="undo icon"></i> Comment and return for re-drafting</button>
<button class="ui right floated labeled positive icon button" type="submit" name="action" value="Comment,Approve" onclick="return confirm('Are you sure you want to approve this claim?');"><i class="check icon"></i> Comment and approve</button>
<button class="ui right floated labeled positive icon button" data-action="Comment,Approve" onclick="return uiConfirm(this);"><i class="check icon"></i> Comment and approve</button>
{% endif %}
</form>
@ -203,6 +205,37 @@
{% endif %}
{% endfor %}
</div>
<div class="ui modal">
<div class="content" data-action="Submit">
<p>Are you sure you want to submit this claim for Treasury approval? You will not be able to make any additional changes without withdrawing the claim.</p>
<div class="ui segment">
<h2 class="ui header">Declaration</h2>
<p>By submitting this form for processing with my MUMUS account, I agree that MUMUS Inc. will accept this communication as containing my signature for the purposes of the Electronic Transactions Acts. I certify that the information on this form is true and accurate. I acknowledge that incorrect information may result in the forfeiture of this reimbursement.</p>
<p>Under the Pay As You Go legislation and guidelines produced by the Australian Taxation Office, I state that the supply to MUMUS Inc. described on this form is wholly of a private or domestic nature for me, I have no reasonable expectation of profit or gain from the activity undertaken, and I consider that I do not meet the definition of enterprise for tax purposes. Therefore, I do not need to quote an Australian Business Number and MUMUS Inc. is not required to withhold tax from my payment.</p>
</div>
</div>
<div class="content" data-action="Approve">
<p>Are you sure you want to approve this claim?</p>
</div>
<div class="content" data-action="Comment,Approve">
<p>Are you sure you want to approve this claim?</p>
</div>
<div class="content" data-action="Return">
<p>Are you sure you want to refuse this claim and return it for re-drafting?</p>
</div>
<div class="content" data-action="Comment,Return">
<p>Are you sure you want to refuse this claim and return it for re-drafting?</p>
</div>
<div class="content" data-action="Withdraw">
<p>Are you sure you want to withdraw this claim from being considered for approval? The budget will be reverted to a draft.</p>
</div>
<div class="actions">
<div class="ui primary approve button">Continue</div>
<div class="ui cancel button">Cancel</div>
</div>
</div>
{% endblock %}
{% block head %}
@ -235,6 +268,27 @@
{% block script %}
{{ super() }}
<script>
function uiSubmit(button) {
button.form.elements['action'].value = button.dataset['action'];
button.form.submit();
return false;
}
function uiConfirm(button) {
$('.ui.modal .content').hide();
$('.ui.modal .content').filter('[data-action="' + button.dataset['action'] + '"]').show();
$('.ui.modal').modal({
closable: false,
onApprove: function() {
uiSubmit(button);
}
}).modal('show');
return false;
}
</script>
<script src="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid.min.js" integrity="sha256-lzjMTpg04xOdI+MJdjBst98bVI6qHToLyVodu3EywFU=" crossorigin="anonymous"></script>
<script src="{{ static('sstreasury/claim.js') }}"></script>