Merge pull request #1065 from dod-ccpo/new-member-modal-part-2
New member modal part 2
This commit is contained in:
leigh-mil
GitHub
commit
a265c12a52
@ -29,13 +29,25 @@ class EnvironmentForm(FlaskForm):
|
||||
|
||||
class PermissionsForm(FlaskForm):
|
||||
perms_env_mgmt = BooleanField(
|
||||
translate("portfolios.applications.members.new.manage_envs"), default=False
|
||||
translate("portfolios.applications.members.form.env_mgmt.label"),
|
||||
default=False,
|
||||
description=translate(
|
||||
"portfolios.applications.members.form.env_mgmt.description"
|
||||
),
|
||||
)
|
||||
perms_team_mgmt = BooleanField(
|
||||
translate("portfolios.applications.members.new.manage_team"), default=False
|
||||
translate("portfolios.applications.members.form.team_mgmt.label"),
|
||||
default=False,
|
||||
description=translate(
|
||||
"portfolios.applications.members.form.team_mgmt.description"
|
||||
),
|
||||
)
|
||||
perms_del_env = BooleanField(
|
||||
translate("portfolios.applications.members.new.delete_envs"), default=False
|
||||
translate("portfolios.applications.members.form.del_env.label"),
|
||||
default=False,
|
||||
description=translate(
|
||||
"portfolios.applications.members.form.del_env.description"
|
||||
),
|
||||
)
|
||||
|
||||
@property
|
||||
|
||||
@ -1,13 +1,8 @@
|
||||
import { emitEvent } from '../lib/emitters'
|
||||
import nestedcheckboxinput from './nested_checkbox_input'
|
||||
|
||||
export default {
|
||||
name: 'checkboxinput',
|
||||
|
||||
components: {
|
||||
nestedcheckboxinput,
|
||||
},
|
||||
|
||||
props: {
|
||||
name: String,
|
||||
initialChecked: Boolean,
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
import { emitEvent } from '../lib/emitters'
|
||||
|
||||
export default {
|
||||
name: 'nestedcheckboxinput',
|
||||
|
||||
props: {
|
||||
name: String,
|
||||
isParentChecked: Boolean,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
isChecked: false,
|
||||
}
|
||||
},
|
||||
|
||||
updated: function() {
|
||||
if (!this.isParentChecked) {
|
||||
this.isChecked = false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput: function(e) {
|
||||
emitEvent('field-change', this, {
|
||||
value: e.target.checked,
|
||||
name: this.name,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -13,7 +13,6 @@ import optionsinput from './components/options_input'
|
||||
import multicheckboxinput from './components/multi_checkbox_input'
|
||||
import textinput from './components/text_input'
|
||||
import checkboxinput from './components/checkbox_input'
|
||||
import nestedcheckboxinput from './components/nested_checkbox_input'
|
||||
import EditOfficerForm from './components/forms/edit_officer_form'
|
||||
import poc from './components/forms/poc'
|
||||
import oversight from './components/forms/oversight'
|
||||
@ -78,7 +77,6 @@ const app = new Vue({
|
||||
SidenavToggler,
|
||||
BaseForm,
|
||||
DeleteConfirmation,
|
||||
nestedcheckboxinput,
|
||||
NewEnvironment,
|
||||
EnvironmentRole,
|
||||
SemiCollapsibleText,
|
||||
|
||||
@ -35,6 +35,24 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input__inline-fields {
|
||||
padding: $gap * 2;
|
||||
border: 1px solid $color-gray-lighter;
|
||||
|
||||
&.checked {
|
||||
border: 1px solid $color-blue;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
p.usa-input__help {
|
||||
margin-bottom: 0;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin-top: 0;
|
||||
|
||||
@ -58,6 +76,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
.environment-roles {
|
||||
@ -69,12 +92,11 @@
|
||||
text-align: left;
|
||||
|
||||
.usa-input {
|
||||
margin: 2rem 0 2rem 0;
|
||||
margin: $gap 0 $gap 0;
|
||||
|
||||
.usa-input__title-inline {
|
||||
line-height: $hit-area;
|
||||
font-size: $lead-font-size;
|
||||
padding: 0;
|
||||
margin-top: $gap;
|
||||
margin-left: $gap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
v-bind:initial-checked='{{ field.data|string|lower }}'
|
||||
>
|
||||
<div>
|
||||
<div class='usa-input {{ classes }} {% if field.errors %}usa-input--error{% endif %}'>
|
||||
<div class='usa-input {{ classes }} {% if field.errors %}usa-input--error{% endif %}' v-bind:class="[{ 'checked': isChecked }]">
|
||||
|
||||
<fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
|
||||
<legend>
|
||||
@ -25,9 +25,6 @@
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
{% if caller %}
|
||||
{{ caller() }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</checkboxinput>
|
||||
{%- endmacro %}
|
||||
|
||||
@ -3,121 +3,100 @@
|
||||
{% from "components/checkbox_input.html" import CheckboxInput %}
|
||||
{% from "components/phone_input.html" import PhoneInput %}
|
||||
|
||||
{% macro MemberStepOne(new_member_form) %}
|
||||
{% macro MemberFormTemplate(title, next_button, previous=True) %}
|
||||
<div class="modal__form--header">
|
||||
<h1>{{ Icon('avatar') }} Add Member</h1>
|
||||
<h1>{{ Icon('avatar') }} {{ title }}</h1>
|
||||
<hr>
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
{{ TextInput(new_member_form.user_data.first_name, validation='requiredField', optional=False) }}
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
{{ TextInput(new_member_form.user_data.last_name, validation='requiredField', optional=False) }}
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
{{ TextInput(new_member_form.user_data.email, validation='email', optional=False) }}
|
||||
</div>
|
||||
<div class="form-row">
|
||||
{{ PhoneInput(new_member_form.user_data.phone_number, new_member_form.user_data.phone_ext)}}
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
{{ TextInput(new_member_form.user_data.dod_id, validation='dodId', optional=False) }}
|
||||
</div>
|
||||
|
||||
{{ caller() }}
|
||||
|
||||
<div class='action-group'>
|
||||
{{ next_button }}
|
||||
{% if previous %}
|
||||
<input
|
||||
type='button'
|
||||
v-on:click="previous()"
|
||||
class='action-group__action usa-button usa-button-secondary'
|
||||
value='{{ "common.previous" | translate }}'>
|
||||
{% endif %}
|
||||
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro MemberStepOne(new_member_form) %}
|
||||
{% set next_button %}
|
||||
<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 }}')">{{ "common.cancel" | translate }}</a>
|
||||
</div>
|
||||
value='{{ "portfolios.applications.members.form.next_button" | translate }}'>
|
||||
{% endset %}
|
||||
|
||||
{% call MemberFormTemplate(title="portfolios.applications.members.form.add_member"|translate, next_button=next_button, previous=False) %}
|
||||
<div class='form-row'>
|
||||
{{ TextInput(new_member_form.user_data.first_name, validation='requiredField', optional=False) }}
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
{{ TextInput(new_member_form.user_data.last_name, validation='requiredField', optional=False) }}
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
{{ TextInput(new_member_form.user_data.email, validation='email', optional=False) }}
|
||||
</div>
|
||||
<div class="form-row">
|
||||
{{ PhoneInput(new_member_form.user_data.phone_number, new_member_form.user_data.phone_ext)}}
|
||||
</div>
|
||||
<div class='form-row'>
|
||||
{{ TextInput(new_member_form.user_data.dod_id, validation='dodId', optional=False) }}
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endmacro %}
|
||||
{% macro MemberStepTwo(new_member_form, application) %}
|
||||
<div class="modal__form">
|
||||
<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 new_member_form.environment_roles %}
|
||||
<optionsinput inline-template
|
||||
v-bind:initial-value="'{{ environment_data.role.data | string }}'"
|
||||
v-bind:name="'{{ environment_data.name | string }}'"
|
||||
v-bind:optional="true"
|
||||
>
|
||||
<div class="usa-input">
|
||||
<fieldset data-ally-disabled="true" class="usa-input__choices">
|
||||
<div class="form-row">
|
||||
<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>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</optionsinput>
|
||||
{{ environment_data.environment_id() }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<h1>{{ "portfolios.applications.members.new.manage_perms" | translate({"application_name": application.name}) }}</h1>
|
||||
{% set next_button %}
|
||||
<input
|
||||
type="submit"
|
||||
class='action-group__action usa-button'
|
||||
form="add-app-mem"
|
||||
value='{{ "portfolios.applications.members.form.add_member" | translate}}'>
|
||||
{% endset %}
|
||||
|
||||
{% call MemberFormTemplate(title="portfolios.applications.members.form.step_2_title"|translate, next_button=next_button) %}
|
||||
<h4>{{ "portfolios.applications.members.form.project_perms" | translate }}</h4>
|
||||
<div class="application-perms">
|
||||
{{ CheckboxInput(new_member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
|
||||
{% call CheckboxInput(new_member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") %}
|
||||
{% set field=new_member_form.permission_sets.perms_del_env %}
|
||||
<nestedcheckboxinput
|
||||
name='{{ field.name }}'
|
||||
inline-template
|
||||
key='{{ field.name }}'
|
||||
v-bind:is-parent-checked="isChecked"
|
||||
>
|
||||
<div class="usa-input input__inline-fields input__inline-fields--indented">
|
||||
<fieldset data-ally-disabled="true" class="usa-input__choices usa-input__choices--inline">
|
||||
<legend>
|
||||
<input
|
||||
id="permission_sets-perms_del_env"
|
||||
name="permission_sets-perms_del_env"
|
||||
type="checkbox"
|
||||
v-model="isChecked"
|
||||
v-bind:disabled="!$parent.isChecked">
|
||||
{{ field.label | safe }}
|
||||
</legend>
|
||||
{{ CheckboxInput(new_member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") }}
|
||||
{{ CheckboxInput(new_member_form.permission_sets.perms_del_env, classes="input__inline-fields") }}
|
||||
</div>
|
||||
<div class="environment-roles-new">
|
||||
<h4>{{ "portfolios.applications.members.form.env_access" | translate }}</h4>
|
||||
<hr>
|
||||
{% for environment_data in new_member_form.environment_roles %}
|
||||
<optionsinput inline-template
|
||||
v-bind:initial-value="'{{ environment_data.role.data | string }}'"
|
||||
v-bind:name="'{{ environment_data.name | string }}'"
|
||||
v-bind:optional="true"
|
||||
>
|
||||
<div class="usa-input">
|
||||
<fieldset data-ally-disabled="true" class="usa-input__choices">
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--two-thirds">
|
||||
<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--third">
|
||||
{{ environment_data.role(**{"v-model": "value"}) }}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</checkboxinput>
|
||||
{% endcall %}
|
||||
</optionsinput>
|
||||
{{ environment_data.environment_id() }}
|
||||
<hr>
|
||||
{% endfor %}
|
||||
</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 }}')">{{ "common.cancel" | translate }}</a>
|
||||
<input
|
||||
type='button'
|
||||
v-on:click="previous()"
|
||||
class='action-group__action usa-button action-group__action--left'
|
||||
value='Previous step'>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endmacro %}
|
||||
|
||||
@ -57,6 +57,7 @@ common:
|
||||
next: Next
|
||||
'yes': 'Yes'
|
||||
'no': 'No'
|
||||
previous: Previous
|
||||
response_label: Response required
|
||||
save: Save
|
||||
save_changes: Save Changes
|
||||
@ -336,6 +337,21 @@ portfolios:
|
||||
add_to_environment: Add to existing environment
|
||||
team_text: Team
|
||||
members:
|
||||
form:
|
||||
env_mgmt:
|
||||
label: Manage Environments
|
||||
description: Add and rename project environments, assign environment access roles to team members.
|
||||
team_mgmt:
|
||||
label: Edit Team
|
||||
description: Add and remove team members.
|
||||
del_env:
|
||||
label: Delete Application
|
||||
description: Delete this application.
|
||||
env_access: Environment Access
|
||||
next_button: "Next: Permissions"
|
||||
project_perms: Project Permissions
|
||||
step_2_title: Set Permissions and Roles
|
||||
add_member: Add Member
|
||||
new:
|
||||
assign_roles: Assign Member Environments and Roles
|
||||
learn_more: Learn more about these roles
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user