Browse Source

Change edit to detail actions. Only study admin can invite/edit contributors

master
Joshua Rubingh 5 months ago
parent
commit
6f4c044bb2
  1. 60
      components/contributor/detail.vue
  2. 29
      components/contributor/editButton.vue
  3. 2
      components/contributor/list/item.vue
  4. 12
      components/contributors/list.vue
  5. 150
      pages/researchStudies/_studyId/contributors/_contributorId/detail.vue
  6. 17
      pages/researchStudies/_studyId/contributors/index.vue
  7. 22
      store/authorisation.js
  8. 55
      store/studies.js

60
components/contributor/detail.vue

@ -0,0 +1,60 @@ @@ -0,0 +1,60 @@
<template>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img
:src="contributor.researcher.avatar || require('~/assets/avatar.png')"
></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title class="text-h6">
{{ contributor.researcher.display_name }}
</v-list-item-title>
<v-list-item-subtitle>{{
contributor.researcher.email_address
}}</v-list-item-subtitle>
<v-list-item-subtitle
>{{ $t('study.faculty') }}:
<span v-if="contributor.researcher.faculty">
{{ contributor.researcher.faculty.name }}
</span>
<span v-else>
{{ $t('contributors.table.no_faculty') }}
</span>
</v-list-item-subtitle>
<v-list-item-subtitle>
{{ $t('contributor.role') }}: {{ contributor.role
}}<span v-if="contributor.isOwner"
>, {{ $t('contributor.role.owner') }}</span
>
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
<script>
export default {
props: {
studyId: {
type: [String, Number],
default: '',
},
contributor: {
type: Object,
default: () => ({
id: '',
researcher: {
id: '',
first_name: '',
last_name: '',
email_address: '',
faculty: '',
},
role: '',
}),
},
},
}
</script>

29
components/contributor/editButton.vue

@ -0,0 +1,29 @@ @@ -0,0 +1,29 @@
<template>
<v-btn @click="goToEditContributor">
{{ $t('contributors.editButton.button') }}
</v-btn>
</template>
<script>
export default {
props: {
studyId: {
type: [Number, String],
default: 0,
},
contributorId: {
type: [Number, String],
default: 0,
},
},
methods: {
goToEditContributor() {
this.$router.push(
this.localePath(
`/researchStudies/${this.studyId}/contributors/${this.contributorId}/edit`
)
)
},
},
}
</script>

2
components/contributor/list/item.vue

@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
link
:to="
localePath(
`/researchStudies/${studyId}/contributors/${contributor.id}/edit`
`/researchStudies/${studyId}/contributors/${contributor.id}/detail`
)
"
>

12
components/contributors/list.vue

