Vue component for editing application member environment role

js/components/environment_role.js

@@ -0,0 +1,36 @@
+import optionsinput from './options_input'
+import { emitEvent } from '../lib/emitters'
+
+export default {
+  name: 'environment-role',
+
+  components: {
+    optionsinput,
+  },
+
+  props: {
+    initialRole: String,
+  },
+
+  data: function() {
+    return {
+      role: this.initialRole,
+      expanded: false,
+    }
+  },
+
+  methods: {
+    toggle: function() {
+      this.expanded = !this.expanded
+    },
+    radioChange: function(e) {
+      this.role = e.target.value
+      emitEvent('field-change', this, {
+        value: e.target.value,
+        valid: true,
+        name: this.name,
+        watch: true,
+      })
+    },
+  },
+}

js/components/toggler.js

@@ -2,6 +2,7 @@ import editEnvironmentRole from './forms/edit_environment_role'
 import FormMixin from '../mixins/form'
 import optionsinput from './options_input'
 import textinput from './text_input'
+import EnvironmentRole from './environment_role'
 
 export default {
   name: 'toggler',
@@ -20,6 +21,7 @@ export default {
     optionsinput,
     textinput,
     optionsinput,
+    EnvironmentRole,
     toggler: this,
   },
 

js/index.js

@@ -39,6 +39,7 @@ import KoReview from './components/forms/ko_review'
 import BaseForm from './components/forms/base_form'
 import DeleteConfirmation from './components/delete_confirmation'
 import NewEnvironment from './components/forms/new_environment'
+import EnvironmentRole from './components/environment_role'
 
 Vue.config.productionTip = false
 
@@ -80,6 +81,7 @@ const app = new Vue({
     DeleteConfirmation,
     nestedcheckboxinput,
     NewEnvironment,
+    EnvironmentRole,
   },
 
   mounted: function() {

templates/fragments/applications/edit_team.html

@@ -40,7 +40,7 @@
           <ul>
             {% for environment_form in environment_roles_form %}
               <li class="accordion-table__item__expanded">
-                <toggler inline-template>
+                <environment-role inline-template v-bind:initial-role="'{{ environment_form.role.data }}'">
                   <div>
                     <div class="row">
                       <div class="col col--grow">
@@ -48,28 +48,27 @@
                       </div>
                       <div class="accordion-table__item__expanded-role col col--grow">
                         <div class="right">
-                          <span>
-                            {{ environment_form.role.data }}
+                          <span v-html="role">
                           </span>
-                          <div class="icon-link" v-on:click="toggleSection('edit-env-role')">
+                          <div class="icon-link" v-on:click="toggle">
                             {{ Icon("edit") }}
                           </div>
                         </div>
                       </div>
                     </div>
-                    <div class="member-list__role-select" v-show="selectedSection === 'edit-env-role'">
+                    <div class="member-list__role-select" v-show="expanded">
                       {{ environment_form.role.label }}
-                      {{ environment_form.role(class="member-list____role-select__radio") }}
+                      {{ environment_form.role(**{"v-on:change": "radioChange", "class": "member-list____role-select__radio"}) }}
                       <button
                         class="usa-button"
                         type="button"
-                        v-on:click="toggleSection('edit-env-role')"
+                        v-on:click="toggle"
                         >
                         {{ "common.close" | translate }}
                       </button>
                     </div>
                   </div>
-                </toggler>
+                </environment-role>
               </li>
             {% endfor %}
           </ul>