Browse Source

Update study join procedure

master
Joshua Rubingh 4 months ago
parent
commit
1cf33b246f
  1. 147
      pages/researchStudies/_studyId/contributors/join.vue
  2. 1
      plugins/axios.js
  3. 1
      store/authorisation.js
  4. 16
      store/studies.js

147
pages/researchStudies/_studyId/contributors/join.vue

@ -1,62 +1,99 @@ @@ -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 { @@ -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>

1
plugins/axios.js

@ -27,6 +27,7 @@ export default function (args) { @@ -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);
}
}

1
store/authorisation.js

@ -42,6 +42,7 @@ export const getters = { @@ -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

16
store/studies.js

@ -29,6 +29,14 @@ export const actions = { @@ -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 = { @@ -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 = { @@ -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;
},

Loading…
Cancel
Save