Fixed inviting contributors to a study

pages/researchStudies/_studyId/contributors/invite.vue

@@ -1,9 +1,7 @@
 <template>
   <v-container>
     <v-row no-gutters>
-      <v-col
-        cols="12"
-      >
+      <v-col cols="12">
         <ui-rug-card-form :form="form">
           <ui-rug-card-title>
             {{ $t('page.studies.study.contributors.contributor.invite.title') }}
@@ -11,10 +9,18 @@
 
           <v-card-text class="flex-row mb-6">
             <v-text-field
-              id="formData.name"
-              v-model="formData.name"
-              :error-messages="form.getError('formData.name')"
-              :label="$t('form.contributorName')"
+              id="formData.first_name"
+              v-model="formData.first_name"
+              :error-messages="form.getError('formData.first_name')"
+              :label="$t('form.contributorFirstName')"
+              @blur="form.onBlur"
+            ></v-text-field>
+
+            <v-text-field
+              id="formData.last_name"
+              v-model="formData.last_name"
+              :error-messages="form.getError('formData.last_name')"
+              :label="$t('form.contributorLastName')"
               @blur="form.onBlur"
             ></v-text-field>
 
@@ -22,20 +28,19 @@
               id="formData.email"
               v-model="formData.email"
               :error-messages="form.getError('formData.email')"
-              :label="$t('form.contributorName')"
+              :label="$t('form.contributorEmail')"
               @blur="form.onBlur"
             ></v-text-field>
 
             <v-select
-              id="formData.field"
-              v-model="formData.field"
-              :error-messages="form.getError('formData.field')"
-              :items="studyFields"
+              id="formData.role"
+              v-model="formData.role"
+              :error-messages="form.getError('formData.role')"
+              :items="studyRoles"
               item-text="name"
               item-value="id"
-              :label="$t('form.studyField')"
+              :label="$t('form.contributorRole')"
             ></v-select>
-
           </v-card-text>
         </ui-rug-card-form>
       </v-col>
@@ -44,22 +49,23 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
-import Form from '@/lib/form';
+import { mapActions } from 'vuex'
+import Form from '@/lib/form'
 
 export default {
-  async asyncData({store}) {
-    await store.dispatch('studies/getStudyFields');
+  async asyncData({ store }) {
+    await store.dispatch('studies/getRoles')
     return {
-      studyFields: store.getters['studies/getStudyFields'],
-    };
+      studyRoles: store.getters['studies/getRoles'],
+    }
   },
-  data () {
+  data() {
     return {
       formData: {
-        name: undefined,
+        first_name: undefined,
+        last_name: undefined,
         email: undefined,
-        field: null,
+        role: null,
         studyId: this.$route.params.studyId,
       },
       form: new Form({
@@ -69,25 +75,32 @@ export default {
         schema: {
           type: 'object',
           properties: {
-            name: {
+            first_name: {
               type: 'string',
               minLength: 2,
-              maxLength: 200,
+              maxLength: 100,
+            },
+            last_name: {
+              type: 'string',
+              minLength: 2,
+              maxLength: 100,
             },
             email: {
               type: 'string',
-              format: 'email'
+              format: 'email',
+            },
+            role: {
+              type: 'integer',
             },
-            field: {
-              type: 'integer'
-            }
           },
-          required: ['name', 'email', 'field', ],
+          required: ['first_name', 'last_name', 'email', 'role'],
         },
         onResponse() {
-          const studyId = this.vm.$route.params.studyId;
-          this.vm.$router.push(this.localePath(`/researchStudies/${studyId}/contributors`))
-        }
+          const studyId = this.vm.$route.params.studyId
+          this.vm.$router.push(
+            this.localePath(`/researchStudies/${studyId}/contributors`)
+          )
+        },
       }),
     }
   },

store/studies.js

@@ -23,7 +23,7 @@ export const actions = {
   }),
   getStudy: actionCreator({
     name: 'getStudy',
-    method({studyId}) {
+    method({ studyId }) {
       return this.$axios.get(`/api/v1/studies/${studyId}/`)
     },
   }),
@@ -35,7 +35,7 @@ export const actions = {
   }),
   deleteStudy: actionCreator({
     name: 'deleteStudy',
-    method({studyId}) {
+    method({ studyId }) {
       return this.$axios.delete(`/api/v1/studies/${studyId}/`)
     },
   }),
@@ -75,7 +75,7 @@ export const actions = {
   inviteContributor: actionCreator({
     name: 'inviteContributor',
     method(invitee) {
-      return this.$axios.post(`/api/v1/studies/${invitee.studyId}/contributor/invite/`, invitee)
+      return this.$axios.post(`/api/v1/studies/${invitee.studyId}/contributors/invite/`, invitee)
     },
   }),
 }