atst/templates/fragments/applications/edit_environments.html
2019-05-14 10:58:22 -04:00

245 lines
11 KiB
HTML

{% from "components/delete_confirmation.html" import DeleteConfirmation %}
{% from "components/icon.html" import Icon %}
{% from "components/modal.html" import Modal %}
{% from "components/options_input.html" import OptionsInput %}
{% from "components/save_button.html" import SaveButton %}
{% from "components/text_input.html" import TextInput %}
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
{% macro RolePanel(role_form) %}
{% set role = role_form.role.data %}
{% if role == 'no_access' %}
{% set role = 'Unassigned (No Access)' %}
{% set unassigned = True %}
{% endif %}
<div class='environment-role'>
<h4>{{ role }}</h4>
<ul class='environment-role__users'>
{% for member in role_form.members %}
{% set section_name = "env_member_{}".format(member.user_id) %}
<li class="environment-role__user {{ 'unassigned' if unassigned }}">
{{ member.user_name.data }}
<span class="icon-link right">
{% set edit_env_members_button %}
{{ Icon('edit', classes="icon--medium") }}
{% endset %}
{{
ToggleButton(
open_html=edit_env_members_button,
close_html=edit_env_members_button,
section_name=section_name
)
}}
</span>
{% call ToggleSection(section_name=section_name, classes="environment-role__user-field") %}
{{ OptionsInput(member.role, label=False) }}
{{ member.user_id() }}
{% endcall %}
</li>
{% endfor %}
{% if role_form.members.data == [] %}
<div class='environment-role__no-user'>Currently no members are in this role</div>
{% endif %}
</ul>
</div>
{% endmacro %}
<div class="application-list-item application-list">
<header>
<div class="responsive-table-wrapper__header">
<div class='responsive-table-wrapper__title'>
<div class='h3'>{{ 'portfolios.applications.environments_heading' | translate }}</div>
</div>
<a class='icon-link'>
{{ Icon('info') }}
{{ "portfolios.admin.settings_info" | translate }}
</a>
</div>
</header>
<div class="accordion-table accordion-table-list">
<div class="accordion-table__head row">
<div class="col col--grow">{{ "portfolios.applications.environments.name" | translate }}</div>
<div class="col col--grow">{{ "portfolios.applications.environments.edit_name" | translate }}</div>
<div class="col col--grow">{{ "common.delete" | translate }}</div>
<div class="col col--grow">{{ "common.members" | translate }}</div>
</div>
<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 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">
{{ env['name'] }}
</div>
<div class="col col--grow">
<span class="icon-link">
{% set edit_environment_button %}
{{ Icon('edit') }}
{% endset %}
{{
ToggleButton(
open_html=edit_environment_button,
close_html=edit_environment_button,
section_name="edit"
)
}}
</span>
</div>
<div class="col col--grow">
<span class="icon-link icon-link--danger" alt="Delete environment" v-on:click="openModal('{{ delete_environment_modal_id }}')">
{{ Icon('trash') }}
</span>
</div>
<div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
{% set open_members_button %}
{{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_down') }}
{% endset %}
{% set close_members_button %}
{{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_up') }}
{% endset %}
{{
ToggleButton(
open_html=open_members_button,
close_html=close_members_button,
section_name="members"
)
}}
</div>
</div>
{% call ToggleSection(section_name="members", classes="environment-roles") %}
{% 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 }}
{{ 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>
{% endif %}
{% endfor %}
{% endcall %}
{% call ToggleSection(section_name="edit") %}
<ul>
<li class="accordion-table__item__expanded">
<form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
{{ edit_form.csrf_token }}
{{ TextInput(edit_form.name, validation='requiredField') }}
{{
SaveButton(
text=("portfolios.applications.update_button_text" | translate)
)
}}
</form>
</li>
</ul>
{% endcall %}
</li>
</toggler>
{% call Modal(name=delete_environment_modal_id, dismissable=True) %}
<h1>
{{ 'fragments.edit_environment_team_form.delete_environment_title' | translate }}
</h1>
{{
Alert(
level="warning",
title=('components.modal.destructive_title' | translate),
message=('components.modal.destructive_message' | translate({"resource": "environment"})),
)
}}
{{
DeleteConfirmation(
modal_id=delete_modal_environment_id,
delete_text=('portfolios.applications.environments.delete.button' | translate),
delete_action= url_for('applications.delete_environment', environment_id=env['id']),
form=form
)
}}
{% endcall %}
{% endfor %}
</ul>
</div>
</div>
<div class="panel__footer">
<div class="action-group">
<a class='icon-link'>
{{ "portfolios.applications.add_environment" | translate }}
{{ Icon('plus') }}
</a>
</div>
</div>