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:
parent
9c84e30172
commit
054d030e15
@ -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
|
||||||
)
|
)
|
||||||
|
@ -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,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user