Show actual language instead of language code in Users admin view

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Admin/Users.vue

@@ -78,7 +78,7 @@
           :centered="true"
           v-slot="props"
         >
-          {{ props.row.locale }}
+          {{ getLanguageNameForCode(props.row.locale) }}
         </b-table-column>
 
         <template #detail="props">
@@ -114,6 +114,9 @@ import { Component, Vue } from "vue-property-decorator";
 import { LIST_USERS } from "../../graphql/user";
 import RouteName from "../../router/name";
 import VueRouter from "vue-router";
+import { LANGUAGES_CODES } from "@/graphql/admin";
+import { IUser } from "@/types/current-user.model";
+import { Paginate } from "@/types/paginate";
 const { isNavigationFailure, NavigationFailureType } = VueRouter;
 
 const USERS_PER_PAGE = 10;
@@ -131,6 +134,17 @@ const USERS_PER_PAGE = 10;
         };
       },
     },
+    languages: {
+      query: LANGUAGES_CODES,
+      variables() {
+        return {
+          codes: this.languagesCodes,
+        };
+      },
+      skip() {
+        return this.languagesCodes.length < 1;
+      },
+    },
   },
   metaInfo() {
     return {
@@ -143,6 +157,9 @@ export default class Users extends Vue {
 
   RouteName = RouteName;
 
+  users!: Paginate<IUser>;
+  languages!: Array<{ code: string; name: string }>;
+
   get page(): number {
     return parseInt((this.$route.query.page as string) || "1", 10);
   }
@@ -159,6 +176,18 @@ export default class Users extends Vue {
     this.pushRouter({ email });
   }
 
+  get languagesCodes(): string[] {
+    return (this.users?.elements || []).map((user: IUser) => user.locale);
+  }
+
+  getLanguageNameForCode(code: string): string {
+    return (
+      (this.languages || []).find(({ code: languageCode }) => {
+        return languageCode === code;
+      })?.name || code
+    );
+  }
+
   async onPageChange(page: number): Promise<void> {
     this.page = page;
     await this.$apollo.queries.users.fetchMore({