Merge branch 'improve-user-settings' into 'master'

Improve user settings

Closes #515

See merge request framasoft/mobilizon!842

js/src/i18n/en_US.json

@@ -854,7 +854,7 @@
   "{count} km": "{count} km",
   "City or region": "City or region",
   "Select a radius": "Select a radius",
-  "Your city or region and the radius will only be used to suggest you events nearby.": "Your city or region and the radius will only be used to suggest you events nearby.",
+  "Your city or region and the radius will only be used to suggest you events nearby. The event radius will consider the administrative center of the area.": "Your city or region and the radius will only be used to suggest you events nearby. The event radius will consider the administrative center of the area.",
   "Your upcoming events": "Your upcoming events",
   "Last published events": "Last published events",
   "On {instance}": "On {instance}",

js/src/i18n/fr_FR.json

@@ -933,7 +933,7 @@
   "Your account has been validated": "Votre compte a été validé",
   "Your account is being validated": "Votre compte est en cours de validation",
   "Your account is nearly ready, {username}": "Votre compte est presque prêt, {username}",
-  "Your city or region and the radius will only be used to suggest you events nearby.": "Votre ville ou région et le rayon seront uniquement utilisé pour vous suggérer des événements proches.",
+  "Your city or region and the radius will only be used to suggest you events nearby. The event radius will consider the administrative center of the area.": "Votre ville ou région et le rayon seront uniquement utilisés pour vous suggérer des événements proches. Le rayon des événements proches sera calculé par rapport au centre administratif de la zone.",
   "Your current email is {email}. You use it to log in.": "Votre adresse e-mail actuelle est {email}. Vous l'utilisez pour vous connecter.",
   "Your email": "Votre adresse e-mail",
   "Your email address was automatically set based on your {provider} account.": "Votre adresse email a été définie automatiquement en se basant sur votre compte {provider}.",

js/src/views/Admin/Settings.vue

@@ -71,7 +71,7 @@
             {{ $t("Main languages you/your moderators speak") }}
           </small>
           <b-taginput
-            v-model="adminSettings.instanceLanguages"
+            v-model="instanceLanguages"
             :data="filteredLanguages"
             autocomplete
             :open-on-focus="true"
@@ -361,24 +361,23 @@ export default class Settings extends Vue {
 
   RouteName = RouteName;
 
-  @Watch("languages")
+  get instanceLanguages(): string[] {
-  setCorrectLanguagesNames(): void {
+    const languageCodes = this.adminSettings.instanceLanguages || [];
-    if (this.languages && this.adminSettings) {
+    return languageCodes
-      this.adminSettings.instanceLanguages = this.adminSettings.instanceLanguages
+      .map((code) => this.languageForCode(code))
-        .map((code) => this.languageForCode(code))
+      .filter((language) => language) as string[];
-        .filter((language) => language) as string[];
+  }
-    }
+
+  set instanceLanguages(instanceLanguages: string[]) {
+    this.adminSettings.instanceLanguages = instanceLanguages
+      .map((language) => {
+        return this.codeForLanguage(language);
+      })
+      .filter((code) => code !== undefined) as string[];
   }
 
   async updateSettings(): Promise<void> {
     const variables = { ...this.adminSettings };
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    variables.instanceLanguages = variables.instanceLanguages.map(
-      (language) => {
-        return this.codeForLanguage(language);
-      }
-    );
     try {
       await this.$apollo.mutate({
         mutation: SAVE_ADMIN_SETTINGS,
@@ -408,7 +407,7 @@ export default class Settings extends Vue {
       : [];
   }
 
-  codeForLanguage(language: string): string | undefined {
+  private codeForLanguage(language: string): string | undefined {
     if (this.languages) {
       const lang = this.languages.find(({ name }) => name === language);
       if (lang) return lang.code;
@@ -416,7 +415,7 @@ export default class Settings extends Vue {
     return undefined;
   }
 
-  languageForCode(codeGiven: string): string | undefined {
+  private languageForCode(codeGiven: string): string | undefined {
     if (this.languages) {
       const lang = this.languages.find(({ code }) => code === codeGiven);
       if (lang) return lang.name;

js/src/views/Settings/Preferences.vue

@@ -86,7 +86,7 @@
       <p>
         {{
           $t(
-            "Your city or region and the radius will only be used to suggest you events nearby."
+            "Your city or region and the radius will only be used to suggest you events nearby. The event radius will consider the administrative center of the area."
           )
         }}
       </p>
@@ -94,7 +94,7 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue } from "vue-property-decorator";
 import ngeohash from "ngeohash";
 import { saveLocaleData } from "@/utils/auth";
 import { TIMEZONES } from "../../graphql/config";
@@ -125,27 +125,41 @@ export default class Preferences extends Vue {
 
   loggedUser!: IUser;
 
-  selectedTimezone: string | undefined = undefined;
-
-  locale: string | null = null;
-
   RouteName = RouteName;
 
   langs: Record<string, string> = langs;
 
   AddressSearchType = AddressSearchType;
 
-  @Watch("loggedUser")
+  get selectedTimezone(): string {
-  setSavedTimezone(loggedUser: IUser): void {
+    if (this.loggedUser?.settings?.timezone) {
-    if (loggedUser?.settings?.timezone) {
+      return this.loggedUser.settings.timezone;
-      this.selectedTimezone = loggedUser.settings.timezone;
-    } else {
-      this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     }
-    if (loggedUser?.locale) {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
-      this.locale = loggedUser.locale;
+  }
-    } else {
+
-      this.locale = this.$i18n.locale;
+  set selectedTimezone(selectedTimezone: string) {
+    if (selectedTimezone !== this.loggedUser?.settings?.timezone) {
+      this.updateUserSettings({ timezone: selectedTimezone });
+    }
+  }
+
+  get locale(): string {
+    if (this.loggedUser?.locale) {
+      return this.loggedUser?.locale;
+    }
+    return this.$i18n.locale;
+  }
+
+  set locale(locale: string) {
+    if (locale) {
+      this.$apollo.mutate({
+        mutation: UPDATE_USER_LOCALE,
+        variables: {
+          locale,
+        },
+      });
+      saveLocaleData(locale);
     }
   }
 
@@ -186,26 +200,6 @@ export default class Preferences extends Vue {
     );
   }
 
-  @Watch("selectedTimezone")
-  async updateTimezone(): Promise<void> {
-    if (this.selectedTimezone !== this.loggedUser.settings.timezone) {
-      this.updateUserSettings({ timezone: this.selectedTimezone });
-    }
-  }
-
-  @Watch("locale")
-  async updateLocale(): Promise<void> {
-    if (this.locale) {
-      await this.$apollo.mutate({
-        mutation: UPDATE_USER_LOCALE,
-        variables: {
-          locale: this.locale,
-        },
-      });
-      saveLocaleData(this.locale);
-    }
-  }
-
   get address(): IAddress | null {
     if (
       this.loggedUser?.settings?.location?.name &&