atst/templates/portfolios/applications/team.html

{% extends "portfolios/applications/base.html" %}

{% from "components/empty_state.html" import EmptyState %}
{% from "components/icon.html" import Icon %}
{% from 'components/save_button.html' import SaveButton %}
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
{% import "fragments/applications/new_member_modal_content.html" as member_steps %}
{% from "components/alert.html" import Alert %}
{% from "components/delete_confirmation.html" import DeleteConfirmation %}
{% from "components/modal.html" import Modal %}

{% set secondary_breadcrumb = 'portfolios.applications.team_settings.title' | translate({ "application_name": application.name }) %}

{% block application_content %}
  {% if not application.members %}
    {% set user_can_invite = user_can(permissions.CREATE_APPLICATION_MEMBER) %}

    <div class='empty-state'>
      <p class='empty-state__message'>{{ ("portfolios.applications.team_settings.blank_slate.title" | translate) }}</p>

      {{ Icon('avatar') }}

      {% if not user_can_invite %}
        <p class='empty-state__sub-message'>{{ ("portfolios.applications.team_settings.blank_slate.sub_message" | translate) }}</p>
      {% endif %}

      {% if user_can_invite %}
        {% set new_member_modal_name = "add-app-mem" %}
        <a class="usa-button usa-button-big" v-on:click="openModal('{{ new_member_modal_name }}')">
          {{ "portfolios.applications.team_settings.blank_slate.action_label" | translate }}
        </a>
        {{ MultiStepModalForm(
            name=new_member_modal_name,
            form=new_member_form,
            form_action=url_for("applications.create_member", application_id=application.id),
            steps=[
              member_steps.MemberStepOne(new_member_form),
              member_steps.MemberStepTwo(new_member_form, application)
            ],
          ) }}
      {% endif %}
    </div>

  {% else %}
    <div class='subheading'>
      {{ 'portfolios.applications.team_settings.subheading' | translate }}
    </div>

    <section class="member-list application-list" id="application-members">
      <base-form inline-template>
        <form method='POST' id="team" action='{{ url_for("applications.update_team", application_id=application.id) }}' autocomplete="off" enctype="multipart/form-data">
          <div class='responsive-table-wrapper panel'>
            {% if g.matchesPath("application-members") %}
              {% include "fragments/flash.html" %}
            {% endif %}
            <header>
              <div class="responsive-table-wrapper__header">
                <div class="responsive-table-wrapper__title row">
                  <div class="h3">
                    {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }}
                  </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">
                  {{ "common.name" | translate }}
                </div>
                <div class="col col--grow">
                  {{ "portfolios.applications.team_settings.section.table.team_management" | translate }}
                </div>
                <div class="col col--grow">
                  {{ "portfolios.applications.team_settings.section.table.environment_management" | translate }}
                </div>
                <div class="col col--grow">
                  {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
                </div>
                <div class="col col--grow">
                  &nbsp;
                </div>
              </div>
              <ul class="accordion-table__items">
                {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
                  {% include "fragments/applications/edit_team.html" %}
                {% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %}
                  {% include "fragments/applications/read_only_team.html" %}
                {% endif %}
              </ul>
            </div>

            <div class="panel__footer">
              <div class="action-group save">
                {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
                  {{ SaveButton(text=('common.save' | translate), element="input", form="team") }}
                {% endif %}

                {% set new_member_modal_name = "add-app-mem" %}
                {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
                  <a class="icon-link modal-link" v-on:click="openModal('{{ new_member_modal_name }}')">
                    {{ "portfolios.admin.add_new_member" | translate }}
                    {{ Icon("plus") }}
                  </a>
                {% endif %}
              </div>
            </div>
          </div>
        </form>
      </base-form>

      {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
        {% for member_form in team_form.members %}
          {% set delete_modal_id = "delete-user-{}".format(member_form.id) %}
          {% call Modal(name=delete_modal_id, dismissable=True) %}
            <h1>
              {{ "portfolios.applications.remove_member.header" | translate }}
            </h1>

            {{
              Alert(
                title=("portfolios.applications.remove_member.alert.title" | translate),
                message=("portfolios.applications.remove_member.alert.message" | translate({"user_name": member_form.user_name.data})),
                level="warning"
              )
            }}

            {{
              DeleteConfirmation(
                modal_id=delete_modal_id,
                delete_text=('portfolios.applications.remove_member.button' | translate),
                delete_action=url_for('applications.remove_member', application_id=application.id, user_id=member_form.data.user_id),
                form=member_form
              )
            }}
          {% endcall %}
        {% endfor %}
      {% endif %}

      {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
        {% import "fragments/applications/new_member_modal_content.html" as member_steps %}
        {{ MultiStepModalForm(
            name=new_member_modal_name,
            form=new_member_form,
            form_action=url_for("applications.create_member", application_id=application.id),
            steps=[
              member_steps.MemberStepOne(new_member_form),
              member_steps.MemberStepTwo(new_member_form, application)
            ],
          ) }}
      {% endif %}
    </section>
  {% endif %}
{% endblock %}