Localizing member roles

Addressing Issue #605

frontend/components/containers/members/MemberAdditionButton.vue

@@ -7,7 +7,7 @@
       <member-addition-form
         :add-member="addMember"
         :items="items"
-        :roles="roles"
+        :roles="getTranslatedRoles(roles, $t('members.roles'))"
         @close="slotProps.close"
         @search-user="searchUser"
       />
@@ -20,6 +20,7 @@ import { mapActions, mapGetters } from 'vuex'
 import BaseModal from '@/components/molecules/BaseModal'
 import MemberAdditionForm from '@/components/organisms/members/MemberAdditionForm'
 import UserService from '@/services/user.service'
+import { translatedRoles } from '~/plugins/utils'
 
 export default {
   components: {
@@ -53,6 +54,9 @@ export default {
         .catch((error) => {
           alert(error)
         })
+    },
+    getTranslatedRoles(roles, mappings) {
+      return translatedRoles(roles, mappings)
     }
   }
 }

frontend/components/containers/members/MemberList.vue

@@ -9,7 +9,9 @@
     :no-data-text="$t('vuetify.noDataAvailable')"
     :footer-props="{
       'showFirstLastPage': true,
-      'items-per-page-text': $t('vuetify.itemsPerPageText')
+      'items-per-page-options': [5, 10, 15, $t('generic.all')],
+      'items-per-page-text': $t('vuetify.itemsPerPageText'),
+      'page-text': $t('dataset.pageText')
     }"
     item-key="id"
     show-select
@@ -31,7 +33,7 @@
         large
         @save="updateRole({ id: item.id })"
       >
-        <div>{{ item.rolename }}</div>
+        <div>{{ translateRole(item.rolename, $t('members.roles')) }}</div>
         <template v-slot:input>
           <div class="mt-4 title">
             {{ $t('members.updateRole') }}
@@ -57,6 +59,7 @@
 <script>
 import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
 import { roleRules } from '@/rules/index'
+import { translateRole } from '~/plugins/utils'
 
 export default {
   data() {
@@ -114,6 +117,10 @@ export default {
         id: payload.id,
         role: this.newRole.id
       })
+    },
+
+    translateRole(role, mappings) {
+      return translateRole(role, mappings)
     }
   }
 }

frontend/components/organisms/members/MemberAdditionForm.vue

@@ -30,7 +30,7 @@
           v-model="role"
           :items="roles"
           :rules="roleRules($t('rules.roleRules'))"
-          item-text="name"
+          item-text="translatedName"
           item-value="id"
           :label="$t('members.role')"
           return-object

frontend/i18n/en/projects/members.js

@@ -6,5 +6,11 @@ export default {
   userSearchAPIs: 'User Search APIs',
   userSearchPrompt: 'Start typing to search',
   removeMember: 'Remove Member',
-  removePrompt: 'Are you sure you want to remove these members?'
+  removePrompt: 'Are you sure you want to remove these members?',
+  roles: {
+    projectAdmin: 'Project Admin',
+    annotator: 'Annotator',
+    annotationApprover: 'Annotation Approver',
+    undefined: 'No Role Defined'
+  }
 }

frontend/i18n/fr/projects/members.js

@@ -6,5 +6,11 @@ export default {
   userSearchAPIs: 'Rechercher des utilisateurs (avec l\'IPA)',
   userSearchPrompt: 'Commencez à taper pour rechercher',
   removeMember: 'Supprimer un membre',
-  removePrompt: 'Êtes-vous sûr de vouloir supprimer ces membres ?'
+  removePrompt: 'Êtes-vous sûr de vouloir supprimer ces membres ?',
+  roles: {
+    projectAdmin: 'L\'administrateur du projet',
+    annotator: 'Étiqueteuse',
+    annotationApprover: 'Approbateur d\'étiquettes',
+    undefined: 'Aucun rôle défini'
+  }
 }

frontend/plugins/utils.js

@@ -6,3 +6,22 @@ export const idealColor = function(hexString) {
   const b = parseInt(hexString.substr(5, 2), 16)
   return ((((r * 299) + (g * 587) + (b * 114)) / 1000) < 128) ? '#ffffff' : '#000000'
 }
+
+export const translatedRoles = function(roles, mappings) {
+  roles.forEach((role) => {
+    role.translatedName = translateRole(role.name, mappings)
+  })
+  return roles
+}
+
+export const translateRole = function(role, mappings) {
+  if (role === 'project_admin') {
+    return mappings.projectAdmin
+  } else if (role === 'annotator') {
+    return mappings.annotator
+  } else if (role === 'annotation_approver') {
+    return mappings.annotationApprover
+  } else {
+    return mappings.undefined
+  }
+}