Add edit template with dropdown selectors

This commit is contained in:
Montana 2019-05-01 16:20:53 -04:00
parent 0da0f6a0ae
commit c1ae5129bc
5 changed files with 80 additions and 27 deletions

View File

@ -1,5 +1,6 @@
import FormMixin from '../mixins/form' import FormMixin from '../mixins/form'
import textinput from './text_input' import textinput from './text_input'
import optionsinput from './options_input'
export default { export default {
name: 'toggler', name: 'toggler',
@ -8,6 +9,7 @@ export default {
components: { components: {
textinput, textinput,
optionsinput,
}, },
data: function() { data: function() {

View File

@ -39,6 +39,15 @@
.accordion-table__item-content { .accordion-table__item-content {
padding: ($gap * 2); padding: ($gap * 2);
.usa-input {
margin: 0;
}
select {
border: none;
font-weight: $font-normal;
}
} }
.accordion-table__items { .accordion-table__items {

View File

@ -0,0 +1,43 @@
{% from "components/options_input.html" import OptionsInput %}
{% for member_form in team_form.members %}
{% set environment_roles_form = member_form.environment_roles %}
{% set permissions_form = member_form.permission_sets %}
<toggler inline-template>
<li class="accordion-table__item">
<div class="accordion-table__item-content row">
<div class="col col--grow">{{ member_form.user_name.data }}</div>
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_team_mgmt, label=False) }}</div>
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_env_mgmt, label=False) }}</div>
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_del_env, label=False) }}</div>
<div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
{% set open_html %}
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_down') }}
{% endset %}
{% set close_html %}
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_up') }}
{% endset %}
{{
ToggleButton(
open_html=open_html,
close_html=close_html,
section_name="environments"
)
}}
</div>
</div>
{% call ToggleSection(section_name="environments") %}
<ul>
{% for environment_form in environment_roles_form %}
<li class="accordion-table__item__expanded">
{{ environment_form.environment_name.data }}
</li>
{% endfor %}
</ul>
{% endcall %}
</li>
</toggler>
{% endfor %}

View File

@ -3,34 +3,34 @@
{% set user_info = environment_users[user.id] %} {% set user_info = environment_users[user.id] %}
{% set user_permissions = user_info["permissions"] %} {% set user_permissions = user_info["permissions"] %}
{% macro PermissionField(value) %} {% macro PermissionField(value) %}
<div class="col col--grow user-permission{% if "Edit" in value %} green{% endif %}">{{ value }}</div> <div class="col col--grow user-permission{% if "Edit" in value %} green{% endif %}">{{ value }}</div>
{% endmacro %} {% endmacro %}
<toggler inline-template> <toggler inline-template>
<li class="accordion-table__item"> <li class="accordion-table__item">
<div class="accordion-table__item-content row"> <div class="accordion-table__item-content row">
<div class="col col--grow">{{ user.full_name }}</div> <div class="col col--grow">{{ user.full_name }}</div>
{{ PermissionField(user_permissions["delete_access"]) }} {{ PermissionField(user_permissions["delete_access"]) }}
{{ PermissionField(user_permissions["environment_management"]) }} {{ PermissionField(user_permissions["environment_management"]) }}
{{ PermissionField(user_permissions["team_management"]) }} {{ PermissionField(user_permissions["team_management"]) }}
<div class="col col--grow icon-link icon-link--large accordion-table__item__toggler"> <div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
{% set open_html %} {% set open_html %}
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_down') }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_down') }}
{% endset %} {% endset %}
{% set close_html %} {% set close_html %}
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_up') }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_up') }}
{% endset %} {% endset %}
{{ {{
ToggleButton( ToggleButton(
open_html=open_html, open_html=open_html,
close_html=close_html, close_html=close_html,
section_name="environments" section_name="environments"
) )
}} }}
</div> </div>
</div> </div>
{% call ToggleSection(section_name="environments") %} {% call ToggleSection(section_name="environments") %}
<ul> <ul>

View File

@ -62,8 +62,7 @@
</div> </div>
<ul class="accordion-table__items"> <ul class="accordion-table__items">
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) %} {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
{# edit version goes here #} {% include "fragments/applications/edit_team.html" %}
{% include "fragments/applications/read_only_team.html" %}
{% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %} {% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %}
{% include "fragments/applications/read_only_team.html" %} {% include "fragments/applications/read_only_team.html" %}
{% endif %} {% endif %}