457b1f9523
In order to place modal forms in other places on the page (so that forms are not nested) it's necessary to move MultiStepModalForm links out of the component. They just need to refer to the correct modal. This PR also makes changes to ensure that the active modal is being unset everywhere correctly when a modal is closed.
84 lines
2.8 KiB
HTML
84 lines
2.8 KiB
HTML
{% from "components/icon.html" import Icon %}
|
|
{% from "components/text_input.html" import TextInput %}
|
|
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
|
|
|
|
{% macro SimpleOptionsInput(field) %}
|
|
<div class="usa-input">
|
|
<fieldset data-ally-disabled="true" class="usa-input__choices">
|
|
<legend>
|
|
<div class="usa-input__title-inline">
|
|
{{ field.label | striptags}}
|
|
</div>
|
|
</legend>
|
|
{{ field() }}
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% set step_one %}
|
|
<div class="modal__form--header">
|
|
<h1>Invite new portfolio member</h1>
|
|
</div>
|
|
<div class='form-row'>
|
|
<div class='form-col form-col--half'>
|
|
{{ TextInput(member_form.user_data.first_name, validation='requiredField') }}
|
|
</div>
|
|
<div class='form-col form-col--half'>
|
|
{{ TextInput(member_form.user_data.last_name, validation='requiredField') }}
|
|
</div>
|
|
</div>
|
|
<div class='form-row'>
|
|
<div class='form-col form-col--half'>
|
|
{{ TextInput(member_form.user_data.email, validation='email') }}
|
|
</div>
|
|
<div class='form-col form-col--half'>
|
|
{{ TextInput(member_form.user_data.phone_number, validation='usPhone', optional=True) }}
|
|
</div>
|
|
</div>
|
|
<div class='form-row'>
|
|
<div class='form-col form-col--half'>
|
|
{{ TextInput(member_form.user_data.dod_id, validation='dodId') }}
|
|
</div>
|
|
<div class='form-col form-col--half'>
|
|
</div>
|
|
</div>
|
|
<div class='action-group'>
|
|
<input
|
|
type='button'
|
|
v-on:click="next()"
|
|
v-bind:disabled="invalid"
|
|
class='action-group__action usa-button'
|
|
value='Next'>
|
|
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
|
|
</div>
|
|
{% endset %}
|
|
{% set step_two %}
|
|
<div class="modal__form--padded">
|
|
<div class="modal__form--header">
|
|
<h1>Assign member permissions</h1>
|
|
<a class='icon-link'>
|
|
{{ Icon('info') }}
|
|
{{ "portfolios.admin.permissions_info" | translate }}
|
|
</a>
|
|
</div>
|
|
{{ SimpleOptionsInput(member_form.permission_sets.perms_app_mgmt) }}
|
|
{{ SimpleOptionsInput(member_form.permission_sets.perms_funding) }}
|
|
{{ SimpleOptionsInput(member_form.permission_sets.perms_reporting) }}
|
|
{{ SimpleOptionsInput(member_form.permission_sets.perms_portfolio_mgmt) }}
|
|
<div class='action-group'>
|
|
<input
|
|
type="submit"
|
|
class='action-group__action usa-button'
|
|
form="add-port-mem"
|
|
value='Invite member'>
|
|
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
|
|
</div>
|
|
</div>
|
|
{% endset %}
|
|
{{ MultiStepModalForm(
|
|
'add-port-mem',
|
|
member_form,
|
|
url_for("portfolios.create_member", portfolio_id=portfolio.id),
|
|
[step_one, step_two],
|
|
) }}
|