From a1cf4335cef491474f78ae720f45835ff81f747b Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Thu, 20 Sep 2018 09:45:49 -0400
Subject: [PATCH] Use Vue to get label class dynamically

---
 js/components/forms/edit_workspace_member.js | 6 +++++-
 templates/workspaces/members/edit.html       | 7 +------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/js/components/forms/edit_workspace_member.js b/js/components/forms/edit_workspace_member.js
index 718b28bf..be3ebc51 100644
--- a/js/components/forms/edit_workspace_member.js
+++ b/js/components/forms/edit_workspace_member.js
@@ -24,6 +24,7 @@ export default {
   data: function () {
     return {
       value: this.initialData,
+      label_class: this.initialData,
     }
   },
 
@@ -31,7 +32,10 @@ export default {
     change: function (e) {
       this.value = e.target.value
     },
-    readableName: function (role) {
+    displayName: function (role) {
+      this.label_class = role === "no_access" ?
+        "label" : "label label--success"
+
       return role.replace(/[_]/g, " ")
     },
     cancel: function (current_role, selected_role) {
diff --git a/templates/workspaces/members/edit.html b/templates/workspaces/members/edit.html
index 7060b8b3..78642519 100644
--- a/templates/workspaces/members/edit.html
+++ b/templates/workspaces/members/edit.html
@@ -65,11 +65,6 @@
         {% for env in project.environments %}
 
           {% set role = EnvironmentRole.get(member.user_id, env.id).role or 'no_access' %}
-          {% set label_class = 'label' %}
-          {% 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 }}'>
@@ -81,7 +76,7 @@
             <div class='project-list-item__environment__actions'>
               <div>{{ form.data["environment_role"] }}</div>
 
-              <span class="{{ label_class }}" v-html:on=readableName(value)></span>
+              <span v-bind:class="label_class" v-html:on=displayName(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'>