Create new toggle menu component
This commit is contained in:
parent
9131fc7849
commit
f4922f0db2
25
js/components/toggle_menu.js
Normal file
25
js/components/toggle_menu.js
Normal file
@ -0,0 +1,25 @@
|
||||
import ToggleMixin from '../mixins/toggle'
|
||||
|
||||
export default {
|
||||
name: 'toggleMenu',
|
||||
|
||||
mixins: [ToggleMixin],
|
||||
|
||||
methods: {
|
||||
toggle: function(e) {
|
||||
if (this.$el.contains(e.target)) {
|
||||
this.isVisible = !this.isVisible
|
||||
} else {
|
||||
this.isVisible = false
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
document.addEventListener('click', this.toggle)
|
||||
},
|
||||
|
||||
beforeDestroy: function() {
|
||||
document.removeEventListener('click', this.toggle)
|
||||
},
|
||||
}
|
@ -30,6 +30,7 @@ import ToForm from './components/forms/to_form'
|
||||
import ClinFields from './components/clin_fields'
|
||||
import PopDateRange from './components/pop_date_range'
|
||||
import Accordion from './components/accordion'
|
||||
import ToggleMenu from './components/toggle_menu'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
@ -61,6 +62,7 @@ const app = new Vue({
|
||||
ToForm,
|
||||
ClinFields,
|
||||
PopDateRange,
|
||||
ToggleMenu,
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
|
@ -94,7 +94,6 @@
|
||||
|
||||
<section class="member-list application-list">
|
||||
<div class='responsive-table-wrapper'>
|
||||
<toggler inline-template>
|
||||
<table class="atat-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -134,21 +133,16 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%}
|
||||
<toggle-menu inline-template>
|
||||
<div class="app-member-menu">
|
||||
{% set toggle_button -%}
|
||||
<span v-if="isVisible" class="accordion-table__item__toggler accordion-table__item__toggler--active">
|
||||
{{ Icon('ellipsis')}}
|
||||
{%- endset %}
|
||||
{% set section = "app_member_edit-{}".format(member.role_id) %}
|
||||
</span>
|
||||
<span v-else class="accordion-table__item__toggler">
|
||||
{{ Icon('ellipsis')}}
|
||||
</span>
|
||||
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=toggle_button,
|
||||
close_html=toggle_button,
|
||||
section_name=section,
|
||||
active_style=True
|
||||
)
|
||||
}}
|
||||
{% call ToggleSection(section_name=section, classes="app-member-menu__toggle") %}
|
||||
<div v-show="isVisible" class="accordion-table__item-toggle-content app-member-menu__toggle">
|
||||
<a v-on:click="openModal('{{ perms_modal }}')">
|
||||
{{ "portfolios.applications.members.menu.edit" | translate }}
|
||||
</a>
|
||||
@ -162,15 +156,16 @@
|
||||
<a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
{% endcall %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</toggle-menu>
|
||||
{%- endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</toggler>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user