Files
atst/templates/fragments/applications/add_new_application_member.html
dandds 054d030e15 Vue binding for environment role selections.
The environment name will be grayed out until something besides the
default "no access" is selected.

Small changes to the application member subforms:
- filter for "None" as a string
- have nested forms inherit from FlaskForm; each nested form adds its
  own validation error flash otherwise if there are validation problems
2019-04-30 14:43:23 -04:00

109 lines
4.2 KiB
HTML

{% from "components/icon.html" import Icon %}
{% from "components/text_input.html" import TextInput %}
{% from "components/checkbox_input.html" import CheckboxInput %}
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
{% set step_one %}
<div class="modal__form--header">
<h1>Invite new 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>{{ "portfolios.applications.members.new.assign_roles" | translate }}</h1>
<a class='icon-link'>
{{ Icon('info') }}
{{ "portfolios.applications.members.new.learn_more" | translate }}
</a>
<div class="environment-roles-new">
<div class="form-row">
<div class="form-col form-col--quarter">
<span class="environment-roles-new__head">
{{ "common.resource_names.environments" | translate }}:
</span>
</div>
<div class="form-col form-col--three-quarters">
<span class="environment-roles-new__head">
{{ "common.choose_role" | translate }}:
</span>
</div>
</div>
{% for environment_data in member_form.environment_roles %}
<optionsinput inline-template
v-bind:initial-value="'{{ environment_data.role.data | string }}'"
>
<div class="usa-input">
<fieldset data-ally-disabled="true" class="form-row usa-input__choices">
<div class="form-col form-col--quarter">
<legend>
<div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
{{ environment_data.environment_name.data }}
</div>
</legend>
</div>
<div class="form-col form-col--three-quarters">
{{ environment_data.role(**{"v-model": "value"}) }}
</div>
</fieldset>
</div>
</optionsinput>
{{ environment_data.environment_id() }}
{% endfor %}
</div>
<h1>{{ "portfolios.applications.members.new.manage_perms" | translate({"application_name": application.name}) }}</h1>
{{ CheckboxInput(member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") }}
{{ CheckboxInput(member_form.permission_sets.perms_del_env, classes="input__inline-fields") }}
{{ CheckboxInput(member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
</div>
<div class='action-group'>
<input
type="submit"
class='action-group__action usa-button'
form="add-app-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-app-mem',
member_form,
url_for("applications.create_member", application_id=application.id),
[step_one, step_two],
button_text=("portfolios.admin.add_new_member" | translate),
button_icon="plus-circle-solid",
) }}