From c1ae5129bc3f015989c2ddd65cda95035a3afb24 Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Wed, 1 May 2019 16:20:53 -0400
Subject: [PATCH] Add edit template with dropdown selectors

---
 js/components/toggler.js                      |  2 +
 styles/components/_accordion_table.scss       |  9 ++++
 .../fragments/applications/edit_team.html     | 43 ++++++++++++++++
 .../applications/read_only_team.html          | 50 +++++++++----------
 templates/portfolios/applications/team.html   |  3 +-
 5 files changed, 80 insertions(+), 27 deletions(-)
 create mode 100644 templates/fragments/applications/edit_team.html

diff --git a/js/components/toggler.js b/js/components/toggler.js
index 39eca87f..583dec53 100644
--- a/js/components/toggler.js
+++ b/js/components/toggler.js
@@ -1,5 +1,6 @@
 import FormMixin from '../mixins/form'
 import textinput from './text_input'
+import optionsinput from './options_input'
 
 export default {
   name: 'toggler',
@@ -8,6 +9,7 @@ export default {
 
   components: {
     textinput,
+    optionsinput,
   },
 
   data: function() {
diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
index e9060bc5..28cd08de 100644
--- a/styles/components/_accordion_table.scss
+++ b/styles/components/_accordion_table.scss
@@ -39,6 +39,15 @@
 
   .accordion-table__item-content {
     padding: ($gap * 2);
+
+    .usa-input {
+      margin: 0;
+    }
+
+    select {
+      border: none;
+      font-weight: $font-normal;
+    }
   }
 
   .accordion-table__items {
diff --git a/templates/fragments/applications/edit_team.html b/templates/fragments/applications/edit_team.html
new file mode 100644
index 00000000..d034ec6a
--- /dev/null
+++ b/templates/fragments/applications/edit_team.html
@@ -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 %}
diff --git a/templates/fragments/applications/read_only_team.html b/templates/fragments/applications/read_only_team.html
index 41a793c4..2adf1694 100644
--- a/templates/fragments/applications/read_only_team.html
+++ b/templates/fragments/applications/read_only_team.html
@@ -3,34 +3,34 @@
   {% set user_info = environment_users[user.id] %}
   {% set user_permissions = user_info["permissions"] %}
 
-    {% macro PermissionField(value) %}
-      <div class="col col--grow user-permission{% if "Edit" in value %} green{% endif %}">{{ value }}</div>
-    {% endmacro %}
+  {% macro PermissionField(value) %}
+    <div class="col col--grow user-permission{% if "Edit" in value %} green{% endif %}">{{ value }}</div>
+  {% endmacro %}
 
-    <toggler inline-template>
-      <li class="accordion-table__item">
-        <div class="accordion-table__item-content row">
-          <div class="col col--grow">{{ user.full_name }}</div>
-          {{ PermissionField(user_permissions["delete_access"]) }}
-          {{ PermissionField(user_permissions["environment_management"]) }}
-          {{ PermissionField(user_permissions["team_management"]) }}
-          <div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
-            {% set open_html %}
-            {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_down') }}
-            {% endset %}
+  <toggler inline-template>
+    <li class="accordion-table__item">
+      <div class="accordion-table__item-content row">
+        <div class="col col--grow">{{ user.full_name }}</div>
+        {{ PermissionField(user_permissions["delete_access"]) }}
+        {{ PermissionField(user_permissions["environment_management"]) }}
+        {{ PermissionField(user_permissions["team_management"]) }}
+        <div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
+          {% set open_html %}
+          {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_down') }}
+          {% endset %}
 
-            {% set close_html %}
-              {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_up') }}
-            {% endset %}
+          {% set close_html %}
+            {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_up') }}
+          {% endset %}
 
-            {{
-              ToggleButton(
-                open_html=open_html,
-                close_html=close_html,
-                section_name="environments"
-              )
-            }}
-          </div>
+          {{
+            ToggleButton(
+              open_html=open_html,
+              close_html=close_html,
+              section_name="environments"
+            )
+          }}
+        </div>
       </div>
       {% call ToggleSection(section_name="environments") %}
         <ul>
diff --git a/templates/portfolios/applications/team.html b/templates/portfolios/applications/team.html
index c5e94b0a..9449ff6d 100644
--- a/templates/portfolios/applications/team.html
+++ b/templates/portfolios/applications/team.html
@@ -62,8 +62,7 @@
           </div>
           <ul class="accordion-table__items">
             {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
-              {# edit version goes here #}
-              {% include "fragments/applications/read_only_team.html" %}
+              {% include "fragments/applications/edit_team.html" %}
             {% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %}
               {% include "fragments/applications/read_only_team.html" %}
             {% endif %}