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

Modal for each environment role

Browse Source
This commit is contained in:
Montana 2018-09-14 11:56:43 -04:00
parent 5a5d81eb7f
commit c0bb9e1024
3 changed files with 49 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
js/mixins/modal.js
View File

@ -1,23 +1,23 @@
export default {
methods: {
closeModal: function(name) {
this.modals[name] = false
this.activeModal = null
this.$emit('modalOpen', false)
},
openModal: function (name) {
this.modals[name] = true
this.activeModal = name
this.$emit('modalOpen', true)
}
},
data: function() {
return {
modals: {
styleguideModal: false,
rolesModal: false,
newProjectConfirmation: false,
pendingFinancialVerification: false,
pendingCCPOApproval: false,
}
styleguidemodal: false,
newprojectconfirmation: false,
pendingfinancialverification: false,
pendingccpoapproval: false,
},
activeModal: null,
}
}
}

2
templates/components/modal.html
View File

@ -1,7 +1,7 @@
{% from "components/icon.html" import Icon %}
{% macro Modal(name, dismissable=False) -%}
<div v-show='modals.{{name}} === true' v-cloak>
<div v-if="activeModal === '{{name}}'" v-cloak>
<div class='modal {% if dismissable %}modal--dismissable{% endif%}'>
<div class='modal__container'>
<div class='modal__dialog' role='dialog' aria-modal='true'>

38
templates/workspaces/members/edit.html
View File

@ -51,8 +51,20 @@
</div>
</div>
{% call Modal(name='rolesModal', dismissable=False) %}
{% for project in projects %}
<div is='toggler' default-visible class='block-list project-list-item'>
<template slot-scope='{ isVisible, toggle }'>
<header class='block-list__header'>
<button v-on:click='toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
<template v-if='isVisible'>{{ Icon('caret_down') }}</template>
<template v-else>{{ Icon('caret_right') }}</template>
<h3 class="block-list__title">{{ project.name }}</h3>
</button>
<span><a href="#" class="icon-link icon-link--danger">revoke all access</a></span>
</header>
<ul v-show='isVisible'>
{% for env in project.environments %}
{% call Modal(name=env.name + 'RolesModal', dismissable=False) %}
<div class='block-list'>
<ul>
{% for choice in form.environment_role.choices %}
@ -82,30 +94,18 @@
</div>
<div class='block-list__footer'>
<div class='action-group'>
<a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Select Access Role</a>
<a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">Cancel</a>
<a v-on:click="closeModal('{{ env.name }}RolesModal')" class='action-group__action usa-button'>Select Access Role</a>
<a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ env.name }}RolesModal')">No Access</a>
</div>
</div>
{% endcall %}
{% for project in projects %}
<div is='toggler' default-visible class='block-list project-list-item'>
<template slot-scope='{ isVisible, toggle }'>
<header class='block-list__header'>
<button v-on:click='toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
<template v-if='isVisible'>{{ Icon('caret_down') }}</template>
<template v-else>{{ Icon('caret_right') }}</template>
<h3 class="block-list__title">{{ project.name }}</h3>
</button>
<span><a href="#" class="icon-link icon-link--danger">revoke all access</a></span>
</header>
<ul v-show='isVisible'>
{% for env in project.environments %}
<li class='block-list__item project-list-item__environment'>
<span class='project-list-item__environment'>
{{ env.name }}
</span>
<div class='project-list-item__environment__actions'>
<input type="hidden" name="{{ env.id }}">
{% set role = 'no access' %}
{% set label = 'label' %}
{% for er in member.user.environment_roles %}
@ -114,8 +114,10 @@
{% set label = 'label label--success' %}
{% endif %}
{% endfor %}
<span class="{{ label }}">{{ role }}</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
<span class="label {{ label }}">{{ role }}</span>
<button v-on:click="openModal('{{ env.name }}RolesModal')" type="button" class="icon-link">set role</button>
</div>
{% endfor %}
</ul>
</template>