pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Form mixin so that you can enable the save button for a form on render

Browse Source
This commit is contained in:
leigh-mil 2019-10-31 13:15:51 -04:00
parent f3dcca8368
commit d142fa974a
4 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/mixins/form.js
View File

@ -5,6 +5,10 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
enableSave: {
type: Boolean,
default: false,
},
}, },
mounted: function() { mounted: function() {
@ -52,9 +56,9 @@ export default {
canSave: function() { canSave: function() {
const formValid = !this.invalid const formValid = !this.invalid
if (formValid) { if (this.changed && formValid) {
return true return true
} else if (this.changed && formValid) { } else if (this.enableSave && formValid) {
return true return true
} else { } else {
return false return false

4
templates/applications/fragments/members.html
View File

@ -57,12 +57,12 @@
<h1>Verify Member Information</h1> <h1>Verify Member Information</h1>
<hr> <hr>
</div> </div>
<base-form inline-template> <base-form inline-template :enable-save="true">
<form id='{{ resend_invite_modal }}' method="POST" action="{{ url_for('applications.resend_invite', application_id=application.id, application_role_id=member.role_id) }}"> <form id='{{ resend_invite_modal }}' method="POST" action="{{ url_for('applications.resend_invite', application_id=application.id, application_role_id=member.role_id) }}">
{{ member.update_invite_form.csrf_token }} {{ member.update_invite_form.csrf_token }}
{{ member_fields.InfoFields(member.update_invite_form) }} {{ member_fields.InfoFields(member.update_invite_form) }}
<div class="action-group"> <div class="action-group">
{{ SaveButton(text="Resend Invite", disable_on_initial_render=False)}} {{ SaveButton(text="Resend Invite")}}
<a class='action-group__action' v-on:click="closeModal('{{ resend_invite_modal }}')">{{ "common.cancel" | translate }}</a> <a class='action-group__action' v-on:click="closeModal('{{ resend_invite_modal }}')">{{ "common.cancel" | translate }}</a>
</div> </div>
</form> </form>

3
templates/applications/fragments/new_member_modal_content.html
View File

@ -25,7 +25,7 @@
<input <input
type='button' type='button'
v-on:click="next()" v-on:click="next()"
v-bind:disabled="invalid" v-bind:disabled="!canSave"
class='action-group__action usa-button' class='action-group__action usa-button'
value='{{ "portfolios.applications.members.form.next_button" | translate }}'> value='{{ "portfolios.applications.members.form.next_button" | translate }}'>
{% endset %} {% endset %}
@ -40,6 +40,7 @@
type="submit" type="submit"
class='action-group__action usa-button' class='action-group__action usa-button'
form="add-app-mem" form="add-app-mem"
v-bind:disabled="!canSave"
value='{{ "portfolios.applications.members.form.add_member" | translate}}'> value='{{ "portfolios.applications.members.form.add_member" | translate}}'>
{% endset %} {% endset %}

9
templates/components/save_button.html
View File

@ -1,12 +1,11 @@
{% macro SaveButton(text="common.save" | translate, element="button", additional_classes="", form=None, disable_on_initial_render=True) -%} {% macro SaveButton(text="common.save" | translate, element="button", additional_classes="", form=None) -%}
{% set class = "usa-button usa-button-primary" + additional_classes %} {% set class = "usa-button usa-button-primary " + additional_classes %}
{% set disabled = "!changed || invalid" if disable_on_initial_render else "invalid"%}
{% if element == "button" %} {% if element == "button" %}
<button type="submit" class="{{ class }}" tabindex="0" v-bind:disabled='{{ disabled }}' {{ form_attr }} > <button type="submit" class="{{ class }}" tabindex="0" v-bind:disabled="!canSave" {{ form_attr }} >
{{ text }} {{ text }}
</button> </button>
{% elif element == 'input' %} {% elif element == 'input' %}
<input type="submit" class="{{ class }}" tabindex="0" v-bind:disabled='{{ disabled }}' value='{{ text }}' {% if form %}form="{{ form }}"{% endif %} /> <input type="submit" class="{{ class }}" tabindex="0" v-bind:disabled="!canSave" value='{{ text }}' {% if form %}form="{{ form }}"{% endif %} />
{% endif %} {% endif %}
{%- endmacro %} {%- endmacro %}