Merge pull request #761 from dod-ccpo/environment-lists
Environment lists
This commit is contained in:
George Drummond
GitHub
commit
13a16dc83f
@ -58,6 +58,15 @@ def create_application(portfolio_id):
|
||||
)
|
||||
|
||||
|
||||
def get_environments_obj_for_app(application):
|
||||
environments_obj = {}
|
||||
|
||||
for env in application.environments:
|
||||
environments_obj[env.name] = [user.full_name for user in env.users]
|
||||
|
||||
return environments_obj
|
||||
|
||||
|
||||
@portfolios_bp.route("/portfolios/<portfolio_id>/applications/<application_id>/edit")
|
||||
@user_can(Permissions.EDIT_APPLICATION, message="view application edit form")
|
||||
def edit_application(portfolio_id, application_id):
|
||||
@ -65,16 +74,12 @@ def edit_application(portfolio_id, application_id):
|
||||
application = Applications.get(application_id)
|
||||
form = ApplicationForm(name=application.name, description=application.description)
|
||||
|
||||
environments_obj = {}
|
||||
for env in application.environments:
|
||||
environments_obj[env.name] = [user.full_name for user in env.users]
|
||||
|
||||
return render_template(
|
||||
"portfolios/applications/edit.html",
|
||||
portfolio=portfolio,
|
||||
application=application,
|
||||
form=form,
|
||||
environments_obj=environments_obj,
|
||||
environments_obj=get_environments_obj_for_app(application=application),
|
||||
)
|
||||
|
||||
|
||||
@ -99,6 +104,7 @@ def update_application(portfolio_id, application_id):
|
||||
portfolio=portfolio,
|
||||
application=application,
|
||||
form=form,
|
||||
environments_obj=get_environments_obj_for_app(application=application),
|
||||
)
|
||||
|
||||
|
||||
|
||||
@ -1,65 +1,111 @@
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.accordion-table {
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.accordion-table-list {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.accordion-table__head {
|
||||
padding: $gap $gap*2;
|
||||
font-weight: 700;
|
||||
color: $color-gray;
|
||||
text-transform: uppercase;
|
||||
background-color: $color-gray-lightest;
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
thead th {
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
th, td {
|
||||
white-space: nowrap;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-table__item-content {
|
||||
padding-top: $gap*3;
|
||||
padding-right: $gap;
|
||||
padding-bottom: $gap*3;
|
||||
padding-left: $gap*3;
|
||||
}
|
||||
|
||||
.accordion-table__items {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
table {
|
||||
thead th {
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
border-top: none;
|
||||
}
|
||||
margin: 0;
|
||||
|
||||
th, td {
|
||||
white-space: nowrap;
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
background-color: $color-gray-lightest;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
li {
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-table__items {
|
||||
.accordion-table__item__toggler {
|
||||
@include icon-link-color($color-blue, $color-gray-lightest);
|
||||
float: right;
|
||||
margin-left: -$gap;
|
||||
color: $color-blue;
|
||||
.accordion-table__item__toggler {
|
||||
@include icon-link-color($color-blue, $color-gray-lightest);
|
||||
float: right;
|
||||
color: $color-blue;
|
||||
padding: $gap;
|
||||
margin: -$gap 0;
|
||||
|
||||
.icon {
|
||||
@include icon-size(12);
|
||||
margin-right: $gap;
|
||||
}
|
||||
|
||||
.open-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 5 * $gap;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
|
||||
border-bottom: 10px solid $color-blue-light;
|
||||
}
|
||||
.icon {
|
||||
@include icon-size(12);
|
||||
margin-right: $gap;
|
||||
}
|
||||
|
||||
th, td, tr {
|
||||
border-bottom: 1px dashed $color-gray-lightest;
|
||||
.open-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 5 * $gap;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
|
||||
border-bottom: 10px solid $color-blue-light;
|
||||
}
|
||||
}
|
||||
|
||||
th[scope=rowgroup] {
|
||||
position: relative;
|
||||
}
|
||||
th, td, tr {
|
||||
border-bottom: 1px dashed $color-gray-lightest;
|
||||
}
|
||||
|
||||
.accordion-table__item__expanded {
|
||||
margin-left: 2 * $gap;
|
||||
th[scope=rowgroup] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
th, td {
|
||||
.icon-link {
|
||||
font-weight: $font-normal;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
border-bottom: 1px dashed $color-white;
|
||||
background-color: $color-gray-lightest;
|
||||
.accordion-table__item__expanded {
|
||||
th, td {
|
||||
.icon-link {
|
||||
font-weight: $font-normal;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
border-bottom: 1px dashed $color-white;
|
||||
background-color: $color-gray-lightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -326,9 +326,6 @@
|
||||
}
|
||||
|
||||
.application-list-item {
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
.block-list__footer {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss
|
||||
*/
|
||||
|
||||
table {
|
||||
table {
|
||||
@include panel-margin;
|
||||
min-width: 100%;
|
||||
|
||||
|
||||
43
templates/components/toggle_list.html
Normal file
43
templates/components/toggle_list.html
Normal file
@ -0,0 +1,43 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
{% macro ToggleItem(action, item_type, length, icon) %}
|
||||
<span
|
||||
v-on:click="props.toggle"
|
||||
class="icon-link icon-link--large accordion-table__item__toggler">
|
||||
{{ action }} {{ item_type }} ({{ length }}){{ Icon(icon) }}
|
||||
</span>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro ToggleList(item_name, item_type, length) %}
|
||||
<li is="toggler" class="accordion-table__item">
|
||||
<template slot-scope="props">
|
||||
<div class="accordion-table__item-content">
|
||||
<span v-on:click="props.toggle">{{ item_name }}</span>
|
||||
|
||||
<template v-if="props.isVisible">
|
||||
{{
|
||||
ToggleItem(
|
||||
("common.hide" | translate),
|
||||
item_type,
|
||||
length,
|
||||
"caret_up",
|
||||
)
|
||||
}}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{
|
||||
ToggleItem(
|
||||
("common.show" | translate),
|
||||
item_type,
|
||||
length,
|
||||
"caret_down",
|
||||
)
|
||||
}}
|
||||
</template>
|
||||
</div>
|
||||
<div v-show="props.isVisible">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
</template>
|
||||
</li>
|
||||
{% endmacro %}
|
||||
@ -1,4 +1,5 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/toggle_list.html" import ToggleList %}
|
||||
|
||||
<div class="application-list-item">
|
||||
<header>
|
||||
@ -13,38 +14,24 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<environments-table
|
||||
v-cloak
|
||||
v-bind:environments='{{ environments_obj }}'
|
||||
inline-template>
|
||||
<table>
|
||||
<thead>
|
||||
<th scope='col'>{{ "portfolios.applications.environments.name" | translate }}</th>
|
||||
<th scope='col' class='table-cell--align-right'>{{ "portfolios.applications.environments.members" | translate }}</th>
|
||||
</thead>
|
||||
<div class="accordion-table accordion-table-list">
|
||||
<div class="accordion-table__head">
|
||||
<span>{{ "portfolios.applications.environments.name" | translate }}</span>
|
||||
<span class="float-right">{{ "portfolios.applications.environments.members" | translate }}</span>
|
||||
</div>
|
||||
|
||||
<tbody v-for='(members_list, name) in environments' class='accordion-table__items'>
|
||||
<tr>
|
||||
<th scope='rowgroup' v-on:click="toggle($event, name)" v-html='name'></th>
|
||||
|
||||
<template v-if="environmentsState[name].isVisible">
|
||||
<td v-on:click="toggle($event, name)" class='icon-link icon-link--large accordion-table__item__toggler'>Hide Members (<span v-html='members_list.length'></span>){{ Icon('caret_up') }}</td>
|
||||
</template>
|
||||
<template v-else>
|
||||
<td v-on:click="toggle($event, name)" class='icon-link icon-link--large accordion-table__item__toggler'>Show Members (<span v-html='members_list.length'></span>){{ Icon('caret_down') }}</td>
|
||||
</template>
|
||||
</tr>
|
||||
|
||||
<tr scope='rowgroup' v-for='member in members_list' v-show='environmentsState[name].isVisible' class='accordion-table__item__expanded'>
|
||||
<td>
|
||||
<div>
|
||||
<span v-html='member'></span>
|
||||
</div>
|
||||
</td>
|
||||
<td class='table-cell--expand'></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</environments-table>
|
||||
<ul class="accordion-table__items">
|
||||
{% for name, members_list in environments_obj.items() %}
|
||||
{% call ToggleList(item_name=name, item_type="Members", length=(members_list|length)) %}
|
||||
<ul>
|
||||
{% for member in members_list %}
|
||||
<li class="accordion-table__item__expanded">
|
||||
<div class="accordion-table__item-content">{{ member }}</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcall %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -31,6 +31,8 @@ flash:
|
||||
application:
|
||||
deleted: You have successfully deleted the {application_name} application. To view the retained activity log, visit the portfolio administration page.
|
||||
common:
|
||||
hide: Hide
|
||||
show: Show
|
||||
back: Back
|
||||
cancel: Cancel
|
||||
confirm: Confirm
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user