Start vue component for edit-environment-role
This commit is contained in:
leigh-mil
parent
addf2e97a1
commit
319cc17c1c
@ -126,7 +126,7 @@ class Environments(object):
|
||||
for env_role in env_roles:
|
||||
members_list.append(
|
||||
{
|
||||
"user_id": env_role.user_id,
|
||||
"user_id": str(env_role.user_id),
|
||||
"user_name": env_role.user.full_name,
|
||||
"role": role,
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@ def sort_env_users_by_role(env):
|
||||
users_list = []
|
||||
no_access_users = env.application.users - env.users
|
||||
no_access_list = [
|
||||
{"user_id": user.id, "user_name": user.full_name, "role": "no_access"}
|
||||
{"user_id": str(user.id), "user_name": user.full_name, "role": "no_access"}
|
||||
for user in no_access_users
|
||||
]
|
||||
users_list.append({"role": "no_access", "members": no_access_list})
|
||||
@ -82,6 +82,8 @@ def settings(application_id):
|
||||
form=form,
|
||||
environments_obj=environments_obj,
|
||||
members_form=members_form,
|
||||
active_toggler=http_request.args.get("active_toggler"),
|
||||
active_toggler_section=http_request.args.get("active_toggler_section"),
|
||||
)
|
||||
|
||||
|
||||
@ -104,6 +106,8 @@ def update_environment(environment_id):
|
||||
application_id=application.id,
|
||||
fragment="application-environments",
|
||||
_anchor="application-environments",
|
||||
active_toggler=environment.id,
|
||||
active_toggler_section="edit",
|
||||
)
|
||||
)
|
||||
else:
|
||||
@ -115,6 +119,11 @@ def update_environment(environment_id):
|
||||
name=application.name, description=application.description
|
||||
),
|
||||
environments_obj=get_environments_obj_for_app(application=application),
|
||||
members_form=AppEnvRolesForm(
|
||||
data=data_for_app_env_roles_form(application)
|
||||
),
|
||||
active_toggler=environment.id,
|
||||
active_toggler_section="edit",
|
||||
),
|
||||
400,
|
||||
)
|
||||
@ -182,6 +191,8 @@ def update_env_roles(environment_id):
|
||||
application_id=application.id,
|
||||
fragment="application-environments",
|
||||
_anchor="application-environments",
|
||||
active_toggler=environment.id,
|
||||
active_toggler_section="members",
|
||||
)
|
||||
)
|
||||
else:
|
||||
@ -195,6 +206,8 @@ def update_env_roles(environment_id):
|
||||
name=application.name, description=application.description
|
||||
),
|
||||
environments_obj=get_environments_obj_for_app(application=application),
|
||||
active_toggler=environment.id,
|
||||
active_toggler_section="edit",
|
||||
)
|
||||
|
||||
|
||||
|
||||
@ -1,63 +1,88 @@
|
||||
import FormMixin from '../../mixins/form'
|
||||
import textinput from '../text_input'
|
||||
import Selector from '../selector'
|
||||
import Modal from '../../mixins/modal'
|
||||
import toggler from '../toggler'
|
||||
|
||||
export default {
|
||||
name: 'edit-environment-role',
|
||||
|
||||
mixins: [FormMixin, Modal],
|
||||
|
||||
components: {
|
||||
toggler,
|
||||
Modal,
|
||||
Selector,
|
||||
textinput,
|
||||
},
|
||||
mixins: [FormMixin],
|
||||
|
||||
props: {
|
||||
choices: Array,
|
||||
initialData: String,
|
||||
applicationId: String,
|
||||
initialRoles: Array,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
new_role: this.initialData,
|
||||
selectedSection: null,
|
||||
roles: this.sanitizeValues(this.initialRoles),
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
this.$root.$on('revoke-' + this.applicationId, this.revoke)
|
||||
},
|
||||
|
||||
methods: {
|
||||
change: function(e) {
|
||||
this.new_role = e.target.value
|
||||
sanitizeValues: function(roles) {
|
||||
roles.forEach(role => {
|
||||
role.members.forEach(member => {
|
||||
if (member.role === null) {
|
||||
member.role = 'no_access'
|
||||
}
|
||||
})
|
||||
})
|
||||
return roles
|
||||
},
|
||||
cancel: function() {
|
||||
this.new_role = this.initialData
|
||||
},
|
||||
revoke: function() {
|
||||
this.new_role = ''
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
displayName: function() {
|
||||
const newRole = this.newRole
|
||||
for (var arr in this.choices) {
|
||||
if (this.choices[arr][0] == newRole) {
|
||||
return this.choices[arr][1].name
|
||||
checkNoAccess: function(role) {
|
||||
return role === 'no_access'
|
||||
},
|
||||
|
||||
toggleSection: function(sectionName) {
|
||||
if (this.selectedSection === sectionName) {
|
||||
this.selectedSection = null
|
||||
} else {
|
||||
this.selectedSection = sectionName
|
||||
}
|
||||
},
|
||||
|
||||
onInput: function(e) {
|
||||
this.changed = true
|
||||
this.updateRoles(e.target.attributes['user-id'].value, e.target.value)
|
||||
this.showError = false
|
||||
this.showValid = true
|
||||
},
|
||||
|
||||
getUserInfo: function(userId) {
|
||||
for (let role of this.roles) {
|
||||
for (let member of role.members) {
|
||||
if (member.user_id === userId) {
|
||||
return member
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
label_class: function() {
|
||||
return this.newRole === '' ? 'label' : 'label label--success'
|
||||
|
||||
removeUser: function(userId) {
|
||||
for (let role of this.roles) {
|
||||
role.members = role.members.filter(member => {
|
||||
return member.user_id !== userId
|
||||
})
|
||||
if (!role.members) {
|
||||
role.members = []
|
||||
}
|
||||
}
|
||||
},
|
||||
newRole: function() {
|
||||
return this.new_role
|
||||
|
||||
addUser: function(userInfo, newRole) {
|
||||
this.roles.forEach(role => {
|
||||
if (role.role === newRole) {
|
||||
userInfo.role = newRole
|
||||
role.members.push(userInfo)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
updateRoles: function(userId, newRole) {
|
||||
var userInfo = this.getUserInfo(userId)
|
||||
this.removeUser(userId)
|
||||
this.addUser(userInfo, newRole)
|
||||
this.toggleSection()
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import editEnvironmentRole from './forms/edit_environment_role'
|
||||
import FormMixin from '../mixins/form'
|
||||
import optionsinput from './options_input'
|
||||
import textinput from './text_input'
|
||||
@ -7,7 +8,15 @@ export default {
|
||||
|
||||
mixins: [FormMixin],
|
||||
|
||||
props: {
|
||||
initialSelectedSection: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
editEnvironmentRole,
|
||||
optionsinput,
|
||||
textinput,
|
||||
optionsinput,
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
background-color: white;
|
||||
background-color: $color-white;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,8 +72,9 @@
|
||||
<ul class="accordion-table__items">
|
||||
{% for env in environments_obj %}
|
||||
{% set delete_environment_modal_id = "delete_modal_environment{}".format(env['id']) %}
|
||||
{% set edit_form = env['edit_form'] %}
|
||||
|
||||
<toggler inline-template {% if edit_form.errors %}initial-selected-section="edit"{% endif %}>
|
||||
<toggler inline-template {% if active_toggler == (env['id'] | safe) %}initial-selected-section="{{ active_toggler_section }}"{% endif %}>
|
||||
<li class="accordion-table__item">
|
||||
<div class="accordion-table__item-content row">
|
||||
<div class="col col--grow">
|
||||
@ -82,15 +83,15 @@
|
||||
<div class="col col--grow">
|
||||
<span class="icon-link">
|
||||
{% set edit_environment_button %}
|
||||
{{ Icon('edit') }}
|
||||
{{ Icon('edit') }}
|
||||
{% endset %}
|
||||
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=edit_environment_button,
|
||||
close_html=edit_environment_button,
|
||||
section_name="edit"
|
||||
)
|
||||
open_html=edit_environment_button,
|
||||
close_html=edit_environment_button,
|
||||
section_name="edit"
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
@ -110,41 +111,83 @@
|
||||
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=open_members_button,
|
||||
close_html=close_members_button,
|
||||
section_name="members"
|
||||
)
|
||||
open_html=open_members_button,
|
||||
close_html=close_members_button,
|
||||
section_name="members"
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% call ToggleSection(section_name="members", classes="environment-roles") %}
|
||||
<div class='app-team-settings-link'>Need to add someone new to the team? <a href='{{ url_for("applications.team", application_id=application.id) }}'>Jump to Team Settings</a></div>
|
||||
<toggler inline-template>
|
||||
{% for env_form in members_form.envs %}
|
||||
{% if env_form.env_id.data == env['id'] %}
|
||||
<div class='app-team-settings-link'>
|
||||
Need to add someone new to the team? <a href='{{ url_for("applications.team", application_id=application.id) }}'>Jump to Team Settings</a>
|
||||
</div>
|
||||
<form action="{{ url_for('applications.update_env_roles', environment_id=env['id']) }}" method="post">
|
||||
{{ members_form.csrf_token }}
|
||||
{% for env_form in members_form.envs %}
|
||||
{{ env_form.env_id() }}
|
||||
{% if env_form.env_id.data == env['id'] %}
|
||||
{% for role_form in env_form.team_roles %}
|
||||
{{ RolePanel(role_form) }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class='action-group'>
|
||||
{{
|
||||
SaveButton(
|
||||
text=("portfolios.applications.update_button_text" | translate)
|
||||
)
|
||||
}}
|
||||
{{ env_form.env_id() }}
|
||||
<edit-environment-role inline-template v-bind:initial-roles='{{ env_form.team_roles.data | tojson }}'>
|
||||
<div>
|
||||
<div v-for='(role, roleindex) in roles' class='environment-role'>
|
||||
<h4 v-if='checkNoAccess(role.role)'>Unassigned (No Access)</h4>
|
||||
<h4 v-else v-html='role.role'></h4>
|
||||
<ul class='environment-role__users'>
|
||||
<div v-if="role.members && !role.members.length" class='environment-role__no-user'>Currently no members are in this role</div>
|
||||
<li v-for='(member, memberindex) in role.members' class="environment-role__user" v-bind:class="{'unassigned': checkNoAccess(member.role)}">
|
||||
<span v-html='member.user_name'>
|
||||
</span>
|
||||
<span v-on:click="toggleSection(member.user_id)" class="icon-link right">
|
||||
{{ Icon('edit', classes="icon--medium") }}
|
||||
</span>
|
||||
<div v-show="selectedSection === member.user_id" class='environment-role__user-field'>
|
||||
<div class="usa-input">
|
||||
<fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
|
||||
<ul v-for='(role, roleinputindex) in roles' v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'">
|
||||
<li>
|
||||
<input
|
||||
v-bind:checked="member.role === role.role"
|
||||
v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'"
|
||||
v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex"
|
||||
type="radio"
|
||||
v-bind:user-id='member.user_id'
|
||||
v-bind:value='role.role'>
|
||||
<label
|
||||
v-bind:for="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex">
|
||||
<span v-if='checkNoAccess(role.role)'>No Access</span>
|
||||
<span v-else v-html='role.role'></span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-user_id'"
|
||||
v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-user_id'"
|
||||
type="hidden"
|
||||
v-bind:value='member.user_id'>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class='action-group'>
|
||||
{{
|
||||
SaveButton(
|
||||
text=("portfolios.applications.update_button_text" | translate)
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</edit-environment-role>
|
||||
<div class='action-group-cancel'>
|
||||
<a class='action-group-cancel__action icon-link icon-link--default' v-on:click="toggleSection('members')">
|
||||
{{ "common.cancel" | translate }}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</toggler>
|
||||
<div class='action-group-cancel'>
|
||||
<a class='action-group-cancel__action icon-link icon-link--default' v-on:click="toggleSection('members')">
|
||||
{{ "common.cancel" | translate }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endcall %}
|
||||
|
||||
{% call ToggleSection(section_name="edit") %}
|
||||
|
||||
@ -157,13 +157,13 @@ def test_get_members_by_role(db):
|
||||
)
|
||||
assert basic_access_members == [
|
||||
{
|
||||
"user_id": env_role_1.user_id,
|
||||
"user_id": str(env_role_1.user_id),
|
||||
"user_name": env_role_1.user.full_name,
|
||||
"role": CSPRole.BASIC_ACCESS.value,
|
||||
}
|
||||
]
|
||||
assert {
|
||||
"user_id": rando_env_role.user_id,
|
||||
"user_id": str(rando_env_role.user_id),
|
||||
"user_name": rando_env_role.user.full_name,
|
||||
"role": CSPRole.BASIC_ACCESS.value,
|
||||
} not in basic_access_members
|
||||
@ -171,12 +171,12 @@ def test_get_members_by_role(db):
|
||||
environment, CSPRole.TECHNICAL_READ.value
|
||||
) == [
|
||||
{
|
||||
"user_id": env_role_2.user_id,
|
||||
"user_id": str(env_role_2.user_id),
|
||||
"user_name": env_role_2.user.full_name,
|
||||
"role": CSPRole.TECHNICAL_READ.value,
|
||||
},
|
||||
{
|
||||
"user_id": env_role_3.user_id,
|
||||
"user_id": str(env_role_3.user_id),
|
||||
"user_name": env_role_3.user.full_name,
|
||||
"role": CSPRole.TECHNICAL_READ.value,
|
||||
},
|
||||
|
||||
@ -48,6 +48,8 @@ def test_updating_application_environments_success(client, user_session):
|
||||
_external=True,
|
||||
fragment="application-environments",
|
||||
_anchor="application-environments",
|
||||
active_toggler=environment.id,
|
||||
active_toggler_section="edit",
|
||||
)
|
||||
assert environment.name == "new name a"
|
||||
|
||||
@ -167,7 +169,7 @@ def test_data_for_app_env_roles_form(app, client, user_session):
|
||||
"role": "no_access",
|
||||
"members": [
|
||||
{
|
||||
"user_id": app_role.user_id,
|
||||
"user_id": str(app_role.user_id),
|
||||
"user_name": app_role.user.full_name,
|
||||
"role": None,
|
||||
}
|
||||
@ -177,7 +179,7 @@ def test_data_for_app_env_roles_form(app, client, user_session):
|
||||
"role": CSPRole.BASIC_ACCESS.value,
|
||||
"members": [
|
||||
{
|
||||
"user_id": env_role1.user_id,
|
||||
"user_id": str(env_role1.user_id),
|
||||
"user_name": env_role1.user.full_name,
|
||||
"role": CSPRole.BASIC_ACCESS.value,
|
||||
}
|
||||
@ -187,7 +189,7 @@ def test_data_for_app_env_roles_form(app, client, user_session):
|
||||
"role": CSPRole.NETWORK_ADMIN.value,
|
||||
"members": [
|
||||
{
|
||||
"user_id": env_role2.user_id,
|
||||
"user_id": str(env_role2.user_id),
|
||||
"user_name": env_role2.user.full_name,
|
||||
"role": CSPRole.NETWORK_ADMIN.value,
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user