Merge pull request #780 from dod-ccpo/toggle-multiple

Toggle multiple

js/components/toggler.js

@@ -1,14 +1,19 @@
-import ToggleMixin from '../mixins/toggle'
-
 export default {
   name: 'toggler',
 
-  mixins: [ToggleMixin],
+  data: function() {
+    return {
+      selectedSection: null,
+    }
+  },
 
-  props: {
-    defaultVisible: {
-      type: Boolean,
-      default: () => false,
+  methods: {
+    toggleSection: function(sectionName) {
+      if (this.selectedSection === sectionName) {
+        this.selectedSection = null
+      } else {
+        this.selectedSection = sectionName
+      }
     },
   },
 }

styles/components/_accordion_table.scss

@@ -37,10 +37,10 @@
   }
 
   .accordion-table__item-content {
-    padding-top: $gap*3;
+    padding-top: $gap*2;
     padding-right: $gap;
-    padding-bottom: $gap*3;
-    padding-left: $gap*3;
+    padding-bottom: $gap*2;
+    padding-left: $gap*2;
   }
 
   .accordion-table__items {
@@ -69,7 +69,6 @@
       float: right;
       color: $color-blue;
       padding: $gap;
-      margin: -$gap 0;
 
       .icon {
         @include icon-size(12);

templates/components/toggle_list.html

@@ -1,45 +1,16 @@
-{% 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) }}
+{% macro ToggleButton(action, open_html, close_html, section_name) %}
+  <span v-on:click="toggleSection('{{ section_name }}')">
+    <div v-if="selectedSection === '{{ section_name }}'">
+      {{ close_html }}
+    </div>
+    <div v-else>
+      {{ open_html }}
+    </div>
   </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>
+{% macro ToggleSection(section_name) %}
+  <div v-show="selectedSection === '{{ section_name }}'">
+    {{ caller() }}
+  </div>
 {% endmacro %}

templates/fragments/applications/environments.html

@@ -1,5 +1,5 @@
 {% from "components/icon.html" import Icon %}
-{% from "components/toggle_list.html" import ToggleList %}
+{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
 
 <div class="application-list-item">
   <header>
@@ -22,16 +22,72 @@
 
     <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)) %}
-          <ul>
-            {% for member in members_list %}
-            <li class="accordion-table__item__expanded">
-              <div class="accordion-table__item__expanded_first">{{ member.name }}</div>
-              <div class="right">{{ member.role }}</div>
-            </li>
-            {% endfor %}
-          </ul>
-        {% endcall %}
+        <toggler inline-template>
+          <li class="accordion-table__item">
+            <div class="accordion-table__item-content">
+              <span>
+                {{ name }}
+              </span>
+              <span class="icon-link">
+                {% set edit_environment_button %}
+                  {{ Icon('edit') }}
+                {% endset %}
+
+                {{
+                  ToggleButton(
+                    open_html=edit_environment_button,
+                    close_html=edit_environment_button,
+                    section_name="edit"
+                  )
+                }}
+              </span>
+              <span class="icon-link icon-link--large accordion-table__item__toggler">
+                {% set open_environments_button %}
+                  {{ "common.show" | translate }} Environments ({{ members_list | length }}) {{ Icon('caret_down') }}
+                {% endset %}
+
+                {% set close_environments_button %}
+                  {{ "common.hide" | translate }} Environments ({{ members_list | length }}) {{ Icon('caret_up') }}
+                {% endset %}
+
+                {{
+                  ToggleButton(
+                    open_html=open_environments_button,
+                    close_html=close_environments_button,
+                    section_name="environments"
+                  )
+                }}
+              </span>
+            </div>
+
+            {% call ToggleSection(section_name="environments") %}
+              <ul>
+                {% for member in members_list %}
+                <li class="accordion-table__item__expanded">
+                  <div class="accordion-table__item__expanded_first">{{ member.name }}</div>
+                  <div class="right">{{ member.role }}</div>
+                </li>
+                {% endfor %}
+              </ul>
+            {% endcall %}
+
+            {% call ToggleSection(section_name="edit") %}
+              <ul>
+                <li class="accordion-table__item__expanded">
+                  <div>
+                    <form>
+                      <div class="form-row">
+                        <div class="form-col form-col--half">
+                          Row here
+                        </div>
+                      </div>
+                    </form>
+                  </div>
+                </li>
+              </ul>
+            {% endcall %}
+          </li>
+        </toggler>
       {% endfor %}
     </ul>
   </div>

templates/portfolios/applications/index.html

