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
This commit is contained in:
dandds 2019-04-25 09:56:37 -04:00
parent 9c84e30172
commit 054d030e15
4 changed files with 34 additions and 18 deletions

View File

@ -1,3 +1,4 @@
from flask_wtf import FlaskForm
from wtforms.fields import FormField, FieldList, HiddenField, BooleanField from wtforms.fields import FormField, FieldList, HiddenField, BooleanField
from .forms import BaseForm from .forms import BaseForm
@ -8,13 +9,18 @@ from atst.domain.permission_sets import PermissionSets
from atst.utils.localization import translate from atst.utils.localization import translate
class EnvironmentForm(BaseForm): class EnvironmentForm(FlaskForm):
environment_id = HiddenField() environment_id = HiddenField()
environment_name = HiddenField() environment_name = HiddenField()
role = SelectField(environment_name, choices=ENV_ROLES, default=None) role = SelectField(
environment_name,
choices=ENV_ROLES,
default=None,
filters=[lambda x: None if x == "None" else x],
)
class PermissionsForm(BaseForm): class PermissionsForm(FlaskForm):
perms_env_mgmt = BooleanField( perms_env_mgmt = BooleanField(
translate("portfolios.applications.members.new.manage_envs"), default=False translate("portfolios.applications.members.new.manage_envs"), default=False
) )

View File

@ -18,6 +18,7 @@ export default {
showError: showError, showError: showError,
showValid: !showError && !!this.initialValue, showValid: !showError && !!this.initialValue,
validationError: this.initialErrors.join(' '), validationError: this.initialErrors.join(' '),
value: this.initialValue,
} }
}, },

View File

@ -85,3 +85,8 @@
.environment-roles-new__head { .environment-roles-new__head {
font-weight: $font-bold; font-weight: $font-bold;
} }
.environment-name--gray {
font-weight: $font-normal;
color: $color-gray-medium;
}

View File

@ -5,7 +5,7 @@
{% set step_one %} {% set step_one %}
<div class="modal__form--header"> <div class="modal__form--header">
<h1>Invite new portfolio member</h1> <h1>Invite new member</h1>
</div> </div>
<div class='form-row'> <div class='form-row'>
<div class='form-col form-col--half'> <div class='form-col form-col--half'>
@ -62,20 +62,24 @@
</div> </div>
</div> </div>
{% for environment_data in member_form.environment_roles %} {% for environment_data in member_form.environment_roles %}
<optionsinput inline-template
v-bind:initial-value="'{{ environment_data.role.data | string }}'"
>
<div class="usa-input"> <div class="usa-input">
<fieldset data-ally-disabled="true" class="form-row usa-input__choices"> <fieldset data-ally-disabled="true" class="form-row usa-input__choices">
<div class="form-col form-col--quarter"> <div class="form-col form-col--quarter">
<legend> <legend>
<div class="usa-input__title-inline"> <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
{{ environment_data.environment_name.data }} {{ environment_data.environment_name.data }}
</div> </div>
</legend> </legend>
</div> </div>
<div class="form-col form-col--three-quarters"> <div class="form-col form-col--three-quarters">
{{ environment_data.role() }} {{ environment_data.role(**{"v-model": "value"}) }}
</div> </div>
</fieldset> </fieldset>
</div> </div>
</optionsinput>
{{ environment_data.environment_id() }} {{ environment_data.environment_id() }}
{% endfor %} {% endfor %}
</div> </div>