Modal for each environment role

js/mixins/modal.js

@@ -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,
+        styleguidemodal: false,
-        rolesModal: false,
+        newprojectconfirmation: false,
-        newProjectConfirmation: false,
+        pendingfinancialverification: false,
-        pendingFinancialVerification: false,
+        pendingccpoapproval: false,
-        pendingCCPOApproval: false,
+      },
-      }
+      activeModal: null,
     }
   }
 }

templates/components/modal.html

@@ -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'>

templates/workspaces/members/edit.html

@@ -51,8 +51,20 @@
       </div>
     </div>
 
-
+    {% for project in projects %}
-    {% call Modal(name='rolesModal', dismissable=False) %}
+    <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 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('rolesModal')">Cancel</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>