From 171898c75362bfe13c3f10b76877c5ec1ee01a1c Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Fri, 12 Apr 2019 09:58:47 -0400
Subject: [PATCH] WIP: use lists for application environment table

---
 styles/components/_accordion_table.scss       | 115 ++++++++++--------
 styles/elements/_tables.scss                  |   2 +-
 templates/components/toggle_list.html         |  27 ++++
 .../fragments/applications/environments.html  |  21 ++++
 4 files changed, 113 insertions(+), 52 deletions(-)
 create mode 100644 templates/components/toggle_list.html

diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
index 53153470..33cf2111 100644
--- a/styles/components/_accordion_table.scss
+++ b/styles/components/_accordion_table.scss
@@ -1,65 +1,78 @@
 .accordion-table {
 
-  table {
-    thead th {
-      text-transform: uppercase;
-      border-bottom: 1px solid $color-gray-lightest;
-      border-top: none;
+  &.accordion-table-list {
+    display: table;
+    width: 100%;
+  }
+
+  .accordion-table__head {
+    padding: 0.8rem 1.6rem;
+    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;
     }
+  }
 
-    th, td {
-      white-space: nowrap;
+  .accordion-table__items {
+    .accordion-table__item__toggler {
+      @include icon-link-color($color-blue, $color-gray-lightest);
+      float: right;
+      margin-left: -$gap;
+      color: $color-blue;
 
-      button {
-        margin: 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;
       }
     }
 
-    .accordion-table__items {
-      .accordion-table__item__toggler {
-        @include icon-link-color($color-blue, $color-gray-lightest);
-        float: right;
-        margin-left: -$gap;
-        color: $color-blue;
+    th, td, tr {
+      border-bottom: 1px dashed $color-gray-lightest;
+    }
 
-        .icon {
-          @include icon-size(12);
-          margin-right: $gap;
+    th[scope=rowgroup] {
+      position: relative;
+    }
+
+    .accordion-table__item__expanded {
+      margin-left: 2 * $gap;
+
+      th, td {
+        .icon-link {
+          font-weight: $font-normal;
+          font-size: $base-font-size;
         }
 
-        .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, td, tr {
-        border-bottom: 1px dashed $color-gray-lightest;
-      }
-
-      th[scope=rowgroup] {
-        position: relative;
-      }
-
-      .accordion-table__item__expanded {
-        margin-left: 2 * $gap;
-
-        th, td {
-          .icon-link {
-            font-weight: $font-normal;
-            font-size: $base-font-size;
-          }
-
-          border-bottom: 1px dashed $color-white;
-          background-color: $color-gray-lightest;
-        }
+        border-bottom: 1px dashed $color-white;
+        background-color: $color-gray-lightest;
       }
     }
   }
diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss
index 7b8da846..61bb1f9d 100644
--- a/styles/elements/_tables.scss
+++ b/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%;
 
diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html
new file mode 100644
index 00000000..9f1d71a2
--- /dev/null
+++ b/templates/components/toggle_list.html
@@ -0,0 +1,27 @@
+{% from "components/icon.html" import Icon %}
+
+{% macro ToggleList(item_name, item_type, length) %}
+  <li is="toggler">
+    <template slot-scope="props">
+      <span v-on:click="props.toggle">{{ item_name }}</span>
+
+      <template v-if="props.isVisible">
+        <span
+          v-on:click="props.toggle"
+          class='icon-link icon-link--large accordion-table__item__toggler' >
+          Hide {{ item_type }} ({{ length }}){{ Icon('caret_up') }}
+        </span>
+      </template>
+      <template v-else>
+        <span
+          v-on:click="props.toggle"
+          class='icon-link icon-link--large accordion-table__item__toggler'>
+          Show {{ item_type }} ({{ length }}){{ Icon('caret_down') }}
+        </span>
+      </template>
+      <div v-show="props.isVisible">
+        {{ caller() }}
+      </div>
+    </template>
+  </li>
+{% endmacro %}
diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html
index 6300cd51..1ecf6a3f 100644
--- a/templates/fragments/applications/environments.html
+++ b/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,6 +14,25 @@
     </div>
   </header>
 
+  <div class="accordion-table accordion-table-list">
+    <div class="accordion-table__head">
+      <span>{{ "portfolios.applications.environments.name" | translate }}</span>
+      <span class="right">{{ "portfolios.applications.environments.members" | translate }}</span>
+    </div>
+
+    <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)) %}
+          {% for member in members_list %}
+            <li>
+              {{ member }}
+            </li>
+          {% endfor %}
+        {% endcall %}
+      {% endfor %}
+    </ul>
+  </div>
+
   <environments-table
     v-cloak
     v-bind:environments='{{ environments_obj }}'
@@ -24,6 +44,7 @@
       </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>