atst/templates/fragments/applications/edit_environments.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(users=[], role='no_access', members_form=[]) %}
  {% 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 user in users %}
          {% set section_name = "env_member_{}".format(user.user_id) %}

          <li class="environment-role__user {{ 'unassigned' if unassigned }}">
            {{ user.name }}
            <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") %}
                {% for member in members_form %}
                  {% if member.user_id.data == user.user_id %}
                    {{ OptionsInput(member.role, label=False) }}
                    {{ member.user_id() }}
                  {% endif %}
                {% endfor %}
            {% endcall %}
          </li>
        {% endfor %}

        {% if users == [] %}
          <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 edit_form = env['edit_form'] %}
        {% set member_count = env['members_form'].data['team_roles'] | length %}
        {% set members_by_role = env['members'] %}
        {% set unassigned = members_by_role['no_access'] %}
        {% set delete_environment_modal_id = "delete_modal_environment{}".format(env['id']) %}

        <toggler inline-template {% if edit_form.errors %}initial-selected-section="edit"{% 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 }} ({{ member_count }}) {{ Icon('caret_down') }}
                {% endset %}

                {% set close_members_button %}
                {{ "common.members" | translate }} ({{ 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") %}
                <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>
                  {% set members_form = env['members_form'] %}
                  <form action="{{ url_for('applications.update_env_roles', environment_id=env['id']) }}" method="post">
                    {{ members_form.csrf_token }}
                    {% for role, members in members_by_role.items() %}
                      {{ RolePanel(users=members, role=role, members_form=env['members_form']['team_roles']) }}
                    {% endfor %}
                    {{ env['members_form'].env_id() }}
                    <div class='action-group'>
                      {{
                        SaveButton(
                          text=("portfolios.applications.update_button_text" | translate)
                        )
                      }}
                    </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>
            {% 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-circle-solid') }}
    </a>
  </div>
</div>