Merge pull request #761 from dod-ccpo/environment-lists

Environment lists

atst/routes/portfolios/applications.py

@@ -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),
         )
 
 

styles/components/_accordion_table.scss

@@ -1,6 +1,27 @@
-.accordion-table {
+.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;
+  }
 
-  table {
   thead th {
     text-transform: uppercase;
     border-bottom: 1px solid $color-gray-lightest;
@@ -15,12 +36,40 @@
     }
   }
 
+  .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;
+
+      border-bottom: 1px solid $color-gray-lightest;
+      margin: 0;
+
+      ul {
+        margin-top: 0;
+        margin-bottom: 0;
+        background-color: $color-gray-lightest;
+
+        li {
+          border-bottom: 1px solid $color-gray-lighter;
+        }
+      }
+    }
+
     .accordion-table__item__toggler {
       @include icon-link-color($color-blue, $color-gray-lightest);
       float: right;
-        margin-left: -$gap;
       color: $color-blue;
+      padding: $gap;
+      margin: -$gap 0;
 
       .icon {
         @include icon-size(12);
@@ -49,8 +98,6 @@
     }
 
     .accordion-table__item__expanded {
-        margin-left: 2 * $gap;
-
       th, td {
         .icon-link {
           font-weight: $font-normal;
@@ -62,5 +109,4 @@
       }
     }
   }
-  }
 }

styles/components/_portfolio_layout.scss

@@ -326,9 +326,6 @@
     }
 
     .application-list-item {
-      ul {
-        padding-left: 0;
-      }
       .block-list__footer {
         border-bottom: none;
       }

styles/elements/_tables.scss

@@ -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%;
 

templates/components/toggle_list.html

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

templates/fragments/applications/environments.html

@@ -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
+  <div class="accordion-table accordion-table-list">
-    v-cloak
+    <div class="accordion-table__head">
-    v-bind:environments='{{ environments_obj }}'
+      <span>{{ "portfolios.applications.environments.name" | translate }}</span>
-    inline-template>
+      <span class="float-right">{{ "portfolios.applications.environments.members" | translate }}</span>
-    <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>
-
-      <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>
+    <ul class="accordion-table__items">
-  </environments-table>
+      {% 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>

translations.yaml

@@ -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