Create AccordionList macro and vue component to collapse multiple accordion components

This commit is contained in:
leigh-mil 2019-12-05 16:22:20 -05:00
parent e32bad0d30
commit e79b1d1524
5 changed files with 43 additions and 3 deletions

View File

@ -11,4 +11,10 @@ export default {
default: false,
},
},
methods: {
collapse: function() {
this.isVisible = false
}
}
}

View File

@ -0,0 +1,16 @@
import Accordion from './accordion'
export default {
name: 'accordion-list',
components: {
Accordion
},
methods: {
handleClick: function(e) {
e.preventDefault()
this.$children.forEach(el => el.collapse())
}
}
}

View File

@ -47,4 +47,8 @@
}
}
}
&-list {
max-width: $max-panel-width;
}
}

View File

@ -0,0 +1,11 @@
{% macro AccordionList() %}
<accordion-list inline-template>
<div class="accordion-list">
<div class="action-group">
<a v-on:click="handleClick($event)">Collapse All</a>
</div>
<!-- caller iterates over accordion vue components or Accordion jinja macros -->
{{ caller() }}
</div>
</accordion-list>
{% endmacro %}

View File

@ -1,4 +1,5 @@
{% from "components/accordion.html" import Accordion %}
{% from "components/accordion_list.html" import AccordionList %}
{% from "components/empty_state.html" import EmptyState %}
{% from "components/icon.html" import Icon %}
{% from "components/sticky_cta.html" import StickyCTA %}
@ -62,9 +63,11 @@
<div class="portfolio-funding">
{% if task_orders %}
{% for status, to_list in task_orders.items() %}
{{ TaskOrderList(to_list, status.value) }}
{% endfor %}
{% call AccordionList() %}
{% for status, to_list in task_orders.items() %}
{{ TaskOrderList(to_list, status.value) }}
{% endfor %}
{% endcall %}
{% else %}
{{ EmptyState(
header="task_orders.empty_state.header"|translate,