EditProjectRoles component

js/components/forms/edit_environment_role.js

@@ -0,0 +1,58 @@
+import FormMixin from '../../mixins/form'
+import textinput from '../text_input'
+import Selector from '../selector'
+import Modal from '../../mixins/modal'
+import toggler from '../toggler'
+
+export default {
+  name: 'edit-environment-role',
+
+  mixins: [FormMixin, Modal],
+
+  components: {
+    toggler,
+    Modal,
+    Selector,
+    textinput
+  },
+
+  props: {
+    choices: Array,
+    initialData: String,
+    revoke: Boolean,
+  },
+
+  data: function () {
+    return {
+      new_role: this.initialData,
+    }
+  },
+
+  methods: {
+    change: function (e) {
+      e.preventDefault()
+      this.new_role = this.revoke ? "" : e.target.value
+    },
+    cancel: function () {
+      this.new_role = this.initialData
+    },
+  },
+
+  computed: {
+    displayName: function () {
+      for (var arr in this.choices) {
+        if (this.choices[arr][0] == this.new_role) {
+          return this.choices[arr][1].name
+        }
+      }
+      return this.new_role ? this.new_role : "no access"
+    },
+    label_class: function () {
+      return this.displayName === "no access" ?
+        "label" : "label label--success"
+    },
+  },
+  newRole: function () {
+    return this.revoke ? "" : this.new_role
+  }
+}

js/components/forms/edit_project_roles.js

@@ -0,0 +1,23 @@
+import FormMixin from '../../mixins/form'
+import Modal from '../../mixins/modal'
+import toggler from '../toggler'
+import EditEnvironmentRole from './edit_environment_role'
+
+export default {
+  name: 'edit-project-roles',
+
+  mixins: [FormMixin, Modal],
+
+  components: {
+    toggler,
+    EditEnvironmentRole,
+  },
+
+  props: {
+      name: String
+  },
+
+  data: function() {
+      return { revoke: false }
+  }
+}

js/index.js

@@ -14,6 +14,7 @@ import financial from './components/forms/financial'
 import toggler from './components/toggler'
 import NewProject from './components/forms/new_project'
 import EditEnvironmentRole from './components/forms/edit_environment_role'
+import EditProjectRoles from './components/forms/edit_project_roles'
 import Modal from './mixins/modal'
 import selector from './components/selector'
 import BudgetChart from './components/charts/budget_chart'
@@ -42,6 +43,7 @@ const app = new Vue({
     CcpoApproval,
     LocalDatetime,
     EditEnvironmentRole,
+    EditProjectRoles,
   },
 
   mounted: function() {

templates/workspaces/members/edit.html

@@ -52,6 +52,7 @@
 
   {% for project in projects %}
   {% set revoke_modal_name = project.name + 'RevokeModal' %}
+  <edit-project-roles inline-template v-bind:name="'{{ project.name }}'">
   <div is='toggler' default-visible class='block-list project-list-item'>
     <template slot-scope='props'>
       <header class='block-list__header'>
@@ -68,7 +69,7 @@
               Confirming will revoke access for {{ member.user.full_name }} to any environments associated with {{ project.name }}.
             </p>
             <div class='action-group'>
-              <a v-on:click="closeModal('{{ revoke_modal_name }}')" class='action-group__action usa-button'>Confirm</a>
+              <a v-on:click="revoke = true; closeModal('{{ revoke_modal_name }}')" class='action-group__action usa-button'>Confirm</a>
               <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ revoke_modal_name }}'); cancel();">Cancel</a>
             </div>
           </div>
@@ -80,7 +81,7 @@
           {% set role = EnvironmentRoles.get(member.user_id, env.id).role %}
 
         <li class='block-list__item'>
-          <edit-environment-role inline-template initial-data='{{ role }}' v-bind:choices='{{ choices | tojson }}'>
+          <edit-environment-role inline-template initial-data='{{ role }}' v-bind:choices='{{ choices | tojson }}' v-bind:revoke='revoke'>
           <div class='project-list-item__environment'>
             <span class='project-list-item__environment__link'>
               {{ env.name }}
@@ -147,6 +148,7 @@
       </ul>
     </template>
   </div>
+  </edit-project-roles>
   {% endfor %}
 
   <div class='action-group'>