From 5cb3f478ae4c8376ea042ceb67230a53eee1656b Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 16 Jun 2020 18:00:27 +0200
Subject: [PATCH] Allow to change language

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/graphql/user.ts                | 10 +++++
 js/src/i18n/en_US.json                |  3 +-
 js/src/i18n/fr_FR.json                |  3 +-
 js/src/i18n/langs.json                | 30 ++++++++++++++
 js/src/types/current-user.model.ts    |  2 +-
 js/src/views/Settings/Preferences.vue | 57 ++++++++++++++++++++++++---
 lib/graphql/resolvers/user.ex         |  9 +++++
 lib/graphql/schema/user.ex            |  5 +++
 8 files changed, 110 insertions(+), 9 deletions(-)
 create mode 100644 js/src/i18n/langs.json

diff --git a/js/src/graphql/user.ts b/js/src/graphql/user.ts
index 190ecb350..d4afba217 100644
--- a/js/src/graphql/user.ts
+++ b/js/src/graphql/user.ts
@@ -106,6 +106,7 @@ export const USER_SETTINGS_FRAGMENT = gql`
 export const USER_SETTINGS = gql`
   query UserSetting {
     loggedUser {
+      locale
       settings {
         ...UserSettingFragment
       }
@@ -189,3 +190,12 @@ export const GET_USER = gql`
     }
   }
 `;
+
+export const UPDATE_USER_LOCALE = gql`
+  mutation UpdateUserLocale($locale: String!) {
+    updateLocale(locale: $locale) {
+      id
+      locale
+    }
+  }
+`;
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 92271d7bd..fad695698 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -644,5 +644,6 @@
   "more than 1360 contributors": "more than 1360 contributors",
   "{moderator} has unsuspended profile {profile}": "{moderator} has unsuspended profile {profile}",
   "{moderator} has deleted user {user}": "{moderator} has deleted user {user}",
-  "Change timezone": "Change timezone"
+  "Change timezone": "Change timezone",
+  "Select a language": "Select a language"
 }
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index c93fec9eb..68bdd12d2 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -667,5 +667,6 @@
   "more than 1360 contributors": "plus de 1360 contributeur·ices",
   "{moderator} has unsuspended profile {profile}": "{moderator} a annulé la suspension de {profile}",
   "{moderator} has deleted user {user}": "{moderator} a supprimé l'utilisateur·ice {user}",
-  "Change timezone": "Changer de fuseau horaire"
+  "Change timezone": "Changer de fuseau horaire",
+  "Select a language": "Choisissez une langue"
 }
diff --git a/js/src/i18n/langs.json b/js/src/i18n/langs.json
new file mode 100644
index 000000000..d9916fb71
--- /dev/null
+++ b/js/src/i18n/langs.json
@@ -0,0 +1,30 @@
+{
+  "ar": "العربية",
+  "bg": "Български",
+  "be": "Беларуская мова",
+  "br": "Brezhoneg",
+  "ca": "Català",
+  "co": "Corsu",
+  "cs": "čeština",
+  "de": "Deutsch",
+  "en": "English",
+  "eo": "Esperanto",
+  "es": "Español",
+  "fi": "suomi",
+  "fr": "Français",
+  "gl": "Galego",
+  "hu": "Magyar",
+  "it": "Italiano",
+  "ja": "日本語",
+  "nl": "Dutch",
+  "oc": "Occitan",
+  "pl": "Polski",
+  "pt": "Português",
+  "pt_PT": "Português (Portugal)",
+  "ru": "Русский",
+  "sq": "Shqip",
+  "sv": "Svenska",
+  "tr": "Türkçe",
+  "vi": "Tiếng Việt",
+  "zh_Hant_TW": "繁體中文（台灣）"
+}
diff --git a/js/src/types/current-user.model.ts b/js/src/types/current-user.model.ts
index 327421746..5eb7a2034 100644
--- a/js/src/types/current-user.model.ts
+++ b/js/src/types/current-user.model.ts
@@ -17,12 +17,12 @@ export interface ICurrentUser {
   defaultActor: IPerson;
   drafts: IEvent[];
   settings: IUserSettings;
+  locale: string;
 }
 
 export interface IUser extends ICurrentUser {
   confirmedAt: Date;
   confirmationSendAt: Date;
-  locale: String;
   actors: IPerson[];
   disabled: boolean;
 }
