pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1208 from dod-ccpo/app-members-edit-menu-fixes

Browse Source 
App members edit menu fixes
This commit is contained in:
leigh-mil 2019-11-27 10:54:44 -05:00 committed by GitHub
commit 060108071e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 88 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
js/components/toggle_menu.js Normal file
View 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)
},
}

2
js/index.js
View File

@ -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() {

9
styles/components/_portfolio_layout.scss
View File

@ -253,6 +253,11 @@
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
&:hover,
&--active {
background-color: $color-aqua-lightest;
}
.icon { .icon {
margin: $gap / 2; margin: $gap / 2;
} }
@ -278,6 +283,10 @@
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
&:hover {
background-color: $color-aqua-lightest;
}
} }
} }
} }

110
templates/applications/fragments/members.html
View File

@ -94,61 +94,55 @@
<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) -%}
<toggle-menu inline-template v-cloak>
<div class="app-member-menu"> <div class="app-member-menu">
{% set toggle_button -%} <span v-if="isVisible" class="accordion-table__item__toggler accordion-table__item__toggler--active">
{{ Icon('ellipsis')}} {{ Icon('ellipsis')}}
{%- endset %} </span>
{% set section = "app_member_edit-{}".format(member.role_id) %} <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(
open_html=toggle_button,
close_html=toggle_button,
section_name=section,
active_style=True
)
}}
{% call ToggleSection(section_name=section, classes="app-member-menu__toggle") %}
<a v-on:click="openModal('{{ perms_modal }}')"> <a v-on:click="openModal('{{ perms_modal }}')">
{{ "portfolios.applications.members.menu.edit" | translate }} {{ "portfolios.applications.members.menu.edit" | translate }}
</a> </a>
@ -162,15 +156,15 @@
<a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a> <a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
{%- endif %} {%- endif %}
{%- endif %} {%- endif %}
{% endcall %} </div>
</div> </div>
{%- endif %} </toggle-menu>
</td> {%- endif %}
</tr> </td>
{% endfor %} </tr>
</tbody> {% endfor %}
</table> </tbody>
</toggler> </table>
</div> </div>
</section> </section>
{% endif %} {% endif %}