@ -64,7 +64,11 @@ @@ -64,7 +64,11 @@
</template>
<template #item.actions="{ item }">
<contributors-delete-button :contributor="item" :study-id="studyId" />
<contributors-delete-button
v-if="isAdmin"
:contributor="item"
:study-id="studyId"
/>
</template>
</v-data-table>
</v-card>
@ -85,6 +89,10 @@ export default { @@ -85,6 +89,10 @@ export default {
return {}
},
},
isAdmin: {
type: Boolean,
default: false,
},
studyId: {
type: [String, Number],
default: 0,
@ -138,7 +146,7 @@ export default { @@ -138,7 +146,7 @@ export default {
navigateToRow(row) {
this.$router.push(
this.localePath(
`/researchStudies/${this.studyId}/contributors/${row.id}/edit`
`/researchStudies/${this.studyId}/contributors/${row.id}/detail`
)
)
},

150
pages/researchStudies/_studyId/contributors/_contributorId/detail.vue

@ -0,0 +1,150 @@ @@ -0,0 +1,150 @@
<template>
<v-card>
<ui-rug-card-title>
{{ $t('page.studies.study.contributors.contributor.detail.title') }}
{{ contributor.researcher.display_name }}
</ui-rug-card-title>
<v-card-text class="d-flex flex-row mb-6">
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td>
{{
$t(
'page.studies.study.contributors.contributor.detail.study_name'
)
}}
</td>
<td>{{ study.name }}</td>
<td rowspan="7">
<v-avatar size="200">
<v-img
:src="
contributor.researcher.avatar ||
require('~/assets/avatar.png')
"
></v-img>
</v-avatar>
</td>
</tr>
<tr>
<td>
{{
$t(
'page.studies.study.contributors.contributor.detail.first_name'
)
}}
</td>
<td>{{ contributor.researcher.first_name }}</td>
</tr>
<tr>
<td>
{{
$t('page.studies.study.contributors.contributor.detail.last_name')
}}
</td>
<td>{{ contributor.researcher.last_name }}</td>
</tr>
<tr>
<td>
{{
$t(
'page.studies.study.contributors.contributor.detail.email_address'
)
}}
</td>
<td>{{ contributor.researcher.email_address }}</td>
</tr>
<tr>
<td>
{{
$t(
'page.studies.study.contributors.contributor.detail.university'
)
}}
</td>
<td>
{{
contributor.researcher.university
? contributor.researcher.university.name
: ''
}}
</td>
</tr>
<tr>
<td>
{{
$t('page.studies.study.contributors.contributor.detail.faculty')
}}
</td>
<td>
{{
contributor.researcher.faculty
? contributor.researcher.faculty.name
: ''
}}
</td>
</tr>
<tr>
<td>
{{ $t('page.studies.study.contributors.contributor.detail.role') }}
</td>
<td>{{ contributor.role }}</td>
</tr>
</table>
</v-card-text>
<contributor-edit-button
v-if="admin"
:contributor-id="contributor.id"
:study-id="study.id"
/>
</v-card>
</template>
<script>
export default {
async asyncData({ store, route }) {
const studyId = route.params.studyId
const contributorId = route.params.contributorId
// This does not work when you reload the browser.... It looses this information in the store..... why??
const studyData = store.getters['studies/getActiveStudy']
const studyAdmin = store.getters['authorisation/isAdminOfStudy']({
study: studyData,
})
await store.dispatch('studies/detailContributor', {
studyId,
contributorId,
})
return {
contributor: store.getters['studies/getActiveContributorForStudy'],
study: studyData,
admin: studyAdmin,
}
},
data() {
return {}
},
head() {
const $t = this.$t.bind(this)
return {
title: $t(
'page.researchStudies.studyId.contributors.contributorId.detail.title'
),
}
},
}
</script>

17
pages/researchStudies/_studyId/contributors/index.vue

@ -3,9 +3,10 @@ @@ -3,9 +3,10 @@
<contributors-list
:contributors="study.contributors"
:owner="study.owner"
:study-id="studyId"
:study-id="study.id"
:is-admin="studyAdmin"
/>
<contributors-invite-button :study-id="studyId" />
<contributors-invite-button v-if="studyAdmin" :study-id="study.id" />
</div>
</template>
@ -13,10 +14,18 @@ @@ -13,10 +14,18 @@
export default {
async asyncData({ store, route }) {
const studyId = route.params.studyId
await store.dispatch('studies/getStudy', { studyId })
// This does not work when you reload the browser.... It looses this information in the store..... why?? Now we need to get the data every time/call
const study = store.getters['studies/getActiveStudy']
const studyAdmin = store.getters['authorisation/isAdminOfStudy']({
study,
})
return {
study: store.getters['studies/getActiveStudy'],
studyId,
study,
studyAdmin,
}
},
head() {

22
store/authorisation.js

@ -31,18 +31,18 @@ export const getters = { @@ -31,18 +31,18 @@ export const getters = {
isUser(state) {
return getters.isAuthenticated(state)
},
isOwnerOfStudy: (state) => ({study}) => {
isOwnerOfStudy: (state) => ({ study }) => {
return getters.isUser(state) && study.owner.id === getters.getUser(state).researcher.id
},
isContributorOfStudy: (state) => ({study}) => {
return getters.hasRoleInStudy(state)({study, role: CONTRIBUTOR_ROLE});
isContributorOfStudy: (state) => ({ study }) => {
return getters.hasRoleInStudy(state)({ study, role: CONTRIBUTOR_ROLE });
},
isAdminOfStudy: (state) => ({study}) => {
return getters.hasRoleInStudy(state)({study, role: ADMIN_ROLE});
isAdminOfStudy: (state) => ({ study }) => {
return getters.hasRoleInStudy(state)({ study, role: ADMIN_ROLE });
},
hasRoleInStudy: (state) => ({study, role}) => {
hasRoleInStudy: (state) => ({ study, role }) => {
if (!getters.isUser(state)) return false;
const researcherId = getters.getUser(state).researcher.id;
const researcherId = getters.getUser(state).id;
return study.contributors.filter(contributor => {
return contributor.role === role
&& contributor.researcher.id === researcherId
@ -51,10 +51,10 @@ export const getters = { @@ -51,10 +51,10 @@ export const getters = {
};
export const mutations = {
setUser(state, payload) {
state.user = payload
setUser(state, payload) {
state.user = payload
},
setAuthenticated(state, payload) {
state.isAuthenticated = payload
setAuthenticated(state, payload) {
state.isAuthenticated = payload
},
}

55
store/studies.js

@ -5,6 +5,7 @@ export const state = () => ({ @@ -5,6 +5,7 @@ export const state = () => ({
studies: [],
studyFields: [],
activeStudy: {},
activeContributor: {},
roles: [],
join: {},
})
@ -40,28 +41,13 @@ export const actions = { @@ -40,28 +41,13 @@ export const actions = {
return this.$axios.delete(`/api/v1/studies/${studyId}/`)
},
}),
deleteContributorFromStudy: actionCreator({
commit: {
success: false,
},
name: 'deleteContributorFromStudy',
method({ studyId, contributorId }) {
return this.$axios.delete(`/api/v1/studies/${studyId}/contributors/${contributorId}/`);
},
}),
updateContributorRole: actionCreator({
name: 'updateContributor',
method(role) {
return this.$axios.put(`/api/v1/studies/${role.studyId}/contributors/${role.contributorId}/`, role)
}
}),
getRoles: actionCreator({
name: 'getRoles',
method() {
return this.$axios.get(`/api/v1/studies/roles/`)
}
}),
inviteContributor: actionCreator({
name: 'inviteContributor',
method(invitee) {
@ -76,6 +62,33 @@ export const actions = { @@ -76,6 +62,33 @@ export const actions = {
},
}),
detailContributor: actionCreator({
name: 'detailContributor',
method({ studyId, contributorId }) {
return this.$axios.get(`/api/v1/studies/${studyId}/contributors/${contributorId}`)
},
}),
updateContributorRole: actionCreator({
name: 'updateContributor',
method(role) {
return this.$axios.put(`/api/v1/studies/${role.studyId}/contributors/${role.contributorId}/`, role)
}
}),
deleteContributorFromStudy: actionCreator({
commit: {
success: false,
},
name: 'deleteContributorFromStudy',
method({ studyId, contributorId }) {
return this.$axios.delete(`/api/v1/studies/${studyId}/contributors/${contributorId}/`);
},
}),
}
export const mutations = {
@ -106,6 +119,10 @@ export const mutations = { @@ -106,6 +119,10 @@ export const mutations = {
},
inviteContributorSuccess(state, { result }) {
},
detailContributorSuccess(state, { result }) {
console.log('detailContributorSuccess result', result)
state.activeContributor = result;
},
joinContributorSuccess(state, { result }) {
console.log('Join result', result)
@ -133,10 +150,16 @@ export const getters = { @@ -133,10 +150,16 @@ export const getters = {
getRoles(state) {
return state.roles
},
// TODO: How does this work when you reload the page in the browser... Looks like the activeStudy is not set.??
getContributorFromActiveStudy: (state) => ({ contributorId }) => {
contributorId = parseInt(contributorId, 10)
return state.activeStudy.contributors.filter(contributor => contributor.id === contributorId)[0];
},
getActiveContributorForStudy(state) {
return state.activeContributor
},
getJoinInvitationMessage(state) {
return state.message
}

Loading…
Cancel
Save