diff --git a/js/src/views/Settings/Preferences.vue b/js/src/views/Settings/Preferences.vue
index f0efe1992..7f28d4e11 100644
--- a/js/src/views/Settings/Preferences.vue
+++ b/js/src/views/Settings/Preferences.vue
@@ -1,5 +1,16 @@
 <template>
   <div>
+    <b-field :label="$t('Language')">
+      <b-select
+        :loading="!config || !loggedUser"
+        v-model="$i18n.locale"
+        :placeholder="$t('Select a language')"
+      >
+        <option v-for="(language, lang) in languages" :value="lang" :key="lang">
+          {{ language }}
+        </option>
+      </b-select>
+    </b-field>
     <b-field :label="$t('Timezone')">
       <b-select
         :placeholder="$t('Select a timezone')"
@@ -17,19 +28,20 @@
         </optgroup>
       </b-select>
     </b-field>
-    <span>{{
+    <em>{{
       $t("Timezone detected as {timezone}.", {
         timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
       })
-    }}</span>
+    }}</em>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 import { TIMEZONES } from "../../graphql/config";
-import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
+import { USER_SETTINGS, SET_USER_SETTINGS, UPDATE_USER_LOCALE } from "../../graphql/user";
 import { IConfig } from "../../types/config.model";
 import { ICurrentUser } from "../../types/current-user.model";
+import langs from "../../i18n/langs.json";
 
 @Component({
   apollo: {
@@ -44,6 +56,8 @@ export default class Preferences extends Vue {
 
   selectedTimezone: string | null = null;
 
+  locale: string | null = null;
+
   @Watch("loggedUser")
   setSavedTimezone(loggedUser: ICurrentUser) {
     if (loggedUser && loggedUser.settings.timezone) {
@@ -51,6 +65,11 @@ export default class Preferences extends Vue {
     } else {
       this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     }
+    if (loggedUser && loggedUser.locale) {
+      this.locale = loggedUser.locale;
+    } else {
+      this.locale = this.$i18n.locale;
+    }
   }
 
   sanitize(timezone: string): string {
@@ -77,12 +96,38 @@ export default class Preferences extends Vue {
     }, {});
   }
 
+  get languages(): object {
+    return this.$i18n.availableLocales.reduce((acc: object, lang: string) => {
+      // @ts-ignore
+      if (langs[lang]) {
+        return {
+          ...acc,
+          // @ts-ignore
+          [lang]: langs[lang],
+        };
+      }
+      return acc;
+    }, {} as object);
+  }
+
   @Watch("selectedTimezone")
   async updateTimezone() {
-    await this.$apollo.mutate<{ setUserSetting: string }>({
-      mutation: SET_USER_SETTINGS,
+    if (this.selectedTimezone !== this.loggedUser.settings.timezone) {
+      await this.$apollo.mutate<{ setUserSetting: string }>({
+        mutation: SET_USER_SETTINGS,
+        variables: {
+          timezone: this.selectedTimezone,
+        },
+      });
+    }
+  }
+
+  @Watch("$i18n.locale")
+  async updateLocale() {
+    await this.$apollo.mutate({
+      mutation: UPDATE_USER_LOCALE,
       variables: {
-        timezone: this.selectedTimezone,
+        locale: this.$i18n.locale,
       },
     });
   }
diff --git a/lib/graphql/resolvers/user.ex b/lib/graphql/resolvers/user.ex
index 464807273..b3f7c78a5 100644
--- a/lib/graphql/resolvers/user.ex
+++ b/lib/graphql/resolvers/user.ex
@@ -477,4 +477,13 @@ defmodule Mobilizon.GraphQL.Resolvers.User do
         {:error, "Error while saving user setting"}
     end
   end
+
+  def update_locale(_parent, %{locale: locale}, %{
+        context: %{current_user: %User{id: logged_user_id, locale: current_locale} = user}
+      }) do
+    with true == current_locale != locale,
+         {:ok, %User{} = updated_user} <- Users.update_user(user, %{locale: locale}) do
+      {:ok, updated_user}
+    end
+  end
 end
diff --git a/lib/graphql/schema/user.ex b/lib/graphql/schema/user.ex
index 13dd980ad..a41317b7d 100644
--- a/lib/graphql/schema/user.ex
+++ b/lib/graphql/schema/user.ex
@@ -250,5 +250,10 @@ defmodule Mobilizon.GraphQL.Schema.UserType do
       arg(:notification_pending_participation, :notification_pending_participation_enum)
       resolve(&User.set_user_setting/3)
     end
+
+    field :update_locale, :user do
+      arg(:locale, :string)
+      resolve(&User.update_locale/3)
+    end
   end
 end