Merge pull request #1114 from dod-ccpo/app-settings-styling_part-2
App settings styling - environments table
This commit is contained in:
leigh-mil
GitHub
@@ -7,16 +7,13 @@
|
||||
<div v-if="open">
|
||||
<form method='POST' id="add-new-env" action='{{ url_for("applications.new_environment", application_id=application.id) }}' autocomplete="off" enctype="multipart/form-data">
|
||||
{{ new_env_form.csrf_token }}
|
||||
|
||||
{{ Alert(
|
||||
title=("portfolios.applications.create_new_env" | translate),
|
||||
message=("portfolios.applications.create_new_env_info" | translate )
|
||||
) }}
|
||||
<div class="accordion-table__item-content new-env">
|
||||
{{ Alert(
|
||||
title=("portfolios.applications.create_new_env" | translate),
|
||||
message=("portfolios.applications.create_new_env_info" | translate )
|
||||
) }}
|
||||
<div class="h4">{{ "portfolios.applications.enter_env_name" | translate }}</div>
|
||||
{{ TextInput(new_env_form.name, label="", validation="requiredField", optional=False) }}
|
||||
</div>
|
||||
<div class="panel__footer">
|
||||
<div class="action-group">
|
||||
{{ SaveButton(text=('common.save' | translate), element="input", form="add-new-env") }}
|
||||
<a class='action-group__action icon-link icon-link--default' v-on:click="toggle">
|
||||
@@ -26,8 +23,7 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<a class='icon-link icon-link__add' v-on:click="toggle">
|
||||
{{ Icon('plus') }}
|
||||
<a class="usa-button usa-button-secondary add-new-button" v-on:click="toggle">
|
||||
{{ "portfolios.applications.add_environment" | translate }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -2,18 +2,12 @@
|
||||
|
||||
{% from "components/alert.html" import Alert %}
|
||||
{% from "components/delete_confirmation.html" import DeleteConfirmation %}
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% import "applications/fragments/new_member_modal_content.html" as member_steps %}
|
||||
{% from "fragments/environments.html" import EnvironmentManagementTemplate %}
|
||||
{% from "fragments/members.html" import MemberManagementTemplate %}
|
||||
{% from "components/modal.html" import Modal %}
|
||||
{% from "components/pagination.html" import Pagination %}
|
||||
{% from "components/save_button.html" import SaveButton %}
|
||||
{% from "components/text_input.html" import TextInput %}
|
||||
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/text_input.html" import TextInput %}
|
||||
{% from "components/checkbox_input.html" import CheckboxInput %}
|
||||
{% from "components/phone_input.html" import PhoneInput %}
|
||||
|
||||
{% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %}
|
||||
|
||||
@@ -64,105 +58,13 @@
|
||||
user_can_delete_app_member=user_can(permissions.DELETE_APPLICATION_MEMBER),
|
||||
) }}
|
||||
|
||||
<div class="subheading">
|
||||
{{ 'common.resource_names.environments' | translate }}
|
||||
</div>
|
||||
<div class="panel">
|
||||
{% if g.matchesPath("application-environments") %}
|
||||
{% include "fragments/flash.html" %}
|
||||
{% endif %}
|
||||
<div class="panel__content">
|
||||
<div class="accordion-table accordion-table-list">
|
||||
<ul class="accordion-table__items">
|
||||
{% for env in environments_obj %}
|
||||
{% set edit_form = env['edit_form'] %}
|
||||
<toggler inline-template>
|
||||
<li class="accordion-table__item">
|
||||
<div class="accordion-table__item-content form-row">
|
||||
<div class="form-col form-col--two-thirds">
|
||||
<div class="environment-list__item">
|
||||
<span>
|
||||
{{ env['name'] }}
|
||||
</span>
|
||||
{% if env['pending'] %}
|
||||
<span class='usa-label'>PROCESSING</span>
|
||||
{% endif %}
|
||||
{% if env['pending'] %}
|
||||
<span class="icon-link">
|
||||
{% set edit_environment_button %}
|
||||
{{ Icon('edit') }}
|
||||
{% endset %}
|
||||
{{ EnvironmentManagementTemplate(
|
||||
application,
|
||||
environments_obj,
|
||||
new_env_form,
|
||||
user_can_create_environment=user_can(permissions.CREATE_ENVIRONMENT)
|
||||
) }}
|
||||
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=edit_environment_button,
|
||||
close_html=edit_environment_button,
|
||||
section_name="edit"
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
{% endif %}
|
||||
<span class="accordion-table__item__toggler icon-link">
|
||||
{% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=members_button,
|
||||
close_html=members_button,
|
||||
section_name="members"
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-col form-col--third">
|
||||
{% if env['pending'] %}
|
||||
<em>Cloud service provider link unavailable</em>
|
||||
{% else %}
|
||||
<a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'>
|
||||
<span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% call ToggleSection(section_name="members") %}
|
||||
<ul>
|
||||
{% for member in env['members'] %}
|
||||
<li class="accordion-table__item__expanded">
|
||||
{{ member }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% 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=("common.save" | translate)
|
||||
)
|
||||
}}
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
</li>
|
||||
</toggler>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% if user_can(permissions.CREATE_ENVIRONMENT) %}
|
||||
<div class='subheading'>
|
||||
{% include "applications/fragments/add_new_environment.html" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
{% if user_can(permissions.DELETE_APPLICATION) %}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
{% macro ToggleButton(action, open_html, close_html, section_name) %}
|
||||
<span v-on:click="toggleSection('{{ section_name }}')">
|
||||
<div v-if="selectedSection === '{{ section_name }}'">
|
||||
{% macro ToggleButton(action, open_html, close_html, section_name, classes="") %}
|
||||
<span v-on:click="toggleSection('{{ section_name }}')" class="accordion-table__item__toggler {{ classes }}">
|
||||
<span v-if="selectedSection === '{{ section_name }}'">
|
||||
{{ close_html }}
|
||||
</div>
|
||||
<div v-else>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ open_html }}
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro ToggleSection(section_name, classes="") %}
|
||||
<div v-show="selectedSection === '{{ section_name }}'" class='{{ classes }}'>
|
||||
<div v-show="selectedSection === '{{ section_name }}'" class='accordion-table__item-toggle-content {{ classes }}'>
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<li>Notwithstanding the above, using this IS does not constitute consent to PM, LE or CI investigative searching or monitoring of the content of privileged communications, or work product, related to personal representation or services by attorneys, psychotherapists, or clergy, and their assistants. Such communications and work product are private and confidential. See User Agreement for details.</li>
|
||||
</ul>
|
||||
|
||||
<a href='{{ redirect_url }}' class="usa-button usa-button-primary float-right">
|
||||
<a href='{{ redirect_url }}' class="usa-button usa-button-primary right">
|
||||
{{ "common.continue" | translate }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
101
templates/fragments/environments.html
Normal file
101
templates/fragments/environments.html
Normal file
@@ -0,0 +1,101 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from 'components/save_button.html' import SaveButton %}
|
||||
{% from "components/text_input.html" import TextInput %}
|
||||
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
|
||||
|
||||
{% macro EnvironmentManagementTemplate(
|
||||
application,
|
||||
environments_obj,
|
||||
new_env_form,
|
||||
user_can_create_environment
|
||||
) %}
|
||||
|
||||
<h3>{{ "portfolios.applications.settings.environments" | translate }}</h3>
|
||||
<section class="panel" id="application-environments">
|
||||
{% if g.matchesPath("application-environments") -%}
|
||||
{% include "fragments/flash.html" %}
|
||||
{%- endif %}
|
||||
{% if 0 == environments_obj | length -%}
|
||||
<div class="empty-state panel__content">
|
||||
<p class="empty-state__message">
|
||||
This Application has no environments
|
||||
</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="panel__content">
|
||||
<div class="accordion-table accordion-table-list">
|
||||
<ul class="accordion-table__items">
|
||||
{% for env in environments_obj %}
|
||||
{% set edit_form = env['edit_form'] %}
|
||||
<toggler inline-template>
|
||||
<li class="accordion-table__item">
|
||||
<div class="accordion-table__item-content">
|
||||
<div class="environment-list__item">
|
||||
<span>
|
||||
{{ env['name'] }}
|
||||
</span>
|
||||
{% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=members_button,
|
||||
close_html=members_button,
|
||||
section_name="members",
|
||||
classes="environment-list__item__members"
|
||||
)
|
||||
}}
|
||||
{% set edit_environment_button = "Edit" %}
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=edit_environment_button,
|
||||
close_html=edit_environment_button,
|
||||
section_name="edit"
|
||||
)
|
||||
}}
|
||||
<br>
|
||||
{% if env['pending'] -%}
|
||||
<span class='usa-label label--below'>{{Icon('exchange')}} CHANGES PENDING</span>
|
||||
{% else %}
|
||||
<a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link'>
|
||||
<span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
|
||||
</a>
|
||||
{%- endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% call ToggleSection(section_name="members") %}
|
||||
<ul>
|
||||
{% for member in env['members'] %}
|
||||
<li class="accordion-table__item-toggle-content__expanded">
|
||||
{{ member }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcall %}
|
||||
|
||||
{% call ToggleSection(section_name="edit") %}
|
||||
<ul>
|
||||
<li class="accordion-table__item-toggle-content__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=("common.save" | translate)
|
||||
)
|
||||
}}
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
</li>
|
||||
</toggler>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{%- endif %}
|
||||
{% if user_can_create_environment -%}
|
||||
{% include "applications/fragments/add_new_environment.html" %}
|
||||
{%- endif %}
|
||||
</section>
|
||||
{% endmacro %}
|
||||
@@ -168,7 +168,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
{% if user_can_create_app_member %}
|
||||
<a class="usa-button usa-button-secondary create-member" v-on:click="openModal('{{ new_member_modal_name }}')">
|
||||
<a class="usa-button usa-button-secondary add-new-button" v-on:click="openModal('{{ new_member_modal_name }}')">
|
||||
{{ "portfolios.applications.add_member" | translate }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user