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

components/contributor/detail.vue

@@ -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>

components/contributor/editButton.vue

@@ -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>

components/contributor/list/item.vue

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

components/contributors/list.vue

@@ -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 {
         return {}
       },
     },
+    isAdmin: {
+      type: Boolean,
+      default: false,
+    },
     studyId: {
       type: [String, Number],
       default: 0,
@@ -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`
         )
       )
     },

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

@@ -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>

pages/researchStudies/_studyId/contributors/index.vue

@@ -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 @@
 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() {

store/authorisation.js

@@ -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 = {
 };
 
 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
   },
 }

store/studies.js

@@ -5,6 +5,7 @@ export const state = () => ({
   studies: [],
   studyFields: [],
   activeStudy: {},
+  activeContributor: {},
   roles: [],
   join: {},
 })
@@ -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 = {
     },
   }),
 
+  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 = {
   },
   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 = {
   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
   }