From d81c479aa6804c5a5c28a8c3e13eaf98fb2c3673 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 7 Sep 2021 17:54:59 +0200
Subject: [PATCH] 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 | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/js/src/views/Admin/Users.vue b/js/src/views/Admin/Users.vue
index 2350bbe6e..4f7a7ca3b 100644
--- a/js/src/views/Admin/Users.vue
+++ b/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({