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 ClinFields from './components/clin_fields'
|
||||||
import PopDateRange from './components/pop_date_range'
|
import PopDateRange from './components/pop_date_range'
|
||||||
import Accordion from './components/accordion'
|
import Accordion from './components/accordion'
|
||||||
|
import ToggleMenu from './components/toggle_menu'
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
@ -61,6 +62,7 @@ const app = new Vue({
|
|||||||
ToForm,
|
ToForm,
|
||||||
ClinFields,
|
ClinFields,
|
||||||
PopDateRange,
|
PopDateRange,
|
||||||
|
ToggleMenu,
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
|
@ -94,83 +94,78 @@
|
|||||||
|
|
||||||
<section class="member-list application-list">
|
<section class="member-list application-list">
|
||||||
<div class='responsive-table-wrapper'>
|
<div class='responsive-table-wrapper'>
|
||||||
<toggler inline-template>
|
<table class="atat-table">
|
||||||
<table class="atat-table">
|
<thead>
|
||||||
<thead>
|
<tr>
|
||||||
|
<th>{{ "common.name" | translate }}</th>
|
||||||
|
<th>{{ "portfolios.applications.members.form.app_perms.title" | translate }}</th>
|
||||||
|
<th class="env_role--th">{{ 'portfolios.applications.members.form.env_access.table_header' | translate }}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for member in members %}
|
||||||
|
{% set perms_modal = "edit_member-{}".format(loop.index) %}
|
||||||
|
{% set invite_pending = member.role_status == 'invite_pending' %}
|
||||||
|
{% set invite_expired = member.role_status == 'invite_expired' %}
|
||||||
<tr>
|
<tr>
|
||||||
<th>{{ "common.name" | translate }}</th>
|
<td>
|
||||||
<th>{{ "portfolios.applications.members.form.app_perms.title" | translate }}</th>
|
<strong>{{ member.user_name }}</strong>
|
||||||
<th class="env_role--th">{{ 'portfolios.applications.members.form.env_access.table_header' | translate }}</th>
|
<br>
|
||||||
</tr>
|
{{ Label(type=member.role_status, classes='label--below') }}
|
||||||
</thead>
|
</td>
|
||||||
<tbody>
|
|
||||||
{% for member in members %}
|
|
||||||
{% set perms_modal = "edit_member-{}".format(loop.index) %}
|
|
||||||
{% set invite_pending = member.role_status == 'invite_pending' %}
|
|
||||||
{% set invite_expired = member.role_status == 'invite_expired' %}
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<strong>{{ member.user_name }}</strong>
|
|
||||||
<br>
|
|
||||||
{{ Label(type=member.role_status, classes='label--below') }}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
{% for perm, value in member.permission_sets.items() %}
|
{% for perm, value in member.permission_sets.items() %}
|
||||||
<div>
|
<div>
|
||||||
{{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }}
|
{{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }}
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</td>
|
</td>
|
||||||
<td class="env_role--td">
|
<td class="env_role--td">
|
||||||
{% for env in member.environment_roles %}
|
{% for env in member.environment_roles %}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="env-role__environment">
|
<span class="env-role__environment">
|
||||||
{{ env.environment_name }}
|
{{ env.environment_name }}
|
||||||
</span>
|
</span>
|
||||||
<span class="env-role__role">
|
<span class="env-role__role">
|
||||||
: {{ env.role }}
|
: {{ env.role }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%}
|
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%}
|
||||||
<div class="app-member-menu">
|
<toggle-menu inline-template>
|
||||||
{% set toggle_button -%}
|
<div class="app-member-menu">
|
||||||
{{ Icon('ellipsis')}}
|
<span v-if="isVisible" class="accordion-table__item__toggler accordion-table__item__toggler--active">
|
||||||
{%- endset %}
|
{{ Icon('ellipsis')}}
|
||||||
{% set section = "app_member_edit-{}".format(member.role_id) %}
|
</span>
|
||||||
|
<span v-else class="accordion-table__item__toggler">
|
||||||
|
{{ Icon('ellipsis')}}
|
||||||
|
</span>
|
||||||
|
|
||||||
{{
|
<div v-show="isVisible" class="accordion-table__item-toggle-content app-member-menu__toggle">
|
||||||
ToggleButton(
|
<a v-on:click="openModal('{{ perms_modal }}')">
|
||||||
open_html=toggle_button,
|
{{ "portfolios.applications.members.menu.edit" | translate }}
|
||||||
close_html=toggle_button,
|
</a>
|
||||||
section_name=section,
|
{% if invite_pending or invite_expired -%}
|
||||||
active_style=True
|
{% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %}
|
||||||
)
|
{% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
|
||||||
}}
|
<a v-on:click='openModal("{{ resend_invite_modal }}")'>
|
||||||
{% call ToggleSection(section_name=section, classes="app-member-menu__toggle") %}
|
{{ "portfolios.applications.members.menu.resend" | translate }}
|
||||||
<a v-on:click="openModal('{{ perms_modal }}')">
|
|
||||||
{{ "portfolios.applications.members.menu.edit" | translate }}
|
|
||||||
</a>
|
</a>
|
||||||
{% if invite_pending or invite_expired -%}
|
{% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
|
||||||
{% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %}
|
<a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
|
||||||
{% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
|
|
||||||
<a v-on:click='openModal("{{ resend_invite_modal }}")'>
|
|
||||||
{{ "portfolios.applications.members.menu.resend" | translate }}
|
|
||||||
</a>
|
|
||||||
{% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
|
|
||||||
<a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
|
|
||||||
{%- endif %}
|
|
||||||
{%- endif %}
|
{%- endif %}
|
||||||
{% endcall %}
|
{%- endif %}
|
||||||
</div>
|
</div>
|
||||||
{%- endif %}
|
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</toggle-menu>
|
||||||
{% endfor %}
|
{%- endif %}
|
||||||
</tbody>
|
</td>
|
||||||
</table>
|
</tr>
|
||||||
</toggler>
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user