From 8c79eb39253a786bae5c4912fab77d2d5eee5aad Mon Sep 17 00:00:00 2001
From: Patrick Smith <patrick+dds@promptworks.com>
Date: Thu, 7 Feb 2019 18:45:25 -0500
Subject: [PATCH] Allow collapsing/expanding list of environments

---
 static/icons/minus.svg                       |  1 +
 styles/components/_portfolio_layout.scss     |  7 ++
 templates/portfolios/applications/index.html | 71 +++++++++++---------
 3 files changed, 48 insertions(+), 31 deletions(-)
 create mode 100644 static/icons/minus.svg

diff --git a/static/icons/minus.svg b/static/icons/minus.svg
new file mode 100644
index 00000000..ac83426d
--- /dev/null
+++ b/static/icons/minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/></svg>
\ No newline at end of file
diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index b12cfece..5ba22d65 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -113,6 +113,13 @@
   }
 
   .application-list {
+    .toggle-link {
+      background-color: $color-blue-light;
+      .icon {
+        margin: $gap / 2;
+      }
+    }
+
     .application-list-item {
       border-radius: 5px;
       box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5);
diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html
index 453138e2..1aa49604 100644
--- a/templates/portfolios/applications/index.html
+++ b/templates/portfolios/applications/index.html
@@ -34,42 +34,51 @@
 
     <div class='application-list'>
       {% for application in portfolio.applications %}
-        <div v-cloak class='accordian application-list-item'>
-          <header class='accordian__header row'>
-            <div class='col col-grow'>
-              <h3 class='accordian__title'>{{ application.name }}</h3>
-              <span class='accordian__description'>{{ application.description }}</span>
-              <div class='accordian__actions'>
-                {% if user_can(permissions.RENAME_APPLICATION_IN_PORTFOLIO) %}
-                  <a class='icon-link' href='{{ url_for("portfolios.edit_application", portfolio_id=portfolio.id, application_id=application.id) }}'>
-                    <span>App Settings</span>
+        <div is='toggler' default-visible v-cloak class='accordian application-list-item'>
+          <template slot-scope='props'>
+            <header class='accordian__header row'>
+              <div class='col col-grow'>
+                <h3 class='accordian__title'>{{ application.name }}</h3>
+                <span class='accordian__description'>{{ application.description }}</span>
+                <div class='accordian__actions'>
+                  {% if user_can(permissions.RENAME_APPLICATION_IN_PORTFOLIO) %}
+                    <a class='icon-link' href='{{ url_for("portfolios.edit_application", portfolio_id=portfolio.id, application_id=application.id) }}'>
+                      <span>App Settings</span>
+                    </a>
+                    <div class='separator'></div>
+                  {% endif %}
+                  <a class='icon-link' href='{{ url_for("portfolios.portfolio_members", portfolio_id=portfolio.id) }}'>
+                    <span>Team</span>
+                    <span class='counter'>{{ application.num_users }}</span>
                   </a>
-                  <div class='separator'></div>
-                {% endif %}
-                <a class='icon-link' href='{{ url_for("portfolios.portfolio_members", portfolio_id=portfolio.id) }}'>
-                  <span>Team</span>
-                  <span class='counter'>{{ application.num_users }}</span>
+                </div>
+              </div>
+              <div class='col'>
+                <a v-on:click="props.toggle" href='#' class='icon-link toggle-link'>
+                  <template v-if="props.isVisible">
+                    {{ Icon('minus') }}
+                  </template>
+                  <template v-else>
+                    {{ Icon('plus') }}
+                  </template>
                 </a>
               </div>
-            </div>
-            <div class='col'>
-              <a href='#' class='icon-link'>{{ Icon('plus') }}</a>
-            </div>
-          </header>
-          <ul>
-            {% for environment in application.environments %}
-              <li class='accordian__item application-list-item__environment'>
-                <div class='application-list-item__environment__name'>
-                  <span>{{ environment.name }}</span>
-                </div>
+            </header>
+            <ul v-if="props.isVisible">
+              {% for environment in application.environments %}
+                <li class='accordian__item application-list-item__environment'>
+                  <div class='application-list-item__environment__name'>
+                    <span>{{ environment.name }}</span>
+                  </div>
 
-                <a href='{{ url_for("portfolios.access_environment", portfolio_id=portfolio.id, environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'>
-                  <span>CSP Console</span>
-                </a>
+                  <a href='{{ url_for("portfolios.access_environment", portfolio_id=portfolio.id, environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'>
+                    <span>CSP Console</span>
+                  </a>
 
-              </li>
-            {% endfor %}
-          </ul>
+                </li>
+              {% endfor %}
+            </ul>
+          </template>
         </div>
       {% endfor %}
     </div>