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 %}

{% 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>
        <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>
      </base-form>
      {% 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 %}