Enable to edit member role

Author: Hironsan

frontend/components/containers/members/MemberList.vue

@@ -20,25 +20,27 @@
         filled
       />
     </template>
-    <template v-slot:item.role="{ item }">
+    <template v-slot:item.rolename="{ item }">
       <v-edit-dialog
-        :return-value.sync="item.role"
+        :return-value.sync="item"
         large
-        persistent
-        @save="updateRole({ id: item.id, role: newRole })"
+        @save="updateRole({ id: item.id })"
       >
-        <div>{{ item.role }}</div>
+        <div>{{ item.rolename }}</div>
         <template v-slot:input>
           <div class="mt-4 title">
             Update Role
           </div>
         </template>
         <template v-slot:input>
           <v-select
-            :value="item.role"
+            :value="getRole(item)"
             :items="roles"
             :rules="roleRules"
+            item-text="name"
+            item-value="id"
             label="Role"
+            return-object
             @input="setNewRole"
           />
         </template>
@@ -48,16 +50,12 @@
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations } from 'vuex'
+import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
 import { roleRules } from '@/rules/index'
 
 export default {
   data() {
     return {
-      roles: [
-        'Admin',
-        'Member'
-      ],
       headers: [
         {
           text: 'Name',
@@ -67,7 +65,7 @@ export default {
         },
         {
           text: 'Role',
-          value: 'role'
+          value: 'rolename'
         }
       ],
       search: '',
@@ -77,29 +75,40 @@ export default {
   },
 
   computed: {
-    ...mapState('members', ['items', 'selected', 'loading'])
+    ...mapState('members', ['items', 'selected', 'loading']),
+    ...mapGetters('roles', ['roles'])
   },
 
   created() {
     this.getMemberList({
       projectId: this.$route.params.id
     })
+    this.getRoleList()
   },
 
   methods: {
     ...mapActions('members', ['getMemberList', 'updateMemberRole']),
     ...mapMutations('members', ['updateSelected']),
+    ...mapActions('roles', ['getRoleList']),
+
+    getRole(item) {
+      return {
+        id: item.role,
+        userId: item.user,
+        mappingId: item.id
+      }
+    },
 
     setNewRole(value) {
       this.newRole = value
     },
 
     updateRole(payload) {
-      const data = {
+      this.updateMemberRole({
         projectId: this.$route.params.id,
-        ...payload
-      }
-      this.updateMemberRole(data)
+        id: payload.id,
+        role: this.newRole.id
+      })
     }
   }
 }

frontend/services/member.service.js

@@ -6,26 +6,26 @@ class MemberService {
   }
 
   getMemberList(projectId) {
-    return this.request.get(`/projects/${projectId}/users`)
+    return this.request.get(`/projects/${projectId}/roles`)
   }
 
   addMember(projectId, userId, role) {
     const data = {
       id: userId,
       role
     }
-    return this.request.post(`/projects/${projectId}/users`, data)
+    return this.request.post(`/projects/${projectId}/roles`, data)
   }
 
   deleteMember(projectId, userId) {
-    return this.request.delete(`/projects/${projectId}/users/${userId}`)
+    return this.request.delete(`/projects/${projectId}/roles/${userId}`)
   }
 
-  updateMemberRole(projectId, userId, role) {
+  updateMemberRole(projectId, mappingId, role) {
     const data = {
       role
     }
-    return this.request.patch(`/projects/${projectId}/users/${userId}`, data)
+    return this.request.patch(`/projects/${projectId}/roles/${mappingId}`, data)
   }
 }
 

frontend/services/role.service.js

@@ -0,0 +1,13 @@
+import ApiService from '@/services/api.service'
+
+class RoleService {
+  constructor() {
+    this.request = ApiService
+  }
+
+  getRoleList() {
+    return this.request.get('/roles')
+  }
+}
+
+export default new RoleService()

frontend/store/members.js

@@ -61,7 +61,7 @@ export const actions = {
       })
   },
   updateMemberRole({ commit }, member) {
-    MemberService.updateMemberRole(member.projectId, member.id, member.role) // Todo: replace project id
+    MemberService.updateMemberRole(member.projectId, member.id, member.role)
       .then((response) => {
         commit('updateMember', response)
       })

frontend/store/roles.js

@@ -0,0 +1,37 @@
+import RoleService from '@/services/role.service'
+
+export const state = () => ({
+  items: [],
+  loading: false
+})
+
+export const getters = {
+  roles(state) {
+    return state.items
+  }
+}
+
+export const mutations = {
+  setRoleList(state, payload) {
+    state.items = payload
+  },
+  setLoading(state, payload) {
+    state.loading = payload
+  }
+}
+
+export const actions = {
+  getRoleList({ commit }) {
+    commit('setLoading', true)
+    return RoleService.getRoleList()
+      .then((response) => {
+        commit('setRoleList', response)
+      })
+      .catch((error) => {
+        alert(error)
+      })
+      .finally(() => {
+        commit('setLoading', false)
+      })
+  }
+}