Enable to add member

Author: Hironsan

frontend/components/containers/members/MemberAdditionButton.vue

@@ -7,6 +7,7 @@
       <member-addition-form
         :add-member="addMember"
         :items="items"
+        :roles="roles"
         @close="slotProps.close"
         @search-user="searchUser"
       />
@@ -15,7 +16,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import BaseModal from '@/components/molecules/BaseModal'
 import MemberAdditionForm from '@/components/organisms/members/MemberAdditionForm'
 import UserService from '@/services/user.service'
@@ -32,8 +33,17 @@ export default {
     }
   },
 
+  computed: {
+    ...mapGetters('roles', ['roles'])
+  },
+
+  created() {
+    this.getRoleList()
+  },
+
   methods: {
     ...mapActions('members', ['addMember']),
+    ...mapActions('roles', ['getRoleList']),
 
     searchUser(username) {
       UserService.getUserList(username)

frontend/components/organisms/members/MemberAdditionForm.vue

@@ -17,7 +17,6 @@
           :items="items"
           :loading="isLoading"
           :search-input.sync="username"
-          :rules="userNameRules"
           color="white"
           hide-no-data
           hide-selected
@@ -31,7 +30,10 @@
           v-model="role"
           :items="roles"
           :rules="roleRules"
+          item-text="name"
+          item-value="id"
           label="Role"
+          return-object
           prepend-icon="mdi-account-card-details-outline"
         />
       </v-form>
@@ -41,7 +43,7 @@
 
 <script>
 import BaseCard from '@/components/molecules/BaseCard'
-import { userNameRules, roleRules } from '@/rules/index'
+import { roleRules } from '@/rules/index'
 
 export default {
   components: {
@@ -57,6 +59,11 @@ export default {
       type: Array,
       default: () => {},
       required: true
+    },
+    roles: {
+      type: Array,
+      default: () => {},
+      required: true
     }
   },
   data() {
@@ -66,8 +73,6 @@ export default {
       role: null,
       isLoading: false,
       selectedUser: null,
-      roles: ['Admin', 'Member'],
-      userNameRules,
       roleRules
     }
   },
@@ -93,7 +98,7 @@ export default {
         this.addMember({
           userId: this.selectedUser.id,
           projectId: this.$route.params.id,
-          role: this.role
+          role: this.role.id
         })
         this.reset()
         this.cancel()

frontend/services/member.service.js

@@ -9,9 +9,9 @@ class MemberService {
     return this.request.get(`/projects/${projectId}/roles`)
   }
 
-  addMember(projectId, userId, role) {
+  addMember(projectId, user, role) {
     const data = {
-      id: userId,
+      user,
       role
     }
     return this.request.post(`/projects/${projectId}/roles`, data)