feat(settings): allow selecting multiple "favorite" currencies (#406)

src/i18n/locales/en.json

@@ -323,7 +323,8 @@
 		"ChangeLanguage": "Change language",
 		"CountryLabel": "Country",
 		"CurrencyLabel": "Currency",
-		"DefaultCurrency": "Default currency",
+		"FavoriteCurrencies": "Favorite currencies",
+		"CurrencyRequired": "At least one currency is required",
 		"LanguageLabel": "Languages",
 		"Save": "Save",
 		"Title": "Settings",

src/store.js

@@ -11,6 +11,7 @@ export const useAppStore = defineStore('app', {
       recent_locations: [],
       language: import.meta.env.VITE_DEFAULT_LOCALE, // 'en'
       country: import.meta.env.VITE_DEFAULT_COUNTRY,  // 'FR',
+      favorite_currencies: [import.meta.env.VITE_DEFAULT_CURRENCY], // ['EUR']
       proofs: [],
       proofTotal: null,
     },
@@ -32,6 +33,12 @@ export const useAppStore = defineStore('app', {
     },
     getUserProofTotal: (state) => {
       return state.user.proofTotal
+    },
+    getUserFavoriteCurrencies: (state) => {
+      return state.user.currencies
+    },
+    getUserLastCurrencyUsed: (state) => {
+      return state.user.last_currency_used
     }
   },
   actions: {
@@ -61,6 +68,12 @@ export const useAppStore = defineStore('app', {
     setCountry(country) {
       this.user.country = country
     },
+    setFavoriteCurrencies(currencies) {
+      this.user.currencies = currencies
+    },
+    setLastCurrencyUsed(currency) {
+      this.user.last_currency_used = currency
+    },
     setProofTotal(proofTotal) {
       this.user.proofTotal = proofTotal
     },

src/views/UserSettings.vue

@@ -1,7 +1,5 @@
 <template>
-  <h1 class="text-h5 mb-1">
-    {{ $t('UserSettings.Title') }}
-  </h1>
+  <h1 class="text-h5 mb-1">{{ $t('UserSettings.Title') }}</h1>
 
   <v-form @submit.prevent="updateSettings">
     <v-row>
@@ -45,11 +43,15 @@
         <v-card :title="$t('UserSettings.AddingPrices')" prepend-icon="mdi-tag-plus-outline">
           <v-divider></v-divider>
           <v-card-text>
-            <h3 class="mb-1">{{ $t('UserSettings.DefaultCurrency') }}</h3>
+            <h3 class="mb-1">{{ $t('UserSettings.FavoriteCurrencies') }}</h3>
             <v-autocomplete
-              v-model="userSettingsForm.currency"
+              v-model="userSettingsForm.selectedCurrencies"
               :label="$t('UserSettings.CurrencyLabel')"
               :items="currencyList"
+              :rules="[v => !!(v && v.length) || $t('UserSettings.CurrencyRequired')]"
+              chips
+              closable-chips
+              multiple
               hide-details="auto"
             ></v-autocomplete>
           </v-card-text>
@@ -72,14 +74,13 @@ import localeManager from '../i18n/localeManager.js'
 import languageData from '../i18n/data/languages.json'
 import countryData from '../i18n/data/countries.json'
 
-
 export default {
   data() {
     return {
       userSettingsForm: {
         selectedCountry: null, // see initUserSettingsForm
         selectedLanguage: null, // see initUserSettingsForm
-        currency: null,  // see initUserSettingsForm
+        selectedCurrencies: null, // see initUserSettingsForm
       },
       currencyList: [],
       languageList: [],
@@ -88,7 +89,7 @@ export default {
       countryList: countryData, // can be used to further filter the country list if needed
     }
   },
-  watch:{
+  watch: {
     'userSettingsForm.selectedLanguage': async function () {
       if (this.userSettingsForm.selectedLanguage !== null) {
         this.languageTranslationCompletion = await localeManager.calculateTranslationCompletion(this.userSettingsForm.selectedLanguage)
@@ -99,6 +100,7 @@ export default {
         const selectedCountry = this.countryList.find(country => country.code === newValue)
         // Update the language list to show the previously selected language first then the selected country languages and the rest of the languages
         let newLanguageList = this.languageList.slice()
+        let newCurrencyList = this.currencyList.slice()
         if (selectedCountry) {
           const currentLanguage = this.languageList.find(lang => lang.code === this.userSettingsForm.selectedLanguage)
           // get the languages of the selected country minus the selected language (if it exists in the country languages list)
@@ -112,16 +114,31 @@ export default {
             ...countryLanguagesList,
             ...newLanguageList.filter(language => !selectedCountry.languages.includes(language.code) && language.code !== currentLanguage.code &&
               !countryLanguagesList.includes(language))
-          ].filter(Boolean); // Remove any null or undefined values 
+          ].filter(Boolean) // Remove any null or undefined values 
           this.languageList = newLanguageList
+
+          // get the currencies of the selected country minus the already selected currencies (if they exists in the country currencies list)
+          const countryCurrenciesList = selectedCountry.currency.filter(currency => !this.userSettingsForm.selectedCurrencies.includes(currency))
+          // Update the currency list to show the current selected currencies first then the selected country currencies and the rest of the currencies
+          newCurrencyList = [
+            ...this.userSettingsForm.selectedCurrencies,
+            ...countryCurrenciesList,
+            ...newCurrencyList.filter(currency => !selectedCountry.currency.includes(currency) && !this.userSettingsForm.selectedCurrencies.includes(currency))
+          ].filter(Boolean) // Remove any null or undefined values
+          this.currencyList = newCurrencyList
         }
       }
     }
   },
   computed: {
     ...mapStores(useAppStore),
     formFilled() {
-      return Object.values(this.userSettingsForm).every(x => !!x)
+      return Object.values(this.userSettingsForm).every(x => {
+        if (x && Array.isArray(x)) {
+          return x.length > 0
+        }
+        return !!x
+      })
     },
   },
   async mounted() {
@@ -138,15 +155,15 @@ export default {
   },
   methods: {
     initUserSettingsForm() {
-      this.userSettingsForm.currency = this.appStore.user.last_currency_used
       this.userSettingsForm.selectedLanguage = this.languageList.find(lang => lang.code === localeManager.guessDefaultLocale()).code
       this.userSettingsForm.selectedCountry = countryData.find(country => country.code === this.appStore.user.country).code
+      this.userSettingsForm.selectedCurrencies = this.appStore.getUserFavoriteCurrencies
     },
     async updateSettings() {
       await localeManager.changeLanguage(this.userSettingsForm.selectedLanguage)
       this.appStore.setLanguage(this.userSettingsForm.selectedLanguage)
       this.appStore.setCountry(this.userSettingsForm.selectedCountry)
-      this.appStore.setLastCurrencyUsed(this.userSettingsForm.currency)
+      this.appStore.setFavoriteCurrencies(this.userSettingsForm.selectedCurrencies)
       this.$router.push({ path: '/', query: { settingsSuccess: 'true' } })
     }
   }