Update study join procedure

pages/researchStudies/_studyId/contributors/join.vue

@@ -1,62 +1,99 @@
 <template>
   <v-container>
-    <v-row no-gutters>
-      <v-col cols="12">
-        <ui-rug-card-title>
-          {{ $t('page.researchStudies.studyId.contributors.join.title') }}
-          {{ studyData.name }}
-        </ui-rug-card-title>
+    <ui-rug-card-form :form="form">
+      <ui-rug-card-title>
+        {{
+          $t(
+            'page.researchStudies.studyId.contributors.join.title'
+          )
+        }}
+      </ui-rug-card-title>
 
-        <v-card-text class="flex-row mb-6 white text-center">
-          <br />
-          <h1>
-            {{
-              $t(
-                'page.researchStudies.studyId.contributors.join.waiting_message'
-              )
-            }}
-          </h1>
-          <br />
+      <v-card-text class="flex-row mb-6 text-center">
+        <h1 class="mt-4 mb-4">{{ $t('page.researchStudies.studyId.contributors.join.waiting_message') }}</h1>
 
-          <v-progress-circular
-            v-if="joinState == -1"
-            indeterminate
-            size="48"
-            color="primary"
-          ></v-progress-circular>
+        <v-progress-circular
+          v-if="joinState == -1"
+          indeterminate
+          size="48"
+          color="primary"
+        ></v-progress-circular>
 
-          <v-alert v-if="joinState == 0" type="error">
-            {{ errorMessage }}
-          </v-alert>
+      </v-card-text>
+    </ui-rug-card-form>
 
-          <v-alert v-if="joinState == 1" type="success">
-            {{ $t('page.researchStudies.studyId.contributors.join.success') }}
-          </v-alert>
-        </v-card-text>
-      </v-col>
-    </v-row>
   </v-container>
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+import Form from '@/lib/form'
+
 export default {
-  async asyncData({ store, route }) {
+  async asyncData({ store, route ,error }) {
     const studyId = route.params.studyId
-    const jwtToken = route.query.key
+    const key = route.query.key
 
-    await store.dispatch('studies/getStudy', { studyId })
+    try {
+      await store.dispatch('studies/getJoinStudy', { studyId })
 
-    return {
-      studyId,
-      jwtToken,
-      studyData: store.getters['studies/getActiveStudy'],
+      return {
+        studyId,
+        key,
+        studyData: store.getters['studies/getActiveStudy'],
+        formData: {
+          studyId,
+          key
+        },
+      }
+
+    } catch(err) {
+      // Should this not be fixed in the axios plugin as an interceptor?
+      error({
+        statusCode: 404,
+        message: 'Page could not be found',
+      })
     }
   },
   data() {
     const $t = this.$t.bind(this)
+
     return {
       joinState: -1,
-      errorMessage: $t('page.researchStudies.studyId.contributors.join.failed'),
+      formData: {
+        studyId: this.studyId,
+        key: this.jwtToken
+      },
+      form: new Form({
+        form: 'formData',
+        vm: this,
+        action: this['studies/joinContributor'],
+        schema: {
+          type: 'object',
+          properties: {
+            studyId: {
+              type: 'string',
+            },
+            key: {
+              type: 'string',
+            },
+          },
+        },
+        onResponse() {
+          this.vm.$toast.success( $t('page.researchStudies.studyId.contributors.contributorId.updated', {
+            study: this.vm.$store.getters['studies/getActiveStudy'].name,
+            contributor : this.vm.contributor.researcher.display_name,
+            role: this.vm.$store.getters['studies/getRole'](this.vm.formData.role).name
+            })
+          )
+          this.joinState = 0
+
+          const studyId = this.vm.$route.params.studyId
+          this.vm.$router.push(
+            this.vm.localePath(`/researchStudies/${studyId}`)
+          )
+        },
+      }),
     }
   },
 
@@ -67,37 +104,11 @@ export default {
     }
   },
   mounted() {
-    this.check_invitation(this.$store)
+    // TODO: Should it not be possible to post the form with this.form.submit() ???
+    document.forms[0].submit()
   },
-
   methods: {
-    check_invitation() {
-      return new Promise((resolve, reject) => {
-        this.$store
-          .dispatch('studies/joinContributor', {
-            studyId: this.studyId,
-            key: this.jwtToken,
-          })
-          .then(
-            (response) => {
-              // TODO: Should we force a reload after success??
-              // const joinSuccess = this.$store.getters['studies/getJoinInvitationMessage']
-              this.joinState = 1
-            },
-            (error) => {
-              if (error.response.status !== 404) {
-                // Here we get the error(s) back from the API server in an array
-                this.errorMessage = error.response.data
-                  .map((message) => {
-                    return message.message
-                  })
-                  .join('<br />')
-              }
-              this.joinState = 0
-            }
-          )
-      })
-    },
+    ...mapActions(['studies/joinContributor']),
   },
 }
 </script>

plugins/axios.js

@@ -27,6 +27,7 @@ export default function (args) {
         const url = process.server ? req.url : location.pathname
         redirectToLogin(redirect, url);
       } else {
+        // How to handle 404 errors from the API here??
         return Promise.reject(error);
       }
     }

store/authorisation.js

@@ -42,6 +42,7 @@ export const getters = {
   },
   hasRoleInStudy: (state) => ({ study, role }) => {
     if (!getters.isUser(state)) return false;
+    if (!study.contributors) return false;
     const researcherId = getters.getUser(state).id;
     return study.contributors.filter(contributor => {
       return contributor.role === role

store/studies.js

@@ -29,6 +29,14 @@ export const actions = {
       return this.$axios.get(`/api/v1/studies/${studyId}/`)
     },
   }),
+
+  getJoinStudy: actionCreator({
+    name: 'getJoinStudy',
+    method({ studyId }) {
+      return this.$axios.get(`/api/v1/studies/${studyId}/contributors/join/`)
+    },
+  }),
+
   createStudy: actionCreator({
     name: 'createStudy',
     method(study) {
@@ -61,14 +69,14 @@ export const actions = {
   joinContributor: actionCreator({
     name: 'joinContributor',
     method(data) {
-      return this.$axios.get(`/api/v1/studies/${data.studyId}/contributors/join/${data.key}`)
+      return this.$axios.post(`/api/v1/studies/${data.studyId}/contributors/join/${data.key}/`, {})
     },
   }),
 
   detailContributor: actionCreator({
     name: 'detailContributor',
     method({ studyId, contributorId }) {
-      return this.$axios.get(`/api/v1/studies/${studyId}/contributors/${contributorId}`)
+      return this.$axios.get(`/api/v1/studies/${studyId}/contributors/${contributorId}/`)
     },
   }),
 
@@ -114,6 +122,10 @@ export const mutations = {
   getStudySuccess(state, { result }) {
     state.activeStudy = result
   },
+  getJoinStudySuccess(state, { result }) {
+    /* TODO: Is this the right way? Or should we have a own new value 'state.joinStudy' as this join study data is only the basic study information. */
+    state.activeStudy = result
+  },
   getRolesSuccess(state, { result }) {
     state.roles = result;
   },