Make environment role display dynamic

atst/forms/data.py

@@ -187,7 +187,13 @@ ENVIRONMENT_ROLES = [
 ]
 
 ENVIRONMENT_ROLES = [
-    (None, {"name": "No access", "description": "No environment access."}),
+    (
+        "no_access",
+        {
+            "name": "no access",
+            "description": "No environment access."
+        }
+    ),
     (
         "database_admin",
         {

js/components/forms/edit_workspace_member.js

@@ -18,7 +18,8 @@ export default {
 
   props: {
     choices: Array,
-    initialData: Object
+    initialData: String
+
   },
 
   data: function () {
@@ -28,6 +29,11 @@ export default {
   methods: {
     change: function (e) {
       this.value = e.target.value
-    }
+    },
+    // method to map ugly name to human readable name here
+  },
+
+  mounted: function () {
+    console.log(this.initialData, this.choices)
   }
 }

templates/workspaces/members/edit.html

@@ -7,7 +7,6 @@
 
 {% block content %}
 
-<edit-workspace-member inline-template v-bind:initial-data='{{ form.data|tojson }}' v-bind:choices='{{ form.environment_role.choices | tojson }}'>
 <form method="POST" action="{{ url_for('workspaces.update_member', workspace_id=workspace.id, member_id=member.user_id) }}" autocomplete="false">
   {{ form.csrf_token }}
 
@@ -65,12 +64,25 @@
       <ul v-show='isVisible'>
         {% for env in project.environments %}
 
-            {% set role = EnvironmentRole.get(member.user_id, env.id).role or 'no access' %}
+          {% set role = EnvironmentRole.get(member.user_id, env.id).role or 'no_access' %}
           {% set label_class = 'label' %}
-            {% if role != 'no access' %}
+          {% if role != 'no_access' %}
             {% set label_class = 'label label--success' %}
           {% endif %}
 
+
+        <li class='block-list__item'>
+          <edit-workspace-member inline-template initial-data='{{ role }}' v-bind:choices='{{ form.environment_role.choices | tojson }}'>
+          <div class='project-list-item__environment'>
+            <span class='project-list-item__environment__link'>
+              {{ env.name }}
+            </span>
+
+            <div class='project-list-item__environment__actions'>
+              <div>{{ form.data["environment_role"] }}</div>
+
+              <span class="{{ label_class }}" v-html="value"></span>
+              <button v-on:click="openModal('{{ env.name }}RolesModal')" type="button" class="icon-link">set role</button>
               {% call Modal(name=env.name + 'RolesModal', dismissable=False) %}
                   <div class='block-list'>
                     <ul>
@@ -79,13 +91,16 @@
 
                         {% if choice[0] != ""  %}
                           <input
-                          name='env_{{ env.name }}'
+                            name='env_{{ env.name }}_{{ project.id }}'
+                            v-on:change="change"
                             type='radio'
-                          id="env_{{ env.name }}"
+                            id="env_{{ env.id }}_{{ choice[0] }}"
                             value='{ "id": "{{ env.id }}", "role": "{{ choice[0] }}" }'
-                          checked='{{ role  == choice[0] }}'
+                            {% if role == choice[0] %}
+                              checked='checked'
+                            {% endif %}
                           />
-                        <label for="env_{{ env.name }}">
+                          <label for="env_{{ env.id }}_{{ choice[0] }}">
                             {% if choice[1].description %}
                               <dl>
                                 <dt>{{ choice[1].name }}</dt>
@@ -99,26 +114,18 @@
                       </li>
                       {% endfor %}
                     </ul>
-                </div>
                     <div class='block-list__footer'>
                       <div class='action-group'>
                         <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>
+                        <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ env.name }}RolesModal')">Cancel</a>
+                      </div>
                     </div>
                   </div>
               {% endcall %}
-
-          <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'>
-              <div>{{ form.data["environment_role"] }}</div>
-
-              <span class="{{ label_class }}">{{ role }}</span>
-              <button v-on:click="openModal('{{ env.name }}RolesModal')" type="button" class="icon-link">set role</button>
             </div>
+          </div>
+          </edit-workspace-member>
+        </li>
 
         {% endfor %}
       </ul>
@@ -137,7 +144,6 @@
   </div>
 
   </form>
-</edit-workspace-member>