improvements to nested list

This commit is contained in:
dandds
2019-04-12 13:05:44 -04:00
committed by George Drummond
parent b1dd769e1b
commit 3ab84ba6f4
3 changed files with 48 additions and 64 deletions

View File

@@ -20,52 +20,18 @@
<span class="float-right">{{ "portfolios.applications.environments.members" | translate }}</span>
</div>
<ul class='accordion-table__items'>
<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 }}
<ul>
{% for member in members_list %}
<li class="accordion-table__item__expanded">
<div class="accordion-table__item-content">{{ member }}</div>
</li>
{% endfor %}
{% endfor %}
</ul>
{% endcall %}
{% endfor %}
</ul>
</div>
<environments-table
v-cloak
v-bind:environments='{{ environments_obj }}'
inline-template>
<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>
</environments-table>
</div>