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

Improve user settings

Closes #515

See merge request framasoft/mobilizon!842
This commit is contained in:
Thomas Citharel 2021-03-04 15:33:28 +00:00
commit 03596f2db7
4 changed files with 48 additions and 55 deletions

View file

@ -854,7 +854,7 @@
"{count} km": "{count} km", "{count} km": "{count} km",
"City or region": "City or region", "City or region": "City or region",
"Select a radius": "Select a radius", "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", "Your upcoming events": "Your upcoming events",
"Last published events": "Last published events", "Last published events": "Last published events",
"On {instance}": "On {instance}", "On {instance}": "On {instance}",

View file

@ -933,7 +933,7 @@
"Your account has been validated": "Votre compte a été validé", "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 being validated": "Votre compte est en cours de validation",
"Your account is nearly ready, {username}": "Votre compte est presque prêt, {username}", "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 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": "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}.", "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}.",

View file

@ -71,7 +71,7 @@
{{ $t("Main languages you/your moderators speak") }} {{ $t("Main languages you/your moderators speak") }}
</small> </small>
<b-taginput <b-taginput
v-model="adminSettings.instanceLanguages" v-model="instanceLanguages"
:data="filteredLanguages" :data="filteredLanguages"
autocomplete autocomplete
:open-on-focus="true" :open-on-focus="true"
@ -361,24 +361,23 @@ export default class Settings extends Vue {
RouteName = RouteName; 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> { async updateSettings(): Promise<void> {
const variables = { ...this.adminSettings }; 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 { try {
await this.$apollo.mutate({ await this.$apollo.mutate({
mutation: SAVE_ADMIN_SETTINGS, 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) { if (this.languages) {
const lang = this.languages.find(({ name }) => name === language); const lang = this.languages.find(({ name }) => name === language);
if (lang) return lang.code; if (lang) return lang.code;
@ -416,7 +415,7 @@ export default class Settings extends Vue {
return undefined; return undefined;
} }
languageForCode(codeGiven: string): string | undefined { private languageForCode(codeGiven: string): string | undefined {
if (this.languages) { if (this.languages) {
const lang = this.languages.find(({ code }) => code === codeGiven); const lang = this.languages.find(({ code }) => code === codeGiven);
if (lang) return lang.name; if (lang) return lang.name;

View file

@ -86,7 +86,7 @@
<p> <p>
{{ {{
$t( $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> </p>
@ -94,7 +94,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import ngeohash from "ngeohash"; import ngeohash from "ngeohash";
import { saveLocaleData } from "@/utils/auth"; import { saveLocaleData } from "@/utils/auth";
import { TIMEZONES } from "../../graphql/config"; import { TIMEZONES } from "../../graphql/config";
@ -125,27 +125,41 @@ export default class Preferences extends Vue {
loggedUser!: IUser; loggedUser!: IUser;
selectedTimezone: string | undefined = undefined;
locale: string | null = null;
RouteName = RouteName; RouteName = RouteName;
langs: Record<string, string> = langs; langs: Record<string, string> = langs;
AddressSearchType = AddressSearchType; 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 { get address(): IAddress | null {
if ( if (
this.loggedUser?.settings?.location?.name && this.loggedUser?.settings?.location?.name &&