@@ -35,11 +35,13 @@
 
     <div class='application-list'>
       {% for application in portfolio.applications|sort(attribute='name') %}
-        <div is='toggler' v-cloak class='accordion application-list-item'>
-          <template slot-scope='props'>
+        {% set section_name = "application-{}".format(application.id) %}
+
+        <toggler inline-template>
+          <div class='accordion application-list-item'>
             <header class='accordion__header row'>
               <div class='col col-grow'>
-                <h3 class='icon-link accordion__title' v-on:click="props.toggle">{{ application.name }}</h3>
+                <h3 class='icon-link accordion__title' v-on:click="toggleSection('{{ section_name }}')">{{ application.name }}</h3>
                 <span class='accordion__description'>{{ application.description }}</span>
                 <div class='accordion__actions'>
                   {% if user_can(permissions.VIEW_APPLICATION) %}
@@ -59,17 +61,17 @@
                 </div>
               </div>
               <div class='col'>
-                <span v-on:click="props.toggle" class='icon-link toggle-link'>
-                  <template v-if="props.isVisible">
+                <span class='icon-link toggle-link' v-on:click="toggleSection('{{ section_name }}')">
+                  <span v-if="selectedSection === '{{ section_name }}'">
                     {{ Icon('minus') }}
-                  </template>
-                  <template v-else>
+                  </span>
+                  <span v-else>
                     {{ Icon('plus') }}
-                  </template>
+                  </span>
                 </span>
               </div>
             </header>
-            <ul v-if="props.isVisible">
+            <ul v-show="selectedSection === '{{ section_name }}'">
               {% for environment in application.environments %}
                 <li class='accordion__item application-list-item__environment'>
                   <div class='application-list-item__environment__name'>
@@ -83,8 +85,8 @@
                 </li>
               {% endfor %}
             </ul>
-          </template>
-        </div>
+          </div>
+        </toggler>
       {% endfor %}
     </div>
 

templates/portfolios/applications/team.html

@@ -2,7 +2,7 @@
 
 {% from "components/empty_state.html" import EmptyState %}
 {% from "components/icon.html" import Icon %}
-{% from "components/toggle_list.html" import ToggleList %}
+{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
 
 {% set secondary_breadcrumb = 'portfolios.applications.team_settings.title' | translate({ "application_name": application.name }) %}
 
@@ -67,29 +67,48 @@
                 {% set user_info = environment_users[user.id] %}
                 {% set user_permissions = user_info["permissions"] %}
 
-                {% set user_row %}
-                  <span>{{ user.full_name }}</span>
-                  <span>{{ user_permissions["delete_access"] }}</span>
-                  <span>{{ user_permissions["environment_management"] }}</span>
-                  <span>{{ user_permissions["team_management"] }}</span>
-                {% endset %}
 
-                {% call ToggleList(
-                    item_name=user_row,
-                    item_type=("portfolios.applications.team_settings.environments" | translate),
-                    length=(user_info["environments"] | length)
-                  )
-                %}
-                  <ul>
-                    {% for environment in user_info["environments"] %}
-                      <li class="accordion-table__item__expanded">
-                        <div class="accordion-table__item-content">
-                          {{ environment.name }}
-                        </div>
-                      </li>
-                    {% endfor %}
-                  </ul>
-                {% endcall %}
+                <toggler inline-template>
+                  <li class="accordion-table__item">
+                    <div class="accordion-table__item-content">
+                      <span>
+                        {{ name }}
+                        <span>{{ user.full_name }}</span>
+                        <span>{{ user_permissions["delete_access"] }}</span>
+                        <span>{{ user_permissions["environment_management"] }}</span>
+                        <span>{{ user_permissions["team_management"] }}</span>
+                      </span>
+                      <span class="icon-link icon-link--large accordion-table__item__toggler">
+                        {% set open_html %}
+                        {{ "common.show" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }})
+                        {% endset %}
+
+                        {% set close_html %}
+                          {{ "common.hide" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }})
+                        {% endset %}
+
+                        {{
+                          ToggleButton(
+                            open_html=open_html,
+                            close_html=close_html,
+                            section_name="environments"
+                          )
+                        }}
+                      </span>
+                    </div>
+                    {% call ToggleSection(section_name="environments") %}
+                      <ul>
+                        {% for environment in user_info["environments"] %}
+                          <li>
+                            <div class="accordion-table__item-content">
+                              {{ environment.name }}
+                            </div>
+                          </li>
+                        {% endfor %}
+                      </ul>
+                    {% endcall %}
+                  </li>
+                </toggler>
               {% endfor %}
             </ul>
           </div>