Multiple drop down sections for toggler

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: {
+  methods: {
-    defaultVisible: {
+    toggleSection: function(sectionName) {
-      type: Boolean,
+      if (this.selectedSection === sectionName) {
-      default: () => false,
+        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-bottom: $gap*2;
-    padding-left: $gap*3;
+    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,22 @@
-{% from "components/icon.html" import Icon %}
+{% macro ToggleButton(action, open_html, close_html, section_name) %}
-
+  <span v-on:click="toggleSection('{{ section_name }}')">
-{% macro ToggleItem(action, item_type, length, icon) %}
+    <div v-if="selectedSection === '{{ section_name }}'">
-  <span
+      {{ close_html }}
-    v-on:click="props.toggle"
+    </div>
-    class="icon-link icon-link--large accordion-table__item__toggler">
+    <div v-else>
-    {{ action }} {{ item_type }} ({{ length }}){{ Icon(icon) }}
+      {{ open_html }}
+    </div>
   </span>
 {% endmacro %}
 
 {% macro ToggleList(item_name, item_type, length) %}
-  <li is="toggler" class="accordion-table__item">
+  <div>
-    <template slot-scope="props">
+    {{ caller() }}
-      <div class="accordion-table__item-content">
+  </div>
-        <span v-on:click="props.toggle">
+{% endmacro %}
-          {{ item_name }}
+
-        </span>
+{% macro ToggleSection(section_name) %}
-
+  <div v-show="selectedSection === '{{ section_name }}'">
-        <template v-if="props.isVisible">
+    {{ caller() }}
-          {{
+  </div>
-            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,5 +1,5 @@
 {% from "components/icon.html" import Icon %}
-{% from "components/toggle_list.html" import ToggleList %}
+{% from "components/toggle_list.html" import ToggleList, ToggleButton, ToggleSection %}
 
 <div class="application-list-item">
   <header>
@@ -22,16 +22,68 @@
 
     <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)) %}
+        <toggler inline-template>
-          <ul>
+          <li class="accordion-table__item">
-            {% for member in members_list %}
+            <div class="accordion-table__item-content">
-            <li class="accordion-table__item__expanded">
+              <span>
-              <div class="accordion-table__item__expanded_first">{{ member.name }}</div>
+                {{ name }}
-              <div class="right">{{ member.role }}</div>
+              </span>
-            </li>
+              <span class="icon-link">
-            {% endfor %}
+                {% macro EditEnvironmentButton() %}
-          </ul>
+                  {{ Icon('edit') }}
-        {% endcall %}
+                {% endmacro %}
+
+                {{
+                  ToggleButton(
+                    open_html=EditEnvironmentButton(),
+                    close_html=EditEnvironmentButton(),
+                    section_name="edit"
+                  )
+                }}
+              </span>
+              <span class="icon-link icon-link--large accordion-table__item__toggler">
+                {% macro OpenEnvironmentsButton() %}
+                  {{ "common.show" | translate }} Environments ({{ members_list | length }})
+                {% endmacro %}
+
+                {% macro CloseEnvironmentsButton() %}
+                  {{ "common.hide" | translate }} Environments ({{ members_list | length }})
+                {% endmacro %}
+
+                {{
+                  ToggleButton(
+                    open_html=OpenEnvironmentsButton(),
+                    close_html=CloseEnvironmentsButton(),
+                    section_name="environments"
+                  )
+                }}
+              </span>
+            </div>
+
+            {% call ToggleList() %}
+              {% 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 class="accordion-table__item__expanded_first">
+                      <strong>Edit section</strong>
+                    </div>
+                  </li>
+                </ul>
+              {% endcall %}
+            {% endcall %}
+          </li>
+        </toggler>
       {% endfor %}
     </ul>
   </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 ToggleList, ToggleButton, ToggleSection %}
 
 {% set secondary_breadcrumb = 'portfolios.applications.team_settings.title' | translate({ "application_name": application.name }) %}
 
@@ -67,29 +67,50 @@
                 {% 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(
+                <toggler inline-template>
-                    item_name=user_row,
+                  <li class="accordion-table__item">
-                    item_type=("portfolios.applications.team_settings.environments" | translate),
+                    <div class="accordion-table__item-content">
-                    length=(user_info["environments"] | length)
+                      <span>
-                  )
+                        {{ name }}
-                %}
+                        <span>{{ user.full_name }}</span>
-                  <ul>
+                        <span>{{ user_permissions["delete_access"] }}</span>
-                    {% for environment in user_info["environments"] %}
+                        <span>{{ user_permissions["environment_management"] }}</span>
-                      <li class="accordion-table__item__expanded">
+                        <span>{{ user_permissions["team_management"] }}</span>
-                        <div class="accordion-table__item-content">
+                      </span>
-                          {{ environment.name }}
+                      <span class="icon-link icon-link--large accordion-table__item__toggler">
-                        </div>
+                        {% set open_html %}
-                      </li>
+                        {{ "common.show" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }})
-                    {% endfor %}
+                        {% endset %}
-                  </ul>
+
-                {% endcall %}
+                        {% 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 ToggleList() %}
+                      {% 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 %}
+                    {% endcall %}
+                  </li>
+                </toggler>
               {% endfor %}
             </ul>
           </div>