feat: add a country selector in the user settings #297
Conversation
There was a problem hiding this comment.
how did you generate this countries.json ? can you document it in a seperate README.md ? (in case we need to update it, new countries can appear ^^)
There was a problem hiding this comment.
The list comes from the same source as the one for languages:
https://github.com/annexare/Countries/blob/main/packages/countries/src/data/countries.ts
There was a problem hiding this comment.
if there is no changes compared to this library, why not add it directly to the repo ?
npm install countries-list
^^
There was a problem hiding this comment.
I removed some info that is not relevant from the countries list, like "Continent" and "Phone", and we will likely change the information in the future. The languages list through this library would also need a lot of workaround since locale codes are missing and it is not handling locales with country specificity like zh-TW
There was a problem hiding this comment.
ok we'll still need a script to explain/generate/update this country list somehow (like in #338 )
There was a problem hiding this comment.
| "native": "Australia", | ||
| "capital": "Canberra", | ||
| "currency": ["AUD"], | ||
| "languages": ["en"]}, |
There was a problem hiding this comment.
We should keep it like this here. If we later want to use the country/language relationship in our app, I would add some logic to:
- check if a locale with country code exists
- if not then get the locale without country code
I am going to use this logic to display the country languages first in the language dropdown in a future PR
| }, | ||
| async updateSettings() { | ||
| await localeManager.changeLanguage(this.userSettingsForm.selectedLanguage.code) | ||
| this.appStore.setLanguage(this.userSettingsForm.selectedLanguage.code) | ||
| this.appStore.setCountry(this.userSettingsForm.selectedCountry) |
There was a problem hiding this comment.
| this.appStore.setCountry(this.userSettingsForm.selectedCountry) | |
| this.appStore.setCountry(this.userSettingsForm.selectedCountry.code) |
src/views/UserSettings.vue
Outdated
| @@ -9,6 +9,15 @@ | |||
| <v-card :title="$t('UserSettings.ChangeLanguage')" prepend-icon="mdi-earth"> | |||
| <v-divider></v-divider> | |||
| <v-card-text> | |||
| <v-autocomplete | |||
| v-model="userSettingsForm.selectedCountry" | |||
| label="Country" | |||
There was a problem hiding this comment.
Thanks for seeing this. Corrected. Translation key is already in locale files (from a previous PR)
src/store.js
Outdated
| @@ -10,6 +10,8 @@ export const useAppStore = defineStore('app', { | |||
| last_currency_used: 'EUR', // TODO: init with user locale ? | |||
| recent_locations: [], | |||
| language: localStorage.getItem('user-locale') || import.meta.env.VITE_DEFAULT_LOCALE, // 'en' | |||
| country: null, // will be of type Object like | |||
There was a problem hiding this comment.
shouldn't we init with 'FR' (instead of having a || in UserSettings) ?
There was a problem hiding this comment.
Definitely, corrected. 'FR' is initialized in store
src/views/UserSettings.vue
Outdated
| v-model="userSettingsForm.selectedCountry" | ||
| label="Country" | ||
| :items="countryList" | ||
| item-title="name" |
There was a problem hiding this comment.
| item-title="name" | |
| item-title="native" |
like the languages ?
raphodn
changed the title
What
In the user settings, add a country selector
Why ?
Screenshot