Update some translations and icons

components/contributors/list.vue

@@ -63,16 +63,36 @@
         </span>
       </template>
 
+      <template #item.role="{ item }">
+        {{ roles.filter(role => role.id === item.role)[0].name }}
+      </template>
+
       <template #item.isOwner="{ item }">
-        {{ owner.id === item.researcher.id }}
+        <v-icon v-if="owner.id === item.researcher.id"
+          color="green"
+        >mdi-check-bold</v-icon>
+        <v-icon v-else
+          color="red"
+        >mdi-close-thick</v-icon>
       </template>
 
       <template #item.active="{ item }">
-        {{ item.active }}
+        <v-icon v-if="item.active"
+          color="green"
+        >mdi-check-bold</v-icon>
+        <v-icon v-else
+          color="red"
+        >mdi-close-thick</v-icon>
       </template>
 
-      <template #item.invitePending="{ item }">
-        {{ item.invite_pending }}
+      <template #item.invite_pending="{ item }">
+        <v-icon v-if="item.invite_pending"
+          color="yellow"
+        >mdi-check-bold</v-icon>
+        <v-icon v-else
+          color="green"
+        >mdi-close-thick</v-icon>
+
       </template>
 
       <template #item.actions="{ item }">
@@ -95,6 +115,12 @@ export default {
         return []
       },
     },
+    roles: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
     owner: {
       type: Object,
       default() {
@@ -199,4 +225,4 @@ export default {
     },
   },
 }
-</script>
+</script>

locales/en.js

@@ -95,7 +95,8 @@ export default {
             edit: {
               title: 'Edit contributor',
             },
-            deleted: 'The contributor is deleted'
+            deleted: 'The contributor is deleted',
+            updated: 'The contributor {contributor} has new role {role} for study {study}'
           },
         },
         overview : {

pages/researchStudies/_studyId/apps/windows-vdi/index.vue

@@ -179,7 +179,6 @@ export default {
           this.vm.$nuxt.refresh()
           this.vm.$toast.success(
             this.vm.$t('page.researchStudies.studyId.apps.index.created', {app_name : response.data.display_name})
-
           )
         },
       }),

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

@@ -31,7 +31,6 @@
           </td>
           <td class="pt-2">{{ contributor.researcher.email_address }}</td>
         </tr>
-
         <tr>
           <td class="pt-2">
             {{ $t('form.profile.university.label').toUpperCase() }}
@@ -40,11 +39,10 @@
             {{
               contributor.researcher.university
                 ? contributor.researcher.university.name
-                : ''
+                : $t('page.researchStudies.studyId.contributors.index.table.no_university')
             }}
           </td>
         </tr>
-
         <tr>
           <td>
             {{ $t('form.profile.faculty.label').toUpperCase() }}
@@ -53,18 +51,16 @@
             {{
               contributor.researcher.faculty
                 ? contributor.researcher.faculty.name
-                : ''
+                : $t('page.researchStudies.studyId.contributors.index.table.no_faculty')
             }}
           </td>
         </tr>
-
         <tr>
           <td>
             {{ $t('form.contributorInvite.role.label').toUpperCase() }}
           </td>
-          <td>{{ contributor.role }}</td>
+          <td>{{ roles.filter(role => role.id === contributor.role)[0].name }}</td>
         </tr>
-
         <tr>
           <td>
             {{ $t('form.contributorInvite.active.label').toUpperCase() }}
@@ -87,21 +83,18 @@ export default {
     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,
-    })
+     await Promise.all([
+      store.dispatch('studies/getRoles'),
+      store.dispatch('studies/getStudy', { studyId }),
+    ])
 
     return {
-      contributor: store.getters['studies/getActiveContributorForStudy'],
-      study: studyData,
-      admin: studyAdmin,
+      study: store.getters['studies/getActiveStudy'],
+      contributor: store.getters['studies/getContributorFromActiveStudy']({ contributorId }),
+      roles: store.getters['studies/getRoles'],
+      admin: store.getters['authorisation/isAdminOfStudy']({
+        study: store.getters['studies/getActiveStudy'],
+      }),
     }
   },
   data() {

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

@@ -35,11 +35,16 @@ import Form from '@/lib/form'
 
 export default {
   async asyncData({ store, route }) {
-    await store.dispatch('studies/getRoles')
+    const studyId = route.params.studyId
     const contributorId = route.params.contributorId
-    const contributor = store.getters['studies/getContributorFromActiveStudy']({
-      contributorId,
-    })
+
+    await Promise.all([
+      store.dispatch('studies/getRoles'),
+      store.dispatch('studies/getStudy', { studyId }),
+    ])
+
+    const contributor = store.getters['studies/getContributorFromActiveStudy']({ contributorId })
+
     return {
       contributor,
       roles: store.getters['studies/getRoles'],
@@ -51,6 +56,7 @@ export default {
     }
   },
   data() {
+    const $t = this.$t.bind(this)
     return {
       formData: {
         role: null,
@@ -69,6 +75,13 @@ export default {
           required: ['role'],
         },
         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
+            })
+          )
+
           const studyId = this.vm.$route.params.studyId
           this.vm.$router.push(
             this.vm.localePath(`/researchStudies/${studyId}/contributors`)

pages/researchStudies/_studyId/contributors/index.vue

@@ -8,6 +8,7 @@
       <div  style="width: 100%">
         <contributors-list
           :contributors="study.contributors"
+          :roles="roles"
           :owner="study.owner"
           :study-id="study.id"
           :is-admin="studyAdmin"
@@ -25,16 +26,16 @@
 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,
-    })
+
+    await Promise.all([
+      store.dispatch('studies/getRoles'),
+      store.dispatch('studies/getStudy', { studyId }),
+    ])
 
     return {
-      study,
-      studyAdmin,
+      study: store.getters['studies/getActiveStudy'],
+      studyAdmin: store.getters['authorisation/isAdminOfStudy']({ study: store.getters['studies/getActiveStudy'] }),
+      roles: store.getters['studies/getRoles'],
     }
   },
   head() {