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() {